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