1.HTML的基本标签
1）html基本结构
<!DOCTYPE html>
<head>
......
</head>
<body>
......
<body>
</html>
(2)HTML
整个网页是从<html>这里开始的，然后到</html>结束。
(3)head
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位（用得很少） |
(4)body
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”。
2、段落与文字
(一)、段落标签
(1)、段落与文字标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <h1>~<h6> | header | 标题 |
| <p> | paragraph | 段落 |
| <br> | break | 换行 |
| <hr> | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
(2)、文本格式化标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <strong> | strong（加强） | 加粗 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（引用） | 斜体 |
(二)、块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素；常见行内元素有：strong、em、span等。
3.列表
3种列表的语义记忆：
| 标签 | 语义 | 说明 |
|---|---|---|
| ol | ordered list | 有序列表 |
| ul | unordered list | 无序列表 |
| dl | definition list | 定义列表 |
（1）有序列表
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
（2）无序列表（用处最广泛）
<ul type="列表项符号">
<li>无序列表项</li>
<li>无序列表项</li>（可嵌套使用）
<li>无序列表项</li>
</ul>
注意：嵌套使用时结构完整：ul里嵌套ul
（3）定义列表
<dl>
<dt>定义名词</dt>
<dd>定义描述</dd>
<dl>
4.图像
(一)、图像标签
图像标签为<img>。<img>是一个自闭合标签。（3个属性：src、alt、title。）
语法：
<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
| 属性 | 说明 |
|---|---|
| src | 图像的文件地址 |
| alt | 图片显示不出来时的提示文字 |
| title | 鼠标移到图片上的提示文字 |
(二)、相对路径和绝对路径
绝对路径，指的是图片在你的电脑中的完整路径。
相对路径，指的是图片相对当前页面的位置
(三)、图片格式
1、jpg格式
概述：拓展名为点.jpg或.jpeg，它是一种有损的压缩格式，他将肉眼不容易观察出来的细节丢弃了
主要特点:支持的颜色丰富，占用空间小，但不支持透明背景，不支持动态图
使用场景：对细节没有极高要求的场景，比如说产品的宣传图等等
2、png格式
概述：是一种无损压缩格式，能更高质量的保存图片
主要特点：支持的颜色丰富，占用空间大，支持透明背景，不支持动态图
使用场景：需要使用透明背景的图片、想要呈现更高质量的图片
3、bmp格式
概述：不进行压缩的格式，最大程度上保留细节。
主要特点：支持颜色丰富，保留细节，占用空间极大，不支持透明背景和动态图
使用场景：对图片细节要求极高，如大型游戏
4、gif 格式
概述：支持256中颜色，色彩呈现不是很完整
主要特点：支持的颜色较少，支持简单透明背景、支持动态图
使用场景：动态图
5、webp格式
概述：谷歌退出的一种格式，专门用来在网页中呈现图片
主要特点：具备以上几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容问题
使用场景：网页中的各种图片
六、base64 格式
本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
原理：把图片进行base64编码，形成一串文本，直接作为img的src即可。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。
5、链接
超链接根据链接对象的不同分为：跳转页面，跳转文件，跳转锚点
（1）跳转页面
语法：
<a href="链接地址" target="目标窗口的打开方式">（打个a就出来了）
| target属性值 | 说明 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在一个全新的空白窗口中打开链接 |
| _top | 在顶层框架中打开链接 |
| _parent | 在当前框架的上一层里打开链接 |
（2）跳转文件
<a href='./xxx.png'></a> 能直接打开的文件
<a href='./xxx.zip'></a> 浏览器无法打开的文件，会自动触发下载
<a href='./xxx.map4' download='xxx.map4'></a> 可以通过download强制触发下载
（3）跳转锚点
第一种方式:a标签配合name属性 ：
例：<a href="#qsl">跳转到qsl（给用户看）</a>
<a name="qsl"></a>
第二种方式:其他标签配合id属性 ：
例：<a href="#xmx">跳转到xmx(给用户看）</a>
<p id="xmx"></p>
注意点:
1.具有 href 属性的a标签是超链接，具有name 属性的a标签是锚点。
2. name 和 id 都是区分大小写的，且id最好别是数字开头。
6.表格
（1）表格基本结构
<table>
<caption>表格标题</caption>
<thead>(表头）
<tr>
<th>表头单元格1</th>（表头单元格用th）
<th>表头单元格2</th> ...
</tr>
</thead>
<tbody>（表身）
<tr>
<td>标准单元格1</td>(表身，表脚单元格用td）
<td>标准单元格2</td>...
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>...
</tr>
</tbody>
<tfoot>（表脚）
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>...
</tr>
</tfoot>
</table>
(2)表格标签名语义及常用属性
7.表单
（1）表单基本结构
<form >
......
</form>
常用属性：
1.action:用于指定表单的提交地址(需要与后端人员沟通后确定)。
2.target:用于控制表单提交后，如何打开页面
常用值如下:
_blank : 在新窗口打开。 _self :在本窗口打开。
（2）input标签表单
大部分表单都是用input标签完成的。
语法：
<input type="表单类型"/>
| type属性值 | 说明 |
| password | 密码文本框 |
| radio | 单选框 |
| checkbox | 复选框 |
| hidden | 隐藏域 |
| reset | 重置按钮 |
| button | 按钮 |
| text | 单行文本框 |
| image | 图像形式提交按钮 |
例1：
性别<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female"
注释：（checked是默认选中的意思)
例2：
<input type='reset’ value='点我重置'>
例3：
<input type='hidden' name='tag' value：‘99’>
（3）textarea标签表单
多行文本框：
语法：
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
（4）下拉列表（select，option）
例子：
<select name="area" id="">
<option value="010">一区</option>
<option value="011">二区</option>
<option value="012" selected>三区</option> ( selected默认选中 )
<option value="013">四区</option>
</select><br>
8.浮动框架iframe
例子：
1.<iframe src="链接" frameborder="0" ></iframe>
1.与超链接target属性配合使用
<a href="链接" target="tb">点我看淘宝</a>
<iframe name="tb" frameborder="0"></iframe>
2. 与表单targrt属性配合使用
<form action="链接" target="container">
<input type="text" name="keyword">
<button>搜索</button>
</form>
<iframe name="container" frameborder="0"></iframe>
9.常用字符实体
| 常用字符实体 | 实体名称 |
| 空格 |   |
| 小于号< | < |
| 大于号> | > |
| & | & |
10：HTML全局属性
11.Meta 元信息
5519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
