寒假集训
一、什么是HTML？
HTML是用来描述网页的一种语言。
- HTML指的是超文本标记语言（Hyper Text Markup Language）
- HTML不是一种编程语言，而是一种标记语言（markup language）
- 标记语言是一套标记标签（markup tag）
1、网页是前端开发人员写的，通过浏览器转成普通人眼中的美丽页面
2、网页的扩展名是.html
3、Html使用标记标签来描述网页，包含视频，音频，图片，等等······
二、 Web标准的组成
WEB（网页）的组成部分：
- HTML结构：W3C制定了结构HTML的语法、标准
- CSS表现：W3C制定了表现CSS的语法、标准
- JS行为：W3C、ECMA制定了行为标准（W3C DOM、ECMAScript）
三、文档声明与字符编码
<!DOCTYPE ***>
<!DOCTYPE html>
特殊且固定的文档声明标签
<html lang="***">
"en"代表英语
"zh-CN"代表中文
"ja-jp"代表日文
······
搜索引擎优化和浏览器有帮助
<meta charset="***">
ASCLL 美国信息交换标准代码
ISO-8859-1 拉丁字母表的字符编码
GB2312 汉字编码字符集
UTF-8 Unicode万国码字符编码
四、HTML常用标签
- 文本标题（h1-h6）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距
- 段落标签（p）
<p>段落文本内容</p>
标识一个段落（段落与段落之间有段间距）
- 换行（br）
<br />
换行是一个空标记（强制换行）
- 水平线
<hr />
空标记
- 加粗有两个标记（推荐strong）
<b>加粗内容</b>只是显示加粗
<strong>强调的内容</strong>突出的文本
- 倾斜有两个标记（推荐em）
<em>强调文本</em>
<i>倾斜文本</i>
- 删除线有两个标记（推荐del）
<s>文本</s>删除线
<del>文本</del>删除线
- 扩展
<u>文本</u>下划线
<sub></sub>下标
<sup></sup>上标
五、HTML的基本语法
- <常规标记>也叫双标记
<标记></标记>
<标记 属性=“属性值” 属性=“属性值”></标记>
标记也可叫标签或叫元素
例如：
<head></head>
- 空标记也叫单标记
<标记 />
<标记 属性=“属性值” />
例如：
<br />
六、特殊符号
| 特殊字符 | 含义 | 特殊字符代码 |
|---|---|---|
| 空格符 | | |
| © | 版权 | © |
| ® | 注册商标 | ® |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| ° | 度 | ° |
特殊字符 ：
- & + 字符
- 解决冲突：左右尖括号、添加多个空格的实现
- 常用：
< >
七、div和span标签
div标签，没有具体含义，用来划分页面的区域，独占一行。
span，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。
八、列表-有序列表
<!-- 注释 -->
<!--
1. li里面可以随意放标签，但是ol里面只能放置li，
2. 数字是自动生成的
3. type: 1,a,A,i,I
start:取值只能是一个数字
-->
<ol type="a" start="27">
<li>把冰箱打开</li>
<li>大象放进去</li>
<li>冰箱关上</li>
</ol>
九、列表-无序列表
<!--
1. ul里面只能放li，li里面可以放其他标签
2. 默认的是黑色的实心圆
3. type,disc circle square none（用的多）
-->
<ul type="none">
<li>蒸羊羔</li>
<li>蒸熊掌</li>
<li>烧花鸭</li>
</ul>
十、列表-自定义列表
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
<dl>
<dt>11111</dt>
<dd>2222</dd>
</dl>
十一、图片标签的路径
路径分类：绝对路径、相对路径
- 绝对路径
绝对路径是指文件在硬盘上真正存在的路径。
注意：绝对路径在实际的开发过程中很少去使用，在自己的计算上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用“\”或“/”字符作为目录的分隔字符 - 相对路径
相对路径，就是相对于自己的目标文件位置。
<!-- 同级目录
1. code.gif
2. ./code.gif
3. ../../上一级的上一级 多级返回
-->
十二、图片标签的属性
<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后（加载失败）的提示信息" width="200px" height="200px"/>
十三、超链接标签
能够实现不同页面的跳转
<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>
Target属性：规定在何处打开文档。
A.target=“_self” 默认值
B.target=“_blank” 新窗口打开
十四、table表格的基本结构
数据表格的创建
<table><!-- 创建表格 -->
<tr><!-- tr 表示行 -->
<td>1</td><!-- td 表示单元格 -->
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
十五、table表格的属性
表格属性
- 宽度 width
- 高度 height
- 边框 border
- 边框颜色 bordercolor
- 背景颜色 bgcolor
- 水平对齐 align=“left或right或center”
- cellspacing=“单元格与单元格之间的间距”
- cellpadding=“单元格与内容之间的空隙”
<!-- width px，百分比（相对于父元素的，） -->
<!-- height px，百分比（相对于父元素的，） -->
<table border="1" width="50%" height="500px"
align="center"
bordercolor="red"
bgcolor="yellow"
cellspacing="20"
cellpadding="100">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
十六、tr的属性
行tr 属性
- 高度 height
- 背景颜色 bgcolor
- 文字水平对齐 align=“left或right或center”
- 文字垂直对齐 valign=“top或middle或bottom”
<table border="1" width="300" height="300" bgcolor="yellow" align="center">
<tr bgcolor="orange" height="100" align="center" valign="bottom">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
十七、td的属性
单元格的属性
- 宽度 width
- 高度 height
- 背景颜色 bgcolor
- 文字水平对齐 align=“left或right或center”
- 文字垂直对齐 valign=“top或middle或bottom”
<!-- td：如果一个单元格的设置宽度，影响的是这一整列的宽度 -->
<!-- td：如果一个单元格的设置高度，影响的是这一整行的高度 -->
<table border="1" width="300" height="300" bgcolor="yellow" align="center">
<tr>
<td width="200">1</td>
<td height="200">2</td>
</tr>
<tr>
<td bgcolor="red">3</td>
<td align="right" valign="top">4</td>
</tr>
</table>
十八、表格合并
Colspan=“所要合并的单元格的列数” 必须给td。
Rowspan=“所要合并的单元格的行数” 必须给td。
十九、表单标签
表单的作用：收集用户信息。
<form method="get或者post" action="向何处发送表单数据">
<input/>
A.属性 type定义输入框的类型
a）文本框 type="text" 密码框 type="password"
b）提交框 type="submit" 和<button>提交按钮</button>一样
c）按钮框 type="button" 单纯的按钮
d）重置框 type="reset" 清空的效果
B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
C.属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D.value
</form>
Form当中method的post和get的区别?
- get是从服务器上获取数据，post是向服务器传送数据。
- get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应， 在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
- 对于get方式,服务器端用Request.QueryString获取变量的值，对于post方式， 服务器端用Request.Form获取提交的数据。
- get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4 (Internet Information Service 互联网信息服务)中最大量为80KB，IIS5中为100KB
- get安全性非常低，post安全性较高。但是执行效率却比Post方法好
二十、CSS-内部样式表
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。
5）在书写样式过程中，空格、换行等操作不影响属性显示。
选择器（选择符）{属性:属性值; 属性:属性值;}
二十一、CSS-外部样式表
扩展知识点：link和import之间的区别?
①差别1：本质的差别: link属于XHTML标签， 而@import完全是CSS提供的一种方式。
②差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import弓 |用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
③差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只 有在IE5以上的才能识别，而link标签无此问题。
二十二、CSS-行内样式表
<h1 style="color:red;">1111111111111</h1>
<h1 style="color:blue;">1111111111111</h1>
<h2 style="color:yellow;">2222222222222</h2>
<h3>3333333333333</h3>
二十三、样式表的优先级
<!-- 行内>内部>外部 -->
1824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
