HTML基础知识
1.HTML语法规范
1.1 基本语法规范
<html></html> #双标签(大部分) <开始标签>:<html> </结束标签>:</html>
<br /> #单标签 (小部分)
1.2 包含关系
双标签关系可以分为两类：包含关系和并列关系。
包含关系就是：嵌套关系(父子关系)
<head>
<title></title>
</head>
并列关系：兄弟关系
<head></head>
<title></title>
2.HTML 基本结构标签
2.1 第一个HTML网页
每一个网页都会有一个基本的结构标签(骨架标签)
<html>：根标签-->页面中最大的标签 它包含所有标签
<head>: 头标签-->在head标签中必须要设置的标签使title 它与body标签同级
<title>: 文档的标题(网页的标题)-->让网页拥有一个属于自己的网页标题
<body>: 文档的主体，包含文档的所有内容。
例：
3.第三方工具的使用：
3.1 VSCode开发工具
直接去官网下载 免费开源的
4.标签语义：标签的含义/作用
根据标签的语义，在合适的地方给一个最为合适的标签，可以让页面结构更加清晰。
4.1 <!DOCTYPE html>标签：文档类型的声明标签。
告诉浏览器当前HTML的版本 并且必须写到第一行
4.2 lang语言：<html lang="en"/"zh-CN"/"fr"> :用来定义当前网页类型
en：英文网页
zh-CN:中文网页
fr:法文网页
4.3 charset字符集：<meta charset="UTF-8">
charset常用的值：
GB2312：简体中文
BIG5：繁体中文
GBK：简体中文和繁体中文
UTF-8：万国语
HTML常用标签：
4.4 标题标签：HTML提供了6个等级的网页标签(双标签) <h1>~<h6>。 重要性：h1>h2>h3>h4>h5>h6
语法规范：
<h1>我是一级标题</h1>
...
标题标签的特点：
①：标题标签的文字加粗，字号变大。
②：一个标题独占一行。
4.5 段落标签：让文字有条理的显示出来，需要进行分段显示
语法规范：
<p>我是一个段落标签</p>
标签语义：可以把HTML文档分割为若干段落
段落标签的特点：
①：文本在一个段落中会根据浏览器窗口的大小自动换行
②：段落与段落之间保有间隙
4.6 换行标签：希望文本在某一处继续换行，就需要使用换行标签<br /> (单标签：不需要结束标签)
语法规范：
<br />：相当于回车
标签语义：强制换行
换行标签的特点：
①<br />是一个单标签
②<br />标签只是一个简单的开始新的一行，就是相当于回车符
4.7 文本格式化标签：有时候需要为文字设置粗体、斜体、下划线等效果，这是就需要文本格式化标签，
使文字以特殊化的方式显示。
语法规范：
加粗标签：<strong>加粗内容</strong> 或 <b>加粗内容</b>
倾斜标签：<em>倾斜内容</em> 或 <i>倾斜内容</i>
删除线标签：<del>删除线内容</del> 或 <s>删除线内容</s>
下划线标签：<ins>下划线内容</ins> 或 <u>下划线内容</u>
标签语义：突出重要性
4.8 <div>和<span>标签：(双标签)
<div>和<span>标签是没有语义的，它们只是一个盒子，用来装内容的。
作用：可以在这个盒子容器中写入文字、图片等。
语法规范：
<div></div>
<span></span>
标签特点：
①：div标签是用来布局的，一行只能放一个div。大长盒子
②：span标签是用来布局，一行上可以放多个。小短盒子
4.9 图像标签和路径：
4.9.1 图像标签<img />(单标签)
语法规范：
<img src="图像的路径/名" alt="" title=""/>
img中的属性：
src="图像的路径/名" (必须要写)
alt="当图片显示不出来的时候，以文字方式替代图片"(替换文本)
title="鼠标放到图片上，显示文字提示信息"(提示文本)
像素属性：
width="指定图像的宽度数值" （width 薇姿）
height="指定图像的高度数值"
一般情况下只需要指定一个就行，以免造成图像压扁的情况
border="设置图像边框的粗细" （border 包得儿）
图像标签属性注意点：
①图像标签得属性可以有多个，但必须写在img后面。
②各个属性之间没有先后顺序，但用空格分割。
③属性采用键值对的格式
4.10 超链接标签:<a>点击这行文字就跳转链接</a>
<a>标签用于定义超链接，作用：从一个页面链接到另一个页面
语法规范：
<a href="跳转目标地址" target="目标窗口的弹出方式"> 点击文本或图像，跳转链接</a>
属性：href:用于指定链接目标的url地址 （必须的）
target:用于指定连接页面的打开方式。_self为默认值：在当前页面中打开；_blank:在新的窗口打开
链接的分类：
1.外部链接：去往其他外部网页的链接 :<a href="http://www.baidu.com> 这是百度的链接 </a>
2.内部链接：网站(目录文件夹)内部实现相互链接：<a href="网页的名称.html">网页内部的相互连接 </a> 不需要添加http//
3.空链接：一些网页还没有完成，可以先用空链接代替(空链接链接到的还是当前的页面)：<a href="#">这是一个空连接</a>
4.下载链接：(下载的一般是压缩包文件 .zip 或者是 .exe) :<a href="压缩包文件名.zip/.exe"
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加为超链接文件
6.锚点链接：在我点击锚点链接后，可以快速的定位到页面中的某个位置。
<a href="#id名称">链接名<a />
<h4 id="id名称"><h4 />
4.11 注释标签：注释文字，注释了的信息是不会再页面中显示的
语法格式：<!--需要注释的信息 -->
添加/取消注释的快捷键：ctrl+/
4.12 特殊字符：
空格符： ；
< ：<；
> ：>；
5.文件路径：
5.1 目录文件夹和根目录
目录文件夹：就是普通的文件夹，里面存放我们做页面所需要的相关的素材，比如html文件,图片等。一般在目录文件夹中新建一个文件夹把所有图片放到这个文件中
根目录：打开目录文件夹的第一层就是根目录
5.2 路径
页面中的图片非常多时，通会建立一个新的文件夹存放这些图像文件(images)，这时在查找图像，就需要采用相对路径或绝对路径来指定图像的位置。
相对路径：相对于HTML文件页面所在的位置
同级路径：直接输入图像名称即可 <img src="LBJ.png" />
下一级路径：/ <img src="那个文件夹下/LBJ.png" />
上一级路径：../ <img src="../LBJ.png" /> <img src="../../LBJ.png" />
绝对路径：在电脑中的具体的某一个位置 带盘符
也可以是网络上的地址 http://www.sasaa.com/
6.表格标签
6.1 表格标签的作用：用于显示、展示数据的。可以更加页面数据的可读性，使页面中数据展示的更加整洁。
6.2 表格的基本语法：
<table></table> ==>用于定义表格标签==>一个table标签就是一个表格
<tr></tr> ==>用于定义表格中的一行==>必须嵌套在<table>标签中
<td></td> ===>用于定义表格中的单元格==>必须嵌套在<tr>标签中
例如：
<table>
<tr>
<td>单元格内的文字</td>....<td>单元格内的文字</td>
</tr>
...
</table>
6.3 表头单元格标签
表头单元格位于表格的第一行，表头单元格里面的文本内容加粗居中显示。
也是为了突出重要性。
语法规范：
<th></th>==>th:table head
<td></td> :普通单元格。
<th></th> :表头单元格。
6.4 表格标签的属性(html中不常用，CSS中的才是重点):
<table 属性1 属性2...>：
align="left"/"right"/"center" 表格对齐方式 表格在页面中那侧显示。
border=""/数字 增加边框 默认为""：没有边框。数字：有边框,并且数字越大边框越粗。
cellpadding="1" (涩儿盘订) 单元格中的文字距离边框的距离 默认为1像素 像素越大距离越远。常用的像素为0
cellspacing="2" (涩儿死拼订) 单元格与单元格之间的空白距离 默认为2像素 像素越大距离越远。常用的像素为0
width="给表格设置宽度"
height="给表格设置高度"
6.5 表格结构标签：使代码结构更加清晰。
<thead></thead>
<tbody></tbody>
这两个标签必须包含在<table>标签中</table>
在表格标签中，可以将表格分为：
<thead>标签 表格的头部区域 就是相当于第一行
<tbody>标签 表格的主体区域
6.6 合并单元格
在特殊情况下，可以把多个单元格合并为一个单元格
合并单元格的方式：
①跨行合并单元格：rowspan="合并单元格的个数"
②跨列合并单元格：colspan="合并单元格的个数"
目标单元格(写合并代码)：
跨行：最上侧单元格为目标单元格 写合并代码。
跨列：最左侧单元格为目标单元格 写合并代码。
合并单元格的步骤：
①先看需求是 跨列还是跨行 合并单元格 来使用不同的代码。
②找到目标单元格 写入合并代码 <td colspan="2"></td>
③删除多余的单元格(合并后，就会有多余出来单元格)
6.7 表格的总结：
6.7.1 表格的相关标签：
<table></table> ==>整个表格的框架
<tr></tr> ==>表格中的行标签
<td></td> ==>表格中的单元格标签
<th></th> ==>表头单元格标签
<thead></thead> ==>表头区域 表的第一行区域
<tbody></tbody> ==>表的主体区域
6.7.2 表格的相关属性：表格的高宽、边框等.
<table align="left"/"right"/"center" cellpadding="单元格中的文字距离边框的距离" cellspacing="单元格与单元格之间的空白距离" border="添加边框与设置边框的粗细" width="500" height="250"></table>
6.7.3 合并单元格
合并单元格的步骤：
①先看需求是 跨列还是跨行 合并单元格 来使用不同的代码。
②找到目标单元格 写入合并代码 <td colspan="2"></td>
③删除多余的单元格(合并后，就会有多余出来单元格)
7.列表标签：用来布局页面的
7.1 列表的最大特点：
整齐、有序、布局更加自由和方便。
7.2 列表的分类：无序列表、有序列表和自定义列表。
7.2.1 无序列表
<ul></ul>来定义无序列表
语法规范：(重要)
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
显示结果：(前面有一个默认的·)
·列表项1
·列表项2
·列表项3
消除前面的小圆点：list-style:none;
消除前面的距离：padding:0;
注意：①无序列表的每一个列表项是没有先后之分的。
②无序列表标签：<ul></ul>只能嵌套<li></li>标签
③但是<li>中可以放任意的标签</li>
7.2.2 有序列表(理解)
有序列表：有排列顺序的列表
<ol></ol>来定义一个有序列表
语法规范：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
注意：①有序列表的每一个列表项是有先后之分的。
②有序列表标签：<ol></ol>只能嵌套<li></li>标签
③但是<li>中可以放任意的标签</li>
7.2.3 自定义列表
下面的小标签<dd>对上面的大标签<dt>进行自定义说明
语法规范：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
...
</dl>
注意：
①有序列表标签：<dl></dl>只能嵌套<dt></dt>和<dd></dd>标签
②但是<dd>中可以放任意的标签</dd>
③<dt></dt>和<dd></dd>标签是兄弟关系
8.表单标签：为了收集用户的信息(用户信息注册表等)
8.1 表单的组成：
由三部分构成：表单域、表单控件(表单元素)和提示信息。
表单域：整个表格的整个区域
表单控件：就是表格中的一些按钮，输入框等
提示信息：提示输入框是干什么的
8.1.1 表单域：
在HTML标签中。<from></from>标签用于定于表单域，以实现用户的信息的收集与传递。
<from>会把他范围内的表单元素信息提交给服务器。
语法规范：
<from action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</from >
from中常用的属性：
action:url地址 用于指定接收并处理表单数据的服务器程序的url地址
method:get/post 用于设置表单数据的提交方式，其取值为get或post
name:名称 用于指定表单的名称，以区分同一个页面中的多个表单域。
注意：①在写表单元素之前，应该有一个表单域将他们包含。
8.1.2 表单控件(表单元素)：
表单元素就是：允许用户在表单中输入或选择的内容的控件。
1.<input/>输入表单元素
<input/>标签就是用于收集用户的信息。
语法格式：
<input type="属性值" /> 属性值的不同就代表着不同的表单控件。
input属性值：
type：指定input类型
autocomplete：设置是否自动完成，其值为：on/off
autofocus：规定输入字段在页面加载时是否获得焦点，不适用于type= ‘hidden’
checked：默认选择，对type值为‘checkbox’(复选按钮)及‘radio’(单选按钮)有效 checked="checked"
disabled：禁用选框
checkbox:复选框(复选按钮)
size：设置输入字段的宽度
maxlength：设置输入字段的最大长度
width：设置宽度，（适用于 type=‘image’）
height：设置高度，（适用于 type=‘image’）
step：设置输入字段合法数字间隔
required：表示输入字段为必需
readonly：表示只读
placeholder：设置输入框的占位符
pattern：规定输入字段的值的模式或格式。例如 pattern=‘[0-9]’表示输入值必须是 0 与 9 之间的数字。
multiple：如果使用该属性，则允许一个以上的值，适用于‘select’及‘datalist’
min：设置输入字段的最小值
max：这是输入字段的最大值
list：引用包含输入字段的预定义选项的 datalist 。
value：只能在文本框中显示value值 (方便后台人员确认用户选择的是什么值) 注意：单选按钮与多选按钮的name值要相同。
name：给表单控件起名字 区别表单控件的元素值
type属性值=：
text：普通输入框
password：密码输入框
radio：单选框 如 选择性别 男女只能选择一个
checkbox：多选框
file：文件 提供文件上传的功能
button：普通按钮 一般定义可以点击的按钮 一般配合js使用
submit：提交按钮 提价按钮会把表单数据发送给服务器
reset：重置按钮
image：图片按钮
hidden：隐藏域
email：邮箱输入框
url：资源地址
search：搜索框
number：数值输入控件
tel：电话号码
range：数值选择范围控件
date：日期选择控件
month：月份选择控件
week：周选择控件
time：时间选择控件
datetime：日期时间选择控件
datetime-local：本地日期时间选择控件
color：颜色选择控件
8.1.2.1 <label>标签 ：经常与input标签搭配使用
<label>表单元素的提示信息</label>标签用于绑定一个表单控件，当点击<label>标签内的文本时，浏览器就会自动的将光标转到或者选择对应的表单控件上，增加用户体验。
⚪男 当我们点击男这个字时，就会自动的选上⚪
用户名:文本框 当我点击用户名时 光标自动进入文本框中。
语法格式：
<input type="属性" name="名字" id="名字" /> <label for="对应的id">表单控件的提示信息</label>
2.<select>下拉表单元素
使用场景：如果有多个选项让用户选择，并且想要节约页面空间时，使用select下拉列表
语法格式：
<select>
<option [selected="selected"]>选项1</option> ==>【selected="selected"】 默认选择的选项
<option>选项2</option>
<option>选项3</option>
</select>
注意：<select></select>还是<from>表单标签中的标签
3.textarea文本域元素(特死t额瑞)：可以输入很多文字的区域
使用场景：在用户输入的内容较多时，我们就不能够使用文本框了，此时就用<textarea>标签。
语法格式：
<textarea rows="3" cols="20">
文本内容
</textarea>
属性：rows:显示的行数
cols:一行能写多少个字
HTML5新增特性
div对于浏览器是没有语义的，只是一个普通的盒子
1.新增的语义/结构化标签
2.音频标签
2.1 音乐标签
音频最好使用mp3格式
<audio src="文件地址" controls="controls"></video>
autoplay 设置或返回是否在加载完成后随即播放音频 谷歌不支持自动播放
controls 控件
loop 循环播放
preload:auto/none 是预加载/不预加载
2.2视频标签
视频最好用mp4
<video src="文件地址" controls="controls"></video>
属性：
controls 视频控件
autoplay 设置或返回是否在加载完成后随即播放音频/视频。(谷歌浏览器禁用了自动播放功能,解除禁用:muted="muted")
width:px; 宽度
height:px 高度
loop 无限循环播放视频
preload:auto/none 是预加载视频/不预加载视频
poster="imgurl" 视频的封面
muted=muted 静音播放
在video标签里面添加<source src="视频地址" type="视频类型(video/mp4)">指定视频类型
3.新增input标签
input是属于from表单域里面的标签
type属性：
color：生成一个颜色选择表单
date：限制用户只能输入日期
time：限制用户只能输入时间
datetime 类型允许你选择一个日期（UTC 时间）。
email：限制用户只能输入Email类型
month：限制用户只能输入月类型
number：限制用户只能输入数字类型
search：搜索框
tel：手机号码
url：限制用户只能输入url
week：限制用户只能输入周类型
4.html5新增表单属性
required：required;表示输入字段为必需，此输入框必须填写
placeholder：提示文本;
autofocus： autofocus;规定输入字段在页面加载时是否获得焦点，不适用于type
autocomplete：on/off；设置是否提示历史搜索内容，需不需要记录以前搜索的内容信息，此属性需要添加name属性才能够生效
multiple：如果使用该属性，则允许一个以上值 一般设置为允许上传多个文件
Iframe的使用
有时候，需要在的页面嵌入另一个页面，形成画中画的效果–>iframe
## HTML基础知识
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
