HTML标签
快捷键
- 标签名+Tab 自动生成完整标签,如:div+Tab=< div>< /div>
- 内容+Ctrl+/=< !–内容–>即生成注释
- ctrl+f 查找
HTML基础标签
标签关系
包含关系与并列关系
路径
- 相对路径
相对路径分类 | 符号 |
---|---|
同一级路径 | |
下一级路径 | / |
上一级路径 | …/ |
- 绝对路径:通常从盘符开始(反斜杠"“)或者是完整地网络地址(正斜杠”/")
标签
标签一般成对出现,如< html>< /html>,第一个是开始标签,第二个是结束标签,有’/';但也有单标签,如
< html>< /html>
< html>< /html> HTML标签 页面中最大的标签,即根标签
< head>< /head>
< head>< /head> 文档头部 注意在head标签中我们必须设置的标签是title
< title>< /title>
< title>< /title> 文档标题 让页面拥有一个属于自己的网页标题
< body>< /body>
< body>< /body> 文档主体 元素包含文档的所有内容,页面内容基本都是放body里面
< !DOCTYPE>
文档类型声明标签(不是HTML标签),告诉浏览器使用哪种HTML版本来显示网页
- < !DOCTYPE html>是采用HTML5的版本
- < !DOCTYPE>声明位于文档中最前面位置
lang
语言种类 用来定义当前文档使用的语言种类
- < html lang=“en”>为英语
- < html lang=“zh-CN”>为中文
charset
字符集 以便计算机识别存储各种文字
- < meta charset=“UTF-8”/> 放在head标签内,规定HTML文档使用"UTF-8"字符编码
- charset常用值:GB2312(简体中文),BIG5(繁体中文),GBK(包含简繁体中文),UTF-8(万国码)
标题标签 < h1>-< h6>
- 标签语义:作为标题使用,重要性逐级递减
- 使用方法:< h1> < /h1>
- 一个标题独占一行
段落标签 < p> < \p>
- 标签语义:可以把HTML文档分割为若干段落
换行标签
- 标签语义:强制换行
- < br />是单标签
- < br />只是简单换行,与段落不一样
文本格式化标签
- 标签语义:突出重要性
- 加粗 < strong> < /strong>或< b> < /b>
- 倾斜 < em> < /em>或< i> < /i>
- 删除线 < del> < /del>或< s> < /s>
- 下划线 < ins> < /ins>或< u> < /u>
< div>和< span>标签
- < div>和< span>没有语义,是盒子;div是division缩写,即分割,分区;span意味跨度、跨距
- < div>标签用来布局,但一行只能放一个div,大盒子
- < span>标签用来布局,一行上可以有多个< span>,小盒子
图像标签 < img/>
图像标签,< img>标签用于定义HTML页面中的图像
- 单标签
- 语法格式:< img src=“图像URL” />
- 图像标签可以有多个属性,但必须放到标签名后面
- 属性之间不分先后,但标签名与属性、属性与属性间以空格分开
- 属性采用键值对的格式,即属性=“属性值”
- 其他属性:
属性 | 作用 | 属性值 |
---|---|---|
src | 必须属性,用于指定图像文件的路径和图像名 | 图片路径 |
alt | 图片加载不出来的时候显示的文本 | 文本 |
title | 设置图像标签,鼠标放上去后的提示文本 | 文本 |
width | 设置图像高度 | 像素 |
height | 设置图像高度 | 像素 |
broder | 设置图像边框粗细 | 像素 |
超链接标签< a>< /a>
语法格式
< a href=“跳转目标” target=“目标窗口的弹开方式”>文本或图像< /a>
属性 | 作用 |
---|---|
href | 指定链接目标的url地址(必须属性) |
target | 指定链接页面的打开方式,其中_self为默认值,_blank为新窗口中打开方式 |
- 阻止链接跳转,语法如下:
<a herf='javascript:void(0);'></a>
//或者
<a herf='javascript:;'></a> //外单内双或者外双内单规则是使用于此的
链接分类
- 外部链接,如:< a href=“http://www.baidu.com”>百度< /a>
- 内部链接,网站内部页面间的相互链接,直接链接内部页面名称,如首页< /a>
- 空链接,当时无确定链接目标时,如:< a href=“#”>首页< /a>
- 下载链接,如果herf里面地址是一个文件或者压缩包,会下载这个文件
- 网页元素链接,网页中的文本,视频,图像,表格,音频等都可以添加超链接, 如:< a href=“http://baidu.com”>< img src=“ima.jpg”/>< /a>
- 锚点链接,点击时,快速定位到页面中的某个位置
- 在链接文本的herf属性中,设置属性值为#名字的形式,如< a herd=“#two”>第二集< /a>
- 找到目标位置标签,里面添加一个id属性=刚才的名字,如:< h2 id=“two”>第二集介绍< /h3>
注释标签 < !-- --> 可用快捷键Ctrl+/
注释标签里面的内容不执行不显示到页面中
特殊字符
特殊字符 | 描述 | 字符代码 |
---|---|---|
空格符 |  ; | |
< | 小于号 | &it; |
> | 大于号 | >; |
& | 和号 | &; |
¥ | 人民币 | ¥; |
版权 | ©; | |
注册商标 | ®; | |
。 | 摄氏度 | °; |
正负号 | ±; | |
乘号 | ×; | |
除号 | ÷; | |
平方2(上标2) | ²; | |
立方3(上标3) | ³; |
表格标签
表格用来显示数据
基本语法
<table>
<tr>
<td>单元格内容</td>
...
</tr>
...
</table>
- < table>< /table> 用于定义表格的标签
- < tr>< /tr>用于定义表格中的行,必须嵌套在< table>< /table>中
- < td>< /td>用于定义表格中的单元格,必须嵌套在< table>< /table>中
- < th>< /th>表头单元格,里面的文字加粗居中
表格属性
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围单元的对齐方式 |
border | 1或"" | 规定表格单元是否有边框,默认为’',即无表框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认像素1 |
cellspacing | 像素值 | 规定单元格之间的空白,默认像素2 |
width | 像素值或百分比 | 规定表格宽度 |
heigth | 像素值或百分比 | 规定表格高度 |
表格结构标签
- < thead>< /thead>用于定义表格头部< thead>内部必须拥有< tr>标签
- < tbody>< /tbody>用于定义表格主体
合并单元格
- 确定是跨行合并(rowspan)还是跨列合并(colspan)
- 找到目标单元格(跨行为最上、跨列为最左),写上合并方式=合并的单元格数量, 如:< td colspan=“2”>< /td>
- 删除多余单元格
列表标签
列表用来布局
无序列表< ul>< /ul>
- 基本语法格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
-
- 之间相当于一个容器,可以容纳所有元素
有序列表
- 基本语法格式:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
- < ol>< /ol>中只能嵌套< li>< /li>
- < li>< /li>之间相当于一个容器,可以容纳所有元素
自定义列表< dl>< /dl>
- 基本语法格式:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
<dd>名词2解释3</dd>
...
</dl>
- < dl>< /dl>里面只能包含< dt>和< dd>
- < dt>< dd>个数无限制
表单标签
表单用来收集信息
表单由表单域、表单控件和提示信息三部分组成
表单域< form>< /form>
- < form>标签用于定义表单域,< form>会把它范围内的表单元素信息提交给服务器
- 基本语法格式:
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
- 常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为post/get |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
表单控件(表单元素)
输入表单元素
- 基本语法格式:
<input type="属性值" name="名称" value="元素值" />
-
为单标签
-
input的属性:
属性 | 属性值 | 描述 |
---|---|---|
type | botton,checkbox,file,hidden,image,password,radio,reset,submit,text | 用于指定不同的控件类型 |
name | 由用户自定义 | 定义input元素名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
id | 用户自定义 | 可让表单元素与标签绑定 |
-
name和value是每个表单元素都有的属性值,主要给后台人员使用
-
name表单元素的名字,要求单选按钮和复选框都有相同的name值
-
checked属性主要针对单选和复选按钮
-
type属性设置不同的属性值用来指定不同的控件类型:
type的属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过JavaScrip启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和"浏览"按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据输入到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符 |
- < label>标签
- < label>标签用于绑定一个表单元素,当点击< label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,以增加用户体验
- 基本语法格式:
<label for="sex"> 男 </label>
<input type="radio" name="sex" id="sex" />
下拉表单元素< select>< /select>
- 基本语法格式:
<select>
<option>选项1</option>
<option selected="selected">选项2</option>
<option>选项3</option>
...
</select>
- < select>中至少包含一对< option>
- 在< option>中定义selected="selected"时,当前项为默认选项
文本域元素< textarea>< /textarea>
- 基本语法格式:
<textarea cols="50" rows="5">
文本内容
</textarea>
- cols=“每行中的字符数”,rows=“显示的行数”
HTML5提高
HTML5新增的语义标签
- < header>: 头部标签
- < nav>: 导航标签
- < artical>: 内容标签
- < section>: 定义文档某个区域
- < aside>: 侧边栏标签
- < footer>: 尾部标签
注意:
- 这种语义化标签主要针对搜索引擎
- 在IE9中,需要把这些元素转换为块级元素
- 移动端可以随意使用这些新标签不用担心兼容问题
新增多媒体标签
视频:
- 当前标签元素支持三种视频格式:Mp4,Ogg,Webm,尽量使用mp4格式(大多数浏览器支持)
- 语法:
<video src="文件地址" controls="controls"></video>
- 如果还要考虑到兼容性的问题,可使用以下代码:
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持<video>标签播放视频
</video>
- 常用属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放(谷歌需要添加muted来解决自动播放的问题) |
controls | controls | 向用户显示播放控件 |
width | px | 设置播放器宽度 |
height | px | 设置播放器高度 |
loop | loop | 播放完是否继续播放该视频,循环播放 |
preload | auto(预先加载视频) | |
none(不预加载视频) | 规定是否预加载视频(如果有了autoplay 就忽略该属性) | |
src | url | 视频url地址 |
poster | imgurl | 加载等待的画面图片 |
muted | muted | 静音播放 |
音频:
- 当前< audio>支持三种音频格式:Mp3,Wav,Ogg,尽可能使用Mp3
- 语法:
<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的浏览器暂不支持<audio>标签
</audio>
- 常见属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 音频在就绪后马上播放 |
controls | controls | 向用户显示控件,比如播放按钮 |
loop | loop | 每当音频结束时重新开始播放 |
src | url | 要播放的音频URL |
- 谷歌把视频和音频的自动播放禁止了
- 注意:我们可以给视频标签添加muted属性来静音播放视频,音频不可以(JavaScrip可以解决)
新增input类型
属性值 | 说明 |
---|---|
type=“email” | 限制用户输入必须为Email类型 |
type=“url” | 限制用户输入必须为URL类型 |
type=“date” | 限制用户输入必须为日期类型 |
type=“time” | 限制用户输入必须为时间类型 |
type=“maonth” | 限制用户输入必须为月类型 |
type=“week” | 限制用户输入必须为周类型 |
type=“number” | 限制用户输入必须为数字类型 |
type=“tel” | 手机号码 |
type=“search” | 搜索框 |
type=“color” | 生成一个颜色选择表单 |
新增表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off/on | 当用户在字段开始键入时,浏览器基于之前键入过得值,应该显示出在字段中填写的选项 |
默认已打开,如autocomplete=“on”,关闭autocomplete="off"需要放在表单内,同时加上name属性,同时成功提交 | ||
multiple | multiple | 可以多选文件提交 |
- 可以通过以下设置方式修改placeholder里面的字体颜色:
input::placeholder {
color:pink;
}