HTML的介绍
- HTML全称超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,通常用来制作网页。
HTML的文档结构
<!DOCTYPE html> <!--文档类型声明,声明当前HTML文档的类型,它指向网络上的一个DTD文件,这个DTD文件会用来验证文档中出现的标签是否合理。-->
<html lang="en"> <!--是整个HTML文档的根标签,所有的其它标签都应该包含在这个标签内,作为这个标签的子标签。-->
<head> <!--:HTML文档的头部标签,<head>标签里的子标签可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。常见的子标签有:<title>标签、<meta>标签、<style>标签、<link>标签和<script>标签等。-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--HTML文档的主体,标签包含界面上的所有显示内容-->
</body>
</html>
HTML的标签
- HTML语言就是使用各种各样具有不同含义的标签对代码里的普通文字进行标注,让普通的文字具有自己特殊的含义。
- 标签的分类
- 单标签:hr标签,br标签,img标签,input标签
- 双标签:h系列标签,p标签,div标签,span标签
注释标签
- HTML里,使用
<!-- 注释内容 -->
的格式来表示一个注释
结构标签
- h系列标签:用来显示一个标题
- h系列标签用来显示标题,包含h1~h6系列一共六个标签。被h系列标签修饰的文字,字体会加粗,大小会发生变化。h系列标签具有特殊的语义,搜索引擎在看到这些标签时,会特别留意这些标签,所以,当你只是想把一段普通文字加粗变大,不要轻易使用h标签,使用CSS样式来完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
</body>
</html>
- p标签:用来显示一个段落
- p标签全称paragraph,用来表示段落,它是一个行内元素,一个标签独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 标签 </title>
</head>
<body>
<h1>俄媒称这位朝鲜高官访莫斯科溺水遇难</h1>
<p>据俄罗斯Telegram频道Baza报道,当地时间7月11日,一名正在莫斯科进行访问的朝鲜官员,在莫斯科近郊的大戈罗德斯科伊(Bolshoy Gorodskoy)湖泊独自游泳时失踪,其遗体隔日被寻获。</p>
<p>报道称,尽管遇难者的身份尚未经俄罗斯和朝鲜政府证实,但因这名遇难官员的外型与朝鲜金日成军事综合大学校长金琴哲相似,年龄和行程路线也吻合,多家俄媒推测死者是金琴哲的可能性相当高。</p>
<p>当地警方表示,在案发时间段,64岁的金琴哲和一名翻译到湖泊避暑,金琴哲疑似下水游泳后心脏病发作,无力游回岸边,因此溺死。</p>
</body>
</html>
- hr标签:用来显示一个分割线
- hr标签全称horizontal rule,用来显示一个分割线。这是一个单标签,开始标签和结束标签是同一个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 标签 </title>
</head>
<body>
<h1>俄媒称这位朝鲜高官访莫斯科溺水遇难</h1>
<p>据俄罗斯Telegram频道Baza报道,当地时间7月11日,一名正在莫斯科进行访问的朝鲜官员,在莫斯科近郊的大戈罗德斯科伊(Bolshoy Gorodskoy)湖泊独自游泳时失踪,其遗体隔日被寻获。</p>
<hr>
<p>报道称,尽管遇难者的身份尚未经俄罗斯和朝鲜政府证实,但因这名遇难官员的外型与朝鲜金日成军事综合大学校长金琴哲相似,年龄和行程路线也吻合,多家俄媒推测死者是金琴哲的可能性相当高。</p>
<hr>
<p>当地警方表示,在案发时间段,64岁的金琴哲和一名翻译到湖泊避暑,金琴哲疑似下水游泳后心脏病发作,无力游回岸边,因此溺死。</p>
</body>
</html>
- br标签:用来进行换行
- br标签全称barter rabbet,它是一个标签,用来对文本文字进行换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
Hello, <br>World!
</body>
</html>
- div标签:无语义,块级元素,自己独占一行,配合CSS来进行界面布局
- div标签是一个无语义的标签,它独占一行,一般结合CSS进行界面布局,俗称div+CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<style>
* {
margin:0;
padding:0;
}
div {
width:800px;
margin: 0 auto;
margin-bottom:5px;
}
.one {
height:50px;
background-color:yellow;
}
.two {
height:300px;
background-color:pink;
}
.three {
height:200px;
}
.four {
width:48%;
height:100%;
background-color:skyblue;
float:left;
}
.five {
width:48%;
height:100%;
background-color:springgreen;
float:right;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three">
<div class="four"></div>
<div class="five"></div>
</div>
</body>
</html>
- span标签:无语义,行内元素,自己不独占一行,配合CSS对指定的文字设置样式
- span是一个无语义的标签,一般结合CSS来对文字进行样式的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<style>
span {
color:blue;
}
</style>
</head>
<body>
<p>hello,<span>蓝色的World!</span>,可以使用span标签来修饰那一段内容,然后再使用CSS来设置样式</p>
</body>
</html>
超链接
- a 标签全称 anchor,我们可以称它为锚点标签,一般用来显示一个超链接。
<a href="https://ys.mihoyo.com/main/" target="">原神</a>
- href:指定a标签指向的链接地址
- target:用来表示超链接的打开方式
- _self:默认值,表示在浏览器的当前选项卡打开超链接
- _blank:在浏览器中开启一个新的选线卡打开超链接
图片标签
- img标签:用来在页面上显示一张图片
- 在HTML里使用img标签用来显示一张图片,通过修改 img 标签的 src 属性加载不同的图片资源。由于img标签也不用显示文字,所以它也是一个单标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 标签 </title>
</head>
<body>
<img src="js/WebPicture.jpg" alt="显示失败" height="1080" width="1872"/>
</body>
</html>
- src 属性用来指定图片的路径,可以使用绝对路径和相对路径,一般情况下我们会选择使用相对路径。
属性名 | 取值 | 含义 |
---|---|---|
src | url | img标签加载的图片URL地址 |
alt | 文字 | 当图片加载失败时显示的文字 |
title | 文字 | 全局属性,当鼠标悬停到图片上时显示的文字 |
width | 数字,单位像素px | 用来指定图片的宽度 |
height | 数字,单位像素px | 用来指定图片的高度 |
列表标签
列表在HTML里也是比较常见的一种表示方式,常见的列表有三种:
- 有序列表: ol标签,全称Ordered List
- 无序列表: ul标签,全称 Unordered List
- 定义列表: dl标签,全称Definition List
有序列表
- 有序列表使用 ol 标签来表示,里面每一个列表项使用 li标签(全称list item,列表项)来表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 标签 </title>
</head>
<body>
<ol>
<li>起床</li>
<li>洗漱</li>
<li>吃饭</li>
<li>出门</li>
<li>上班</li>
</ol>
</body>
</html>
-
ol标签属性介绍
- type属性,用来指定序号类型,可选值如下:
- ‘a’ 表示小写字母编号;
- ‘A’ 表示大写字母编号;
- ‘i’ 表示小写罗马数字编号;
- ‘I’ 表示大写罗马数字编号;
- ‘1’ 表示数字编号(默认值)
- start属性,这个属性值是一个整数,用来指定序号的开始值。尽管列表条目的序号可能不是数字顺序,但这个开始的顺序总是使用数字表示。比如想要元素序号从字母 “C” 开始,使用
<ol start="3">
- type属性,用来指定序号类型,可选值如下:
无序列表
- 无序列表使用ul标签来表示,和有序列表一样,无序列表里的列表项同样使用 li 标签来表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 标签 </title>
</head>
<body>
<ul>
<li>起床</li>
<li>洗漱</li>
<li>吃饭</li>
<li>出门</li>
<li>上班</li>
</ul>
</body>
</html>
- ul属性的使用
- ul同样支持type属性,用来指定无序列表前面的符号,可选值如下:
- circle:显示空心圆。
- disc:显示实心圆(默认值)
- square:显示实心的正方形
- ul同样支持type属性,用来指定无序列表前面的符号,可选值如下:
定义列表
- 定义列表使用 dl 标签来表示,用来自定义一个列表。它的使用稍微复杂一点,定义列表里的每一个列表项使用dt表示,同时,每一个dt列表项一般都会再跟一个 dd 标签对dt进行说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 标签 </title>
</head>
<body>
<dl>
<dt>CPU</dt>
<dd>中央处理器作为计算机系统的运算和控制核心,是信息处理、程序运行的最终执行单元</dd>
<dt>内存</dt>
<dd>内存是计算机中重要的部件之一,它是与CPU进行沟通的桥梁</dd>
<dt>硬盘</dt>
<dd>电脑硬盘是计算机最主要的存储设备</dd>
</dl>
</body>
</html>
表格标签
在HTML里,使用<table>
来显示一个表格,其他与表格相关的标签都需要作为table标签的子标签。table标签下的常见子标签如下:
- 标签用来表示表格的标题,一般会配合h标签使用
- 标签直接放在 table 标签下作为table标签的子标签,表示一行数据
- 标签放在 tr 标签下,作为 tr标签的子标签,表示表头
- 标签放在 tr 标签下,作为tr标签的子标签,表示单元格
- td 标签可以设置 rowspan和colspan属性,取值是一个整数,用来表示这个单元格占多行或者多列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<style>
table {
/* 让表格合并边框 */
border-collapse:collapse;
}
td,th {
/*设置边框的线宽为1px,实线,黑色*/
border:1px solid #000;
text-align:center;
padding:10px;
}
</style>
</head>
<body>
<table align="center">
<caption><h3>成绩单</h3></caption>
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>java</th>
<th>儿歌</th>
<th>体育</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>001</td>
<td>89</td>
<td>90</td>
<td>87</td>
<td>98</td>
<td>49</td>
<td>76</td>
</tr>
<tr>
<td>李四</td>
<td>002</td>
<td>87</td>
<td>54</td>
<td>65</td>
<td>89</td>
<td>98</td>
<td>89</td>
</tr>
<tr>
<td>麦兜</td>
<td>003</td>
<td>45</td>
<td>23</td>
<td>69</td>
<td>78</td>
<td>54</td>
<td>50</td>
</tr>
<tr>
<td>jerry</td>
<td>004</td>
<td>98</td>
<td rowspan="2">99</td>
<td>95</td>
<td>100</td>
<td>45</td>
<td>87</td>
</tr>
<tr>
<td>henry</td>
<td>005</td>
<td>97</td>
<td>90</td>
<td>98</td>
<td>80</td>
<td>89</td>
</tr>
<tr>
<td>merry</td>
<td>006</td>
<td>97</td>
<td colspan="2">89</td>
<td>95</td>
<td>87</td>
<td>89</td>
</tr>
<tr>
<td>tony</td>
<td>007</td>
<td>87</td>
<td>54</td>
<td>65</td>
<td>89</td>
<td>98</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">平均分</td>
<td>88</td>
<td>80</td>
<td>89</td>
<td>85</td>
<td>76</td>
<td>79</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单标签
当需要向服务器提交数据时,我们一般会选择使用form表单来实现数据的提交:
<form>
标签用来表示一个需要向服务器提交的数据表单,在这个form表单的子标签里,需要实现让用户 输入、单选、多选(input标签),下拉选择(select标签),点击(button标签或者input标签),输入大段文字(textarea标签)等操作
form标签的使用
- form标签用来向服务器提交数据,所有需要被提交给服务器的数据,都可以放在form标签里,当点击form表单里的提交按钮时,会将form表单里用户输入的所有数据都提交给指定的服务器来处理
<form action="https://www.mihoyo.com/" method="post">
<!-- 在这里放入input/select/textarea等子标签,用来让用户输入内容 -->
</form>
- 常见的属性如下:
属性名 | 取值 | 含义 |
---|---|---|
action | url | 表示当点击提交按钮时,form表单里的数据要提交到的服务器地址 |
method | get或post | 表示向服务器提交数据时的方式,支持get和post提交,默认提交方式是get |
select标签的使用
- select标签用来在form表单里显示一个下拉选择框,待选项使用 option
<!-- 需要给select标签添加 name 属性,当提交给服务器时name属性的值会作为key传递给服务器 -->
<select name="province">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="zhejiang">浙江</option>
<!--
option标签作为select标签的子标签,表示每个下拉选项
value 属性的对应的值在提交给服务器时,会作为 value 传递给服务器
selected 属性用来将某个待选项设置为默认选中
-->
<option value="jiangsu" selected="selected">江苏</option>
<option value="anhui">安徽</option>
</select>
input标签
- input标签是最常用的标签之一,经常出现在form表单里,让用户在页面上输入数据。根据type属性值的不同,input标签在界面上可以显示为一个普通的文本输入框,也可以是一个单选框、复选框等样式。
- 常见属性如下:
属性名 | 取值 | 含义 |
---|---|---|
type | text | 默认值,显示一个普通的文本输入框 |
type | button | 显示一个普通按钮 |
type | submit | 显示一个提交按钮,点击时,会提交所在 form 表单里的数据 |
type | image | 根据 src 属性指定的图片路径,加载显示一张图片,作为提交按钮 |
type | reset | 显示一个重置按钮,点击时,会重置所在 form 表单里的数据 |
type | radio | 显示一个单选框,多个相关联的单选框 name 属性值要一样,否则无法实现多选 |
type | checkbox | 显示一个复选框 |
type | file | 显示一个文件按钮,点击时可以选择电脑上的文件 |
type | password | 显示一个密码输入框,当用户输入时,会显示成为密文 |
type | number | 显示一个输入框,用户只能输入数字、正负号和字母 e,其他非数字无法输入 |
type | email | 显示一个文本输入框,用户输入的内容要符合电子邮箱地址,否则点击提交按钮时会出现错误提示,无法提交数据 |
type | tel | 控制用户输入手机号,当用户使用手机访问网页,点击文本框时,会弹出拨号键盘 |
name | 任意文本 | 设置 input 的名称,当提交给服务器时,会作为 key 提交 |
value | 任意文本 | 当提交给服务器时,会作为 value 提交。当 input 为文本输入框时,设置文本输入框上的内容;当 input 为按钮时,用来设置按钮上的显示文字 |
checked | checkeck 或者不设置 | 当 type 为 radio 或者 checkbox 时,用来设置默认选中 |
autofocus | autofocus 或者不设置 | 设置当打开页面时,文本输入框是否自动获取焦点 |
autocomplete | autocomplete 或者不设置 | 设置是否自动补全,注意,只有 input 标签设置了 name 属性以后,autocomplete 才有效 |
required | required 或不设置 | 表示该输入框必须要填写,否则无法提交 |
readonly | readonly 或不设置 | 表示该输入框里的数据不可修改 |
disabled | disabled 或不设置 | 表示禁用文本输入框,多用于按钮 |
max/min | 数字 | 当 type 为 number 时,用来设置最大值和最小值区间 |
placeholder | 任意文本 | 当 input 的类型为输入框时,用来在输入框中显示提示信息 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com">
<span>我是</span>
<input type="radio" name="gender" id="nan" value="male"> <label for="nan">男</label>
<input type="radio" name="gender" id="nv" value="female" checked> <label for="nv">女</label> <br>
<span>省份</span>
<select name="province" id="">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="zhejiang">浙江</option>
<option value="jiangsu" selected="selected">江苏</option>
<option value="anhui">安徽</option>
</select><br>
<span>兴趣爱好</span>
<!-- type="checkbox" 表示的是一个复选框 -->
<input type="checkbox" name="hobbies" value="basketball" id="basketball"> <label for="basketball">篮球</label>
<input type="checkbox" name="hobbies" value="football" id="football"> <label for="football">足球</label>
<input type="checkbox" name="hobbies" value="volleyball" id="volleyball" checked> <label for="volleyball">排球</label>
<input type="checkbox" name="hobbies" value="pingpong" id="pingpong" checked> <label for="pingpong">乒乓球</label>
<br>
<span>年龄:</span>
<input type="number" name="age" max="80" min="18" value="20"><br>
<span>手机号:</span>
<input type="tel" name="phone" autofocus autocomplete="off"><br>
<span>密码</span>
<input type="password" name="pwd" placeholder="请输入密码"><br>
<span>姓名:</span>
<input type="text" name="username" required><br>
<span>自动分配的id</span>
<input type="text" value="user01" name="user_id" readonly><br>
<input type="file"><br>
<input type="hidden"><br>
<span>邮箱</span>
<input type="email"><br>
<input type="color"><br>
<span>出生日期</span>
<input type="date"><br>
<input type="search" placeholder="请输入你要搜索的内容"><br>
<!-- reset用来重置form表单里的内容 -->
<input type="reset" value="重置" disabled><br>
<input type="submit" value="点击注册">
</form>
</body>
</html>