HTML简介及常用标签功能示例
文末附文中所有代码的工程包链接，如有需要，欢迎自取。
HTML简介
HTML即超文本标记语言
超文本：超链接。
标记：即标签，每个标签都有固定的含义。通常分为开始标签和结束标签，大部分标签成对出现，个别标签没有结束标签。
常见的HMTL页面分为三个部分：
声明部分：声明页面中的编写标准采用的是什么
head部分：这部分在页面上看不到，作用是声明一些额外的页面信息，这部分信息可以在服务端获取到
body部分：这部分是在浏览器中显示的内容
HTML中的注释写法
//可以单行也可以多行
<!-- 这是注释 -->
<!-- 多行
注释
写法-->
常用标签及功能示例
1.排版标签
1.排版标签：<p>段落标签 单独占据一行
align：对齐方式 left center right
<br>换行标签
<hr>线段标签
color：颜色
width：长度 两种写法
相对写法就是%，占据浏览器宽度的%
绝对写法就是指定长度是多少像素px
size：粗细
align：对齐方式 left center right
noshade：阴影
<pre>预格式化标签，浏览器不会忽略空格和空行
<div>块级标签，换行
align:对齐方式 left center right
<span>块级标签，不换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p align="center">
aaaaaaa<br>aaaaaa<hr color="blue" width="500px" size="2" align="center" noshade="noshade">
</p>
<pre>aaaaa
aaaaaaaaaaaa
aaaaaaaaaaa aaaaaaa
aaaaaaaaaaaaa
aaaaaaaaaaa</pre>
<div align="right">aaa</div>
<div align="right">aaa</div>
<span>aaa</span>
<span>aaa</span>
</body>
</html>
上面代码的在浏览器中的运行结果
2.字体标签
<h1>...<h6>规定字体大小
align:
<font>字体标签(ht5中已废除，不推荐使用)
color：颜色
三种写法：英文单词，#加6位16进制数字，rgb(int,int,int){int在0到255之间}
size：大小
face：字体类型
<b>,<strong>：粗体
<i>:斜体
<u>:下划线
<s>:中划线/删除线。
<sub>:下标
<sup>:上标
 ；空格
