HTML5知识点总结

HTML知识点总结

1、html文件标记

html标签位于网页文档最外层。

.

2、head文件头部标签

head说明文件标题、作者、关键词……

(1) title 标签

​ 网页标题一个网页只能有一个且只能出现在文件头部

<title>这是洛小天的网页</title>

(2) meta 标签

​ 可提供有关网页的元信息，位于网页的头部。标签属性分为必选属性和非必选属性，可选属 性：content，可选属性：http-equiv、name、scheme。

属性	值	描述
content	some_text	定义与http-equiv或name属性相关的元信息
http-equiv	content-type、expires、refresh、set-cookie	把content属性关联到HTTP头部
name	author、description、keywords、generator、revised、others	把content属性关联到一个名称
scheme	some_text	定义用于翻译content属性值的格式

1、设置字符集
<meta charset="UTF-8">

2、设置页面的市口宽度与缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3、页面搜索引擎关键词
<meta name="keywords" content="HTML, CSS, JavaScript , 小天">

4、页面描述
<meta name="description" content="这是一个小天关于HTML, CSS的知识点总结">

5、页面作者
<meta name="author" content="洛小天">

6、指定时间后刷新/重定向到 url （content内指定时间 + 地址）
<meta http-equiv="refresh" content="30;url=https://www.example.com">

7、指定网页或网站使用的生成工具或软件的名称和版本
<meta name="generator" content="WordPress 5.9.2">

8、指定文档的最后一次修订日期
<meta name="revised" content="2023-04-04T12:34:56+08:00">

(3) link 标签

​ 定义当前文档与外部资源的关系，通常链接外部样式表、图标

1、链接外部样式
<link rel="stylesheet" href="styles.css">

2、网站图标
<link rel="icon" href="favicon.ico">

3、链接文档作者的电子邮件
<link rel="author" href="mailto:webmaster@example.com">

4、链接帮助文档
<link rel="help" href="help.html">


rel可选值：alternate、author、help、icon、licence、next、pingback、prefetch、prev、serach、			 sidebar、stylesheet、tag

(4) style标签

​ 为HTML文档定义样式信息，位于头部或body标签内

<style>
    body{
        margin: 0;
        padding: 0;
    }
</style>

(5) script标签

​ 在HTML中用于包含客户端或服务器端的脚本

1、内联脚本
<script>
  console.log('Hello, World!');
</script>

2、外部脚本
<script src="script.js"></script>

3、异步加载，不会阻塞文档解析
<script async src="script.js"></script>

4、延迟执行，直到整个页面解析完毕才执行
<script defer src="script.js"></script>

5、模块导入
<script type="module">
  import { func } from './module.js';
  func();
</script>

.

3、head文件头部标签

body是文档主体部分，其他正文标签都在其中

.

4、HTML5常用标签

（1）div 标签

​ 块级元素，可看做一个容器，用来定义文档的分区，为双标签

<div class="box">
    这是一个div标签，类名为class
</div>

（2） header标签

​ 定义文档页眉，通常为导航信息、引导标识，至少需要包含一个标题元素 / hgroup元素 / nav 元素

​

<header>
	<div>hello</div>
    <h1>欢迎您爱学编程的青年！！！</h1>
    <hgroup>
    	<h1>主标题</h1>
    	<h2>副标题</h2>
  </hgroup>
</header>

（3） nav标签

​ 作为页面导航的链接组，充当导航功能的链接列表，比如网站的主菜单、页脚中的链接列表

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

（4） section标签

​ 一般为文档的章节、成块的内容，具有语义化

<section>
  <h1>章节标题</h1>
  <p>这是章节的内容。</p>
</section>

（5）article标签

​ 独立的内容块，具有语义化，常用语文章博客、论坛帖子

<article>
    <h1>文章标题</h1>
    <aside>本文出自于…… (本标签通常用于附属信息、广告、引用……)</aside>
</article>

（6）footer标签

​ 常用于定义网页页脚、版权、文章信息、作者声明等

<footer>
	Copyright&copy; XX省备案，备案编号*****
</footer>

.

5、网页文本

（1） 标题

​ 块级元素、自动换行，这个标题与

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

（2） 段落

​ 块级元素，与文学中的文章段落一个意思

<p>
    这是一个段落
</p>

（3） span标签

