前端-HTML-第二篇
这是HTML第二篇，共三篇，如需看其他篇请点击跳转
目录
HTML 列表
1.无序列表
如上图，无序列表就是项目中没有顺序的列表，前面用圆点进行标记。
语法：
<ul> <!-- ul:代表标签的模块，范围 -->
<li>这里写内容</li> <!-- li:代表列表的每一项 -->
</ul>
其中ul和li还有type类型就是列表类型，其中，ul为全局，li为单个
<li type="circle">这里写内容</li>
实心圆：disc （默认）
空心圆：circle
正方形：square
注：无序列表项里面至少有一个li标签，可以写多个，写无序列表前必须写ul，内容要写在li中
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
<!--ul 为无序列表 type为无序列表的类型-->
<ul>
<li type="disc">iPhone12的5G有啥不一样?</li>
<li type="circle">中央政治局在学习的量子是个啥?</li>
<li type="square">北京年底计划完成5万5G基站建设</li>
<li>SpaceX再将60颗星链卫星送入太空</li>
</ul>
</body>
</html>
2.有序列表
如上图，项目中，前面带有数字，字母的，就是有序列表，有序列表是分前后顺序的
语法：
<ol>
<li>这里写内容</li>
</ol>
ol的属性 type：可以是数字、大小写字母、罗马数字
start：属性是，开始，从第几个开始，这里填写数字，不是首写字母
案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<!--ol 为有序号的列表 type是类型li为内容-->
<ol type="A" start="2">
<li> 云南男子离婚路上把夫妻扔下</li>
<li> 3500万存款"不翼而飞" 银行未</li>
<li> 轻松一刻：愚公"偷"山！小偷来回</li>
<li> 女面试官问我："我裤子拉链"</li>
</ol>
</body>
</html>
3.自定义列表
自定义列表就是可以自己定义，其中，其他频道为自定义列表的标题
语法：
<dl> <!-- 为自定义列表的范围，就是如上图框选的部分-->
<dt></dt> <!-- 为自定义列表的标题，也就是如上图的其他频道 -->
<dd></dd> <!-- 为自定义列表的内容，也就是如上图 体育、娱乐……-->
<dd></dd>
</dl>
案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>其他频道</dt>
<dd>体育</dd>
<dd>娱乐</dd>
<dd>财经</dd>
<dd>汽车</dd>
</dl>
</body>
</html>
其他
pre标签
预排版标签：<pre></pre>
就是不打乱，你自己定义的排版
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>pre预排版标签</title>
</head>
<body>
<pre>
上
左 右
下
</pre>
</body>
</html>
案例
HTML实体
在HTML中，不能使用小于号（<）和大于号（>）,因为浏览器会解析为标签，就不会显示
实体：替换特殊字符的代码
所以引入了实体这个概念
语法：
表示：空格
< 小于号
> 大于号
常用实体字符
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ± | 正负号 | ± |
案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实体</title>
</head>
<body>
<p>大小于号被解析了</p>
<p>大小于号</p>
</body>
</html>
HTML 排版标签
这两个标签没有语义，他们的显示方式不同，一个想象成盒子，另外一个只存放文字
div标签：一般用于存放图片、文字、视屏等网页内容----存放一切内容------用作盒子
span标签：一般只用于存放文字--------存放文字
<div>枫梓林</div>
<div>枫梓林的博客</div>
<span>此标签不换行</span>
<span>div换行</span>
标签的通用属性
1.id属性
id属性是标签的唯一标识，一个页面中可以有很多id属性，但是每个标签的id属性的值必须是唯一的，常用于javascript
2.class属性----类
通常用来使用class属性值给标签设置样式，样式一样的标签可以设置同样的class
3.name属性
设置标签的名字，可以有同样的名字，常用于表单中
4.style属性
设置标签样式 css
HTML 表格
表格很常用，用于排版，写日程表，课表等
1.相关标签汇总
| 标签 | 说明 |
|---|---|
<table></table> | 表格 |
<tr></tr> | 行 |
<td></td> | 单元格 |
<th></th> | 每列标题 |
<caption></caption> | 表格标题 |
基本框架
<table border="1"> <!-- border="1" 为表格的表框，必须加在talbe上 -->
<caption>课程表</caption> <!-- 为标题注意：是嵌套在table中-->
<tr> <!-- 为行就是首行，相当于整个第一行 -->
<th></th> <!-- 为单元格的首行 特点：字体加粗 -->
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第一节</td> <!--单元格 就是把行分成列-->
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td>第二节</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
</table>
2.对齐方式
（1）水平对齐
将单元格中的字体对齐，
可以对 talbe、tr、td、th，分别设置 tr为行的全局，其他为单个 对table设置align属性是将整个列表在页面中对其的方式
语法：align="center/left/right"
居中/右/左
案例
（2）垂直对齐
将单元格的字体上下左右对齐
语法：valign="top/middle/bottom"
顶部/中部/底部
3.单元格间距和填充
单元格间距（cellspacing）：单元格和单元格距离
单元格填充（cellpadding）：单元格和内容的距离
4.合并单元格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MndF2GVn-
导入：我们发现上方两个语文和两个生物是一样的我们可以像Excel一样进行合并
合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面
合并列(colspan)：把不同列合并起来，写在左边的单元格上面
取值是数值，需要合并几个单元格就写数字几就行，一旦合并了单元格，就需要将多余的单元格删掉
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格的运用</title>
</head>
<body>
<table border="1" width="500" height="300">
<caption>课程表</caption>
<tr>
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第一节</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td>第二节</td>
<td rowspan="2">语文</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
<td>数学</td>
<tr >
<td>第三节</td>
<td>英语</td>
<td>化学</td>
<td colspan="2">生物</td>
</tr>
</table>
</body>
</html>
综合案例–个人简历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人简历</title>
</head>
<body>
<table width="600" border=1 cellspacing=0 align="center">
<caption>
<h2>个人简历</h2>
</caption>
<tr align="center">
<td rowspan="5">
个<br />人<br />资<br />料
</td>
<td>姓名</td>
<td> </td>
<td>性别</td>
<td> </td>
<td>出生年月</td>
<td> </td>
<td rowspan="4">相片</td>
</tr>
<tr align="center">
<td>民族</td>
<td> </td>
<td>政治面貌</td>
<td> </td>
<td>婚姻状况</td>
<td> </td>
</tr>
<tr align="center">
<td>身高</td>
<td> </td>
<td>健康状况</td>
<td> </td>
<td>籍贯</td>
<td> </td>
</tr>
<tr align="center">
<td>联系电话</td>
<td> </td>
<td>电子邮箱</td>
<td> </td>
<td>现所在地</td>
<td> </td>
</tr>
<tr align="center">
<td>应聘职位</td>
<td colspan="6"></td>
</tr>
<tr align="center">
<td>技能</td>
<td>外语水平</td>
<td colspan="2"></td>
<td>电脑水平</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td rowspan="4">
教<br>育<br>背<br>景
</td>
<td colspan="2">起止日期</td>
<td colspan="2">毕业院校</td>
<td colspan="2">专业</td>
<td>详细情况</td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr align="center">
<td rowspan="4">
工<br>作<br>经<br>历
</td>
<td colspan="2">起止日期</td>
<td colspan="2">公司名称</td>
<td colspan="3">主要职位及职责</td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="3"> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="3"> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="3"> </td>
</tr>
<tr align="center">
<td rowspan="3">
能<br>力<br>情<br>况
</td>
<td colspan="2">个人荣誉</td>
<td colspan="5"> </td>
</tr>
<tr align="center">
<td colspan="2">兴趣特长</td>
<td colspan="5"> </td>
</tr>
<tr align="center">
<td colspan="2">个人期望</td>
<td colspan="5"> </td>
</tr>
<tr align="center">
<td rowspan="4">
自<br>我<br>评<br>价
</td>
<td colspan="7" rowspan="4"></td>
</tr>
</table>
</body>
</html>
HTML表单
表单的作用是用来收集用户输入的信息，提交到服务器，如上图昵称、密码 +86 手机号码 立即注册 勾选对话框 都是表单
表单的组成：表单域和表单元素
表单域的标签：<form></form> ：用来放置表单的元素，
表单域
标签：<form></form>
标签：<form></form>
案例：
作用：将表单元素的值收集起来，发送给服务器，form标签的action属性的值就是数据提交的地址第一次提交，没有数据，因为很多表单元素都没有name属性，服务器接收数据靠的就是表单的name属性
注意：form是一个双标签，里面包含所有需要一次性提交给服务器的表单元素
<form>
用户名：<input type="text" name="username" />
密码：<input type="password" name="password" />
<input type="submit" />
</form>
表单元素
1.文本框
特点：文本框，输入内容为明文，常用于提交用户名
语法：<input type="text">
<form>
用户名：<input type="text" name="username" maxlength="6" />
</form>
2.密码框
特点：输入内容为密文，常用于提交密码等，属性和文本框用法一样
语法：<input type="password">
案例：
<form>
密码：<input type="password" name="password">
</form>
3.单选框
只能选择一项的表单----性别选择
特点：只能选择一个，选择另外一个就不能选择另一个了（因为表单他是单独的，如果要想让他实现，点击另外一个，另外一个不选，就要，让两者建立关系，此时用name建立，并且名字要一样）无法输入的表单元素必须赋值：value“值” ，默认选中项使用chencked="checked"属性，就是在加载完页面默认选中表单
语法：<input type"radio" value="0">
案例：
<form>
<input type="radio" value="0" name="sex">男
<input type="radio" value="1" name="sex" checked="checked">女
</form>
4.复选框
可以选择多项的表单、属性与单选框一样
语法：<input type="checkbox" value="0">
案例：
<form>
<input type="checkbox" />阿里巴巴
<input type="checkbox" />百度
<input type="checkbox" />腾讯
</form>
5.文件上传
提交文件到服务器
语法：<input type="file">
6.普通按钮
可编辑的按钮
语法：<input type="button" value="可以编辑提交内容">
7.提交按钮
提交表单按钮
语法：<input type="submit">
8.重置按钮
只重置当前重置按钮表单域中的内容
语法：<input type="reset>"
9.下拉菜单
通常用于选择城市，区等
10.文本域
就是贴吧的留言框如下
语法：<textarea></textarea>
案例
<form>
<textarea cols="40" rows="10"></textarea>
</form>
综合练习-基本提交页面
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注册</title>
</head>
<body>
<form action="">
<table width="550" align="center">
<caption>
<h4>请填写域名信息（请您务必填写真实，有效和完整的域名注册信息。）</h4>
</caption>
<tr>
<td align="right">登录账号： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">密码： </td>
<td><input type="password" /></td>
</tr>
<tr>
<td align="right">性别： </td>
<td>
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td align="right">注册网址： </td>
<td><input type="text" value="www." /></td>
</tr>
<tr>
<td align="right">注册网址后缀： </td>
<td>
<input type="checkbox" name="suffix" checked="checked" />.com
<input type="checkbox" name="suffix" checked="checked" />.cn
<input type="checkbox" name="suffix" checked="checked" />.net
<input type="checkbox" name="suffix" checked="checked" />.org
</td>
</tr>
<tr>
<td align="right">域名持有者（中文）： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">域名持有者（拼音文）： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">所属区域： </td>
<td>
<select>
<option value="">中国</option>
<option value="">美国</option>
<option value="">英国</option>
<option value="">法国</option>
</select>
<select>
<option value="">-省份-</option>
<option value="">河南省</option>
<option value="">安徽省</option>
<option value="">江苏省</option>
</select>
</td>
</tr>
<tr>
<td align="right">单位所在地： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">单位负责人： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">通信地址： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">联系电话： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" />
<input type="reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
HTML框架
如上图：CSDN主页运用了很多框架来定义页面布局，在每一个框架中，放页面，可以来实现不同效果
1.使用的标签
<frameset>:框架集，rows属性设置框架分几行显示，cols属性设置框架分几列显示；
<frame>：框架，src属性是引入要显示的页面
注：框架页面中不能出现body标签可以用<noframes></noframes>
上下显示
语法：
<frameset rows="100,*,10"> <!-- 100.为第一个页面高度为100 ，* 为第二个页面高度是剩下两个页面的值，10为第三个页面高度为10-->
<frame src="引入的页面1"> <!--这个页面是存放在其他页面，也可以是百度，也可以是自己写的-->
<frame src="引入的页面2">
<frame src="引入的页面3">
</frameset>
案例1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<frameset rows="100,*,100">
<frame src="a页面.html">
<frame src="b页面.html">
<frame src="c页面.html">
</frameset><noframes></noframes>
</html>
左右显示
用法和上下显示差不多，只是把rows换成了cols
案例2
2.框架嵌套
3.框架中跳转
案例：比如我在a页面上写一个 超链接跳转到百度，我让他在c页面显示，
全画面
a页面画面
4.内嵌框架
就是在页面中嵌套的框架，框架可以改变大小
<iframe src="http://www.baidu.com" width="500" height="200" marginwidth="0" marginheight="0" frameborder="0"></iframe>
iframe属性及解释
| 属性 | 说明 |
|---|---|
src | 内嵌框架中存放的页面 |
width和height | 内嵌框架的宽度和高度 |
marginwidth | 内嵌框架中的页面距离内嵌框架的宽度 |
marginheight | 内嵌框架中的页面距离内嵌框架的高度 |
frameborder | 内嵌框架边框 |
第二篇HTML标签-及属性总结一览表
总结：
今天学习了，两个重点，表格和表单，还有列表，建议慢慢按照步骤来，不要急。
相关系列
第一篇：「前端-HTML」 HTML-标签的基本使用-第一篇
第二篇：「前端-HTML」 HTML-表格-表单-第二篇
第三篇：「前端-HTML」 HTML-H5-新特性-第三篇
创作不易，感谢支持，转载请联系我fengzilin_blog@163.com，我是枫梓林
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
