文章目录
什么是HTML
HTML（Hypertext Markup Language）全称是“超文本标记语言”，通过使用标记来描述文档结构和表现形式的一种语言，由浏览器阅读网页后对网页后台代码也称源码进行逐行解析，然后把解析结果在网页上进行显示组合。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与互联网上的服务器的网页文件链接。形成Internet网络中基本服务之一的—万维网。HTML是构成网页的基础，用户打开所有网页都离不开HTML，所以学习HTML是学习网页制作、网站建设的基础。
标签分类
html标签分为两类:
- 内敛标签(行内标签):不独占一行,内敛标签只能嵌套内敛标签
比如：b\i\u\s\button\span\img\a - 块级标签(行外标签):自己独占一行,可以嵌套内敛标签和某些块级标签
比如： \h系列标签\br\hr\p\div
注：其中，p标签不能嵌套p标签,也不能嵌套块级标签
HTML代码的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
整个html标签中含有head标签和body标签
head标签中的标签
<title></title> 定义网页标题
<meta/> 定义网页原信息\配置信息
body标签中的基本标签
img标签
img标签是用来放图片的标签
属性：
src='图片路径' 网络地址的绝对路径\本地相对路径 一般都用相对路径
alt:图片未加载成功时的提示信息
title:鼠标悬浮在图片上的显示信息
width\height:宽高属性，默认为图片的尺寸，为了防止图片变形，设置大小的时候可以只设置宽或高
示例:
<img src="1.jpg" alt="图片正在加载,请稍等.." title="这是一张图片" width="200" height="200">
a标签（超链接标签）
属性：
href:超链接的地址
target:是否新建窗口
target="_self" 当前窗口打开某个路径对应的html页面（默认）
target="_blank" 新建窗口打开某个路径对应的html页面
base标签
base标签就是专门用来统一的指定当前网页中的所有的超链接需要如何打开的
注：
1.base标签必须写在head标签的开始标签和结束标签之间。
2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照
a标签中指定的来执行。
<head>
...
<base target="_blank">
...
</head>
假链接
定义：点击之后不会跳转的链接称为假链接
意义：
在企业开发前期，其他页面都没有写出来，那么我么就不知道应该跳转到什么地
方， 所以就只能使用假链接来代替，当项目后期其他界面都已经完成时再将假
链接替换回真链接。
有两种假链接的方式：
1.<a href='#'>点击自动会回到页面顶部</a>
常常被用到返回顶部按钮
2.<a href='javascript:'>不会自动回到网页顶部</a>
锚点
要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的id，这样
a标签才能在当前界面中找到需要跳转到的目标位置。
示例：
<a href='#（目标位置的id号）'>跳转到目标位置</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id='id号'></h2>
注意：
1.通过a标签跳转到指定位置，是直接跳转到指定位置，没有过度动画。
2.a标签除了可以跳转到当前页面的指定位置，还可以跳转到其他界面的指定位置，
只需在href中要跳转的链接后面加上#id即可。
列表标签
作用：给一些数据添加列表语义，告诉浏览器这些数据是一个整体
无序列表
<ul type="none">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
type属性：
none：没有效果
disc:实心小圆点（默认效果）
circle:空心小圆圈
square：实心小方块
有序列表
<ol type="1" start="1">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ol>
type属性:代表前面的序号类型:比如1,Ⅰ,i,a,A
start:从第几位开始排序
注:
1.通常情况下，无序列表用得更多
2.ul标签中最好只放li标签,但是li标签内的内容可能很复杂,可以嵌套很多标签
多级列表(ul标签的嵌套)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多级列表</title>
</head>
<body>
<h1>物品清单</h1>
<ul>
<li>
<h2>蔬菜</h2>
<ul>
<li>白菜</li>
<li>萝卜</li>
<li>黄瓜</li>
</ul>
</li>
<li>
<h2>水果</h2>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
</li>
</ul>
</body>
</html>
标题列表(定义列表)标签
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
应用场景:
1.网站尾部相关信息
2.图文混排
注:
1.dl中不推荐有其他标签
2.dd和dt中可以嵌套其他标签
3.建议dl中dd和dt的比例时1:1
表格标签
完整结构
<table>
<caption>
<h2>表格的标题</h2>
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>深圳</td>
</tr>
</tbody>
<tfoot> <!--页尾信息-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
属性:
cellpadding:文字和内边框的距离
cellspacing:内边框和外边框的距离
border:边框宽度（默认为0）
width、height:宽高（默认是按照内容的尺寸来调整）
align:水平方向对齐方式 table、tr、td都适用
valign：垂直方向对齐方式 只有tr和td适用
注：
1.一对table标签代表一个表格,tr代表表格中的一行数据，td标签代表一行数据里
的一个单元格。其中在thead标签中的一行数据代表表头，在tbody中的tr代表对应
表头的一行数据，tread,tbody和tfoot可以省略。
2.caption标签用来放表格的标题，会相对于表格居中
3.thead和tfoot有默认的高度，不会随着表格高度变化
细线表格
步骤：
1.先建立好表格结构
2.在table中设置背景颜色
3.设置好每个tr的背景颜色
4.可以设置外边距来调整表格边框的粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</body>
</html>
合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合并单元格</title>
</head>
<body>
<!--水平单元格合并-->
<table bgcolor="black" width="500px" height="300px" align="center">
<tr bgcolor="white">
<td colspan="2"></td> <!--代表在水平方向把一个单元格当成两个看待-->
<!--<td></td>-->
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr>
<!--垂直单元格合并-->
<table bgcolor="black" width="500px" height="300px" align="center">
<tr bgcolor="white">
<td rowspan="2"></td> <!--代表在垂直方向把一个单元格当成两个看待-->
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<!--<td></td>-->
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
colspan:水平单元格合并
rowspan:垂直单元格合并
form表单
input标签
<input type='text' >
type属性的值：
text：单行输入文本
password：密码输入框（不显示明文）
date：日期输入框
radio：单选框
注意：
1.默认情况下单选框不会互斥，要想单选框互斥必须给每一个单选框标签都设置一个name属性，name相同的为一组
2.checked='checked'代表默认选中，可以简写为checked
checkbox：多选框 用法和单选框一样
button 普通按钮
image 图片按钮 属性src=''
submit 提交按钮 value：按钮上的文字（默认为提交）
reset 重置按钮 value：按钮上的文字（默认为重置）
#页面不会刷新，将所有输入的内容清空
hidden 隐藏输入框 一般用于悄悄提交某些数据，在页面中没有体现
file 文件选择框
还有color/email/url/number等等
form表单submit触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通的按钮
input标签的其他属性
checked='checked'默认选中
简写方式,当属性名和属性值相同时可简写为一个
readonly 只读 针对的是输入框 text password
disabled 不允许操作 所有的input都可以设置
设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,
是不能提交到后台的
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
name：名称
rows：行数 #相当于文本框高度设置
cols：列数 #相当于文本框长度设置
disabled：禁用
实例-利用表单标签制作一个简易的注册界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<body>
<form action="www.baidu.com">
<fieldset>
<legend>用户注册</legend>
<p>账号：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p>性别：
男<input type="radio" name="sex" value="man">
女<input type="radio" name="sex" value="women">
保密<input type="radio" name="sex" value="no" checked>
</p>
<p>爱好：
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="zuoyu" checked>足浴
</p>
<p>个人简介：
<textarea name="person" cols="15" rows="3">
</textarea>
</p>
<p>生日：<input type="date" name="birthday"></p>
<p>邮箱：<input type="email" name="email"></p>
<p>手机：<input type="number" name="phone"></p>
<input type="submit" value="注册">
<input type="reset" value="清空">
</fieldset>
</form>
</body>
</html>
label标签
标识标签的功能
效果:点击label标签中的文字,就能让标识的标签获得光标
方式1:for:执行对哪个标签进行标识
<label for="username">用户名</label>
<input id="username" type="text" name="username">
方式2:
<label>
密码:<input type="password" name="password">
</label>
select标签 下拉选择框
单选
<select name="city">
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">深圳</option>
</select>
多选:multiple
<select name="city" multiple>
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">深圳</option>
</select>
下拉选项的分类
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>海淀区</option>
<option>东城区</option>
</optgroup>
<optgroup label="上海">
<option>普陀区</option>
<option>徐汇区</option>
<option>嘉定区</option>
</optgroup>
</select>
marquee标签
弹幕效果：
<marquee>内容</marquee>
属性：
direction:滚动方向 left right up down
scrollamount:滚动速度 值越大越快
loop:循环次数
behavior:滚动类型 slide alternate
其他标签
- b标签：加粗
- i标签：斜体
- u标签：下划线
- s标签：删除线
在HTML5中，这四个是被废弃的标签，在开发过程中不到万不得已尽量不使用，并且现在有新的标签来替代这些标签了
b==>strong
u==>ins
i==>em
s==>del
-
p标签：段落标签，独占一行，上下有边距
-
h系列标签：h1-h6
-
br标签：换行
-
hr标签：换行且有分割线
hr标签属性: width:宽度 align:对齐方式 size:厚度 noshade:规定水平线的颜色呈现为纯色（没有阴影）
H5部分新增标签
video标签
播放视频
<video src='' autoplay></video>
属性：
src:视频的地址
autoplay:是否自动播放视频
controls:是否显示视频下面的控制条
poster:用于视频在没有播放之前的占位图片
loop:视频播放完是否循环
preload:预加载视频，如果设置了autoplay，这个属性就会失效
muted:静音
width\height:宽高
第二种写法：
<video>
<source src='' type='viedo/webm'></source>
<source src='' type='video/mp4'></source>
<source src='' type='video/ogg'></source>
</video>
为了解决浏览器的适配问题
audio标签
音频文件
<audio src=''>
</audio>
属性和video基本相同
详情和概要标签
<details>
<summary>
概要信息
</summary>
详情信息
</details>
HTML中的常用特殊字符
空格:
小于号:<
大于号:>
&符号:&
版权符号:©
...
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
