什么是HTML?
HTML 是 HyperText Markup Language(超文本标记语言)的缩写,它是用于创建网页 的标准标记语言。HTML 使用标记标签来描述网页,由浏览器来解析,即使用 HTML 来建 立 Web 站点,通过 Web 浏览器读取 HTML 文档,并以网页的形式显示出来。
一.网页.html页面主要结构
<!-- 文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页,下面是HTML5 -->
<!DOCTYPE html>
<!-- 用来定义当前文档显示的语言,简单的来说定义为en就是英文网页,zh就是中文网页-->
<html lang="en">
<head>
<!--字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码。 -->
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
</body>
</html>
- HTML文档的后缀名必须是.html 或.htm浏览器的作用是读取HTML文档,并以网页的形式呈现出来
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元(meta)数据,如 定义网页编码格式为
-
元素描述了文档的标题 - 元素包含了可见的页面内容
二.常用基本标签
1.文本标签
1.1标题
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减,</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果刷新见。</h6>
1.2 文本
1.3 图片
<img src="图片的位置" >
关于路径:
相对路径:以引用文件所在位置为参考基础,图片相对于HTML页面的位置
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。,但是这种严禁使用,原因如下:
1)绝对路径只在当前计算机生效,若将网站转移服务器,则路径会失效
2)通过绝对路径打开图片使用的是 file 协议,但网页中使用的是 http 协议,因此会出 现跨域问题,造成图片无法显示
网络地址:使用网络上的图片链接。但是,一般不使用网络地址,原因是网络图片 可能由于各种原因被删除、转移位置,使图片无法打开
######1.4 超链接
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>//超链接标签
链接分类:
- 外部链接
- 内部链接
- 空链接::如果当时没有确定链接目标时
< a href="#"> 首页< /a >
<a href="javascript:void(0)">单此处什么也不会发生</a>
<a href="javaScript:;"><!--(死链接,不会有跳转现象发生)-->
- 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接: 点击链接,可以快速定位到页面中的某个位置。 - 锚点链接: 点击链接,可以快速定位到页面中的某个位置。
2.表格标签
<table> <!--是用于定义表格的标签-->
<tr> <!--定义表格中的行,必须嵌套在<table> </table>标签中。-->
<th></th> <!-- 表格的表头部分,加粗显示-->
<td>单元格内的文字</td> <!-- 定义表格中的单元格,必须嵌套在<tr></tr>标签中。-->
</tr>
<tr>
<td>我是第二行第一列的单元格</td>
<td>我是第二行第二列的单元格</td>
</tr>
</table>
2.1表格相关属性
2.2行和列相关属性
属性名 | 属性值 | 描述 |
---|---|---|
width/height | 像素值 | 单元格宽度/高度属性 |
align | left,center,right | 单元格内容水平对齐 |
valign | top(居上),center(居中),bottom(居下) | 单元格内容垂直对齐 |
colspan /rowspan | 合并单元格的个数 | 表格的跨行与跨列(合并单元格) |
注:1.如果border的值增大,则只有表格最外围框线增加,每个单元格上的边框并不会变化
2.colspan 属性表示跨列,当某个格跨 N 列时,其右边 N-1 个单元格需删除。
rowspan 属性表示跨行,当某个格跨 N 行时,其下方 N-1 个单元格需删除。
2.3 表格的结构化
表格的结构化就是将表格分为表头、表体、表尾三部分,这样在修改其中一部分时不会 影响到其他部分,方便对表格进行操作。 一个完整的表格通常包括以下四部分:
1)caption:表格的标题,通常出现在表格的顶部。
2)thead:定义表格表头,通常表现为标题行。
3)tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组。
4)tfoot:定义表格的脚尾,通常表现为总计行
注:表格行是从头到脚显示即不 管行代码顺序如何,即使写在了的后面,网页显示时,还是先后显示
2.4 表格的直列化
通过设置表格的直列化可以对表格的列进行分组,以便对其进行格式化
<!--第一列-->
<col style="background-color: rgb(0, 217, 255);" />
<!--后两列为一组-->
<colgroup style="background-color: yellow;">
<!--第二列-->
<col />
<!--第三列-->
<col />
</colgroup>
2.5 案例
<table border="1" cellspacing="0">
<!--第一列-->
<col style="background-color: rgb(0, 217, 255);" />
<!--后两列为一组-->
<colgroup style="background-color: yellow;">
<!--第二列-->
<col />
<!--第三列-->
<col />
</colgroup>
<thead>
<tr>
<td align="center"> 姓名</td>
<td colspan="2" align="center">学生成绩</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" align="center">张三</td>
<td align="center">java</td>
<td align="center">100</td>
</tr>
<tr>
<td align="center">c</td>
<td align="center">95</td>
</tr>
<tr>
<td rowspan="2" align="center">李四</td>
<td align="center">java</td>
<td align="center">88</td>
</tr>
<tr>
<td align="center"> c</td>
<td align="center">95</td>
</tr>
</tbody>
</table>
效果图
3.列表标签
3.1有序和无序列表
<ul>
<li></li>
<li></li>
</ul>
//最常用,没有固定的顺序,默认有小圆点(无序列表),可以通过type属性修改形状
<ol>
<li></li>
</ol>
//有先后顺序,默认有数字(有序列表)
3.2 定义列表标签
dl>
<dt>这是列表的标题</dt>
<dd>描述的第一项</dd>
<dd>描述的第二项</dd>
</dl>
4.表单标签
表单组成:提示信息,表单域,表单控件(表单元素)
4.1表单域
<form action=“url地址” method=“提交方式” name=“表单域名称”>
各种表单控件
</form>
注:method属性的值分别为get和post,具体介绍如下
(1)get 方法的特点 使用 URL(统一资源定位符)传递参数:http://服务器地址?name1=value1&name2= value2,其中“?”符号表示要进行参数传递,“?”符号后面采用“name=value”的形式传 递,多个参数之间,用“&”符号连接。URL 传递的数据量有限,只能传递少量数据。 而且使用 URL 传递参数并不安全,所有信息可在地址栏中看到,并且可以通过地址 栏随意传递其他数据。
(2)post 方法的特点 将数据封装后使用 http 请求传递,信息在地址栏中不可见,比较安全,并且传递的数据 量理论上没有限制。 综上所述,虽然 get 方法是表单提交的默认方法,但是通常采用 post 方法传递数据。
4.2 表单控件
4.2.1 input
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
< label> 标签
作用:点击区域内就可以选择
代码:< label for = "id"> < /label>
4.2.1.1 input 属性
属性值 | 描述 |
---|---|
type | type 属性表示 input 输入框的类型,它的默认值是 text |
name | name 属性表示 input 输入框的名称,一般必填。因为传递数据时,使用“name=value”的形式传递 |
value | value 属性表示 input 输入框的默认值 |
checked | checked=“checked” 默认选中 |
disabled | disabled=“disabled” 设置控件不能使用用在按钮上效果为不能单击,用在输入框上则表示不能修改。而且,如果输入框设置为 disabled,则输入框中的信息不能往后台传 |
type属性的属性值及其描述如下:
注:1.name 和 value 属性需同时存在,提交时,提交的是 value 中的属性值
2.radio 凭借 name 属性区分是否为同一组。name 相同,为同组,同组中只能选择一个
3.checked=“checked” 默认选中。radio 只能选一个,checkbox 可以选多个
4.2.1.2 input新增属性
pattern | 规定通过其检查输入值的正则表达式 |
---|---|
required | 规定输入的字段是必需的(必须填写) |
注: 刚打开页面就默认显示几个文字:可以给这些表单元素设置value 属性=“值”(文字可删除),或让 其一直显示placeholder属性=“值”
4.2.1.3 input新增输入类型
type=“range” | 定义包含一定范围内的值的数字字段 |
---|
当type=“date”时的效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/f5ddc4cdaddd42e7b606480828cda0a5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQ1lM4p2A,size_20,color_FFFFFF,t_70,g_se,x_16
5.select 下拉表单元素
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
< select> 中至少包含一对< option>
//在<option> 中定义selected =“selected " 时,当前项为默认选中项。
5.1标签属性
属性 | 说明 |
---|---|
name | 列表名,所有选项只有一个name |
multiple | multiple=“multiple”:设置 select 控件为多选,可在列表中使用 Ctrl 键+鼠标进行多选。一般不用。 |
size | size=“1”:规定下拉列表中可见选项的数目。如果 size 属性的值大于 1,但是小于列表中选项的总数目,下拉列表就会显示出滚动条,表示可以查看更多选项 |
5.2 option标签属性
属性 | 说明 |
---|---|
value | 1.当value没有值时,显示的是标签中的文字2.有value值时,显示的是value属性的值 |
title | 鼠标指上后显示的文字,与图片的 title 属性类似 |
selected | selected=“selected”:默认选中,即 select 的初始值 |
5.3 利用optgroup标签分组
用于将标签进行分组,label属性表示分组名。下面的示例就是选项分组的一个应用,在从下拉列表选择地区城市时可以根据省份、城市的不同进行分组,方便用户查找选择。<form action="form.php" method="post">
<select name="city">
<optgroup label="河南省">
<option value="1" title="郑州">郑州</option>
<option value="2" selected="selected">新乡</option>
<option value="3">驻马店</option>
</optgroup>
<optgroup label="北京市">
<option>海淀区</option>
<option>朝阳区</option>
</optgroup>
</select>
</form>
5.4表单分组
<form action="form.php" method="post">
<fieldset>
<legend>这是一个表单</legend>
<!-- 其他表单控件 -->
请输入内容:<input type="text">
<input type="submit">
</fieldset>
</form>
效果如下:
5.5 textarea文本域元素
<textarea rows="3" cols="20">
文本内容
</textarea>
//1.通过<textarea> 标签可以轻松地创建多行文本输入框。
//2.cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会使用,都是用CSS 来改变大小。
//3.readonly="readonly":设置为只读模式,不允许编辑。
//4.disable="disable":设置禁用文本域
注:除了自带属性外,还时常通过css设置其样式
1.style=“resize: none;”:设置宽高不允许拖放修改。
2.style=“overflow: hidden;”:设置当文字超出区域时,如何处理。hidden表示超出区域的文字,隐藏无法显示;scroll 设置无论文字多少,均会显示滚动条;auto 设置为自动,根据文字多少自动决定是否 显示滚动条(默认样式)
6.html5新增
6.1h5新增语义化(结构)标签
使用结构标签可以提升网页文档的可读性,并且 有利于搜索引擎优化。
- < header>:头部标签
- < nav>:导航标签
- < article>:内容标签
- < section>:定义文档某个区域
- < aside>:侧边栏标签
- < footer>:尾部
- hgroup:将整个页面或页面中一个内容区块的标题进行组合
######6.2 HTML5新增音频
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
PS:control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用 第一个支持的音频文件
目前, < audio > 元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
6.3HTML5新增视频
<video width="320" height="240" controls>
<source src="mv.mp4" type="video/mp4">
<source src="mv.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的 视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时 保留特定的空间,页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
目前, < audio > 元素支持三种音频格式文件: MP4, WebM, 和 Ogg: