文章目录
开发工具：（Sublime、VSCode、EditPlus、PyCharm等）
open in browser
这里是VSCode用！+tab键生成的默认
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
常用标签介绍（知识从这里开始）
生成假文lorem
<!-- lorem+tab 生成一段假文 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad quisquam veniam cupiditate delectus sit?
Soluta veritatis deserunt reiciendis consequuntur non consequatur magni, eligendi, dolores, sapiente et tempore.
Dolore, officiis.</p>
<!-- 生成一个段落标签然后在标签中生成三段假文 -->
<!-- p>lorem*3 + tab -->
<p>
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab corporis voluptates dolores veniam laborum
expedita sint delectus aperiam, vitae optio a. Distinctio officia magni est possimus, quisquam doloremque
temporibus animi.</span>
<span style="color: red">Illum nobis, hic nam nostrum dolorem, fugiat pariatur error non dicta voluptatem distinctio
eaque impedit autem illo qui. Omnis illum quas fuga et unde cupiditate consequatur quisquam consectetur laboriosam
repellendus.</span>
<span>Nulla omnis unde, atque cupiditate modi quia sit fugiat. Nam provident veritatis ea iure beatae atque eius
dolor sint natus, enim eveniet reiciendis explicabo quos similique rerum tenetur! Doloremque, nostrum.</span>
</p>
1. 基本结构解析
<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html>
<!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->
<head>
<!-- 设置网页标题，显示在网页选项卡上方 -->
<title>网页标题</title>
<!-- 设置网页字符编码 -->
<meta charset="utf-8">
</head>
<!-- 网页主体部分，显示网页主要内容 -->
<body>
网页主体内容
</body>
</html><!-- 文档结束-->
2. body中常用标签
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签：
<p>段落文本</p>
- 普通文本标签：
<span>行分区标签，用于对特殊文本特殊处理</span>
<b>加粗标签</b>
<i>斜体标签</i>
<u>下划线标签</u>
<strong>强调标签，效果同b标签</strong>
<label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>
换行
<br>
线，插入一条水平分割线
<hr>
特殊字符解析转译
某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写。
别忘了复制；
别忘了复制;分号
使用 < 在页面中呈现 "<"
使用 > 在页面中呈现 ">"
使用 在页面中呈现一个空格
使用 © 在页面中呈现版权符号"©"
使用 ¥ 在页面中呈现人民币符号"￥"
容器标签
常用于页面结构划分，结合CSS实现网页布局
<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>
图片与超链接标签
- 图片标签 <img src="">：用于在网页中插入一张图片。
1. 属性 src 用于给出图片的URL，必填。
2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
4. 属性 alt 用于设置图片加载失败后的提示文本
<img src="" width="" height="" title="" alt="">
超链接标签：用户可以点击超链接实现跳转至其他页面
<a href="http://www.baidu.com">百度</a>
在另外一个窗口打开
<a href="http://www.baidu.com" target="_blank">百度</a>
3. 常用结构标签
有序列表（ordered list）
默认使用阿拉伯数字标识每条数据
<ol>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ol>
无序列表（unordered list）
默认使用实心圆点标识列表项
<ul>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ul>
列表嵌套
在已有列表中嵌套添加另一个列表，常见于下拉菜单
<ol>
<li>
西游记
<ul>
<li>孙悟空</li>
<li>孙悟空</li>
<li>孙悟空</li>
</ul>
</li>
</ol>
表格标签
- 表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下
<!-- 创建表格标签 -->
<table>
<!-- 创建行标签 -->
<tr>
<!-- 行中创建单元格以显示数据 -->
<td>姓名</td>
<td>年龄</td>
<td>班级</td>
</tr>
<tr>
<td>迪丽热巴</td>
<td>20</td>
<td>002</td>
</tr>
</table>
<!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- -->
<!-- 1，建一个两行三列的表格：table>tr*2>td*3 -->
<!-- 2，建一个实线 -->
<!-- 由于单元格之间默认有距离 所以边框看起来是空心的线 可以使用 cellspacing="0"指定单元格的间距为0 让单元格和单元格之间的边框合并 -->
<table border="1px" cellspacing="0">
单元格合并
| 单元格属性 | 作用 | 取值 |
|---|---|---|
| colspan | 跨列合并单元格 | 无单位数值 |
| rowspan | 跨行合并单元格 | 无单位数值 |
<tr>
<!-- colspan 跨列 从左向右横向合并单元格 -->
<!-- 删除当前行的多余的单元格 -->
<td colspan="3">11</td>
<!-- <td>12</td>
<td>13</td> -->
</tr>
<tr>
<td>21</td>
<!-- rowspan 跨行 从上向下纵向合并单元格 -->
<!-- 删除后面行的对应位置的单元格 -->
<td rowspan="3">22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<!-- <td>32</td> -->
<td>33</td>
</tr>
<tr>
<td>41</td>
<!-- <td>42</td> -->
<td>43</td>
</tr>
行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中
<!-- 所有的tr默认放在tbody中 -->
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>qtx</td>
<td>18</td>
<td>99</td>
</tr>
</table>
表单标签
表单使用<form></form>
| 属性名 | 取值 |
|---|---|
| action | 设置数据的提交地址 |
| method | 设置数据的提交方式，默认为get方式，可以设置为post |
| enctype | 设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"multipart/form-data" |
表单控件（重点看），最好写在div里
文本框:<input type="text">
密码框<input type="password">
<!-- name要相同才能切换 -->
单选按钮：<input name="jack" type="radio">男
<input name="jack" type="radio">女
多选按钮（复选框）<input type="checkbox">
文件上传<input type="file">
普通按钮<input type="button">
提交按钮<input type="submit">
下拉菜单<select></select>
例子：<select name="" id="">
<option value="">东城区</option>
<option value="">西城区</option>
<option value="">朝阳区</option>
</select>
其他函数用法
select 的 size属性，当size=1时，下拉变成滚动，最多滚动1
例子：<select size=1 name="" id="">
<option value="">这里是下拉项</option>
</select>
加上 multiple 直接写，不用给值，就变成下拉可以选择多个值
例子：<select multiple name="" id="">
<option value="">这里是下拉项</option>
</select>
设置默认下拉值，selected直接加在option标签内，下面设置默认下拉值为2的例子
例子：<select name="" id="">
<option value="">1</option>
<option selected value="">2</option>
<option value="">3</option>
</select>
文本域 <textarea></textarea>
| 属性名 | 取值 |
|---|---|
| type | 控件类型 |
| name | 名称，最终与值一并发送给服务器。。不写不搜集数据 |
| value | 设置输入框有个默认的值。。一般用于单选&多选，自定协议等提交给服务器 |
| placeholder | 设置输入框中的提示文本（一般不用） |
| maxlength | 设置输入框中可输入的最大字符数 |
| checked | 设置单选按钮或复选按钮的默认选中。。 自定协议时可以利用，比如足球默认都设为男性，化妆品默认设为女性 |
| selected | 设置下拉菜单的默认选中 |
<!--
表单元素 form 表单元素可以收集并向服务器提交数据
表单控件 input 让用户操作填写数据的载体
-->
<!-- URL 协议://域名:端口号/路由?查询字符串#文档片段 -->
<!-- 查询字符串 格式 key=value&key=value... -->
<!--?uname=shibw&upwd=123456 -->
<!-- method="GET" 将数据通过GET方式发送给服务器 将数据以查询字符串的方式拼接在地址栏中 -->
<!-- method="POST" 将数据放在请求主体中发送给服务器 -->
<form action="" method="POST">
<div>
<input name="uname" placeholder="请输入姓名/手机/邮箱" maxlength="5" type="text">
</div>
<div>
密码：<input name="upwd" type="password">
</div>
<!-- 必须写在form标签内部才有提交效果
1.收集所有带有name属性的标签数据
2.根据表单元素指定的提交方式和服务器地址将数据发送给服务器
-->
<input type="submit" value="登录">
</form>
扫一扫
1178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