​ 行内元素，本身没有含义与样式

<p>这是一个段落<span>的内容</span></p>

（4） 短语元素

​ 都是行内元素，为突出强调，快速渲染的功能，部分举例如下：

<b>文本加粗</b>

<cite>放置引文</cite>

<code>放置代码</code>

<i>文本斜体</i>

<mark>文本突出显示</mark>

<meter value="60" min="0" max="100">
    度量值，像进度条，可用于磁盘空间使用率等
</meter>

<pre>
	这是一段预格式化的文本。
	它保留了空格和换行符。
</pre>

<progress value="50" max="100">进度条</progress>

<ruby>可注音，
    中<rt>zhong</rt> 国
</ruby>

<s>删除线</s>

<small>小写字号，可用于版权声明</small>

<strong>强调</strong>

<sub>下标</sub>
<sup>上标</sup>

（5）特殊字符

符号	HTML代码 (ps: 请加上分号 ✧٩(ˊωˋ*)✧
“	&quot
‘	&apos
&	&amp
<	&lt
>	&gt
￥	&yen
©	&copy
®	&reg
空格	&nbsp

（6） 列表

​ 列表标签用于组织和展示一系列相关的信息项

A）无序列表ul，其中type属性取值如下表：

值	示例图
disc(默认)	●
square	■
circle	○

B）有序列表ol，reversed属性能反向排序，其中type属性取值如下表：

值	示例图
1	数字(默认)
A	大写字母
a	小写字母
Ⅰ	大写罗马数字
i	小写罗马数字

C）定义列表 dl，每个要描述的术语以 开始 结束，每项描述的内容

开始，

结束

1、无序列表
<ul type="square">
    <li>第一项</li>
    <li>第二项</li>
</ul>

2、有序列表
<ol type="A">
   <li>第 1 项</li>
   <li>第 2 项</li>
</ol>

3、定义列表
<dl>
  <dt>术语1</dt>
  <dd>这是术语1的描述。</dd>
  <dt>术语2</dt>
  <dd>这是术语2的描述。</dd>
</dl>

（7） 网页注释

注释部分只在源代码显示。标签为：

<!--<p>这个已经被注释</p>-->

.

6、资源文件

（1）图片

A）img标签，用于在页面中嵌入图像，它不会将图像实际插入到页面中，而是创建了一个图像的引用

<img src="图片引用路径" alt="图片显示失败的提示文字" width="图片宽度" heigh="图片高度"/>

B) picture标签，是一个容器，用于在 <img> 元素上添加额外的属性和功能。可以在不同条件下显示不同 的图像资源。这特别适用于响应式设计，根据屏幕大小或分辨率加载不同大小的图片。

<picture>
  <source media="(min-width: 650px)" srcset="large-image.jpg">
  <source media="(min-width: 465px)" srcset="medium-image.jpg">
  <img src="图片引用路径" alt="图片显示失败的提示文字">
</picture>

C) svg 标签，可缩放矢量图形元素

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

（2）音、视频

A）audio标签，嵌入音频文件

B) video标签，用于在网页中嵌入视频

C) source标签是 <video> 和 <audio> 标签的子标签，用于指定媒体元素的多个源文件。通过为媒体元素 提供多个 <source> 标签，可以在不同的浏览器或设备上使用适当的媒体文件格式。

属性	值 或 含义
src	音频文件地址
controls	添加播放、暂停、音量控制等空间
autoplay	页面加载时自动播放音频 (但现在为用户友好体验，不支持)
loop	循环播放
muted	静音播放
preload	是否预加载音频，none (不预加载)、matadata (预加载) 、auto (根据浏览器情况预加载)

<audio src="#" controls loop></audio>

<video src="#" controls></video>

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>

.

7、超链接

（1）锚元素

​ a 标签组成，可链接文本、图片、邮件等

基本格式：
	<a href="链接的地址" target="窗口打开方式">链接的图片或文字</a>
target取值:
	_blank(默认)，新窗口打开
	_self,本窗口打开

<a href="www.xiaotian.space" target="_black">这是洛小天的主页</a>

<a href="/about.html">关于我们</a>

<a href="files/document.pdf" download>下载文档</a>

<a href="tel:+1234567890">拨打电话给我们</a>

<a href="mailto:example@example.com">发送邮件给我们</a>

（2）区段标识符

