一、什么是HTML
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。
HTML文档的后缀名
- .html
- .htm
以上两种后缀名没有区别,都可以使用。
HTML结构
HTML语言是超文本标记语言。
HTML(Hyper Text Markup Language)是一种用于创建网页的标准标记语言。
- html是由标签构成的。
- 标签名要放入<>中。
- 大部分标签成对出现,称为“双标签”,少数标签单独出现,称为“单标签”。
1.1 HTML基本结构
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
注:在浏览器的页面上使用键盘上的 F12(Fn+F12) 按键开启调试模式,就可以看到组成标签。
---------------------------------------------------------------------------------------------------------------------------------
浏览器效果:
---------------------------------------------------------------------------------------------------------------------------------
DOM树
标签之间的文件关系构成了DOM树。
DOM(Document Object Mode)文档对象模型
防止乱码问题:
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
2. HTML常见标签
2.1 注释标签:!
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
ctrl+/快捷键可快速进行注释或取消注释
2.2 标题标签:h1-h6
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
从h1到h6,数字越大字体越小。
2.3 段落标签:p
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
2.4 文字格式化
2.4.1 加粗/strong
b标签和strong标签
2.4.2 倾斜:i/em
i标签和em标签
2.4.3 下划线:u/ins
u标签和ins标签
2.4.4 删除线:s/del
s标签和del标签
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
2.5 换行标签:br
单标签、规范写法:<br/>
2.6 图片标签:img
img标签必须带src属性,来展示图片的路径。
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
img标签的其他属性:
alt :替换文本
title:提示文本,鼠标放到图片上显示的文字。
width:宽度
height:高度
border:边框
要把图片文件与HTML在同级目录中。
浏览器效果:
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
**相对路径:**以html所在位置为基准,找到图片的为位置。
- 同级路径:直接写文件名 ./
- 下级路径:image/1.jpg
- 上级路径:…/image/1.jpg
绝对路径:完整的磁盘路径或网络路径。
磁盘路径:D:\food.jpg
网络路径:https://image…
2.7 超链接:a
空链接:使用#在herf中占位。
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
外部链接href: 必须有链接地址,即跳转后的页面地址,当前页面打开链接。
---------------------------------------------------------------------------------------------------------------------------------
-
点击“百度”跳转页面
--------------------------------------------------------------------------------------------------------------------------------
内部链接target: 打开方式,在一个新的页面打开链接地址
--------------------------------------------------------------------------------------------------------------------------------
点击跳转到页面2
--------------------------------------------------------------------------------------------------------------------------------
下载链接: href对应的路径是一个文件。
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
点击文字就可以下载了
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
网页元素链接:可给图片等任何元素添加链接。
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
点击图片跳转到百度
锚点链接: 可以快速定位到页面中的某个位置。
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
2.8 表格标签
整个表格: table
行:tr
列:td
表头单元格:th,会居中加粗
表格头部区域:thead
表格主体区域:tbody
table包含tr,tr包含th或td。
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
合并单元格:
跨行合并:rowspan=“n”
跨列合并:colspan=“n”
--------------------------------------------------------------------------------------------------------------------------------
浏览器效果:
--------------------------------------------------------------------------------------------------------------------------------
2.9 列表标签
无序列表: ul li
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
有序列表: ol li
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
自定义列表:dl(总标签)dt(小标签)dd(围绕标题来说明)上面有小标题,下面有几个围绕标题展开的。
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
2.10 表单标签
表单是让用户输入信息的重要途径。
表单域:包含表单元素的区域,重点是from标签。
表单控件:输入框,提交按钮等,重点是input标签。
2.10.1 form标签:
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
各种输入控件,单行文本框,按钮,单选框,复选框。
type: button,checkbox,text,file,image,password,radio等多种类型。
name:
value:当前标签的 的默认值。
checked:默认被选中。(单选按钮和多选按钮)
maxlength:设定最大长度。(使用场景文本框,
1.文本框:<input type = "text">、
2.密码框:<input type = "password">
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
3.单选框<input type="radio" >
4.复选框<input type="checkbox">
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
2.10.2 button标签:
普通按钮,提交按钮,清空按钮:
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
选择文件:
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
lable标签:
增强用户体验,是点击按钮旁的文字时能达到和点击按钮有相同的效果。
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
2.10.3 select标签:
下拉框标签:
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
2.10.4 textarea标签:
显示多行文本:
2.10.5无语义标签:div&span
div作用:天然换行,但只占一行。
span作用:单独对某些内容进行设置,不独占一行。
补充:
特殊字符:
小于号:<
大于号:>
按位与:&