第一阶段:HTML的笔记

一.标题标签

1.h1~h6

这个标签是标题标签,表示标题,总共有六层,每一层大小不一样

2. h标签在SEO优化中的设置技巧以及最佳实践

每一个页面最多只有一个h1标签
H 标签是一个强调性的标签，因此，H1 标签中，必须包含核心关键词
每个标题的字数尽量不要太多

二.段落标签

1.什么是p标签

p标签就是属于段落的意思,它是块级元素,块级元素简单来讲就是可以对这个标签设置宽和高,以及可以对它设置外边距内边距等

2.p标签可以嵌套的元素

因为p标签属于块级元素,不能嵌套 h 标签、其他 p 标签和其他块级元素

它可以嵌套的元素:

3.p标签的最佳实践

尽量不要在后面加上<br>标签,因为我们常常要对这些标签进行样式,所以的话就是避免加上<br>标签
避免在p标签里面嵌套块级元素

三.div标签

1.什么是div标签

div标签就相当于一个盒子,它表示分隔的意思,意思就是可以用在每个模块之间的分隔,但是它经常跟CSS样式结合,所以经常称只为:div+CSS盒子,它属于块级元素,它可以嵌套自己本身

2.div标签的应用场景(先了解)

2.1布局容器

页面结构划分：用于划分页面的不同区域，如页眉、主体、侧边栏、页脚等。

'''html

复制代码

<div class="header">页眉内容</div>
<div class="main-content">主体内容</div>
<div class="sidebar">侧边栏内容</div>
<div class="footer">页脚内容</div>

'''

响应式布局：结合 CSS Flex 或 Grid 创建响应式布局。

javascript 复制代码

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

2.2样式和视觉效果

就是样式结合,比如我们在div标签里面写样式,称之为行内样式

2.3JavaScript操作

我们在后面学习JavaScript时候就会应用到

2.4表单结合

比如在写表单的时候每一组每一组我们都用div 标签隔开

javascript 复制代码

<form>
    <div class="first">
        账号:<input type="text" id="usename" name="usename">
    </div>
    <div class="second">
        密码:<input type="password" id="password" name="password">
    </div>
</form>

2.5多媒体和嵌入内容

就是平时我们可以嵌入多媒体的内容,我们可以把那一块用div标签包裹起来,好让CSS样式后面比较容易认

2.6组件化开发

这个内容是后面学习vue,react时候要的

2.7条件渲染和隐藏内容

这个是CSS和JavaScript时的东西

2.8模板和占位符

页面加载时的占位符：在内容加载前显示占位符。

'''

复制代码

<div class="loading-placeholder">
  <!-- 加载动画或提示文本 -->
</div>

'''

3.div的最佳实践

div本身就没有意义,它不是语义化标签,所以我们尽量要多用语义化标签,减少对div标签的使用,还有在div嵌套时避免嵌套太多层,还有就是在命名的时候要合理规范

四.HTML5新特性

1.空白折叠现象

内容与内容之间如果输入多个空格都会显示一个空格而已,其他的都会被覆盖
标签内壁与内容之间的距离如果你输入太多空格都只会显示一个空格的距离,其他的都会被覆盖

2.转义符

3.HTML的注释

单行注释:按住CTRL+/
多行注释:按住CTRL+/

语法:

五.列表标签

列表标签分为三种:无序列表,有序列表,自定义列表

1.什么是无序列表

无序列表的标签是<ul><li>

2.无序列表的最佳实践

无序列表中的两个元素不能单独使用,必须一起使用,ul ,li 标签是嵌套形式，li 标签必须要缩进（一个Tab）

3.无序列表的嵌套以及type属性

可以嵌套li标签里可以嵌套ul标签
type属性有几个:(但是现在一般都用CSS代替)
- disc:表示实心圆(默认)
- square:表示失心正方形
- circle:表示空心圆

4.什么是有序列表

有序列表的标签是<ol><li>

5.有序列表的type属性

type属性也有很多个:

阿拉伯数字
大写字母
小写字母
大写罗马数字
小写罗马数字

6.有序列表的start属性

start属性表示的是从哪个数字开始,例如我们用阿拉伯数字默认是从1开始的,但是你加个start属性上去,然后它的值如果是2,它就从2开始

7.有序列表的reversed属性

reversed 属性指定列表中的条目是否是倒序排列的
reversed 属性不需要值，只需要写 reversed 单词即可

8.什么是定义列表

定义列表的标签是<dl><dt><dd>

9.定义列表的注意事项(交替与不交替)

交替:

'''html

复制代码

<h1>定义列表 - dt dd标签交替出现</h1>
<dl>
  <dt>服务支持</dt>
  <dd>售后政策</dd>
  <dd>关注我们</dd>
  <dd>自助服务</dd>

  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>关于我们</dd>
</dl>

'''

不交替:

'''html

复制代码

<h1>定义列表 dt dd 不交替出现</h1>

<dl>
  <dt>服务支持</dt>
  <dd>售后政策</dd>
  <dd>关注我们</dd>
  <dd>自助服务</dd>
</dl>

<dl>
  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>关于我们</dd>
</dl>

'''

10.列表标签的最佳实践

六.多媒体标签

1.图片标签

1.1 img的语法

<img src="" alt="">,它是单标签

1.2 图片的四要素

图片的三要素是宽,高,图片来源,图片的描述

1.3网页三要素

网页的三要素是标题<title>,关键字keyword,描述description

1.4图片的最佳实践

我们在用图片标签时要用上四要素

1.5alt属性

这个属性就是对你引用的这张图的描述,然后如果图片加载不出来,它就会显示,对于搜索引擎优化友好，告诉搜索引擎图片的含义，利于搜索引擎爬虫抓取

1.6 src属性

这个属性就是写图片的地址,也就是来源,它可以写相对地址,也可以是绝对地址

2.网页上支持的格式

3.相对路径和绝对路径

3.1什么是相对路径

相对路径就是从文件的这个目录开始,往上一级开始找的路径

3.2什么是绝对路径

绝对路径就算这个图片的全部地址

3.3电脑文件的认识

就是说我们电脑有一个文件夹的名字叫做.,还有一个文件夹的名字叫做..,他们是电脑本来就有的,看不到的

3.4网页在用路径的注意事项

4.超级链接-a标签

4.1语法与基础

复制代码

<a href="https://www.baidu.com">百度一下，你就知道</a>

4.2href属性

这个属性支持相对路径和绝对路径

4.3title属性

a 标签的 title 属性用户设置鼠标的悬停文本,就是你把鼠标移到对应的网址上面,它会显示你写的文字

4.4 target属性

这个属性是表示点击网址会不会跳转的意思它有两个值

_self(当前页面跳转)(国外网站经常是这样)
_blank(新的窗口跳转)(国内的网站大多数是这样)

4.5给图片加上a标签

通常是a标签包裹img标签的

'''

复制代码

<a href="https://www.baidu.com" target="blank">
  <img src="images/logo.png" />
</a>

'''

4.6什么是锚点?怎么应用?应注意什么?怎么回到顶部?

对于很长的页面，可以对应的标签添加 id属性，将它变成页面的 "锚点"
当点击锚点连接时，浏览器地址栏就会出现 #id属性名称 页面就会自动滚动到锚点处
从其他页面页面点击带#号的链接，就可以直接定位到锚点位置

