目录
3、链接标签
一、认识html
1.HTML的介绍
HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元 素。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是 由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。 超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超 级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”和存在媒体文件（也 就是超越了普通文本文件）。 HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而 主 体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描 述 超文本中内容的显示方式。比如，文字以什么颜色、大小显示，图片以什么尺寸、位置来显示等。这 些 描述都是用 HTML 标签来描述的。
HTML的特点：简单灵活、可扩展、平台无关性
开发工具的介绍：
Sublimie
Vscode
Hbuilder 专业前端人员使用较多
2.定义一个html文件
1、创建一个文本文档，命名为xxx.html，名称任意，但是后缀名必须是HTML
2、使用所下载的开发工具打开这个文档，在里面编写如下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>我是标题 /title>
</head>
<body>
这是我的第一个HTML页面！
</body>
</html>可以得到如下图的这样一个网页 。
以下是代码解释：
<!doctype html> /*这句是告诉浏览器我们所编写的文件类型是 html 文件，希望浏览以HTML5的 格式来进行解析*/
<html lang="en">/*指定我们文件的根节点是什么，以什么样的语言来进行显示*/
<head> /*用于定义这个文件的头部信息*/
<meta charset="utf-8"> /*用于定义页面的编码格式为 utf-8，而 meta 标签用于指定页面的
元数据信息*/
<title> /*用于指定文件的标题信息*/
<body>/*我们所有的页面在浏览器显示的区域都是定义在这个部分中的*/
二、html中常见标签
学习了如何定义一个html文件后，就要开始认识其中的标签了
1、p标签
<p>:这个标签表示一个段落
以下为代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<p>我是一个段落</p>
</body>代码结果如图：
2、br、hr标签
br标签用来换行，hr标签用来做水平分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<hr>
<p>我是一<br>个段落</p>
<hr>
</body>在网页中我们不难看出<br>标签让原本的段落在“一 ”后面进行换行，在段落的上下都多了一条分割线。
3、<a>链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com/">百度</a>/*href：用于指定链接的路径，可以是相对路径，也可以是绝对路径*/
</body>
</html>
如图所示为该代码运行页面，点击“百度”后可进行页面的跳转
4、其他常见标签
- strong 字体变粗体
- del 删除线
- span 标准行内标签，一般用来修饰文本
- pre 预格式化段落
- div 标准行内标签，一般用来布局页面
- sub 下标
- sup 上标
- hn 标题标签（共有6级，h1,h2.........h6）
- ul+li 无序列表（ul定义列表，li定义内容）
- ol+li 有序列表（ol定义列表，li定义内容）
- dl+dt+dd 有标题列表（dl定义列表，dt定义标题，dd定义内容）
三、表单的属性
我们可以利用<form>来指定一个表单，该表单可以有许多属性
name：用于指定表单的名称，方便后续提交使用
id：表单的唯一名称，一般用于提交或样式设置
action：用于定义表单数据的提交地址
method：用于指定表单数据的提交方式，有以下几个常用值
get：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数 据不能超过4K大小
post：以post方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏 中显示，理论上这种方式提交没有大小的限制
put：用于修改数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可以 不用考虑
delete：用于删除数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可 以不用考虑
在表单元素中还包含了三种元素分别为 input、 textarea、 select它们都要在form标签中才有效
1.input
（1）input语法
<input type="元素类型" name="元素名称" value=”元素值” id="客户端唯一标识">（2）type“元素类型”
元素类型 作用 text 单行文本框 password 密码框 radio 单选按钮 checkbox 多选按钮 submit 提交按钮 reset 复位按钮 button 按钮 image 图像按钮 file 文本域 （3）name"元素名称"
为元素定义元素的名称，用于表单提交是把数据提交到后端
（4）value"元素值"
代表是这个输入框所输入的值
（5）id"客户端唯一标识"
给这个输入框一个唯一值，一般是用于 JavaScript 来获取它时所使用
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="1.html">
<p>用户名：<input type="text" name="单行文本框" value="1" id=""></p>
<p>密码：<input type="password" name="密码框" value="23456" id=""></p>
<p><input type="radio" name="单选按钮" value="3" id=""></p>
<p><input type="checkbox" name="多选按钮" value="4" id=""></p>
<p><input type="submit" name="提交按钮" value="5" id=""></p>
<p><input type="reset" name="复位按钮" value="6" id=""></p>
<p><input type="image" name="图像按钮" value="8" id=""></p>
<p><input type="file" name="文本域" value="9" id=""></p>
</form>
</body>
</html>
2.textarea
（1）textarea使用语法
<textarea name="元素名称" cols="文本框宽度" rows="文本框高度">内容</textarea>（2）textarea中的属性
属性 作用 cols 指定文本域的宽度（列数） rows 指定文本域的高度（行数） name 设置多行文本框的名称
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<textarea name="文本域" cols="50" rows="5">这是一个文本域</textarea>
</form>
</body>
</html>页面展示：
3.select
（1）select使用语法
<select name="元素名称" multiple="multiple"> <option value=”值" selected>选项 1</option> <option value=”值" >选项 2</option> …/*其中选项可以有多项*/ </select>(2)select中的属性
属性 属性作用 option 用来代表下拉框子项，定义下拉框中的选项 value 用来为选项赋值 name 定义下拉框的名称 multiple 更换显示形式，用列表形式显示 selected 加在option中表示默认被选中的选项
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<select name="家乡" multiple="multiple">
<option value="beijin" selected>北京</option>
<option value="shanghai" >上海</option>
<option value="chongqing" >重庆</option>
<option value="fujian" >福建</option>
<option value="zhejiang" >浙江</option>
<option value="ningbo" >宁波</option>
<option value="guangdong" >广东</option>
</select>
</form>
</body>
</html>页面展示：
图1为下拉框显示形式 图2为列表显示形式
这三类标签是form表单中重要的组成部分在平时通过表单建立页面起重要作用
以下是form表单的简单使用例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body align="center" bgcolor="gray">
<h2>用户注册</h2>
<form action="#" method="post">
<p>
用户名：<input type="text" id="usename" name="usename">
</p>
<p>
密 码：<input type="password" name="password" required autofocus /> <!--  为空格的转义码 required autofocus译为将光标默认选择在此文本框-->
</p>
<p>
请选择您的性别：<input type="radio" value="男" name="gender" checked />男 <!--checked为默认选中-->
<input type="radio" value="女" name="gender"/>女
</p>
<p>
请选择您的爱好：
<input type="checkbox" value="football" name="fav" />足球
<input type="checkbox" value="篮球" name="fav" />篮球
<input type="checkbox" value="LOL" name="fav" />LOL
<input type="checkbox" value="韩剧" name="fav" />韩剧
<input type="checkbox" value="王者荣耀" name="fav" />王者荣耀
</p>
<p>
邮箱：<input type="email" name="email" placeholder="请输入您的邮箱" />
</p>
<p>
用户头像：<input type="file" name="avatar" id="avatar" />
</p>
<p>
您的家庭住址是：
<select name="address">
<option value="-1">请选择您的家庭地址</option>
<option value="郑州">重庆</option>
<option value="兰州" selected>西安</option>
<option value="杭州">杭州</option>
<option value="苏州">上海</option>
</select>
</p>
<p>
您的收货地址是：
<select name="address" multiple="multiple">
<option value="-1">请选择您的收货地址</option>
<option value="郑州">永川</option>
<option value="兰州" selected>江北</option>
<option value="杭州">万州</option>
<option value="苏州">渝中</option>
</select>
</p>
<p>
请留下您的建议或者意见：
<textarea name="comment" rows="10" cols="30" placeholder="您的建议或者意见"></textarea>
</p>
<p>
请您选择您喜欢的颜色：
<input type="color" name="" id="" value="" />
注册的时间：
<input type="datetime-local" name="" id="" value="" />
</p>
<p>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</p>
</body>
</html>效果展示：
四、表格标签
表格在网页制作中主要的作用是用来描述具有二维结构的数据，要定义一个表格，我们需要使用 table 标签，如果要定义一行，我们还需要使用 tr 子标签， 要在一行中定义单元格，就需要使用到 td 子标签。
例如：定义一个三行三列的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="300" border="1" cellpadding="0" cellspacing="0" align="left">
<tr>
<td>张三</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>李四</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>王五</td>
<td>5</td>
<td>6</td>
</tr>
</body>
</html>
1、table标签中的几种属性
| 属性名称 | 属性作用 |
| width | 用于指定表格的宽度，单位是像素 |
| border | 用于定义表格的边框，值的类型是数字，值越大边框越粗 |
| cellpadding | 用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离 |
| cellspecing | 用于定义单元格的外边距，即单元格与单元格之间的距离 |
| align | 用于定义表格的对齐方式 |
除了以上几种属性，表格还有几种子标签
| 标签名 | 标签作用 |
| caption | 用于定义表格的标题 |
| thead | 用于定义表头部分 |
| tbody | 用于定义表体部分 |
| tfoot | 用于定义表尾部分 |
| tr | 用于定义表格的一行 |
| th | 用于定义一个单元格，它的特点是内容加粗且居中显示 |
| td | 用于定义一个单元格 |
其中td标签中还有几个特殊属性：
1）colspan：用于定义跨列操作，也就是合并多个列
2）rowspan：用于定义跨行操作，也就是合并多个行
2、表格的布局
利用表格我们可以对页面进行布局，以下为页面布局实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影案例</title>
</head>
<body>
<h1>热门电影板块</h1>
<hr size="3" color="#C4C4C4">
<table width="900" height="25" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150"><strong>最近热门电影</strong></td>
<td width="50">热门</td>
<td width="50">最新</td>
<td width="80">豆瓣高分</td>
<td width="80">冷门佳片</td>
<td width="50">华语</td>
<td width="50">欧美</td>
<td width="50">韩国</td>
<td width="50">日本</td>
<td align="center">更多>></td>
</tr>
</table>
<hr size="3" color="#C4C4C4">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><img src="images/01.png" width="210"></td>
<td><img src="images/02.png" width="210"></td>
<td><img src="images/03.png" width="210"></td>
<td><img src="images/04.png" width="210"></td>
</tr>
<tr>
<td height="35">猜火车 8.1</td>
<td>贝尔科实验 6.0</td>
<td>加州公路巡警 6.8</td>
<td>歌声不绝 6.3</td>
</tr>
<tr>
<td><img src="images/05.png" width="210"></td>
<td><img src="images/06.png" width="210"></td>
<td><img src="images/07.png" width="210"></td>
<td><img src="images/08.png" width="210"></td>
</tr>
<tr>
<td height="35">明日的我与昨日的我</td>
<td>速度与激情8</td>
<td>极速特工</td>
<td>金刚狼3：殊死一战</td>
</tr>
</table>
</body>
</html>
页面展示
以上为html中主要学习部分，还是需要通过多多练习来提升对不同标签的熟练程度。
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
