html基础
1. 初识前端
利用 html+css+js 等技术，将效果图生成网页
2. 初识网页
（1）网页由文字、图片、输入框、视频、音频、超链接等组成
（2） Web 标准
W3c组织（万维网联盟）
| 组成 | 标准 | 行为 |
|---|---|---|
| html | 结构标准 | 相当于人的身体，构成页面的基础 |
| css | 表现标准 | 相当与给人化妆，让页面变的更漂亮 |
| js | 行为标准 | 想当与人在唱歌，让页面更灵动 |
（3）浏览器
A. 常见的浏览器：IE、火狐、谷歌、猎豹、safari、opera、edge
B. 浏览器内核
渲染引擎：
| 浏览器 | 内核 |
|---|---|
| IE | trident |
| 谷歌/欧鹏 | blink |
| 火狐 | gecko |
| 苹果 | webkit |
渲染引擎是兼容性问题出现的根本原因
（4）Url地址
http协议∶超文本传输协议，也就是浏览器和服务器端的网页传输数据的约束和规范
url协议∶平时我们写的网址就是url地址
url协议∶规定url地址的格式
协议规定格式∶scheme∶//host.domain∶port/path/filename
scheme∶定义因特网服务的类型。常见的就是http
host∶ 定义域主机（http 的默认主机是www）
domain∶ 定义因特网域名 比如∶w3school.com.cn
∶port 定义端口号（（网页默认端口∶80）
path∶ 网页所在服务器上的路径
filename∶ 文件名称
（5）浏览器和服务器的关系
A. 用户在浏览器中输入网址
B. 浏览器向服务器发送请求（通过http协议）
C. 服务器响应之后，返回数据，通过网页呈现出来
3. 初识 html
（1）Hyper text markup language
超文本标记语言。
超文本：超链接。（实现页面跳转）
（2）html 结构标准
<!doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html> html 与htm是一样的
后缀名不能决定文件格式，只能决定打开文件打开的方式
（3） html 标签分类
单标签（没有闭合的标签）
<br> <hr> 双标签
<html></html> <head></head> <title></title> <p></p>（4）html 标签关系分类
包含（嵌套关系）<head><title></title></head> 父子
并列关系 <head></head><body></body> 兄弟姐妹（5）开发工具
Dw 历史悠久，设计师使用。
Sublime 轻量级 有很多好用的插件
Webstorm 重量级 太过智能（电脑性能不好的慎用）
4. 标签
（1）标题标签
h1-h6
h1 一个页面只能出现一次
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>（2）文本标签
<font>文本内容</font> A. 文本格式化标签
B. 文本加粗标签（尽量使用strong）
<strong></strong> <b></b> C. 文本倾斜标签（em）
<em></em> <i></i> D. 删除线标签（del）
<del></del> <s></s> E. 下划线标签（ins）
<ins></ins> <u></u>◆注意：之所以尽量使用
是因为更有语义化
（3）图片标签
<img src="1.jpg" alt="hello" title="world" width="300" height="200" />| 属性 | 用途 |
|---|---|
| src | 图片的来源（必写属性） |
| alt | 替换文本（图片不显示的时候显示的文字） |
| title | 提示文本（鼠标放到图片上显示的文字） |
| width | 图片宽度 |
| height | 图片高度 |
◆图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放
5. 路径
（1）相对路径
相对于文件自身出发，就是相对路径。
◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名
<img src="1.jpg" alt="hello" title="world"/> ◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称
<img src="c\1.jpg" alt="hello" title="world"/> ◆图片（html）在文件的上一级目录里，..+/+图片（html）名称
<img src="..\1.jpg" alt="hello" title="world"/> ◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称
<img src="..\c\1.jpg" alt="hello" title="world"/> ★总结：找到下一级目录（文件夹）的图片（文件）用 \
跳出当前目录使用 ..\
（2）绝对路径
<img src="D:\c\1.jpg" alt="hello" title="world"/>6. 超链接
<a href="1.html" title="hello" traget="_self">文本</a>| 属性 | 用途 |
|---|---|
| href | 去往的路径（跳转的页面）（必写属性） |
| title | 提示文本（鼠标放到链接上显示的文字） |
| target=”_self” | 默认值（在自身页面打开（关闭自身页面，打开链接页面）） |
| traget=”_blank” | 打开新页面 （自身页面不关闭，打开一个新的链接页面） |
（1）锚链接
A. 定义一个锚点
<p id="md"> B. 超链接到锚点
<a href="#md">回到指定位置</a>（2）空链
不知道链接到哪个页面的时候使用
<a href="#">空链</a>（3）压缩文件下载（不推荐使用）
<a href="1.rar">某某压缩包</a>（4）超链接优化
<base target="_blank"> 让所有超链接都在新窗口打开| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| $ | 金钱 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ℃ | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
| 空格符 | |
7. 列表
（1）无序列表
<ul type="circle">
<li>hello world</li>
<li>hello world</li>
</ul>| 属性 | 用途 |
|---|---|
| square | 小方块 |
| disc | 实心小圆圈 |
| circle | 空心小圆圈 |
（2）有序列表
<ol type="1" start="3">
<li>hello world</li>
<li>hello world</li>
</ol> ◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置
（3）自定义列表
<dl>
<dt>帮助中心</dt> 小标题
<dd>购物指南</dd> 解释标题
<dd>订单操作</dd> 解释标题
</dl>8. 音乐标签
<embed src='1.mp3' hidden="true">9. 滚动
页面自动滚动效果∶
<marquee>…</marquee> 中间的内容可以为 文字，图片，也可以是由程序生成的文字或图片
属性∶height 设置高度 width 设置宽度 bgcolor 设置背景颜色
behavior∶设定滚动的方式
alternate∶表示在两端之间来回滚动
scroll∶表示由一端滚动到另一端，会重复。slide∶表示由一端滚动到另一端，不会重复
direction：设胃漆动的方向
down：向下滚动
left：向左滚动
right：向右滚动
up：向上滚动
loop：设置滚动次数 -1一直滚下去
页面背景音乐∶
属性∶src 设置音乐路径
hidden ∶隐藏播放按钮 true 隐藏 false 显示
10. meta
（1）编码格式
Charset
Ascll
Ansi
Unicode
Gbk
Gb2312
Big5
Utf-8 通用字符集
（2）关键字
<meta name="keywords" content="你好啊">（3）网页描述
<meta name="description" content="你好啊">（4）网页重定向
<meta http-equiv="refresh" content="你好啊">（5）链接外部样式表
<link rel="stylesheet" href="1.css">（6）设置 icon 图标
<link rel="icon" href="favicon.ico">11. 表格
<table> 表格
<tr> 行
<td></td> 列
<td></td>
<td></td>
</tr>
</table> ◆属性：
Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ，tr或者td内容居中
bgcolor=”red” 背景颜色
（1）表格的标准结构
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>（2）表头和单元格合并
◆表头
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
（3）表格标题、边框颜色、内容垂直对齐
◆表格标题
标题的文字自动加粗水平居中对齐
<tr>
<th>张三</th>
<th>20</th>
<th>程序猿</th>
</tr> ◆边框颜色
bordercolor="red" ◆内容垂直对齐方式
<td valign="bottom">张三</td>Valign=”top | middle | bottom”12. 表单
表单的作用是收集信息
（1）提示信息（昵称、性别等）
（2）表单控件
（3）表单域
<form action="1.php" method="get">| 属性 | 作用 |
|---|---|
| action | 处理信息 |
| method=”get” | Get通过地址栏提供（传输）信息，安全性差 |
| method=”post” | Post 通过1.php来处理信息，安全性高 |
（4）文本输入框
用户名：<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="前端">| 属性 | 作用 |
|---|---|
| maxlength=”6” | 限制输入字符长度 |
| readonly=”readonly” | 将输入框设置为只读状态（不能编辑） |
| disabled=”disabled” | 输入框未激活状态 |
| name=”username” | 输入框的名称 |
| value=”前端” | 将输入框的内容传给处理文件 |
（5）密码输入框
密码<input type="password" name="pwd"> ★注意：文本输入框的所有属性对密码输入框都有效
（6）单选框
<input type="radio" name="gender" checked="checked">男 ★只有将name的值设置相同的时候，才能实现单选效果
★checked=”checked” 设置默认选择项
（7）下拉列表
<select multiple="multiple">
<option>四川</option>
<option>重庆</option>
<option selected="selected">北京</option>
</select>| 属性 | 作用 |
|---|---|
| multiple=”multiple” | 将下拉列表设置为多选项 |
| selected=”selected” | 设置默认选中项目 |
对下拉菜单进行分组
<optgroup label="北京市">
<option>朝阳区</option>
<option>昌平区</option>
<option>海淀区</option>
</optgroup> Label=”” 分组名称
（8）多选框
<input type="checkbox" checked="checked">抽烟
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">烫头 Checked=”checked” 设置默认选中项
（9）多行文本框
<textarea cols="130" rows="10"></textarea> Cols 控制输入字符的长度。
Rows 控制输入的行数
（10）文件上传控件
<input type="file">（11）文件提交按钮
<input type="submit"> ★可以实现信息提交功能
（13）普通按钮
<input type="button" value="普通按钮"> ★不能提交信息，只能配合JS使用
（14）图片按钮
<input type="image" src="按钮.jpg"> ★图片按钮可实现信息提交功能
（15）重置按钮
<input type="reset"> ★将信息重置到默认状态
（16）表单信息分组
<form action="1.php method="post">
<fieldset> //对表单信息分组
<1egend>分组信息</1egend> //表单信息分组名称
</fieldset>
</form>（17）补充表单控件
<input type="url"> //网址控件
<input type="date"> //日期控件
<input type="time"> //时间控件
<input type="email"> //邮件控件
<input type="number" step="5"> //数字控件
<input type="range"> //滑块控件13. 标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
标签语义化意义：
网页结构合理
有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
便于团队开发和维护
尽可能少的使用无语义的标签 div 和 span
在语义不明显时，既可以使用 div 或者 p 时，尽量用 p , 因为 p 在默认情况下有上下间距，对兼容特殊终端有利
不要使用纯样式标签，如：**b、font、u**等，改用 **css** 设置。
需要强调的文本，可以包含在 **strong** 或者 **em** 标签中 **strong** 默认样式是加粗（不要用 **b**），**em** 是斜体（不用 **i**）