复习前端知识(HTML)

洋芋儿泥

已于 2022-12-16 20:08:39 修改

阅读量305

点赞数 1

分类专栏：知识回顾文章标签：前端 html

于 2022-12-14 20:18:48 首次发布

本文链接：https://blog.csdn.net/qq_21353273/article/details/128175509

版权

知识回顾专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

前端学习学了忘，忘了学，知识点学的一地稀碎。最近准备对现在掌握的知识点进行梳理并整理，用于帮助自己记忆。如果有什么地方写的有错误或者有遗漏的地方，欢迎大家指正。

一、HTML文档基本结构

HTML文档基本结构主要包含以下几个标签:

<!DOCTYPE html>:用于声明为 HTML5 文档。
<html>:是页面的根元素标识HTML文档，通常使用全局属性“lang”声明语言类型。
<head>:标识头部区域,内部通常包含<meta>,<title>和一些外联样式。
<meta>标签提供HTML文档的元数据,常用属性为”charset”，用于设置页面编码格式。
<body>:标签标识主体区域。

<!DOCTYPE html>//html5网页声明
<html lang="en">lang属性：声明当前页面的语言类型，“en"英文，”zh“中文
<head>
    <meta charset="utf-8"/>  //设置网页编码格式位utf-8
    <title>文档标题</title>  //设置文档标题
</head>
<body>
  页面内容
   ……
</body>
</html>

二、标签和元素简介

标签：比如<p>，由一对尖括号和表示标签含义的“关键字”构成。
元素：比如<p>输入的内容</p>，由开始标签、结束标签以及标签中包含的内容构成。

（一）标签

HTML标签根据特性分为2种，一种是"一般标签”和“自闭合标签”：
一般标签：有开始符号和结束符号，可以在中间插入内容。例：<p>一段文字</p>
自闭合标签：只有开始符号没有结束符号，不能插入其他标签或文字，只能定义自身的属性。例：<br/>,<hr/>

（二）元素

HTML 元素主要分为:block（块元素、块级元素），inline（行内元素、内联元素），inline-block（行内块元素）

行内元素：常见标签有：a、span、sub、sup、br、strong、b、em、i、label
特点：
（1）一行内可以存在多个；
（2）无法设置width、height，padding、margin值不能设置垂直方向，只可以设置水平方向，可以设置line-height；
（3）一个行内元素内可以包括行内元素和文本内容，a标签特殊：可以放块级元素、行内块元素，但不能再放一个a标签；
（4）宽度默认随文本内容变化。
块级元素：常见标签有：div、ul、dl、ol、li、table、h1-h6、p、form、hr
特点：
（1）一个块级元素占据一行；
（2）可以设置width、height、padding以及margin值；
（3）块级元素可以包含块级元素、行内元素以及行内块元素，但是文本类型块级元素比较特殊：例如h1-h6、p标签，只能包含文本；
（4）宽度默认为父级元素宽度。
行内块元素：常见标签有：img、input、td
特点：
（1）一行可存在多个行内块元素，但它们之间存在空隙；
（2）可以设置width、height、padding以及margin值；
（3）宽度默认随文本内容变化。

三、常用标签和元素

（一）段落标签

主要都是块元素

标签	作用
`<h1>~<h6>`	标题
`<p>`	段落
`<br/>`	换行
`<hr/>`	水平线
`<pre>`	内容原格式标签

（二）文本标签

主要都是行内元素

标签	说明
`<em>`	斜体
`<strong>`	加粗
`<ins>`	插入文本
`<del>`	删除
`<sub>`	下标
`<sup>`	上标

（三）div与span

<div>和<span>标签单独拎出来主要是因为这两个比较特殊，且是比较常用的标签。它们没有特别的语义，相当于一个分隔区块或者一个区域部分，用来布局网页内容。
<div></div>是块元素，<span></span>是行内元素，其特点参照 “（二）元素”。

（四）图像

图片元素为行内块元素

<img src="" alt="" title=""/>

