HTML5
https://www.cnblogs.com/yanjieli/p/9788063.html
一、DTD文档声明：<!DOCTYPE html>....<meta charset=“UTF-8”>
前者告诉浏览器使用的是什么版本的HTML 后者告诉浏览器所使用的编码规则
UTF-8包含全世界所有国家需要用到的字符 GBK包含全部中文字符
二、基本格式：<html><head><meta charset=“UTF-8”><title>网页名</title></head><body><h1>..</h1></body></html>
<html>..</html>定义整个网页内容，告知浏览器这是一个html文档
<head>..</head>所有头部元素的容器，元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。可以有（style，base，link，meta，scrip，noscript）
<body>..<body>表示 HTML 网页的主体部分，该标签内的内容使用户可以看到的
<title>..</title>内容会显示在浏览器的标题或状态栏中
<h1>..</h1>表示网页的一级标题，共六级，最多<h6>
<p>..</p>表示一个段落
<hr>表示加一条分割线
<br>换行
三、<a>标签：定义超链接 用于控制页面与页面之间的跳转，普通超链接：<a href="http://www.baidu.com">百度一下</a>
3.1 属性：target属性，用于控制是在本页跳转还是新建页面跳转（默认是_self）
_self：在当前页面跳转，不会新建页面 _blank：跳转到新的页面，会新建页面
例：<a href="http://www.baidu.com" target=“_self”>百度一下</a>
<a href=" http://www.baidu.com" target=“_blank”>百度一下</a>
3.2 href属性： 指定UML地址，确定跳转的地方，可以是本地地址或网络地址
3.3 title属性：鼠标悬停时显示的提示文本
例：<a href="http://www.baidu.com title=“跳转到百度”">百度一下</a>
3.4图片超链接：<a href="http://www.baidu.com ><img src=“1.jpg></a>
3.5 <base>标签：专门用来指定超链接如何打开 <base target=“_self”> 所有超链接都在当页打开，注：base标签必须写在<head>标签里面，如果既在base中指定了target又在a标签里指定了target，会按照a标签的指定执行
3.6假链接：点击之后不会出现跳转
意义：用于开发前期，其他页面还没开发出来，用假链接代替
格式：1.# <a src="#">1</a> 2.javascript：<a src="javascript：">1</a>
区别：# 会自动回到网页顶部 javascript：不会
3.7锚点：通过a标签跳转到指定的位置
格式：<a href=“#center”>跳转到中部</a>
<h2 id=“center”>中部</h2>
注意：1. 通过a标签跳转是没有过渡动画的，直接完成跳转
2. 跳转到指定地方，需要给那个目标一个id 如（<h1 id=“123”>1</h1>）
3. 跳转到其他页面的具体位置，<a href=“index.html#123”>页面</a>
四、img标签：显示一张图片
4.1格式：<img src=“”> 引号之间填图片的地址
4.2属性：width，高度 <img src=“image/2.jpg” width=“300”>
height，宽度 <img src=“image/2.jpg” height=“300”>
注:最好只设一个，另一个会自动变换
title，当鼠标停在图片上时显示的内容 alt，图片找不到时显示的内容
例：<img src=“image/2.jpg” width=“300”title=“这是一个苹果手机”>
<img src=“image/2.jpg” width=“300”alt=“对不起，该图片无法显示”>
4.3路径问题：1）同级 所显示的图片和.html文件在同一个文件夹里面 src=“1.jpg”
2）下级 所显示的图片所在的文件夹和.html文件在同一个文件夹里面src=“image/1.jpg”
3）上级 所显示的图片所在文件夹和.html文件所在文件夹在同一个文件夹里面 src=“../1.jpg”
4）绝对路径赋值 src=“C：/user/tj/Desktop/html/1.jpg”找到所显示的图片所在路径
注：1.路径中尽量不要出现中文，可能会出现问题。2.如果是用相对路径来指 点图片，不能跨盘符。
五、<br>标签：起到换行作用
注：对个<br>标签可以连续使用，用几个就换几行，它的语义是不另起一个段落换行
一般可以用<p>标签代替
六、列表标签：给一堆数据添加列表语义，告诉浏览器这一堆数据是一个整体（一般用无序列表）
6.1无序列表 格式：<ul><li>需要显示的条目内容</li></ul>
注意：1. 一般情况下<ul>和<li>标签是同时出现的，不会单独出现一个
2. <ul>标签中不推荐包含其他标签，但<li>标签中可加其他标签丰富内容
无序列表应用场景：新闻列表 商品列表 导航条
6.2有序列表 格式：<ol><li>需要显示的条目内容</li></ol> 用法与无序基本一样
6.3定义列表 格式：<dl><dt>..</dt><dd>..</dd></dt>
注：1.dt是定义列表中的标题 dd是定义标题中描述的内容
2.dl和dt/dd是一个整体，所以一般不会单独出现
3.一个dt可以有多个dd也可以没有dd，推荐一个dt对应一个dd
4.当需要丰富界面时，可以在dt和dd标签中继续添加其他标签
七、表格标签：给一堆数据添加表格语义
7.1 格式：<table><tr><td>需要显示的内容</td></tr></table>
注意：table表示整个表格 tr表示整个表格中的一行数据
td表示整个表格中的一行的一个单元格
table/tr/td一般一起出现或都不出现
7.2 属性
1. 边框属性 border 默认情况下为0，所以看不到边框 <table border=“1”>
2. 宽度高度属性 width/height <table width=“100”>
3. 表格默认是内容的尺寸，也可给table设置width/height属性来改变宽高
4. 如果给td标签设置width/height属性，可以改变当前单元格的宽度和高度， 不会影响整个表格的宽度和高度
7.3 水平/垂直对齐属性 align /valign
1. 给table标签设置align属性可以控制表格在水平方向的对齐
2. tr标签设置align属性可以控制当前行中所有单元格中的内容在水平方向的对齐 3. 给td标签设置align属性可以控制当前单元格中的内容在垂直方向的对齐
4. 注意：如果在td标签设置了align属性，在tr标签中也设置了align属性,那么 单元格会按照td标签中的设置执行
7.4 外边距和内边距属性 cellspacing cellpadding
7.5细线表格制作：1.给table标签设置 bgcolor <table bgcolor=“black”>
2.给tr标签设置 bgcolor <tr bgcolor=“white”>
3.给table标签设置 cellspacing =“1”
7.6 caption标签：标题写在table标签中，标题就会自动相对于表格的宽度居中
Caption标签一定要紧挨着table标签后面，否则无效
7.7 标题单元格标签：th标签 当前列的标题存储在该标签中就会自动居中+加粗文字
注意：这些都只做了解，在企业开发中，所有控制样式的都是css
7.8 表格的结构 1.表格标题 2.表格的表头信息 3.表格的主体信息 4.表格的页尾信息
<table>
<caption>表格标题</caption>
<thead><tr><th>每一列的标题</th></tr></thead>
<tbody><tr><td>数据</td></tr></tbody>
<tfoot><tr><td>数据</td></tr></tfoot>
</table>
1. caption：指定表格的标题 2. thead：指定表格的表头信息
3. tbody：指定表格的主体信息 4. tfoot：指定表格的附加信息
5. 注意：如果没有编写tbody，系统会自动 添加tbody，如果指定了thead 和 tfoot，那么修改整个表格的高度时，thead和tfoot有自己的默认高度，不会随表格 的高度变化而变化
7.9 单元格合并
1.水平方向上的合并：<td colspan=“2”></td>
注：需要在当前的<tr>中删除一个td，合并几个删几个
2.垂直方向上的合并：<td rowspan=“2”></td>
注：需要在后面的<tr>中删除一个td，合并几个删几个
八、表单元素：专门用来收集用户信息
8.1 注意：①：什么是元素：在HTML中，标签/元素/标记都是指HTML中的标签
②：什么是表单元素：所有的表单元素标签都有特殊的外观和默认的功能
③：格式：<form><表单元素></form>
④：常见的表单元素：input标签 其中有一个type属性
⑤：表单元素一定要写在表单中
8.2 明文、暗文输入框，单选框、多选框
1. 明文输入框：账号：<input type=“text”>
2. 暗文输入框：密码：<input type=“password”>
3. 单选框：性别：<input type=“radio” name=“xx” checked>男
<input type=“radio” name=“xx” >女
<input type=“radio” name=“xx” >保密
4. 注意：radio表示单选，name=“xx”表示只能选择一个，checked 表示默 认选择，单选框中所有的项目的name可以随便设置但都必须设置成一样的
5. 多选框：爱好：<input type=“checkbox”>篮球
<input type=“checkbox”>足球
<input type=“checkbox” checked=“checked”>棒球
注：checkbox 表示多选，在多选框中所有项目的name都必须一致
8.3 action元素
1. 格式：<form action=“http//:www.baidu.com”></form>
2. action表示表单里的内容提交到哪个位置
8.4 按钮
1. 格式
普通按钮<input type=“button”value="">
图片按钮<input type=“image”src=“1.jpg”οnclick=“alert（‘dsy’）”>
重置按钮<input type=“reset”value=“清空”οnclick=“alert（‘dsy’）”> 提交按钮<input type=“submit”value=“提交”οnclick=“alert（‘dsy’）”> 隐藏域 <input type=“hidden”name=“cc”value=“IT”>
2. 注意
1. 普通按钮，可以配合js完成一些操作
2. 图片按钮，可以配合js完成一些操作
3. 重置按钮，可以清空表单中的数据， 可以通过value属性修改按钮名
4. 提交按钮，将表单中的数据提交到远程服务器
5. 隐藏域，用于悄悄收集用户的一些数据，隐藏域不会出现在界面内，可在 js中动态设置，就可以收集用户信息
6.在表单标签中，除了按钮标签以外的标签，都可以通过value来指定需要 提交到服务器的数据
8.5 label标签：将文字与输入框关联起来
1. 默认情况下文字与输入框没有关联关系，也就是 点击文字输入框不会聚焦
2. label标签能将文字与输入框绑定在一起
3. 格式：<label for=“account”>账号：<input type=“text” id=“account”>
将文字用label标签包裹起来，在给输入框添加一个id属性，在label标签中通过for 属性和输入框中的id进行绑定即可
8.6 datalist标签：给输入框绑定待选项（仅作了解，因为众多浏览器不支持）
1. 格式：<datalist><option> 待选项内容 </option></datalist>
2. 如何给输入框绑定待选列表：
1. 搞一个输入框
2. 搞一个datalist列表
3. 给datalist列表标签添加一个id
4. 给输入框添加list属性，将datalist的id对应的值赋值给list属性即可
3. 如：请输入你的车型：<input type=“text” list=“cars”>
<datalist>
<option>宝马</option>
<option>奔驰</option>
<option>奥迪</option>
</datalist>
8.7 自动校验（仅作了解，众多浏览器不支持）
邮箱：<input type=“email”>
域名：<input type=“url”>
注：url地址如：http//:www.baidu.com，需要http
电话：<input type=“number”>
日期：<input type=“date”>
颜色：<input type=“color”>
8.8 select标签：用于定义下拉标签
1. 格式：<select>
<optgroup label=“分组名称”>
<option>列表数据</option>
</optgroup>
</select>
2. 注意
1. 下拉列表不能输入内容，但是可以直接在列表中选择内容
2. 可以给option标签添加一个selected属性来指定列表的默认值
3. 可以给option标签包裹一层optgroup标签来分类下拉列表中的的数据
8.9 textarea标签：定义一个多行输入框
1. 格式：<textarea></textarea>
2. 注意
1. 默认情况下输入框可以无限换行
2. 默认情况下输入框有自己的宽度和高度，可以通过cols和rows来指定输 入框的列数和行数，但还是可以无限的往下输入
3. 默认情况下输入框是可以手动拉伸的
4. 如：<textarea cols=“20”rows=“5”></textarea>
8.10 表单占位符：placeholder="email"
九、video标签：用于播放视频（目前，该元素支持三种视频格式：MP4、WebM、Ogg）
9.1 格式：<video src=“”></video> 默认情况下不会自动播放视频
9.2 属性： src 用于告诉video标签需要播放的视频地址
autoplay 用于告诉video标签是否需要自动播放视频
controls 用于告诉video标签是否需要显示控制条
poster 用于告诉video标签视频没有播放之前显示的占位图片
loop 一般用于做广告视频，用于告诉video标签视频 播放完毕之后是 否需要循环播放
preload 预加载视频，但是需要注意preload和autoplay相冲，如果 设置了autoplay属性，那么preload属性就会失效
muted 静音
width/height 宽度和高度 推荐只设置一个
9.3 如：<video src=“img/1.webm” autoplay=“autoplay” loop=“loop” mute=“mute”width=800></video>
9.4 第二种格式：<video><source src=“”type=“”></source></video>
1. 存在的意义：为了解决浏览器兼容性问题
2. 注意：当前通过video标签的第二种格式虽然能够指定所有的浏览器都支持的 视频格式 ，但是想让所有的浏览器都通过video标签播放视频，就必须保证浏览器支 持HTML5，否则同样无法播放，后面学习的js的框架html5media来实现所有的浏 览器都支持html5
3. 如： <video autoplay=“autoplay”controls=“controls”>
<source src=“1.webm”type=“video/webm”></source>
<source src=“1.mp4”type=“video/mp4”></source>
<source src=“1.ogg”type=“video/ogg”></source>
</video>
4. 注意：浏览器播放视频时会从这三个中选择一个自己支持的格式来播放
十、audio标签：播放音频 目前, <audio>支持三种音频格式文件: MP3, Wav, 和 Ogg
10.1 格式：<audio src=“”></audio>
或 <audio src=“”type=“”></audio>与video一样
10.2 注意：audio标签的使用和video标签的使用基本一样，video中能够使用的属性在audio标签中大部分都能使用，并且功能都一样，只不过有三个属性不能使用，width/height/poster
10.3 如：<audio autoplay=“autoplay”controls=“controls”>
<soure src=“images/1.mp3”type=“audio/mp3”></audio>
十一、详情与概要标签：利用summary标签来描述概要信息，利用details标签来描述详情信息，默认情况下是折叠显示，想看见详情必须点击,用于解决空间问题
11.1 格式：<details><summary>概要信息</summary>
详细信息
</details>
11.2 如：<details><summary>郑伊健</summary>
简介：郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平.
</details>
十二、marquee标签：跑马灯
12.1 格式：<marquee>内容</marquee>
12.2 属性： direction 滚动的方向 left/right/up/down
scrollamount 滚动速度，值越大速度越大
loop 滚动的次数，默认值为-1，也就是无限滚动
behavior 滚动类型，slide滚到边就停止，alternate滚到边弹回
12.3 如 :<style> marquee{ width:200px;height:200px;background-color:skyblue;}
</style>
<marquee>123456789</marquee>
<marquee direction=“right”>123456789</marquee>
<marquee scrollamount=“100”>123456789</marquee>
<marquee loop =“1”>123456789</marquee>
<marquee behavior=“slide”>123456789</marquee>
<marquee behavior=“alternate”>123456789</marquee>
<marquee><img src=“1.jpg” width=“50”></marquee>//照片循环
十三、html中被废弃的标签：因为没有语义，都是用来修饰样式的
如: <b><u><i><s><br><hr><font>（修饰文字的属性）
如果一定要使用，可以作为css的钩子来使用
替代标签：
strong语义：定义重要性强调的文字 =b（bold 加粗文本 没有语义）
ins语义：定义插入的文字 = u（underline 加下划线 没有语义）
em语义：定义强调的文字 =i（italic 将文本倾斜 没有语义）
del语义：定义被删除的文字 =s（strikethourgh 加下划线 没有语义 例: <strong></strong><ins></ins><em></em>
十四、实体字符：有些HTML字符在HTML中有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西要想显示出来就必须通过字符实体来显示
如： 空格，多少个 就多少个空格 ©（版权符号）
<（less than）符号< >（greater than）符号>
扫一扫
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