'''html

复制代码

<h1>页面锚点链接</h1>

<p>
  <a href="#phone">小米手机</a> &nbsp;&nbsp;&nbsp;
  <a href="#zn">智能穿戴</a> &nbsp;&nbsp;&nbsp;
  <a href="#jd">家电</a> &nbsp;&nbsp;&nbsp;
  <a href="#sh">生活电器</a> &nbsp;&nbsp;&nbsp;
  <a href="#cf">厨房电器</a> &nbsp;&nbsp;&nbsp;
  <a href="#jj">智能家居</a> &nbsp;&nbsp;&nbsp;
  <a href="#cx">出行搭配</a> &nbsp;&nbsp;&nbsp;
  <a href="#bh">日用百货</a>
</p>

<h2 id="phone">小米手机</h2>
<img src="images/1.webp" alt="" />

<h2 id="zn">智能穿戴</h2>
<img src="images/2.webp" alt="" />

<h2 id="jd">家电</h2>
<img src="images/3.webp" alt="" />

<h2 id="sh">生活电器</h2>
<img src="images/4.webp" alt="" />

<h2 id="cf">厨房电器</h2>
<img src="images/5.webp" alt="" />

<h2 id="jj">智能家居</h2>
<img src="images/6.webp" alt="" />

<h2 id="cx">出行搭配</h2>
<img src="images/7.webp" alt="" />

<h2 id="bh">日用百货</h2>
<img src="images/8.webp" alt="" />

<p>
  <a href="#top">回到顶部</a>
</p>

'''

回到顶部:

直接用让href的值=#top

5.特殊链接

5.1普通下载

普通下载就可以下载一些指向 exe、zip、rar、word、excel 等文件格式的链接，将自动成为下载链接

5.2强制下载

PDF、图片、文档等，如何需要直接下载文件而非导航并预览文件，需要使用 download 属性

5.3强制下载+自定义文件

就是你在强制下载不是加一个download属性吗?就是在后面=加一些你想要的文件名字

'''html

复制代码

<body>
  <h1>特殊链接</h1>

  <h2>普通下载</h2>
  <a href="./internet.pdf">普通下载：互联网的基本原理学习笔记（PDF 格式）</a>

  <h2>强制下载文件</h2>

  <a href="./internet.pdf" download
    >强制下载：互联网的基本原理学习笔记（PDF 格式）</a
  >

  <h2>强制下载文件 + 自定义文件名</h2>
  <a href="./internet.pdf" download="认知互联网的基本原理">
    强制下载文件 + 自定义文件名：互联网的基本原理学习笔记（PDF 格式）
  </a>
</body>

'''

5.4邮箱下载+电话链接

邮箱:在href属性=加上mainto:

电话链接:在href属性=加上tel:

6.a标签的妙用和最佳实践

6.1怎么妙用?

在 HTML5 中，a 标签可以包裹块级元素
关于 a 标签的 SEO 优化最佳实践

'''html

复制代码

<a href="...">
  <div>
    <h2>文章标题</h2>
    <p>文章摘要...</p>
  </div>
</a>

'''

6.2rel属性

rel 属性是 HTML 中 <a>、<link>、<area> 等标签的一个重要属性，用于定义当前文档与被链接文档之间的关系。它为搜索引擎、浏览器和其他用户代理提供了有关链接用途和性质的额外信息。以下是关于 rel 属性在 a 标签中的最佳实践：

搜索引擎 理解链接的性质，优化 SEO.
浏览器 增强安全性和性能（如防止钓鱼攻击、优化预加载）.
开发者 明确代码意图，提升可维护性.

6.3最佳实践

7.音频和视频

7.1什么是音频标签?怎么用?

音频标签是audio

7.2音频有什么属性?

有几个属性:

controls:显示那个控制器(播放空间)
autoplay:自动播放，不会等待整个音频文件下载完成
src :音频路径,也是相对路径和绝对路径
loop:循环播放
audio标签的中间写的那些文字是来提醒用户的,当浏览器不支持那些文件时就会自动显示那些文字
音频还有个子标签叫做source,通常他们两个是一起用的

'''

复制代码

<h2>audio 子标签 source</h2>

<audio controls>
  <source src="audio/不错哟.mp3" type="audio/mpeg" />
  <source src="audio/不错哟.ogg" type="audio/ogg" />
  <source src="audio/不错哟.wav" type="audio/wav" />
  亲爱的，您的浏览器不支持audio标签，请升级您的浏览器哟 ^_^
</audio>

'''

7.3什么是视频?

视频标签是video

7.4视频的属性以及最佳实践

视频的属性和音频大差不差:

controls:显示那个控制器(播放空间)
autoplay:自动播放，不会等待整个音频文件下载完成
src :音频路径,也是相对路径和绝对路径
loop:循环播放
audio标签的中间写的那些文字是来提醒用户的,当浏览器不支持那些文件时就会自动显示那些文字
视频还有个子标签叫做source,通常他们两个是一起用的

'''

复制代码

<h2>video 子标签 source</h2>

<video controls width="500">
  <source src="video/1.mp4" type="video/mp4" />
  <source src="video/1.webm" type="video/webm" />
  <source src="video/1.ogv" type="video/ogv" />
  <source src="video/1.avi" type="video/avi" />
  亲爱的，您的浏览器不支持video标签，请升级您的浏览器哟 ^_^
</video>

'''

8.iframe标签

8.1什么是iframe标签

iframe标签是在自己网页嵌套别的东西,可以嵌套别的网页或者视频,图片等东西

语法:<iframe src="URL"></iframe>

8.2iframe都有哪些属性

8.3iframe的应用

嵌入网页

'''

复制代码

<iframe
  src="https://www.baidu.com"
  width="800"
  height="600"
  frameborder="0"
></iframe>

'''

嵌入图片

'''

复制代码

<iframe
  src="https://sce7a2b9c9d95a-sb-qn.qiqiuyun.net/files/course/2024/08-27/2052535547fa551878.png"
  width="800"
  height="600"
  frameborder="0"
></iframe>

'''

嵌入地图

'''

复制代码

<iframe
  src="https://j.map.baidu.com/aa/5NJ"
  width="600"
  height="450"
  style="border: 0"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
>
</iframe>

'''

嵌入第三方服务(视频等)

'''

复制代码

<iframe
   height=498
   width=510
   src='https://player.youku.com/embed/XNjM2MzAzNzUyOA=='
   frameborder=0
   'allowfullscreen'></iframe>

<!-- 其中  allowfullscreen 属性为 允许全屏模式 --->

'''

referrerpolicy 属性用于控制 <iframe> 请求资源时发送的 Referer 头信息。Referer 头信息通常用于告诉服务器请求是从哪个页面发起的。这个属性可以帮助你控制隐私和安全性，尤其是在处理敏感数据时

no-referrer-when-downgrade 是 referrerpolicy 属性的一个值，表示在以下情况下不发送 Referer 头信息
如果请求是从 HTTPS 页面发送到 HTTP 页面（即从安全协议降级到不安全协议），则不发送 Referer 头信息。
在其他情况下（如 HTTPS 到 HTTPS 或 HTTP 到 HTTP），会发送 Referer 头信息。
这种策略在安全性方面提供了一种平衡。它确保在从 HTTPS 页面请求 HTTP 资源时，不会泄露来源页面的 URL，从而防止潜在的安全风险（如中间人攻击）。

嵌入广告或第三方内容

'''

复制代码

<iframe
  src="https://huodong.taobao.com/wow/a/act/tao/dailygroup/23509/24308/wupr?spm=a21bo.jianhua/a.banner.d1.5af92a895B8bah&wh_pid=daily-565955&disableNav=YES&status_bar_transparent=true&custom_content_source=a2113w.30197676"
  width="1000"
  height="550"
  sandbox="allow-same-origin allow-scripts"
  title="广告"
>
</iframe>

'''

8.4iframe最佳实践

七.语义化标签

1.HTML语义化标签

1.1什么是语义化标签

就是那种有表示含义的那种标签,HTML 语义化是指我们在写 HTML 结构时用有英文语义的标签，使 HTML 更易于开发人员和机器的阅读和理解。

1.2为什么要用?

提高SEO优化,让代码看起来更有层次感,便于阅读,更好维护,国际化让更多人看得懂

1.3span标签是什么?用来干什么?

