HTML5 笔记（1）
H5
html5
前端
后端
web三标准
结构 html
表现 css
行为 js
一、 WEB标准的概念及组成
WEB标准不是某一个标准，而是一系列标准的集合。
网页主要由三部分组成：结构、表现和行为。
对应的标准也分三方面：
结构化标准语言主要包括HTML(超文本标记语言)和XML（可扩展标记语言，主要用于传输数据），
hyper text markup language
表现标准语言主要包括CSS，
行为标准主要包括文档对象模型DOM、ECMAScript等。
W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。
W3C（ World Wide Web Consortium 万维网联盟）制定的结构和表现的标准；
ECMA（欧洲电脑场商联合会）制定的行为的标准;
二、 HTML及相关概念的介绍
HTML 指的是 超文本标记语言 (Hyper Text Markup Language)
XHTML 指可扩展超文本标记语言（EXtensible HyperText Markup Language）。
并没有引入任何新标签或属性，唯一得区别是语法，XHTML有着更严格语法
（比如：不允许大写字母，标签必须闭合等严格规范。）
XHTML2 不向前兼容，乃至不兼容之前得 HTML。
它是一种全新得语言，赤条条来去无牵挂。这着实是一场灾祸
超文本应用技术事变组（WHATWG）。
WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
HTML5 指的是HTML的第五次重大修改（第5个版本）
2004年提出草案，2008年正式发布；
HTML5 既支持疏松语法，也支持 XHTML 1.0 版本的严格语法。
浏览器，浏览页面，页面
编辑器，书写页面，代码
三、VScode基本功能
CTRL+N 新建
CTRL+S 保存
CTRL+C 复制
CTRL+V 粘贴
CTRL+X 剪切
CTRL+Z 撤销
CTRL+O 打开
CTRL+W 关闭
方向键+shift 选中文本
home 行首
end 行尾
F2 重命名
alt+B 默认浏览器预览
CTRL+/ 注释一整行
shift+alt+a 注释局部
alt+Z 自动换行
F5 刷新
注释：
<!-- html注释 -->
四、 调试工具 -浏览器
1）PC端调试工具的使用 -浏览器
测试浏览器(chrome,firefox)
先了解，后期我们写页面了会经常使用，边用边学。
2）移动端调试工具chrome可以测试移动端页面
五、HTML5 基本结构 （新建一个html文件时默认有的那些代码）
<!DOCTYPE html> 文档类型声明头，DOCTYPE大小写均可 主要作用告诉浏览器我的文档类型是html
<html> 开始html文件的书写
<head> 头部
<meta charset="utf-8" /> 字符编码
<title></title> 页面标题
</head>
<body></body> 网页主体
</html>
六、 HTML基本语法
常规标记（双标记） （标签 标记 元素）:<标签 属性=“属性值” 属性=“属性值 属性值”></标签>
空标记（单标记）:<标签 属性=“属性值” 属性=“属性值”/>
说明：
1.写在<>中的第一个单词叫做 标记，标签，元素。
2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“ ”内。
3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
4.空标记没有结束标签，但是必须关闭，用“/”代替。 <meta />
5.一个属性可以有多个属性值，多个属性值之间用空格隔开，不分先后顺序。
七、 HTML常用标记
1）文本标题（h1-h6）
<h1>一级标题</h1> 放logo
<h2>二级标题</h2> 页面用的居多
<h3>三级标题</h3> 页面用的居多
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2） 段落(p)
<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距)
3）空格 ( ) 字符实体
（所占位置没有一个确定的值,这与当前字体字号浏览器都有关系）
© 版权
> 大于号
< 小于号
4）换行(br)
<br /> 换行是一个空标记
5）加粗
加粗有两个标记
1.<b>加粗内容</b>
2.<strong>加粗内容</strong> 有强调突出之语义
6）倾斜
倾斜标记
1.<em></em> 用于倾斜
2.<i></ i>
7） 下划线
<U>文本</U>
8）水平线<hr /> 空标记
9）插入图片
<img width="宽度" title="提示信息" alt="替换文本" height="高度" src="路径" />
注:所要插入的的图片必须放在站点下
路径：绝对路径、相对路径；
绝对路径：不需要参照物，放哪里都能找到，可以跨盘符（本地的图片不可跨电脑）；---本地，网络
相对路径：当前文件为参照物，从当前文件出发去寻找目标文件，不可跨盘符；
*相对路径的写法：
1)当 当前文件与目标文件在同一目录下，直接书写 目标文件（文件名+扩展名）；
2)当 当前文件与目标文件所处的文件夹在同一目录下，写法如下：
文件夹名/目标文件全称+扩展名；
3)当 当前文件所处的文件夹和目标文件在同一目录下，写法如下：
../目标文件文件名+扩展名；
../../ 出两层的情况
title的作用: 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，
HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，
它会直接输出在原本加载图片的地方。
width 图片宽度
height 图片高度
10）超链接的应用
语法：
网站 多个 网页，至少3个（首页 列表页 详情页）
<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a>
属性：target 页面打开方式
属性值：_blank 新窗口打开 ； _self 当前窗口打开
<a href="#" target="_blank">新页面打开</a>
<a href="#">链接</a> 空链接
拓展：
定义书签：<a href="#box">第一处</a>
<a name="box">我在这^_^</a>
邮箱跳转：<a href="mailto:906823104@qq.com">906823104@qq.com</a>
文件下载：最好是压缩包； <a href="FeiQ.rar">下载飞秋</a>
11）列表(ul,ol,dl)
HTML中有三种列表，分别是：无序列表，有序列表，自定义列表
*无序列表
无序列表组成：
<ul type="circle">
<li></li>
<li></li>
．．．．．．
</ul>
注意：
1、ul里面只能放li， li 里面啥都能放；不能单独使用。
2、无序列表可以嵌套
属性 type="square(实心方块)/circle（空心圆）/disc（实心圆）/none （去除列表符号）"
*有序列表
有序列表组成：
<ol>
<li></li>
<li></li>
．．．．．．
</ol>
属性 type="1/a/A/i/I" start="数字"
有序 无序可相互嵌套
*自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
12） 数据表格的作用及组成
作用：显示数据
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注：1个tr表示一行；一个td表示一列(一个单元格)
*数据表格的相关属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bgcolor="表格的背景色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding="单元格与内容之间的间距"
7）水平对齐方式：align="left/center/right";
8 ) 合并单元格属性：
colspan=“所要合并的单元格的列数"合并列;
rowspan=“所要合并单元格的行数”合并行;
浙公网安备 33010602011771号