​ 在制作一些较长的网页时，可以让浏览者链接到网页中一个特定的位置，可以设置区段标识符。它由两部分组成：确定链接跳转的位置，设置锚点。创建链接源。

1.设置锚点
<a name="锚点名称">目标位置</a> 或者 <a id="锚点名称">目标位置</a>
2.创建链接源
<a href="#锚点名称">链接文字或图片</a>

1.设置锚点,id为 xiaotian
<div id="xiaotian"></a>
2.创建链接源
<a href="#xiaotian">跳转</a>

.

8、表单

​ 表单元素是网页中用于收集用户输入数据的重要组成部分，由from标签组成，为双标签

（1）表单标签属性

属性	含义
name	设置表单名称
action	表单被提交时的URL地址
method	数据传递到服务器的方式，GET(默认)、Post、Put、Delete

（2）表单控件

​ 表单控件是通过name属性进行标识，通过value属性值获取数据，由提交按钮提交表单

A) input元素

type属性值	控件类型说明
text(默认)	单行文本输入框
password	密码输入框，用*回显
radio	单选框
checkbox	复选框
file	文本域，由一个单行文本框和浏览按钮组成
submit	提交按钮
reset	重置按钮，重置表单数据
button	普通按钮
image	图像按钮
hidden	隐藏文本框
color	调色板控件
data	日期控件
datetime	日期和时间控件
datetime-local	本地日期和时间控件
email	单行邮箱文本框
month	月份控件
number	单行数字文本框
range	滑动刻度控件
search	搜索文本框
tel	单行电话号码文本框
time	时间控件
url	单行网址输入框
week	星期控件

其他属性值	控件类型说明
value	设置初始值
size	设置初始宽度
checked	设置被选中
checked	设置被选中
autofocus	自动聚焦
maxlength	设置最大输入字符数
raadonly	设置只读
autocomplete=“off”	禁止浏览器自动填充
placeholder	设置输入框空值时的显示内容
required	设置不能为空
disabled	设置禁止选中

​

B) textarea元素

textarea属性值	控件类型说明
cols	文本域列数
rows	文本域行数

C) select元素

select属性值	控件类型说明
multiple	多选下拉列表
size	下拉列表可选项数量

<form action="www.xiaotian.space/submit" method="post">
  <input type="text" id="name" name="name">用户名
  <input type="password" id="password" name="password">密码
  <input type="tel" placeholder="请输入电话号码">
  
  <label for="gender">性别：</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>
  
  <label for="hobbies">兴趣爱好：</label>
  <input type="checkbox" id="hobby1" name="hobbies" value="reading">
  <label for="hobby1">阅读</label>
  <input type="checkbox" id="hobby2" name="hobbies" value="sports">
  <label for="hobby2">运动</label>
  <input type="checkbox" id="hobby3" name="hobbies" value="music">
  <label for="hobby3">音乐</label>
  
  <select id="country" name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
  </select>
  
  <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
  
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

.

9、表格

A) table标签，用于定义整个表格。border（边框宽度）、cellspacing（单元格之间的空间）、cellpadding（单元格内边距）

B) tr 标签为一行

C) td 标签为一单元格，width（宽度）、height（高度）、rowspan（跨行数）、colspan（跨列数）

D) th 标签通常定义为列标题

E) caption标签用于定义表格的标题，并且它必须直接嵌套在table标签内部，作为其第一个子元素

<style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid black; padding: 8px; }
    caption { font-weight: bold; margin-bottom: 10px; }
</style>
<table>
    <caption>学生成绩表</caption>
    <thead>
    <tr>
        <th rowspan="2">姓名</th>
        <th colspan="3">数学</th>
        <th colspan="3">英语</th>
    </tr>
    <tr>
        <th>期中</th>
        <th>期末</th>
        <th>总分</th>
        <th>期中</th>
        <th>期末</th>
        <th>总分</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>80</td>
        <td>90</td>
        <td>170</td>
        <td>75</td>
        <td>85</td>
        <td>160</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>85</td>
        <td>95</td>
        <td>180</td>
        <td>70</td>
        <td>80</td>
        <td>150</td>
    </tr>
    <!-- 更多行 -->
    </tbody>
</table>

/*
* author：洛小天
* time：2024-05-23
* 能力有限，如有错误、遗漏见谅
*/