本文是关于HTML基础的学习总结，涵盖了段落、标题、网页标题、换行、斜体、加粗、下划线、链接、图像、表格、表单、列表、框架以及div和span等常用标签的使用方法和示例。
HTML基础学习笔记
Html基础总结
1、换段落标签
<p>xxx</p>换段落标签
效果如图：
2、标题标签，共6个级别，h1最大，h6最小
<h1>xxx</h1>
<h2>xxx</h2>
<h3>xxx</h3>
<h4>xxx</h4>
<h5>xxx</h5>
<h6>xxx</h6>
效果如图：
3、网页标题标签
<title>xxx</title>
效果如图：
4、强制换行标签
<br />
5、斜体设置标签
<i>xxx</i>
或者
<em>xxx</em>
效果如图：
6、加粗标记
<b>xxx</b>或者<strong>xxx</strong>
效果如图：
7、下划线标记
<u>xxx</u>
效果如图：
8、水平线标签
<hr/>
效果如图：
9、不换行空格标签
 ；
效果如图：
10、备案中图标标签
©
效果如图：
11、左尖括号、右尖括号标签
<； >；
效果如图：
12、预格式化标签
<pre>xxx</pre>
效果如图：
13、居中对齐标签
<center>xxx</center>
效果如图：
14、文字下标字体标记
<sub>xxx</sub>
效果如图：
15、文字上标字体标记
<sup>xxx</sup>
效果如图：
16、字体设置标记
<font size="" color="" face="">xxx</font>
效果如图：
17、设置链接颜色
link连接的颜色
alink正在点击的颜色
vlink已经访问的连接颜色
效果如图：
18、超链接的使用
<a href=“”>xxx</a>
19、图像标记
<img src=“”>xxx</a>
20、表格标签
1、<caption>的使用
2、<tr>xxx</tr>
bgcolor属性(设置背景颜色）
algin属性（设置水平方向对齐方式）
（bottom 靠底部对齐）
（top 靠顶端对齐）
（middle 居中对齐）
valign属性（设置垂直方向对齐方式）
（left 靠左对齐）
（right 靠右对齐）
（center 居中对齐）
3、<th>xxx</th>和<td>xxx</td>
4、实例效果如图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="center">前端技术阶段划分标准</h1>
<caption align="top">表格的标题</caption>
<table border="2px" cellspacing="0">
<col width="200px" />
<col width="200px" />
<col width="200px" />
<col width="200px" />
<col width="200px" />
<tr align="center">
<td></td>
<td>初级</td>
<td>中级</td>
<td>高级</td>
<td>专家</td>
</tr>
<tr align="center">
<td>标准</td>
<td>dsaasdfg</td>
<td>sdgaadsg</td>
<td>dfhsdfg</td>
<td>dsfhgsfdhsdh</td>
</tr>
<tr align="center">
<td>用户A</td>
<td>染发膏电风扇刚发的</td>
<td>东方故事帝国时代</td>
<td>的事故发生的</td>
<td>电饭锅</td>
</tr>
<tr align="center">
<td>用户B</td>
<td>电风扇感受到</td>
<td>的双方各</td>
<td>对方告诉对方</td>
<td>对方告诉对方</td>
</tr>
<tr align="center" >
<td>用户C</td>
<td>电饭锅的双方各</td>
<td>规划法规</td>
<td>规范化</td>
<td>同一合同号</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="2px" cellspacing="0">
<colgroup span="6" width="100px"/>
<colgroup span="1" width="200px"/>
<th colspan="7">个人简历</th>
</tr>
<tr height="40px" align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td>
</tr>
<tr height="40px" align="center">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
</tr>
<tr height="40px" align="center">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr height="40px" align="center">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr height="40px" align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
21、表单标签
1、表单标记<form>xxx</form>
2.文本域和密码<input>标记
3.提交、重置、普通按钮
4、单选框和复选框
5、隐藏域
当<input type=“hidden”>时，为隐藏表单域
6、多行文本域
7、菜单下拉列表域<select></select>标记
8、实例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="../003图片的使用/index.html" method="get">
<table width="600px" border="1px" cellspacing="0">
<tbody>
<tr height="40px">
<td rowspan="5" align="center" style="color: red;">总体信息</td>
<td colspan="2"></td>
</tr>
<tr height="40px" >
<td align="right">用户名：</td>
<td><input type="text" name="loginname"/></td>
</tr>
<tr height="40px">
<td align="right">密码：</td>
<td><input type="text" name="password"/></td>
</tr><tr height="40px">
<td align="right">性别：</td>
<td>
<input type="checkbox" name="男"/>男
<input type="checkbox" name="女"/>女
</td>
</tr>
<tr height="40px">
<td colspan="2" align="center">
<input type="submit" value="提交" style="width: 80px; height: 30px; background-color: #A6E22E;"/>
<input type="reset" value="重置" style="width: 80px; height: 30px; background-color: #A6E22E;"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
<p>出生年月
<select >
<option >1990</option>
<option >1991</option>
<option >1992</option>
<option >1993</option>
<option >1994</option>
</select>年
<select >
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>月
<select >
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>日
<p>个人简介<textarea rows="10" cols="50"></textarea></p>
</p>
<input type="checkbox" name='sport' value=''>打篮球
<input type="checkbox" name='sport' value=''>踢足球
<input type="checkbox" name='sport' value=''>羽毛球
22、无序列表和有序列表的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度新闻列表</title>
</head>
<body>
<h1>科技</h1>
<hr />
<ul>
<li>
<a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a>
</li>
<li>
<a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a>
</li>
<li>
<a href="http://www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a>
</li>
<li>
<a href="http://www.baidu.com" target="_blank">哦和阿US富婆sad鼓风机安利给你们</a>
</li>
<li>
<a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a>
</li>
</ul>
<ol>
<li>
<a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a>
</li>
<li>
<a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a>
</li>
<li>
<a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a>
</li>
<li>
<a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a>
</li>
<li>
<a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a>
</ol>
<ul type="disc">
<li>dafgadga</li>
<li>dafgadga</li>
<li>dafgadga</li>
</ul>
<ul type="circle">
<li>dafgadga</li>
<li>dafgadga</li>
<li>dafgadga</li>
</ul>
<ul type="square">
<li>dafgadga</li>
<li>dafgadga</li>
<li>dafgadga</li>
</ul>
</body>
</html>
23、定义型列表
24、<frameset>框架</frameset>
框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果
<html>
<head>
<title>框架</title>
<meta charset="utf-8">
</head>
<frameset rows="190px,*,190px">
<frame>
<frameset cols="20%,80%">
<frame>
<frame>
</frameset>
<frame>
</frameset>
</html>
25、div和span的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="color: gray; margin: auto; width: 500px;">
<p style="text-align: center;">
<span style="background-color: gray; color:white; font-size: 24px;">阿飞转前端了</span>
</p>
<p>
<b>安居客和数据库寒风三</b>
按时扣积分哈酸辣粉
<span style="color: aqua;">刻录机散发和激发卡死了</span>
阿克苏解放路口
</p>
<p>
雷克萨家搜房
<b>离开家梵蒂冈瑟吉欧拍摄地方见过了快速减肥的老客户近年来咖啡店</b>
来看待时间覅偶就是打了
<span style="color: red;">客服妹妹水电费</span>
拉数据覅索拉卡发你的
</p>
<p>
抗裂砂浆阿里客服及时答复您当时都干嘛哪几款
时空裂缝佳世客DNF，暗示法
卡死了积分快乐哈
克鲁赛德见覅哦啊接发来看
</p>
</div>
</body>
</html>
第一次写，请批评指正。为了效率，文中大多数实例的汉字是随机输入的，本篇博客是自己学习笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：1105810790
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
