HTML5基础知识笔记（更新）
一 HTML
通常意义的h5是一个技术总称，约等于html5+css3+js
1.1 含义
1.2 基本骨架
<html>
<head>
<title></title>
</head>
<body>
网页要显示的内容
</body>
</html>
html5基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> DTD 文档类型说明
<meta charset="UTF-8"> 字符集设置 UTF-8是支持绝大数语言
假如大家用sublime,快捷方式html:5 按住tab或ctrl+E
1.3 编辑器
记事本 sublime vscode(IDE) Hbuilder webstorm ...
1.4 常用标签
标题标签 h1~h6 双标签 <h1></h1> 开始标签和结束标签
Q： 请谈谈你对标题标签的理解？
从语义的角度回答 标题标签给文本赋予标题的含义
SEO搜索引擎优化
结构化的语言标记要看结构。
划线标签 <hr /> 单标签 了解 线条以后用css完成
段落标签 <p></p> 双标记
换行标签 <br /> 单标签
div和span标签 无语义的标签 实在找不到标签表示的时候 考虑用div和span
span可以放文字、图片、表单
div可以自我内部嵌套，span内部不能嵌套div
pre标签保留原文本格式
<!--注释
1 标签可以拥有多个属性 属性不分前后顺序 属性之间用空格隔开
2 标签属性语法 <标签名 属性1="属性1值" 属性2="属性2值" />
3 任何标签的属性值都有默认值 省略属性则取这些默认值
-->
图像标签 <img /> 单标签（图片出问题时，使用alt显示提示。还可以内嵌title，鼠标放上去显示。还可以width，high最好等比例。还有边框border,默认黑，像素设置粗细）
超链接 <a href="地址"> 超链接名字(后面加路径，#等于原页面，路径后加target=“_blank”打开新页面，中间路径也可以用图像标签) </a> 应用：还可以做锚点
锚点
<a href="#值">文字</a>
需要跳转到的地方打一个标记 <a name="值"></a>或<h2 id="值">文字</h2>，标记可以不用文字，还是用标题表示
跨页面锚点
在#前加包含跳转地点的网页地址，带后缀的全称
base标签 单标记 设置在head中 作用 让页面所有的超链接可以在新窗口打开
＜base target=＂_blank＂ /＞
实体符号
＜用<
＞用>
&用&
因为有空白折叠机制， 为1个空格
注释
路径 绝对路径和相对路径
绝对路径 F:\训练营\day3 带有盘符的路径
相对路径 说明有个参照物
情况一
day3文件夹下面
01.html 1.jpg
01.html中 <img src="1.jpg" />
情况二
前端文件夹 > day3文件夹 > 01.html
1.jpg <img src="../1.jpg" />
./当前目录
../上一级
/下一级
列表
1 无序列表
<ul>
<li>1</li>
<li>2</li>
</ul>
2 有序列表
<ol>
<li></li>
</ol>
3 自定义列表
<dl>
<dt></dt> 列表标题
<dd></dd> 列表描述，dd是描述dt的，多对1关系
</dl>
表格
在出现CSS前，老式布局是表格加div
caption表格标题，此为表格自带标签
tr表示增加行
td表示增加列(可加 rowspan 横跨行数，被横跨行需要删除对应。可加colspan 横跨列数，也需要删除自己对应的多列)
th表示表头，加黑居中，可包裹在thead标签中(与之对应有tbody，如果没有thead，一般浏览器会默认添加tbody,tbody会均分高度与宽度，thead不会，tfoot在body后面，存一些统计信息)
cellspacing单元格之间间距
border边框粗细
align是让整个表格居中
表单
input type
text 文本框
password 密码
radio 选项（加name值，可以同值唯一，达到互斥）
checkbox 复选项
button 按钮（value赋文字）
submit 提交按钮，数据发到后台
reset 重置，刷新，用form（双标签）全部包裹需要重置的部分
file 文件上传
image src路径
textarea 文本域
datalist
option 数据列表选项参考，双，可以与上面的input相关联而提示，给datalist一个id，用input的list去标记id，可以有联想和参考提示功能
fieldset分组功能，会包裹信息，自动边框
legend表示表单的主题
select
option选项，第一个为默认显示
from
action = "服务器地址
method = 提交方式
name = 区分表单
label标签的使用（双标签）
可以包裹text使文字部分也可提示显示输入框（多个text就不可以了，把label后加for，获取需要的text的id就可以定向跳转，获取光标）
第一行 文档类型声明 DTD 有很多种
xhtml 严格版html 3种版本
html4 3种版本
html5 语法松散不严谨
strict严格 transitional过渡 frameset框架
html5在html的变化
增加了很多语义化标签
header定义网页的头部或页眉
nav定义导航栏
footer定义页面的底部 页脚
article定义文章
section定义某个具有主题的区域
aside定义侧边栏
html5在表单中的变化
表单元素都可以用form包裹起来
input type
email移动端提示@
tel移动端提示9宫格
number带数字加减
url移动端带.com
search移动端放大镜
range一个可移动滑块
f time带数字加减选择
date年月日，带日历点击选择
month月份
week星期和第几周
color颜色，前面颜色全面面板，但默认左上角显示
html5新增表单属性
input type = text placeholder = 提示信息，点击即消除
autofocus页面加载时，自动获取焦点，光标闪烁
file文件上传，加multiple可以同时选择多个文件上传
text文本，加autocomplete = on 增加一个历史记录，并且根据字段进行提示，要用form包裹可用。加required检测非空才可提交。accesskey = "一个名字"，键盘alt+名字可以激活焦点
多媒体标签
embed 标签可定义嵌入的内容，可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、MP3等等
embed src = 路径源 width = heigh = align="middle"居中 allowFullScreen = ＂true"
html5有替代标签
audio（双）
src = 路径 controls控制显示 autoplay自动放 loop=-1循环
controls autoplay
source src = （audio中加上面）
您的浏览器不支持
video
src = 路径 controls autoplay
source src = （video中加上面）
你的浏览器不支持视频播放
