HTML+CSS+JavaScript复习笔记持更（一）—

前言

博主现在还是在校生，目前大三，突然想起HTML的很多基础都忘记的差不多了，于是买了几本基础书，创建这篇博文用于记录复习笔记，也希望我自己在整理的时候，能帮助大家加深一些基础知识的印象，本篇博文将会持续更新，如有遗漏不当之处，望大佬们指出，在此谢过。

HTML 概述

如果你看到了这篇博文，证明你至少是有html基础的，对于基础我就不做过多概述，简单的来说，HTML就是一个因特网上的编写网页的语言基础结构如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style></style>
</head>
<body></body>
</html>

html语言中有区分单标签和双标签，如：mate是单标签，title是双标签
html标签标示文件的开始，这之前不能编写任何内容
head是头部标签，这里面的放的是网页文件信息，如：标题、编码格式、URL等
meta是元信息标签，用户不可见，用于定义网页信息的名称、关键字等，它有两个属性，name和http-equiv，name用于描述网页，方便搜索引擎检索，后期优化seo会用到
title标签用于网页标题，style用于风格样式，这两个通常都写到head标签中
body标签是网页的主体部分

注释信息：

HTML中注释的方法是
CSS中注释方法是/*注释的文字*/
JavaScript中注释是//注释的文字或者/*注释的内容*/（前者单行注释，后者可多行注释）

HTML 标签

html文件的主体部分通常就是由各种标签组成，常用的标签举例：
a、h、div、p、span、img、br、link、table、tbody、tr、td、th、caption、sub、sup、input、button、audio、video

a标签用于超链接，使用语法<a href="www.baidu.com" target="_blank" >这里是内容</a>
href中是需要跳转到的地址（填#，可以不跳转）
target是跳转方式（常用的两种属性_blank在新标签中打开、_self在本标签页面打开）
内容可以是文字，可以是img图片
h标签用于标题，共6级，权重逐级递减，大小也逐级递减。由于部分浏览器将h1过大的展示，所以建议使用h2代替h1，也不建议写多个h1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style></style>
</head>
<body><a href=""></a><h1>这是h1标签</h1><h2>这是h2标签</h2>
</body>
</html>

实例：

div标签就是一个块级元素，可以包含大部分标签，在编写网页时，可以将网页按照实际需求进行分块，通过div封装不同模块，可以理解为一个盒子，配合class、id。可以对div进行样式，动画操作。
p标签被称为段落标签，用于包含段落，使用p标签将会新起一个段落，多个p标签之间会有行距
br标签是换行标签，如果不需要行距，但是需要换行的话，可以使用 ，
br在html中规范写法是 
在xhtml中规范写法是 
平时使用这两种都是兼容的，除非声明了文档格式为xhtml，必须使用 ，否则用哪个都可以，实例：

<div><p>这个就是一个段落</p><p>和上面一句话会有行距</p>你可以在这一句话<br />里面选择换行</div>

实例：

span标签被用来组合文档中的行内元素，与div类似的是，他们都是用来组合元素的，但是div是块级元素，span是行内元素，块级和行内的具体区别以后会说，组合后不会产生任何影响，除非使用class或者id对它的进行了操作
img用于在页面上添加图片，在里面还可以添加width、height等属性，如果需要保持图片原来的纵横比，可以只添加宽高其中一个属性，另一个会自动计算适配。
src是图片路径地址，可以是相对路径，可以是绝对路径
alt是错误提示信息，也就是如果图片加载不出来，会显示在页面上的提示信息

 <img src="./img/4.png" alt="">

link标签是链接标签，用于引入一个css样式文件，它必须写在head标签内，且可以重复出现<link rel="stylesheet" href="这里填css文件的地址">
table标签是表格标签，使用一个table就会在页面中创建一个表格
tbody标签是表格标签下的一个标签，与body类似，用于包含表格的主体内容，这个标签，我觉得可有可无
tr标签表示一行
td标签表示一个单元格（也被称作列）
th标签是类似于h标签，会加粗显示，常用于表格中的标题

