HTML是什么?
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
HTML 由各种标签组成,运行在浏览器上,由浏览器来解析,告诉浏览器如何显示页面
HTML的作用是什么?
版本
W3C:万维网联盟(指定web相关的规范和标准的组织)HTML就是W3C制定的标准
后缀名
HTML基本结构
html标签是由尖括号包围的关键词,如,通常都是成对出现的
HTML 实例
DOCTYPE html> //声明为 HTML5 文档
<html> //元素是 HTML 页面的根元素
<head> //元素包含了文档的元(meta)数据,文档类型,文章标题。如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<meta charset="utf-8">
<title>百度(baidu.com)title>
head>
<body> //元素包含了可见的页面内容
<h1>一个标题h1>
<p>一个段落。p>
body>
html>
注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。浏览器不会直接显示HTML标签,而是使用标签解释网页的内容
2.1标签的组成
一个完整的HTML标签组成
<标签名 属性名=“属性值”>内容标签名>
2.2标签分类
根据标签是否关闭,分为:关闭型,非关闭型
关闭型,有结束标签成对出现
<title>title>
<body>body>
非关闭型:没有结束标签
<meta>
<br>
<hr>
根据标签是否独占一行,分为块级标签,行级标签
<h1>h1>
<hr>
<span>span>
3.1注释
注释在浏览器不会显示,是用来标注解释的,但是通过查看源代码可以看到.
3.2实体字符
也称为特殊字符,用于显示一些特殊符号,如< > & 空格等
常用实体字符
< < 小于号
> > 大于号
&et; = 等于号
空格 对于连续的空白字符(包括空格,缩进,换行等)在浏览器中只会显示一个空格
& 与
这样才能在页面上显示书名号,否则浏览器会认为一对尖括号是一个标签
" "" 双引号
© © 版权符号
® ® 注册符号
注:实体字符名称区分大小写
4.1 pre格式化文本标签,保留编码时的文本格式(比较常用)
<pre>
季布,
学习html
pre>
<body>
<p>一份比亚迪(002594.SZ)的《电池价格上调联络函》于10月26日晨间在市场上传开。p>
<p>受该传闻拉动,比亚迪当日股价高开达到330.50元,涨幅超过4%。对于电池涨价传闻,比亚迪内部人士接受第一财经记者采访时表示,正在核实中p>
<p>比亚迪电池外供的汽车品牌包括红旗等。记者就此向红旗内部人士求证,对方对此不予置评。p>
body>
4.3 div标签 常被用做容器来使用,分区标签,一般用来进行页面的布局,很常用
<div>导航div>
<div>正文div>
<div>版权div>
直接这样写看不出任何效果,其实我们可以给导航或者正文设置长宽高以及样式
<div style='width:400px;height:100px'>导航div>
<div>正文div>
<div>版权div>
4.4 span 范围标签 默认没有任何效果,一般用来设置行内的特殊样式(比如说这一行有一段文字是特殊的内容我想给它加特殊的样式),很常用
<body>
我的名字是<span style="font-size:40px">季布span>
body>
4.5 ol,li是有序列表
<body>
<h1>英雄h1>
<ol type="1">
<li>赵云li>
<li>李白li>
<li>露娜li>
<li>荆轲li>
ol>
body>
默认是通过阿拉伯数字进行排序从1开始,可以通过属性type进行修改
<body>
<h1>英雄h1>
<ol type="A" start='3'>
<li>赵云li>
<li>李白li>
<li>露娜li>
<li>荆轲li>
ol>
body>
4.6 ol,li是无序列表
<body>
<h1>英雄h1>
<ul>
<li>赵云li>
<li>李白li>
<li>露娜li>
<li>荆轲li>
ol>
body>
4.7 d,dt,dd 定义列表,对术语,图片进行描述
<body>
<h1>英雄解释h1>
<dl>
<dt>赵云dt>
<dd>王者荣耀英雄,属于刺客dd>
<dd>打野dd>
<dd>技能带惩戒dd>
<dt>HTMLdt>
<dd>是一种用来制作网页的标记语言dd>
<dd>目前正在学dd>
dl>
body>
效果是有一定的缩进,可以搭配css进行修饰
4.8 hr 水平线标签 块级标签 独占一行
常用属性:
<body>
<h1>英雄解释h1>
<div style="width:600px;height:300px;background: #cccccc;">
<hr color="red" width="50%" align='left'>
div>
body>
div中嵌套hr hr的宽度是div的50%
4.9 image 图像标签
<body>
<img src="图片路径" alt="图片加载失败...">
body>
src :指定图片的路径(来源)
alt:图片显示不出来时的提示信息
title: title=“鼠标悬停在图片上的提示信息”
width/height:设置图片的宽和高
4.10 i 倾斜标签
字体倾斜
<body>
赵<i>云i>
body>
4.11 em 强调标签
在浏览器显示的效果和 4.10 i标签一样,但是意义不一样,i是单纯字体倾斜,em是对内容进行强调
4.12 address 地址标签 效果也是标签包含的部分字体倾斜
需要注意的是这是一个块级标签,独占一行
4.13 b strong 加粗标签 都是将标签包含的内容进行加粗
4.14 del 删除标签
<body>
原价<del>198del>元,优惠价<span style="font-size: 40px;color: red;">99span>元
body>
<body>
季节:<ins>冬天ins>
body>
4.16 sub 上标和下标
<body>
水的分子表达式:H<sub>2sub>O
body>
4.17 abbr 提示信息标签
<body>
<abbr title="这是提示信息!">HTMLLabbr>
body>
4.18 small bit 调节字体大小的标签
字体的大小是相较于当前字的大小
5.1 meta 定义网页的摘要信息,如编码格式,关键字,作者等
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> //设置编码的格式
<meta name="keywords" ,content='游戏,开发,前端'> //设置关键字,就是能被搜索引擎用关键字进行搜索,多个关键字以逗号分割
<meta name='description' ,content='游戏,开发,前端'> //也是为了搜索引擎便于搜索到
<meta name='auther'> //设置作者
<meta http-equiv="refresh" content="2,url=https://www.baidu.com"> //用于页面的刷新跳转
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
HTML
body>
html>
5.2 title 定义网页的标题
5.3 style 定义内部的样式
5.4 script 定义或引用脚本
5.5 base 定义基础路径
图片默认会从基础路径中查找相应的图片
<base href='images/'>
<img src='heihei.gif'>
浏览器读取编写代码进行翻译以图形的方式进行展示,这个过程叫渲染。浏览器渲染和编写的的代码不一样。标签是不能随意嵌套的
使用超链接可以从一个页面跳转倒另一个页面,实现页面的导航
超链接分为三种类型
7.1 使用a标签创建超链接
语法:
<a href="链接地址" target="链接打开地址">链接文本或图像a>
href:链接地址/路径
target:链接打开的位置 _self(当前,自身) _blank(在空白的窗口打开,新的窗口)
路径分类:
1)相对路径:相对于当前文件的路径,换句话说绝对路径之外的路径都是相对路径,不是以根开始的路径
绝对路径:
2)以根开始的路径 如:C:\dev\Git https://www.baidu.com
7.2 锚链接
点击链接后跳转到指定位置
锚链接的分类:
7.2.1页面内的锚链接
步骤:
1.定义锚点(标记)
<a name="锚点名称">目标位置a>
2.链接锚点
<a href="锚点名称">a>
7.2.2页面间的锚链接
单独创建一个页面存放锚点,点击锚点可以链接到另一个页面的内容
<a href="目标页面#锚点名称">链接文本a>
7.2.3 功能性链接
进行图片,视频等下载
<a href="images/haha.gif">点击此处下载图片a>
<a "mail_to:[email protected]">联系我们a> 可调用发送邮件的接口
<body>
<table>
<tr>
<td>hellotd>
<td>hellotd>
<td>hellotd>
tr>
<tr>
<td>hellotd>
<td>hellotd>
<td>hellotd>
tr>
table>
body>
规则的行列结构,每个表格由若干个行组成,每行由若干个单元格组成
8.1 table 标签 用来定义表格
常用属性(table属性针对的是整个表格)
8.2 tr标签
用来定义表格的行
常用属性(针对的是某一行,单独行的设置会覆盖table属性的设置);
8.3 td标签
定义单元格
属性同上
这里需要注意的是:table 里面只能放tr 不能直接放td或者其它内容
8.4 合并单元格
表格的跨行跨列
两个属性:
rowspan
设置单元格所跨的行数,如rowspan=2,表示跨两行
colspan
设置单元格所跨越的列数 如clospan=4,表示跨四列
步骤:
1.在跨越的单元格中设置rowspan/colspan 属性
2.将被跨越的单元格删除
<body>
<table border="1" width="500px" height="300px" >
<tr>
<td colspan="3">hellotd>
tr>
<tr>
<td>hellotd>
<td>hellotd>
<td>hellotd>
tr>
table>
body>
8.5 表格的高级标签
8.5.1 caption标签
表格的标签
<table border="1" width="300px" height="200px" align="center">
<caption>
<h2>学生信息表h2>
caption>
<tr>
<td>学号td>
<td>姓名td>
<td>年龄td>
tr>
<tr>
<td>01td>
<td>张三td>
<td>25td>
tr>
<tr>
<td>02td>
<td>李四td>
<td>20td>
<tr>
<td>总人数td>
<td colspan="2">2td>
tr>
tr>
table>
8.5.2 thead标签
表格的头部
<table border="1" width="300px" height="200px" align="center">
<caption>
<h2>学生信息表h2>
caption>
<thead>
<tr>
<td>学号td>
<td>姓名td>
<td>年龄td>
tr>
thead>
<tr>
<td>01td>
<td>张三td>
<td>25td>
tr>
<tr>
<td>02td>
<td>李四td>
<td>20td>
<tr>
<td>总人数td>
<td colspan="2">2td>
tr>
tr>
table>
8.5.3 th标签
表格的头部标题
一般用在thead中,设置头部的标题,替代td标签(与td标签的区别是th会加粗)
<table border="1" width="300px" height="200px" align="center">
<caption>
<h2>学生信息表h2>
caption>
<thead>
<tr>
<th>学号th>
<th>姓名th>
<th>年龄th>
tr>
thead>
<tr>
<td>01td>
<td>张三td>
<td>25td>
tr>
<tr>
<td>02td>
<td>李四td>
<td>20td>
<tr>
<td>总人数td>
<td colspan="2">2td>
tr>
tr>
table>
8.5.4 tbody标签
表格的主题部分
<table border="1" width="300px" height="200px" align="center">
<caption>
<h2>学生信息表h2>
caption>
<thead>
<tr>
<th>学号th>
<th>姓名th>
<th>年龄th>
tr>
thead>
<tbody bgcolor='red'>
<tr>
<td>01td>
<td>张三td>
<td>25td>
tr>
<tr>
<td>02td>
<td>李四td>
<td>20td>
tbody>
<tr>
<td>总人数td>
<td colspan="2">2td>
tr>
tr>
table>
<table border="1" width="300px" height="200px" align="center">
<caption>
<h2>学生信息表h2>
caption>
<thead>
<tr>
<th>学号th>
<th>姓名th>
<th>年龄th>
tr>
thead>
<tbody bgcolor='red'>
<tr>
<td>01td>
<td>张三td>
<td>25td>
tr>
<tr>
<td>02td>
<td>李四td>
<td>20td>
tr>
tbody>
<tfoot bgcolor="yellow">
<tr>
<td>总人数td>
<td colspan="2">2td>
tr>
tfoot>
table>
表单是一个包含若干表单元素的区域,用于收集用户输入的信息 如文本框,密码框,单选按钮,下拉列表
表单语法
<form action="表单提交的地址">多个表单元素form>
常用属性:
9.1 表单元素
大多数表单都是使用input标签来定义的,通过设置属性type来定义不同的表单元素
表单元素类型 | 含义 | 说明 |
---|---|---|
text | 文本框 | 默认就是text |
password | 密码框 | 以点隐藏,为了安全 |
radio | 单选按钮 | 只能选择其中的一个 |
checkbox | 复选框 | 同时选中多个 |
submit | 提交按钮 | 提交表单数据 |
reset | 重置按钮 | 将表单数据恢复到初始值 |
image | 图片按钮 | 可以使用图片作为按钮也具有提交的功能 |
button | 普通按钮 | |
file | 文件 | 选择要上传的文件 |
hidden | 隐藏域 | 页面上不显示,但是里面的数据会被提交,可以用来存储数据 |
单行文本框
常用属性:
单选按钮
常用属性
<body>
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
body>
表单元素要提交需要满足两个条件 1.有name属性 2.非disabled
复选框
常用属性和单选按钮的属性差不多
<body>
<input type="checkbox" value="eat">吃饭
<input type="checkbox" value="sleep">睡觉
<input type="checkbox" value="play">玩
body>
<body>
<input type="submit" value="注册">
<input type="reset" value="重置">
body>
文件选择器
常用属性
name 名称
.accept 设置可选文件的类型,用来限制上传文件的类型
使用MIME格式字符串限制上传文件的类型
纯文本 text/plain text/html text/xml
图像 image/jpeg image/png
<input type="file" name="head" accept="image.jpeg">
hidden 属性
<input type="hidden" name="id" value="1">
9.2 特殊表单元素
表单元素 | 含义 | 说明 |
---|---|---|
select | 下拉列表 | |
option | 列表选项 | |
optgroup | 选项组 | 用来对option进行分组 |
textarea | 文本域/多行文本框 | 创建多行文本框 |
下拉列表
select 常用属性
option 常用属性
<form action="">
学历:
<select name="degree" size="2">
<option value="0">请选择</option>
<option value="zhuanke">专科</option>
<option value="benke">本科</option>
<option value="yanjiusheng">研究生</option>
</select>
<br>
<input type="submit">
</form>
9.3 textarea文本域
常用属性:
<form action="">
<textarea name="v-test" id="" cols="30" rows="10" readonly>
遵守
协议
textarea>
form>
9.4 label 标签
为表单元素提供标签,当选中label标签的文本内容时将标点切换到与之关联的表单元素
常用属性
注;几乎所有的HTML标签都有id属性,且id值必须是唯一的
<form>
<label for="username">
用户名:label><input type="text" name="username" id="username">
<label for="email">邮箱:label><input type="email" id="email">
form>
9.5 button标签
也表示按钮,与input标签按钮类似
<button>按钮文本或图像button>
<button type="button">提交按钮button>
<button type="reset">提交按钮button>
常用属性
9.6 fieldset 和 legend
<form>
<fieldset>
<legend>
院校信息
legend>
学号: <input type="text" name="stuID"><br>
学校: <input type="text" name="stuschool"><br>
专业: <input type="text" name="stumajor"><br>
fieldset>
form>
iframe 可以在一个页面中引入另一个页面,实现复用
语法
<iframe src="" name="hello">iframe>
<a href="链接地址" target="hello">链接文本或图像a>
常用属性
<ul>
<iframe src="top.html" frameborder="0" width="100" height="150">iframe>
<h2>主题部分h2>
<iframe src="foot.html" frameborder="0">iframe>
ul>
body>
在框架中打开链接
<body>
<iframe src="top.html" width="100px" height="100px"></iframe><br>
<h2>正文部分</h2><br>
<a href="01.html">打开01.html</a><br>
<a href="02.html">打开02.html</a><br>
<iframe src="foot.html" width="100px" height="100px"></iframe>
</body>
<body>
<iframe src="top.html" width="100px" height="100px" name="nav"></iframe><br>
<h2>正文部分</h2><br>
<a href="01.html" target="hello">打开01.html</a><br>
<a href="02.html" target="hello">打开02.html</a><br>
<iframe src="foot.html" width="300px" height="300px" name="hello"></iframe>
</body>
现在在底部的框里打开链接内容,让指定的超链接在指定的位置打开
W3C 2014.10发布了HTML5标准
11.1结构相关标签
11.2 mark 标签
标注,用来突出文本,默认为黄色
11.3 time 标签
定义日期和时间,便于搜索引擎的查找
11.4 details 和summary
默认显示summary内容,点击后显示details中内容
<details>
<summary>HTML简介summary>
<p>HTML是网页标记语言p>
<p>HTML包含文本,图像p>
details>
11.5 meter标签
计数仪,表示量度
常用属性:
11.6 email标签
用来接收邮箱地址的,有校验功能格式不正确会提示
11.7 url标签
接收url,也会有校验的功能,需要注意的是要写完整url包含http协议
11.9 number/range
接收数字,不允许输入数字以外的字符
也可以给输入的数字限定范文
11.10 data日期
11.13 新增表单元素属性
按钮在表单外面通过form关联可以实现提交操作