目录
一，基本标签
| 标签名称 | 标签符号 |
|---|---|
| 标题标签 | <h1>~<h6> |
| 段落标签 | <p> |
| 斜体标签 | <em> |
| 粗体标签 | <strong> |
| 水平线标签 | <hr/> |
| 换行标签 | <br/> |
二，特殊符号
| 符号名称 | 符号样式 |
|---|---|
| 空格 | |
| 大于号 | > |
| 小于号 | < |
| 引号 | " |
| 注册商标 | ® |
三，图片标签
1.src图片路径属性
(1)相对路径(通常以HTML网页文件为起点)。
<img src="./img/1.jpg"/>上图为同级目录下的img文件。
<img src="../img/1.jpg">上图为上一级目录下的img文件。
2.宽度：width px像素。
高度：height px像素。
3.alt：在图片不能正常加载时显示的提示语。
4.title：鼠标划上去显示的内容。
四，超链接
1.语法:
<a href="地址"></a>
其他属性：target：“目标窗口位置”
-self:自身窗口
-blank:新建窗口
<a href="./img/demo/bao.html" target="_blank">这是一个超链接</a>2.拨打电话：
<a href="tel:18809217401">18809217401</a>3.下载文件：
当文件为：html或者txt 浏览器直接打开
当文件为：ppt、doc，excel，pdf，exe 浏览器下载文件
<a href="./demo/01HTML初识.pptx">下载文件</a>4.锚链接：
href="" 跳转当前页面
href="#" 当前页面
<a name="top"></a>
<a href="#top">回到顶部</a>五，列表
1.无序列表
<ul>
<li>......</li>
<li>......</li>
<li>......</li>
<li>......</li>
</ul>type属性：
| 属性名称 | 属性样式 |
|---|---|
| disc | 实心圆 |
| circle | 空心圆 |
| square | 实心正方形 |
| none | 无 |
<!-- 无序列表 -->
<ul type="square">
<li>web</li>
<li>java</li>
<li>html</li>
<li>mysql</li>
<li>css</li>
</ul>运行结果：
2.有序列表
<ol>
<li>......</li>
<li>......</li>
<li>......</li>
<li>......</li>
</ol>type属性：
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| type | 1 | 以1，2，3，4来表示 |
| type | a | 以a，b，c，d来表示 |
| type | A | 以A，B，C，D来表示 |
| type | i | 以i，ii，iii来表示 |
| type | I | 以I，II，III，IV来表示 |
3.自定义列表
<dl>
<dt>...</dt>
<dd>......</dd>
<dd>......</dd>
<dd>......</dd>
<dt>...</dt>
<dd>......</dd>
<dd>......</dd>
<dd>......</dd>
</dl>
<dl>自定义列表
<dt>标题
<dd>内容
自定义列表没有type属性
六，表格
<table>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table><table>定义表格，属性：border="1"（边框）
<tr>表格均有若干行组成
<td>每行被分为若干个单元格
<th>表头单元格
<table cellspacing="0" border="1" width="600px" height="400px" bgcolor="#05BACB" align="center">
<tr bgcolor="rgb(0,10,0)">
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
<th>微信</th>
</tr>
<tr>
<td rowspan="2">1111aaa</td>
<td>1111</td>
<td colspan="3" rowspan="2">1111q</td>
</tr>
<tr>
<td>2222</td>
</tr>
<tr>
<td>3333</td>
<td>3333</td>
<td>3333</td>
<td>3333</td>
<td>3333</td>
</tr>
<tr>
<td colspan="2">4444</td>
<td>4444</td>
<td>4444</td>
<td>4444</td>
</tr>
</table>运行结果：
表格美化属性：
| 名称 | 作用 |
|---|---|
| bgcolor | 背景颜色 |
| align | 对齐方式(left,center,right) |
| cellpadding | 文字与单元格之间的距离 |
| cellspacing | 单元格与单元格之间的距离 |
| border | 边框 |
七，表单
1.表单的定义方式
<form action="./table.html" method="get">method：发送表单数据的方式，常用值get | post。
get：(1)通过url地址栏形式发送
(2)发送数据不安全
(3)发送数据量小
post：(1)通过http/https将表单数据完整发送到后台
(2)发送数据安全
(3)发送数据量理论上没有限制
(4)需要服务器环境支持
action：向何处发送表单。
2.表单元素的分类及属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| 文本输入 | text,password | text,表单中键入字母、数字等内容。password，输入密码字段。 |
| 选择 | checkboxes,radio | checkboxes,表单复选框。radio,表单单选框。 |
| 文件选择 | file | file,定义了文件选择。 |
| 按钮 | button | button,定义了普通按钮。 |
| 提交按钮 | submit，image | submit,定义了提交按钮。image,定义了图片提交按钮 |
| 重置按钮 | reset | reset,定义了重置按钮。 |
3.下拉列表
<select>
<option>...</option>
<option>...</option>
<option>...</option>
<option>...</option>
</select>4.多行文本域
<textarea rows="3" cols="20" maxlength="50" name="self"></textarea>5.隐藏域
<input type="hidden">6.只读属性
<input type="text" value="123" readonly/>7.禁用属性
<input type="text" value="123" disabled/>8.表单元素标注
<label for="username">账号</label>对表单中元素进行标注，增强鼠标可用性。
9.表单代码及其运行结果
搜索框：
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd"/>
<input type="submit" value="袁百科搜索"/>
</form>
<form action="https://search.bilibili.com/all" method="get">
<input type="text" name="keyword"/>
<input type="submit" value="袁视频搜索"/>
</form>运行结果：
文本域，按钮，单选框，复选框
<form action="./table.html" method="get">
<input type="hidden" name="userid" value="11111"/>
<label for="username">账号：</label>
<input id="username" type="text" name="username" value="123456" maxlength="6"/><br/>
<label for="pwd">密码：</label>
<input id="pwd" type="password" name="pwd"/><br/><br/>
上传文件：
<input type="file" name="files"/><br/><br/>
性别：
<input type="radio" name="gender" value="nan" />男
<input type="radio" name="gender" value="nv"/>女
<input type="radio" name="gender" value="other"/>性别不限<br/><br/>
爱好：
<input type="checkbox" name="likes" value="lanqiu"/>篮球
<input type="checkbox" name="likes" value="yumaoqiu"/>羽毛球
<input type="checkbox" name="likes" value="paiqiu"/>排球<br/><br/>
</from>运行结果：
下拉列表：
所在城市：
<select name="province">
<option value="shannxi">陕西省</option>
<option value="guangdong">广东省</option>
<option value="fujian">福建省</option>
<option value="shanxi">山西省</option>
</select>
<select name="city">
<option value="xian">西安市</option>
<option value="xianyang">咸阳市</option>
<option value="yulin">榆林市</option>
<option value="baoji">宝鸡市</option>
</select>
<select>
<option value="xincheng">新城区</option>
<option value="yanta">雁塔区</option>
<option value="weiyang">未央区</option>
<option value="gaoxin">高新区</option>
</select>
</br>运行结果：
多行文本域：
<textarea rows="3" cols="20" maxlength="50" name="self"></textarea>运行结果：
1002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