<table><caption>这是表头标题，只能有一个</caption><th>这是加粗显示的，可用于标题等</th><tr><td><td></tr>
</table>

在td标签中，经常会出现需要跨行和跨列显示的单元格，这时采用下面的方法
跨行：<td rowspan="2">=</td> 如果需要跨多行，可以改数字
跨列：<td colspan="2">0</td> 跨多列同理

sup标签用于上标123456这是上标
sub标签用于下标123456这是下标
实例：
input标签用于收集用户信息，通过改变type的值，可以达到不同的要求，通常用语表单元素

<body><form><input type="text" name="text"><input type="button" name="anniu" value="这是按钮"><input type="checkbox" name="fuxuan">复选框1<input type="checkbox" name="fuxuan">复选框2<input type="password" name="pass"><input type="file"><br><input type="hidden"><input type="image" src="" alt="这是图"><input type="radio" name="danxuan">单选按钮<input type="reset" value="重置内容"><input type="submit" value="提交表单"></form>
</body>

audio 音频标签、 video 视频标签，这两个都是html5新增的语义化标签，用法与img标签类似，在src中添加文件地址即可

 <audio src=""></audio><video src=""></video>

HTML+CSS+JavaScript复习笔记持更（一）——标签篇相关推荐

HTML+CSS+JavaScript复习笔记持更（八）——CSS3常用属性之列表
列表属性之前已经介绍过了列表标签.主要有有序列表和无序列表,为了更好地控制这两种列表,CSS还提供了这两种列表的样式设置. list-style(简写属性,把所有列表的属性设置写到一个声明中) li ...
HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本
文本相关文本相关,包含了文字样式和文本换行等格式文字文字是一个网页最基础的部分,文字主要有以下几种属性: 字体文字大小文字颜色水平对齐方式段首缩进方式语法格式: <!DOCTYP ...
HTML+CSS+JavaScript复习笔记持更（九）——CSS3常用属性之盒模型
盒模型盒模型是CSS中最最重要的概念之一了,这个概念比较抽象,它规定了元素框处理元素内容.外边距.内边距.边框的方式. 内.外边距的属性内边距:padding 外边距:margin 边框:bord ...
HTML+CSS+JavaScript复习笔记持更（五）——CSS选择器
CSS选择器在一个页面中,必不可少的就是css样式,css样式全都写在style标签中,在使用css时,我们可以用的css选择器非常之多,所以css选择器的分类也很多,但是基本上可以统计分为两类:基 ...
HTML+CSS+JavaScript复习笔记持更（三）——表单篇
表单表单概述表单简介 form 标签输入标签文本框语法格式单选框和复选框语法格式按钮语法格式图像域和文件域语法格式文本域语法格式菜单/列表语法格式表单概述表单在网页中 ...
HTML+CSS+JavaScript复习笔记持更（二）——列表篇
列表无序列表标签写法属性有序列表标签写法属性列表嵌套定义列表的嵌套有序列表和无序列表的嵌套列表在html中至关重要,通常用于各种分类页面,以某宝为例,其主页面有大部分涉及到列表(绿 ...
HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位
定位定位主要是用来设定元素在页面上的位置的,其代码为:position 定位有三种定位方式: static(无特殊定位,按照dom排序) absolute(绝对定位,往前面找最近的,有定位属性的元素 ...
HTML+CSS+JavaScript复习笔记持更（七）——CSS3常用属性之背景
背景设置 HTML页面中的背景是通过background设置的. 语法格式: <!DOCTYPE html> <html lang="en"> <he ...
HTML+CSS+JavaScript复习笔记持更（四）——多媒体篇
HTML5的多媒体在html5中新增了两个多媒体标签 audio音频标签 video视频标签语法格式在语法格式上,音频与视频,大致相同 (无法正常播放) <video src=" ...

HTML+CSS+JavaScript复习笔记持更（一）——标签篇

前言

HTML 概述

HTML 标签

HTML+CSS+JavaScript复习笔记持更（一）——标签篇相关推荐

最新文章

热门文章