span标签是区块标签,它是用来更好与CSS维护,比如你想要用来突出某个东西,可以用span标签包裹起来,然后用CSS进行修饰

1.4文本格式化标签?最佳实践

2.区块标签

2.1什么是区块标签

简单来讲区块标签就是相当于我们每个模块的头,身体,脚等部位,也是语义化标签

2.2区块标签的最佳实践

八.表单元素

1.HTML表单的基本用法

1.1什么是表单标签

表单标签是form标签

2.单行文本框

2.1单行文本框是什么?

单行文本框是input标签

2.2单行文本框有哪些属性?最佳实践

type属性:单行文本框的type值必须是text,表示单行文本框,单标签
value属性:代表文本框的值
placeholder属性:提示文本,就是以浅灰色的字体出现,并不是文本框中的值
disabled:表示用户不能与元素交互,意思就是禁用的意思

3.密码框

3.1密码框是什么?

密码框的元素也是input标签,但是它的type属性是password,内容是隐藏的

4.单选按钮

4.1单选按钮是什么?

单选按钮也是input标签,只不过它的type值是radio,表示单选按钮的意思

4.2有什么属性?

name:设置自定义名称,设置互斥,所以将多个name的值为相同的
value:向服务器提交的值
checked:表示默认被选中

5.lable标签

5.1这个标签是什么意思,怎么用?

label 标签用来将文字和单选按钮进行绑定,意思就是你点文字的时候它的单选按钮也可以选中

5.2还可以怎么用?(HTML4)了解就好

label 标签是通过 for 属性和单选按钮的 id 属性进行绑定的

'''

复制代码

所在城市：
<input type="radio" name="city" id="beijing" />
<label for="beijing">北京市</label>

<input type="radio" name="city" id="shanghai" />
<label for="shanghai">上海市</label>

<input type="radio" name="city" id="shenzhen" />
<label for="shenzhen">深圳市</label>

'''

6.表单分组

6.1表单分组是什么?

表单分组是分组的表单信息进行分组

6.2有什么属性以及最佳实践

<legend> 提供分组标题

'''

复制代码

<fieldset>
  <legend>个人信息</legend>
  <label for="fname">名：</label>
  <input type="text" id="fname" name="fname" /><br />
  <label for="lname">姓：</label>
  <input type="text" id="lname" name="lname" />
</fieldset>

'''

7.复选框

7.1复选框是什么?

复选框简单来讲就是多选的意思

7.2有什么属性

type属性:它的值必须是checkbox,表示复选框的意思
name属性:同组复选框的name应该设置同样的值
value:向服务器提交的值
checked:表示默认被选中

8.下拉菜单

8.1什么是下拉菜单

<select>标签就是下拉菜单,然后<option>标签就是选项,他们通常一起用

'''

复制代码

请选择 省：
<select>
  <option value="广东省">广东省</option>
  <option value="湖南省">湖南省</option>
  <option value="河北省">河北省</option>
  <option value="陕西省">陕西省</option>
</select>
市：
<select>
  <option value="广州市">广州市</option>
</select>
区：
<select>
  <option value="天河区">天河区</option>
</select>

'''

8.2什么是分组下拉列表

分组下拉列表就是在下拉列表中实现分组显示,通常使用<optgroup>标签分组

'''html

复制代码

<label for="country">国家：</label>
<select id="country" name="country" required>
  <option value="" disabled selected>请选择国家</option>
  <optgroup label="亚洲">
    <option value="CN">中国</option>
    <option value="JP">日本</option>
  </optgroup>
  <optgroup label="欧洲">
    <option value="FR">法国</option>
    <option value="DE">德国</option>
  </optgroup>
</select>

'''

9.多行文本框

9.1多行文本框是什么?

<textarea>标签表示多行文本框

9.2有什么属性

rows:代表的是行数
cols:代表的是列数

10.按钮

10.1什么是按钮

按钮就是button标签

10.2有什么属性

type:=button,表示普通按钮
type:=submit,表示提交按钮
type:=reset,表示重置按钮

