文章目录
一、认识网页
浏览器：是网页显示 运行的平台 是前端开发必备的利器
常见的五大浏览器
IE浏览器----------------------------------------------Trident
火狐浏览器（Firefox）----------------------------Gecko
谷歌浏览器（chrom）（市场占得份额多）–Blink（是webkit的分支）
Safari浏览器------------------------------------------Webkit
欧朋浏览器（Opera）-----------------------------Blink
前端工程师日常推荐使用chorm
前端的代码是用过浏览器(解析和渲染)成用户看到的网页
二、WEB标准
解决不同浏览器之间页面显示差异问题
即 web标准：让不同浏览器按照相同的标准显示结果，让展示的效果统一
WEB标准的分成三个构成
HTML
一、HTML的概念
HTML：超文本标记语言
二、HTML标签的属性
属性注意点
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间可以用空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分
三、HTML标签的学习
学习html排版、媒体、链接等基础标签，完成基础网页的开发
1.排版标签
1.标题标签
h1-h6 -块级元素
2.段落标签
<p>--块级元素 独占一行 段落与段落之间存在距离
3.换行标签
<br/>强制换行标签 单标签
4.水平线标签
<hr> 在页面中显示一条水平线 单标签
5.文本格式化标签
<b>加粗 <strong>加粗
<u>下划线 <ins>下划线
<i>倾斜 <em>倾斜
<s>删除线 <del>删除线
推荐使用第二组标签（体现语义化）
语义化：利用机器解析 对搜索引擎（SEO）有帮助
6.媒体标签
1.图片标签
<img src="" alt="" title=“”>--单标签
src属性 图片的路径
alt属性 替换文本 当图片加载失败时 看到的文本
title属性 鼠标悬停在图片上时显示的文本
height wight：用于控制图片的大小
title 属性可以用在很多个标签上 例如：
如果只设置widht或hright中的一个 另一个设置会等比例缩放（但是图片不会变形）
如果同时设置了width和hright两个 若设置不当此时图片可能会变形
2.路径
绝对路径（了解）：
相对路径（熟悉）：
3.音频标签
<audio src="" controls></audio>
属性
src -----------音频的路径
controls-------显示播放的控件
autoplay-------自动播放（部分浏览器不支持）
loop-----------循环播放
注意：音频标签目前支持三种格式：MP3、Wav、Ogg
4.视频标签
<video src=""></video>
属性
src -----------音频的路径
controls-------显示播放的控件
autoplay-------自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop-----------循环播放
注意：视频标签目前支持三种格式：MP3、WebM、Ogg
5.链接标签
称呼：a链接 超链接 锚链接
<a href="./目标网页.html" target="_blank">超链接</a>
target 属性作用:目标网页的打开方式
_self 默认值 在当前窗口中跳转（覆盖原窗口）
_blank 在新窗口中跳转（保留原网页）
显示特点：
a标签默认有文字下划线
a标签从为点击过 默认文字显示蓝色
a标签点击过后 文字显示为紫色 （清除浏览器历史时恢复蓝色）
空链接 herf=“#” --具有回到顶部功能 --可以占用一个链接位置
相关的demo练习
7.列表标签
无序：<ul><li>
有序：<ol><li>
自定义：<dl><dt><dd>
自定义
8.表格标签（不常用）
1.表格的基本标签
table>tr>td
2.表格标题和表格单元格标签
<caption>表格大标题
<th>表头单元格 表格一列的小标题
3.表格的结构标签
thead tbody tfoot
4.合并单元格
将水平或垂直多个单元格合并成一个单元格
注意：只有同一个结构标签的单元格才能合并 不能跨结构标签合并（不能跨：thead tbody tfoot）
9.表单标签
1.input系列标签
通过设置不同的type 展示不同的效果
text -----------文本框 ----用于输入单行文本 （type的默认值）
属性 ：
placeholder:占位符 提示用户输入内容的文本
password ----密码框----用于输入密码
属性 ：
placeholder
radio---------- 单选框----用于多选一
属性：
name:分组 有相同name属性值的单选框为一组 一组中同时只有一个能被选中
checked:默认选中
checkbox----- 多选框— 用于多选多
属性：
checked：默认选中
file --------------文件选择 用于上传文件
属性：
multiple：多文件选择
注意：
submit ---------提交按钮 用于提交
reset------------ 重置按钮 用于重置
button----------- 普通按钮 默认无功能 之后配合js添加功能
2.button按钮标签
submit ---------提交按钮 用于提交
reset------------ 重置按钮 用于重置
3.select下拉菜单标签
（select下拉菜单的整体 option 下拉菜单的每一项）
*属性：
selected：下拉菜单的默认选中的
4.textarea文本域标签
属性：
cols：规定了文本域内可见宽度
rows：规定了文本域内可见的行数
5.label标签
10.语义化标签
没有语义化标签：
div标签：一行中只显示一个（独占一行）
span标签：一行可以显示多个
语义化标签：(HTML5)
四、HTML的字符实体
目标：能通过字符实体在网页中显示特殊符号
学习路径：
1.HTML中的空格合并现象
（代码中同时出现多个空格和换行时 在网页中只显示一个）使用 解决
2.常见字符实体
eg:
相关练习的demo–表单
五、HTML5–！！！重点！！
html5的新特性
1.语义化标签
对比之前HTML没有体现结构语义化的标签，
如： <div id="header"></div> 表头的声明
HTML5提供语义化标签，如：
<header><article><footer><nav><aside><section>等
转化为块级元素（css中的display:block）
移动端没有兼容性问题（低版本也支持）
2.增强型表单
多个新的表单 Input 输入类型，如：
color,url,date等
这些新特性提供了更好的输入控制和验证。
新增表单元素，如：
<output>，用于用于不同类型的输出，比如计算或脚本输出。
新增表单属性，如：
placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性 ，是一个 boolean 属性。规定<input> 元素中可选择多个值。
3.新增视频 <video> 和音频 <audio> 标签 同上媒体标签
<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>
<audio src="someaudio.wav">您的浏览器不支持 audio 标签。
</audio>
<!--因为不同浏览器支持不同格式，我们才去的解决方案是 我们为这个音频准备多个格式-->
<audio controls="controls">
<source src="media/snow.mp3" type="audio/mprg">
<source src="media/snow.ogg" type="audio/ogg">
</audio>
4.Canvas绘图
5.SVG绘图
6.地理定位
7.拖放API
8.Web Worker
9.Web Storage
10.WebSocket