HTML5+CSS3笔记01（标签）

尉迟鸿熙

2023-12-01

初识web

WEB标准的构成：

构成	语言	说明
结构	HTML	页面元素与内容
表现	CSS	网页元素的外观和位置等（页面元素）
行为	JavaScript	网页模型的定义与页面交互

第一章初识HTML5

1 标签

<!DOCTYPE html> <!-- 文档类型声明：用于向浏览器说明当前文件使用哪一种HTML或xhtml标准规范 -->
<html lang="en"><!-- 根标签：用于告知浏览器其自身是一个HTML文档 -->
<head> <!-- 头标签：用来封装其他位于头部的标签 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head><!-- 头标签的结束 -->
</body><!--主体标签：浏览器中显示的内容都必须位于body标签内   -->
    开速写出结构：shift+! 按 enter
    注释快捷键：CTRL+/
</body><!-- 主体的结束 -->
</html><!-- 文档的结束 -->

1.1标签概述

所谓标签就是放在“<>”符号中表示某个功能的编译命令，也称为HTML标记或HTML元素
标签的分类：
双标签：由开始标签+结束标签如 < html >,< /html >
语法格式：

<标签名>内容</标签名>

单表签：一个标签完成整个功能的描述的标签
快捷键为：CTRL+/
语法格式：

<标签名/>

注释标签是一种具有特殊功能的单表签

1.2标签的关系

父子关系（嵌套关系）：在标签的嵌套的过程中，必须先结束最靠近内容的标签，再按照由内到外的顺序依次关闭标签。
兄弟关系（并列关系）：两个标签处于同一级别并且没有包含关系。

1.3标签属性

语法格式：

<标签名 属性1="属性值" 属性2="属性值" ···></标签名>
<p align="center">我是居中显示的文字</p>

1.4HTML5 文档头部相关标签

1 < title >
< title >用于定义HTML页面的标签（网页的名字），位于head标签的内部且只有一对
2 定义页面元素信息标签<meta / >
< meta / >是一个单表签，本身不包含任何内容，仅仅表示网页的相关信息。通过标签的两组属性，可以定义页面的相关参数。

<meta  name="名称" content="值"/>

http-equiv属性提供参数类型，content属性提供对应的参数值在HTML5中简化了字符集的写法，代码如下： ```html ``` ## 2 文本控制标签 ### 标题标签

<hn align="对齐方式（left【默认】,rifht,center）">标题文本</hn>
n的取值为：1~6，代表1~6级标题

    <h1>一级标题(默认对齐方式，左对齐)</h1>
    <hr>
    <h2 align="left">二级标题（左对齐）</h2>
    <hr>
    <h3 align ="right">三级标题（右对齐）</h3>
    <hr>
    <h4 align="center">四级标题（中间对齐）</h4>

2 文本控制标签

2.1段落标签

<p align="对齐方式">段落文本</p>

2.2水平线标签

<hr>

2.3换行标签

<br>

3 文本样式标签

3.1文本格式化标签

	<strong>加粗的文字</strong>
    <ins>下划线</ins><br>
    <em>斜线</em><br>
    <del>删除线</del><br>
    <cite>引用</cite>
    &nbsp —— 空格符

4代码总结

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>我的第一个网页</title>
</head>
<body>
   <!-- 注释：ctrl + / -->
   <h1>一级标题(默认对齐方式，左对齐)</h1>
   <hr>
   <h2 align="left">二级标题（左对齐）</h2>
   <hr>
   <h3 align ="right">三级标题（右对齐）</h3>
   <hr>
   <h4 align="center">四级标题（中间对齐）</h4>
   <strong>加粗的文字</strong>
   <ins>下划线</ins><br>
   <em>斜线</em><br>
   <del>删除线</del><br>
   <p>Swiss Army knife 可以说是本周的关键词了，多个项目采用该词来描述它的特性：像是能全方位解决浏览器“网络”操作的 CyberChef <br> 方便你进行数据加密、解编码，还有帮你处理 JSON 数据的 DevToys、方便在查询数据文件的 dsq，都是很实用的开发小工具，符合“瑞士军刀”的特性。
       <br>
       当然还有一些好用的大厂新鲜开源的工具，比如用在王者荣耀“身上”的动画工具 libpag，还有纯、标准卷积神经网络实现的 ConvNeXt，方便你做桌面窗口开发的 Windows.js…
       以下内容摘录自微博@HelloGitHub 的 GitHub Trending 及 Hacker News 热帖（简称 HN 热帖）,<br>
       选项标准：新发布 | 实用 | 有趣，根据项目 release 时间分类，发布时间不超过 14 day 的项目会标注 New，无该标志则说明项目 release 超过半月。由于本文篇幅有限，还有部分项目未能在本文展示，望周知 </p>
       <hr>
   <p><font color="blue">版权声明：本文为CSDN博主「削微寒」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
       原文链接：https://blog.csdn.net/a419240016/article/details/122677852</font></p>
       <img src="C:\Users\23306\Pictures\Camera Roll/41e4ec2a94d377093b54f5f7e34c96b3.jpeg" alt="我是一张风景图" title="一张风景图">
   <img src="C:\Users\23306\Pictures\Camera Roll/cat.gif" alt="">
   <img src="cat.gif" alt="zheshiyizhimao">
   <img src="cat.gif" alt="">
   <img src="cat.gif" alt="">
   <img src="cat.gif" alt="">
   <img src="cat.gif" alt="">
   <img src="cat.gif" alt="">
</body>
</html>

5 图片标签

代码：

<img src=" "alt="">
<img src="./文件名.后缀"><!-- ./当前路径-->

src
属性名：src
属性值：目标图片的路径
注意点：
1当前网页与文件在同一个文件夹中，路径直接写成目标图片的名字***（包括后缀）即可
alt***
属性名：alt (当图片不显示的时候显示的文字)
属性值：替换文本
title
属性名：title
属性值：提示文本
注意点：当鼠标悬停时才显示文本

6路径的介绍

绝对路径：
指目录下的绝对位置，可直接到达目标位置，通常从盘符开始，或完整的网络地址。
相对路径：
当前文件：当前的HTML网页
目标文件：要找的图片
相对路径的分类：
同级目录：

<img src="目标图片.后缀">或<img src="./目标图片.后缀">

下级目录：

<img src="文件夹名/目标文件.后缀">

上级目录：

<img src="../目标图片.后缀">

7 音频标签

标签属性：
src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条

8 视频标签

标签属性：
src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

9 链接标签

<a href="网址或./目标网页">文字内容</a>
注意：
*当网站开发初期，我们还不知道跳转地址的时候，href的值书写为 #（空连接）
*href:跳转地址

连接标签的属性：
- 属性名：target
- 属性值：目标网页的打开形式
  - -self :默认值，在当前窗口跳转（覆盖原网页）
  - -blank : 在新的网页跳转
    index.html默认主页面

10 列表标签

无序列表
列表标签的组成：
ul——表示无序列表的整体，用于包裹li标签
li——表示无序列表的每一项，用于包含每一行内容
显著特点：列表的每一项默认显示小圆点标识
有序列表
列表标签的组成：
ol——表示有序列表的整体，用于包裹li标签
li——表示有序列表的每一项，用于包含每一行内容
自定义列表
dl——表示自定义列表的整体，用于包裹dt/dd标签
dt——表示自定义列表的标题
dd——表示自定义列表的针对主题的每一项内容
显示特点：dd前会默认显示缩进效果
注意点总结：
ul标签中允许包含li标签
li标签中可以包含任意内容