本文详细介绍了HTML中的各类基础标签，包括标题、段落、水平线、图片、换行、超链接、列表、表格、表单及框架等标签的使用方法与注意事项，适合初学者入门学习。
day01
1.html各类标签介绍
标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
作用:告诉浏览器哪些文本是标题
注意点：
1.标题标签只是添加语义，而不是修改其样式。
2.标题标签h1-6 一共6个。
3.标题按标签中的内容是独占一行的。
4.标题标签h1最大h6最小。
5.在企业开发中 h1 只能使用一次。
段落标签
<p></p>
作用：告诉浏览器这段文字是段落。
注意：在浏览器中段落独占一行。
水平线标签
<hr>
作用：在页面中显示的水平线
注意点：在浏览器中独占一行的
图片标签
作用:在页面中插入图片格式:
<img src="" alt="" title="" height="" width="">
标签属性：src 图片的路径。
绝对路径：电脑的物理路径。
相对路径：相对自己本页面而言。
alt:图片无法显示，指定文字描述。
title：鼠标悬浮图片的，提示文字。
height:高。
width:宽。
注意：img标签不是独占一行的。
br标签
作用：换行的
注意点：如果这段描述完了换行使用P标签如果这段没有描述完想换行使用br标签，多个br可以连续使用的，使用多少次就是换多少行。
a标签
格式：
<a href="" >热点</a>
作用：从一个页面跳转到另一个页面。
属性：href：你要跳转的地址。
target: 控制新的页面打开模式。。
_blank：新打开一个页面显示。
_self：覆盖原网页打开 【默认值】。
注意点：
1.可以跳转本地页面也可以跳转外网（如 http://www.baidu.com）。
2.a标签不是独占一行的。
3.热点可以是图片也可以是文字。
4. href必须指定目标地址，不然不知道跳转到何处。
假链接
作用：在开发的时候页面并没有完全写好的情况下，避免用户体验差 一般做假链接。
格式:
<a href="#">热点</a><a href="javascript:">热点</a>
两者的区别：
1. 会自动回到顶部 【淘宝就是这么玩的 回到顶部】。
2.javascript不会回到顶部。
锚链接
作用：跳转到页面中的指定位置
格式：
1. <a href="#two">热点</a>
2. <p id="two">跳转的位置</p>
注意点：除了能跳转本页面指定的位置，还能跳转别的页面的指定为位置：
<a href="跳转页面的路径#two">热点</a>
什么是列表
作用：给一些数据添加列表语义，告诉浏览器这些数据是一个整体【列表】。
代码示例:
<html>
<head>
<title>第一个html</title>
<meta charset="utf-8">
</head>
<body>
标题标签
<h1>时志洁就是个弟弟</h1>
<h2>时志洁就是个弟弟</h2>
<h3>时志洁就是个弟弟</h3>
<h4>时志洁就是个弟弟</h4>
<h5>时志洁就是个弟弟</h5>
<h6>时志洁就是个弟弟</h6>
<h7>错误标签</h7>
<p id="miaodian">m锚点内容</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<p>
段落标签
</p>
<hr width="200">
<!--水平标签-->
<img src="../link.jpg" width="100" height="100">
**<!--
./当前目录
../上一级目录
/根目录
-->*
<*br>图片不换行加一个br
<a href="../text01.html" target="_black">百度</a>
<a href="../text01.html" target="_black">
<img src="../link.jpg" width="100" height="100"><!--图片链接-->
</a>
<a href="#">百度</a>
<a href="javascript:void(0)">百度</a>
<a href="javascript:">百度</a>
<a href="#miaodian">锚点</a>
</body>
</html>
2.html列表
1.无序列表（用的最多的）
格式:
<ul><li></li><li></li><li></li>...</ul>
属性：type
属性值：
dise 默认的为实心圆
square 实心方
circle 空心圆
注意点：
1.对整个无序列表添加样式点 必须写在ul标签里面
2.独占一行的
3.列表标签是可以嵌套的
应用场景：
- 商品列表的展示。
- 新闻的列表
- 导航条
- 快捷键： ul>li*n 一个ul下面有n个li ctrl+d 复制当前行
2.有序列表（用的比较少）
格式：<ol><li></li><li></li>...</ol>
属性：type
取值：
1 默认的以数字排序
a/A 以英文的大小写排序
i/I 以罗马文数字的大小写排序
应用场景：同上
3自定义列表
格式：<dl><dt>标题</dt><dd>内容</dd><dd>内容</dd>...<dt>标题</dt><dd>内容</dd><dd>内容</dd>...</dl>
应用场景：图文混排
代码示例
<html>
<head>
<title>列表</title>
<meta charset="utf-8">
</head>
<body>
<h4>有序列表</h4>
<ul type="cricle">
<li>html</li>
<li>html</li>
<li>html</li>
<li>html</li>
</ul>
<h4>无序列表</h4>
<ol type="i">
<li>html</li>
<li>html</li>
<li>html</li>
<li>html</li>
</ol>
<h4>有序列表 无序列表</h4>
<ol type="i">
<li>html
<ul type="cricle">
<li>html</li>
<li>html</li>
<li>html</li>
<li>html</li>
</ul>
</li>
<li>html</li>
<li>html</li>
<li>html</li>
</ol>
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
<br>
<img src="../link.jpg" width="360" height="242" hspace="30" align="left">
<h3>
<font color="red">我是真的帅!</font>
</h3>
<ul>
<li>我是真的帅!</li>
<br>
<li>我是真的帅!</li>
<li>我是真的帅!</li>
<li>我是真的帅!</li>
<li>我是真的帅!</li>
</ul>
</body>
</html>
3、表格
什么是表格标签
用来给一堆数据添加表格的语义。
格式:
表格中的属性
border:表格中的边框 默认情况下0 取值代表边框的粗细。
cellspacing 单元格与单元格之间的间距 默认为2个像素的。
cellspadding 单元格与内容之间的距离 默认1个像素。
width: 表格的宽度 默认情况下为内容的宽度。
height:表格的高度 默认情况下为内容的高度。
align: 水平对齐的方式： left center right 默认left
在table中设置 表格在浏览器中为 居左 居中 居右
在tr中设置 当前行的内容在表格中 居左 居中 居右
在td中设置 当前列【当前单元格】的内容在表格中 居左 居中 居右
valign 垂直对齐方式 ： top middle bottom
在table中设置 无效
在tr中设置 当前行的内容在表格中 居上 居中 居下
在td中设置 当前列【当前单元格】的内容在表格中 居上 居中 居下
bgcolor 设置表格的背景颜色。
在table中设置 为整个表格添加背景颜色。
在tr中设置 为当前行添加背景。
在td中设置 为当前列【当前单元格】添加背景。
表格的结构
caption 指定表格的标题。
thead 指定表格的头。
tbody 指定表格的主体。
tfoot 指定表格的附加信息 。
合并单元格
格式：合并行 rowspan=“n” n代表合并几行。
合并列 colspan=“n” n代表合并几列。
注意点 : 写在td里面。
代码实现:
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
</head>
<body bgcolor="red">
<table>
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="商城图/header_logo1.png"></td>
<td><img src="商城图/header_text1.png"></td>
<td><img src="商城图/header_text2.png"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="商城图/1.jpg" width="1353"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="商城图/截图9.png"width="740"></td>
<td><img src="商城图/截图10.png"width="610"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="商城图/截图11.png"width="295"></td>
<td><img src="商城图/截图12.png"width="150"></td>
<td><img src="商城图/截图13.png"width="295"></td>
<td><img src="商城图/截图14.png"width="240"></td>
<td><img src="商城图/截图15.png"width="120"></td>
<td><img src="商城图/截图16.png"width="240"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="商城图/360截图20171207201824664.jpg" width="1353"></td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="商城图/截图17.png"width="1353"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
4.表单
表单元素
格式：<form>表单元素</form>
代码示例
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
<!--
form表单的两种提交方法
get:默认参数，get不安全，有字符限制
post:安全，基本上无字符限制
-->
<form action="text01.html" method="post">
<p>用户名：<input name="username" placeholder="请输入用户名"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>确认密码：<input type="password" name="repwd"></p>
<p>性别:
男<input type="radio" name="sex" value="男" checked>
女<input type="radio" name="sex" value="女"
</p>
<p>
爱好：
游泳<input type="checkbox" name="aihao" value="游泳">
游泳<input type="checkbox" name="aihao" value="游泳">
游泳<input type="checkbox" name="aihao" value="游泳">
游泳<input type="checkbox" name="aihao" value="游泳">
</p>
<p>
出生日期：
<select>
<option>一月</option>
<option>一月</option>
<option>一月</option>
<option>一月</option>
</select>
<p>
文件上传：<input type="file">
</p>
<p>
<textarea>
我好帅！
</textarea>
</p>
</p>
<p>
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<!--
submit:会直接提交表单
reset：重置，回到初始状态
button：不会提交form表单
-->
</p>
</body>
</html>
5.HTML的框架
代码示例：
<html>
<head>
<title>frammeset</title>
<meta charset="utf-8">
</head>
<frameset rows="50%,*",frameborder="0">
<frameset cols="20%,*">
<frame src="">
</frame>
<frame src="left.html">
</frame>
</frameset>
<frameset cols="20%,40%,*">
<frame src="">
</frame>
<frame name="rightFrame">
</frame>
<frame name="aaFrame">
</frame>
</frameset>
</frameset>
</html>
完整代码：
登录页面
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
<form action="表格-商城.html" target="_black" method="post">
<p>用户名：<input name="username" placeholder="请输入用户名"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</p>
</body>
</html>注册页面
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
<form action="表格-商城.html" method="post">
<p>用户名：<input name="username" placeholder="请输入用户名"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>手机号：<input type="password" name="pwd"placeholder="11位手机号"></p>
<p>
<input type="submit" value="注册">
</p>
</body>
</html>
扫一扫
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