&取地址符用于各种特殊符号的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>大橘</h1>
<h2>大橘</h2>
<h3>大橘</h3>
<h4>大橘</h4>
<h5>大橘</h5>
<h6>大橘</h6>
<font color="red" size="4" face="华文彩云">布偶</font>
<br>企鹅
<b>企鹅</b>
<strong>企鹅</strong>
<i>企鹅</i>
<u>企鹅</u>
<s>企鹅</s>
<br>
CuSO<sub>4<br>
5<sup>2
<p>aaaaaa aaaaaaaaaaaaaaa</p>
</body>
</html>
上面代码的在浏览器中的运行结果
3.图片标签
<img>
src：指定图片路径，相对路径是相对于当前页面的路径，绝对路径从盘符开始的路径或网络路径
border：边框
alt：当图片不存在时用文字代替显示
width：宽度
height：高度
title：提示性文本，公有属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/a.jpg" border="5" alt="这是一张图片" width="500" height="500" title="壁纸"/>
<img src="" border="5" alt="这是一张图片" width="1920" height="1080" title="壁纸"/>
</body>
</html>
上面代码的在浏览器中的运行结果
4.超链接标签
<a>:超链接标签
href：点击链接去什么地方。
target：目标，用来指定如如何显示目标页面。
_seif(默认值)：在当前浏览器中显示目标页面
_blank：打开新的浏览器页面显示目标页面
超链接分类
外部链接：链接到外部页面
锚链接：链接到本页面或另一个页面的特定的某个位置
邮件链接：链接到电子邮箱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#" name="top">
<a href="http://www.baidu.com/">百度</a><br>
<a href="http://www.baidu.com/" target="_blank">百度新开页面)</a><br>
<a href="mailto:xxxxxxxxx@qq.com">我的邮箱</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#top" >回到顶部</a>
</body>
</html>
上述代码演示了超链接与锚链接，两个超链接都会链接到百度主页，只是打开方式不同，一个是在本页面打开，一个是新打开一个网页。在页面底部的回到顶部按钮则是锚链接的应用。
5.清单标签(列表标签)
<ul>:无序列表
<li>:清单项
type：有三个值，disc(实心圆)，square(实心方形)，cricle(空心圆)
<ol>有序列表
<li>:清单项
type：1，A，a，I，i
start：从几开始
<dl>定义清单
<dt>标题
<dd>相当于<li>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul type="square">
<li>大橘</li>
<li>狸花</li>
<li>英短</li>
</ul>
<ol type="A" start="26">
<li>大橘</li>
<li>狸花</li>
<li>英短</li>
</ol>
<dl>
<dt>第一条</dt>
<dd>aaaaaaaaa</dd>
<dt>第二条</dt>
<dd>bbbbbbbbbbb</dd>
</dl>
</body>
</html>
上面代码的在浏览器中的运行结果
6.框架标签
<iframe>在浏览器中嵌入另一个页面
src：另一个页面的地址
width：宽度
height：高度
scrolling：yes/no，表示是否需要滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe src="字体标签.html" width="300" height="300" scrolling="yes">
</iframe>
</body>
</html>
上面代码的在浏览器中的运行结果
7.表格标签
<table>:表格
border：边
width：宽度
height：高度
bgcolor：背景颜色
background：背景图片(优先级高于背景色)
cellpadding：单元格的内容到边的距离
cellspacing：单元格到单元格的距离，即边的粗细
<tr>:行
bgcolor：背景颜色
<td>:单元格
<th>加粗的单元格，相当于<tb><b>内容</b></tb>（默认居中）
align：横向对齐方式 left center right
valign：纵向对齐方式 有 top middle bottom
单元格合并
rowspan：竖向合并
colspan：横向合并
<caption>：给表格加标题
<thead>
<tbody>
<tfoot>
区别：1.当写了<thead><tbody><tfoot>几个标签之后，浏览器必须按照<thead><tbody><tfoot>顺序进行解析
2.当写了上述三标签时，对于图片，网速很慢时，那么服务端传输一点显示一点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="5" width="500" height = 300 bgcolor="yellowgreen" background="img/lhy_pic1.jpg" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="chartreuse">
<td colspan="2">aaa</td>
<td bgcolor="red">34</td>
</tr>
<tr>
<td>bbb</td>
<td>21</td>
</tr>
<tr>
<th align="left" valign="top">ccc</th>
<th align="left" rowspan="2">15</th>
</tr>
</tbody>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tfoot>
<tr>
<td>合计</td>
</tr>
</tfoot>
<caption>标题</caption>
</table>
</body>
</html>
上面代码的在浏览器中的运行结果
8.表单标签：主要作用搜集信息，发送信息(向服务端)。
<form>表单标签
action：用来指定表单信息提交的目的地
method：提交的方式，浏览器默认只支持两种post和get
get和post区别：
get方式信息附加在网址后面，post方式不会附加
get方式提交的数据大小不超过1k，post方式没有限制
表单控件的标签名都是input，用type属性来区分不同的组件
三种文本框：
text：普通文本框
password：密码
hidden：隐藏框
属性：size：文本框长度，单位为字符数
maxlength：内容最大长度
value:文本框的默认显示内容
name：给控件起名字
readonly：只读
palceholder：提示文本
两种选择框：
单选框：radio
复选框：checkbox
属性：checked：默认选中
下拉框：
<select>
<option>下拉选项框
selected默认选项
多行文本框
<textarea>
cols：行数
rows：列数
四种按钮
button：普通按钮：和js进行交互
submit：提交按钮
reset：重置按钮，将页面恢复到初始状态
image：图片按钮（功能同提交按钮）
<label>:文本控件
<button>：普通按钮相当于<input tye="button">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="./接收页面.html" method="get">
用户名：<input name="name" value="ads" valplaceholder="请输入用户名:" size="50" maxlength="20"/><br>
密码：<input type="password" name="pass" /><br>
隐藏框：<input type="hidden" name="隐藏" value="隐藏"/><br>
//单选框
性别：<input type="radio" name="sex" value="man">男<input type="radio" name="sex" value="woman"checked="checked">女<br>
//复选框
爱好：<input type="checkbox" name="loves" value="basketball" />篮球
<input type="checkbox" name="loves" value="football" />足球
<input type="checkbox" name="loves" value="volleyball" checked="checked"/>排球<br />
//下拉框
学历：<select size="5" multiple="multiple">
<option value="xiaoxue" selected="selected">小学</option>
<option value="gaozhong">高中</option>
<option value="daxue">大学</option>
</select><br />
<textarea rows="5" cols="20">
</textarea>
<input type="button" value="普通按钮" onclick="alert('大家好')"/>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮" />
<input type="image" src="img/lhy_pic1.jpg" width="50" height="50" /><br />
</form>
<label onclick="alert(this.innerHTML)">aaa</label>
<label for="name">姓名</label><input id = "name" />
<button onclick="alert('不要点我')">点我</button><br>
<input type = "datetime-local" />
</body>
</html>
上面代码的在浏览器中的运行结果
9.多媒体标签
<vedio>
<marquee>跑马灯效果
direction（方向,上下左右皆可）
behavior（模式）
scrollamount（速度）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video src="img/여자친구%20(GFRIEND)%20-%20Glass%20Bead%20(JP%20ver.).mp3" controls="controls"></video>
<marquee direction="left" behavior="alternate" scrollamount="50">跑马灯</marquee>
<marquee direction="right" behavior="scroll" >跑马灯</marquee>
<marquee direction="down" behavior="slide" height="800">跑马灯</marquee>
</body>
</html>
上面代码的在浏览器中的运行结果
跑马灯为动态效果，此处无法展示，博主将工程包链接附于文尾，如有需要，可自取。
10.头标签
<title>设置页面标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>头标签</title>
</head>
<body>
</body>
</html>
上面代码的在浏览器中的运行结果
如有错误或不当之处欢迎在评论区指出，博主会及时回复及修改，下面附上工程包链接：https://pan.baidu.com/s/1jVZ8sWroCvJPl3Ya0K7cww
提取码：wuit
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