11.HTML5新增表单控件

11.1总结常用的表单控件

11.2新增的表单控件

九.HTML5实用但不常用的标签

1.`<details>和<summary>`标签

'''

复制代码

<!-- open 属性为默认展开 -->
<details>
  <summary>点击查看详情</summary>
  <p>这里是隐藏的内容，点击摘要时会展开。</p>
</details>
<details>
  <summary>点击查看详情</summary>
  <p>这里是隐藏的内容，点击摘要时会展开。</p>
</details>

'''

2.`<progress>和<meter>标签`

这两个标签表示的是进度和度量显示

<progress> 用于未知总量的进度（如下载）
<meter> 用于已知总量的度量（如磁盘使用）

'''

复制代码

<label for="file">下载进度：</label>
<progress id="file" value="70" max="100">70%</progress>

<label for="disk">磁盘使用：</label>
<meter id="disk" value="0.6">60%</meter>

'''

3.`<output>标签`

这个标签代表的是每个数的相加(常与表单结合)

'''

复制代码

<form οninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0" /> +
  <input type="number" id="b" value="0" /> =
  <output name="result">0</output>
</form>

'''

4.`<ruby><rp><rt>标签`

4.1基础用法

'''

复制代码

<ruby> 基础文本 <rp>(</rp><rt>注音内容</rt><rp>)</rp> </ruby>

<!-- 给 汉字 添加拼音-->
<ruby>汉<rp>(</rp><rt>Hàn</rt><rp>)</rp>字<rp>(</rp><rt>zì</rt><rp>)</rp></ruby>

'''

4.2可选标签:`<rb>标签`

用于明确包裹基础文本，提升代码可读性（非必需）

'''

复制代码

<ruby>
  <rb>汉</rb><rp>(</rp><rt>Hàn</rt><rp>)</rp> <rb>字</rb><rp>(</rp><rt>zì</rt
  ><rp>)</rp>
</ruby>

'''

十.表格

1.HTML表格标签

table:定义表格
th:表头
tr:行
td:表格单元
caption:定义表格的标题(作为table的第一个子元素出现)
thread:定义表格的页眉
tbody:定义表格的主体
tfoot:定义表格的页脚

2.table属性

border:边框,也是CSS样式的一部分
width:表格的宽度(HTML5不支持)
cellpadding:每个单元格的内容与每个单元格里面的边沿的距离(HTML5不支持)
cellspacing:每个单元格与每个单元格之间的距离,通常设置为0(HTML5不支持)

3.跨行跨列

意思就是实现复杂表格要用到的属性

colspan:规定要跨多少列数
rowspan:规定要跨多少行数

4.表格最佳实践

'''

复制代码

<h2>表格实战 - 跨行跨列</h2>

<table border="1" width="800">
  <caption>
    版本规划任务分配表
  </caption>
  <tr>
    <th colspan="2">需求：V0.3版本规划</th>
    <th>优先级</th>
    <th>任务分解</th>
    <th>产品负责人</th>
  </tr>
  <tr>
    <td rowspan="3">功能模块1</td>
    <td>具体事项1</td>
    <td>3</td>
    <td>任务1</td>
    <td rowspan="3">@翠花</td>
  </tr>
  <tr>
    <td rowspan="2">具体事项2</td>
    <td>4</td>
    <td>任务2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>任务3</td>
  </tr>
  <tr>
    <td rowspan="6">功能模块2</td>
    <td>具体事项1</td>
    <td>2</td>
    <td>任务1</td>
    <td rowspan="6"></td>
  </tr>
  <tr>
    <td rowspan="4">具体事项2</td>
    <td>3</td>
    <td>任务1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>任务2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>任务3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>任务4</td>
  </tr>
  <tr>
    <td>具体事项3</td>
    <td>1</td>
    <td>任务1</td>
  </tr>
  <tr>
    <th colspan="5">备注信息</th>
  </tr>
  <tr>
    <td colspan="5">...</td>
  </tr>
</table>

'''