用于添加网页图片，主要有三个属性(“*”号为必要属性）

属性	说明
src^*	图片路径
alt^*	图片失效显示的图片名称
title	鼠标悬停显示的图片名称

1、绝对路径与相对路径

绝对路径：是指地址的完全路径。
相对路径：是指相引用该文件的文档地址相对于文件的路径地址。

（五）链接

链接元素为行内元素

<a href=""></a>

链接标签主要用于超链接跳转，主要有两个属性：

属性	属性	说明
href^*	URL	被链接的URL
target	_self	默认，当前窗口打开
	_blank	在新窗口打开
	_top	在顶层框架中打开
	_parent	在当前框架中打开

（六）列表

列表元素属于块元素

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
  <dl>
    <dt>1</dt>
    <dt>2</dt>
    <dd>描述</dd>
  </dl>

列表标签显示结果

标签	说明
ul	无序列表
ol	有序列表
dl	定义列表

1、无序列表

无序列表
属性	属性值	说明
type	disc	默认值，实心圆“●”
	circle	空心圆“○”
	square	实心正方形“■”

2、有序列表

有序列表
属性	属性值	说明
start	"数字"	修改起始数字
type	1	1，2,3……
	a	a,b,c……
	A	A,B,C……
	i	i、ii、iii……
	I	I、II、III……

3、定义列表

定义列表主要由<dl></dl>包裹，<dt></dt>为定义名词，<dd></dd>为定义描述。

（七）表格^*

1.table元素的基本结构

  <table border="1">border是表格边框宽度
    <!-- 第一行 -->
      <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
      </tr>
    <!-- 第二行 -->
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
      <td>第二行第三列</td>
    </tr>
  </table>

表格基本组成

一个基本的table表格，只需要三个部分：最外层<table></table>标签，行标签<tr></tr>，行标签内包裹列标签<td></td>。

2.table元素的完整结构

  <table border="1">border是表格边框宽度
    <caption>表格标题</caption>
    <!-- 表头 -->
    <thead>
      <tr>
        <th>为第一行第一列表头</th>
        <th>为第二行第一列表头</th>
        <th>为第三行第一列表头</th>
      </tr>
    </thead>
    <!-- 表身 -->
    <tbody>
      <tr>
        <td>td为第二行第一列内容</td>
        <td>td为第二行第二列内容</td>
        <td>td为第二行第三列内容</td>
      </tr>
    </tbody>
    <!-- 表脚  -->
    <tfoot>
      <tr>
        <td>td为第三行第一列内容</td>
        <td>td为第三行第二列内容</td>
        <td>td为第三行第三列内容</td>
      </tr>
    </tfoot>
  </table>

table表格完整结构由：<table></table>标签、<caption></caption>标题标签、<thead></thead>表头标签、<tbody></tbody>表身标签、<tfoot></tfoot>表脚标签、行标签<tr></tr>，列标签<td></td>、表头列标签<th></th>几个部分组成。

3.合并表格

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。

（1）合并行

使用语法<td colspan="需要合并的行数">，确定好需要合并的行数，并删除被合并行的<td>标签。

  <table border="1">
    <!-- 第一行 -->
      <tr>
        <td colspan="3">第一行第一列</td>
        <!-- <td>第一行第二列</td> -->删除该单元
        <!-- <td>第一行第三列</td> -->删除该单元
      </tr>
    <!-- 第二行 -->
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
      <td>第二行第三列</td>
    </tr>
  </table>

合并行

（2）合并列

使用语法<td rowspan="需要合并的列数">，确定好需要合并的列数，并删除被合并列的<td>标签。

  <table border="1">
    <!-- 第一行 -->
    <tr>
      <td rowspan="2">第一行第一列</td>
      <td>第一行第二列</td>
      <td>第一行第三列</td>
    </tr>
    <!-- 第二行 -->
    <tr>
      <!-- <td>第二行第一列</td> -->删除该单元
      <td>第二行第二列</td>
      <td>第二行第三列</td>
    </tr>
  </table>

合并列

（八）表单^*

表单元素是块元素。是HTML中一个用于收集用户的输入信息，表示文档中的一个区域，此区域包含交互控件，将收集到的信息发送到服务器。
表单语法：<form action="" method=""></form>

表单属性
属性	属性值	说明
action	URL	信息提交到的web服务器的URL
method	get、post、put	表单信息提交方式

一个表单元素中包含各种控件元素：输入元素<input>、多行文本<textarea>、下拉列表（<select>&<option>）等。

1、input输入元素

语法：<input type="">
表单中多数情况下被用到的表单标签是输入标签。
输入类型是由 type 属性定义。

type值	说明
text	文本输入
password	密码输入
button	按钮
reset	重置按钮
submit	提交按钮
radio	单选框
checkbox	复选框
file	文件上传

显示效果如下： input输入元素

（1）value

每个input元素都有相应的value值，是提交到web服务器的主要信息。

text、password输入框，如果设定了value值，则输入框将提前填入该值。
button、reset、submit，设置value值影响按钮显示的名称。
radio、checkbox的value值主要用于提交数据。

（2）name

name是自定义的的input元素名称，特别是单选框和复选框，一组选项必须设置同一个name才能生效。

（3）checked

用于设置单选框和复选框默认选中项，在需要默认选中的input上加上checked="checked"，在HTML5中也可直接简写为checked。

2、textarea文本域

<textarea> 标签定义一个多行的文本输入控件。
语法<textarea rows="行数" cols="列数"></textarea>

3、select&option

下拉列表需要<select></select>和<option></option>配合使用，select元素内内至少包含一个option选项。

<select name="fruit">
      <option value="apple">苹果</option>
      <option value="lemon" selected>柠檬</option>
      <option value="orange" disable>橘子</option>
    </select>

select&option相关属性
元素	属性	属性值	说明
select	disable	disable&true	禁用下拉菜单
	multiple	multiple&true	可进行多选
	size	number,大于1	下拉菜单可见选型数目
option	disable	disable&true	禁用选项
option	selected	selected&true	默认选中项

4、label

<lable>标签用于显示在输入控件旁边的说明性文字，即将控件与文字关联。
abel标签的for属性有两个作用：

语义上绑定了 label元素和表单元素。
增强了鼠标可用性。也就是说我们点击label中的文本时，其所关联的表单元素也会获得焦点。

<input type="radio" id="bb" name="hobby"  value="baskatball">
<label for="bb"> 篮球 </label>
<input type="radio" id="fb" name="hobby"  value="football">
<label for="fb"> 足球</label>

5、fieldset和legend

使用fieldset和legend标签有两个作用：

增强表单的语义；
可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。

不使用fieldset和legend和使用的区别

（九）iframe框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
frame语法：<iframe src="URL"></iframe>

属性	属性值	说明
src	URL	源文件URL
widrh	number	宽度
height	number	高度
frameborder	0/1	是否显示边框
scrolling	auto/yes/no	默认auto，yes总是显示滚轮，no总是不显示

（十）meta标签

meta标签主要标识HTML文档的元数据（Metadata），是数据的数据信息。元数据不会显示在客户端，但是会被浏览器解析。
meta元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
常用meta元素属性：

属性	属性值	说明
charset	UTF-8	定义文档的字符编码（html5）
http-equiv	content-type/default-stylerefresh/……	把content属性关联到HTTP头部
name	author/keywords/description/……	把 content 属性关联到一个名称
content	description/keywords/……	meta 信息的内容

四、HTML常用属性

属性是HTML元素提供的附加信息，一般面熟于开始标签，以键值对出现例如：class=“value”

属性	说明
title	设置元素提示文字
lang	设置语言（cn，en，ja）
style	设置css样式
id	指定元素ID
class	设置元素类名

五、HTML5

HTML5是HTML 4.01的升级版，删除或重新定义了一些元素，以及增加了很多新元素以及功能，比如canvas、SVG、WebSocket.本地存储等。

HTML5 拓展了哪些内容：

语义化标签
本地存储
兼容特性
2D、3D
动画、过渡
CSS3 特性
性能与集成

（一）语义化

对于语义化的理解：

用正确的标签做正确的事情。
html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的；
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO；
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

新增常见语义化标签：

标签	说明
header	定义头部区域
nav	定义导航区域
article	定义内容区域
section	定义文档的区块
aside	定义侧边栏内容
footer	定义页脚区域
figure	标记文档中的一个图像
figcaption	用来为元素定义标题

（二）表单

1、新增input类型

type值	说明
time	限制用户输入类型必须为时间
date	限制用户输入类型必须为日期
week	限制用户输入类型必须为周
month	限制用户输入类型必须为月份
number	限制用户输入类型必须为数字
url	限制用户输入类型必须为URL类型
email	限制用户输入类型必须为邮箱
color	生成一个颜色选择列表
range	数值选择滑块
search	搜索框
tel	电话号码

2、新增表单属性

<form>标签属性：

属性	属性值	说明
autocomplete	Boolean	规定 form 或 input 域应该拥有自动完成功能
novalidate	Boolean	规定在提交表单时不应该验证 form 或 input 域

以上两个属性均可用于form标签，或者单个input标签

<input>标签属性：

属性	属性值	说明
autofocus	boolean	自动获取焦点
autocomplete	boolean	自动完成
novalidate	boolean	是否进行input域验证
placeholder	文本	表单提示输入
required	boolean	规定必须在提交之前填写输入域（不能为空）
multiple	boolean	规定元素中可选择多个值，通常用于文件提交

（三）音频

HTML5新增了音频标签，顾名思义，主要用于音频播放。
例：

<audio>
  <source src="url" type="audio/ogg">用于添加音频源，type为音频格式
  <source src="url" type="audio/mpeg">
</audio>

音频支持的格式，和对应type：

格式	type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

音频标签参数：

属性	属性值	说明
autoplay	autoplay	音频在就绪后马上播放
controls	controls	如向用户显示音频控件
loop	loop	每当音频结束时重新开始播放
muted	muted	音频输出为静音
src	URL	规定音频文件的 URL
preload	auto none	预加载，如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性

（四）视频

HTML5新增了视频标签，顾名思义，主要用于视频播放。
例：
···html

··· 视频支持的格式，和对应type： |格式|type| |--|--| |MP4|video/mp4| |Ogg|video/ogg| |WebM|video/webm|

视频标签参数：

属性	属性值	说明
autoplay	autoplay	视频在就绪后马上播放
controls	controls	向用户显示控件
height	pixels	设置视频播放器的高度
width	pixels	设置视频播放器的宽度
loop	loop	当文件完成播放后再次开始播放
muted	muted	视频的音频输出为静音
poster	URL	加载等待画面图片
src	URL	要播放的视频的 URL
preload	auto none	预加载，如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性