01-HTML与CSS_简述html与css的关系及其各自的作用-CSDN博客

本文链接：https://blog.csdn.net/qq_43975332/article/details/119380089

1 HTML与CSS

1.1 什么是HTML？什么是CSS

HTML(HyperText MarkUp Language)超文本标记语言

HTML 不是一种编程语言，而是一种标记语言 (markup language)

他是通过使用标记来描述文档结构以及表现形式的一种语言，然后由浏览器进行解析，最终把结果显示在网页上，它是网页构成的基础。

HTML特点：

1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

CSS (Cascading Style Sheets) 层叠样式表

是一种用来表现文件样式，修饰文档的计算机语言，CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。

1.2 HTML与CSS之间的关系

HTML更加偏向于内容，这个内容包括文档、图片、表格、链接以及和你要写的相关内容。

CSS则是一个格式，具体就是对网页的格式说明，比如图片放在什么位置，网页中设置什么背景图片、文档中所用的字体、大小以及颜色等等，还有一些用特殊的标注来强调重要内容。

HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML

1.3 W3C标准（网页三要素）

在这里插入图片描述

HTML网页框架搭建，用于描述页面的结构

CSS用于表现页面中元素的样式（颜色、字体、背景）

JavaScript用于响应用户操作，动态+事件

HTML就像是一个人素颜，而CSS就像是衣服和化妆品，用来装饰HTML，JS相当于这个人的动作，能歌能舞，这三要素使这个人变得活起来

2.HTML

2.1前端开发环境搭建

推荐使用编辑器：Visual Studio Code

微软推出的跨平台编辑器。它采用经典的VS的UI布局，功能强大，扩展性很强。支持多种语言开发,只需要安装对应的插件即可

特点：丰富的插件支持、可进行git管理；

可用于编写HTML的编译工具还有很多

例如：记事本， hbuilder, webstorm, sublime等.

VSCode插件推荐

HTML CSS Support - Html提示Css自动补全

HTML Preview - 提供预览HTML文档的功能

HTML Snippets - 完整的HTML标签，包括HTML5片段

Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能（实施刷新）

open in browser - 可以在默认浏览器或应用程序中打开当前文件。

2.2 HTML文档的基本结构

在vscode的新建空白html页面中可以通过输入“ ！”或“ html5 ”快速生成html结构

<!-- 文档头信息 -->
<!-- DOCTYPE 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范 -->
<!DOCTYPE html>
<!-- html标签有且只有一个 -->
<!-- lang 代表语言，en代表英语 -->
<html lang="en">
 <!--头部 head:浏览器设置    -->
<head>
    <!-- 字符编码：UTF-8、GBK、unicode、gb2312 -->
    <meta charset="UTF-8">
	<!-- 如果网页在 IE 浏览器上观看, 让 IE 以最高版本显示网页  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--  viewport 设备的屏幕
        width=device-width width属性控制设备的宽度，确保它能正确呈现在不同设备上。
        initial-scale=1.0 确保网页在不同设备宽度加载时，不会有任何的缩放  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页选项卡标题 -->
    <title>Hello HTML</title>
</head>
<!-- 网页的具体内容和结构 -->
<body>
    欢迎来到HTML！！！
</body>
</html>

2.3 语法

2.3.1 注释

在vscode中通过使用“vctrl+/"可以给内容进行注释

<!-- “ctrl+/”可以进行注释，这是注释内容 -->

2.3.2 元素

（1）单标签元素，仅有一个标签

<meta /> 、<img />、<br/>

（2）双标签元素，由开始标签和结束标签组成

<div></div>
<p></p>

2.3.3 核心属性

绝大多数标签都具有的属性，有title、id、class、style。

（1）title：描述信息

（2）id：唯一标识

（3）class：标识一类元素

（4）style：样式

2.4 元素的分类

元素按照显示的不同, 可以分为两类:

块元素
行内元素

块元素

作用：搭建页面结构

特点：

独占一行空间
默认宽度100%，如果没有父元素，宽度相对视图区而言，如果有父元素，相对父元素而言
高度由内容或子元素高度撑起
可以通过css设置宽高
块级元素可以包含行内与块级

元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav…

行内元素（img、input特殊行内，可以直接设置宽高、置换元素）

作用：填充网页内容

特点：

与其他元素共享一行空间
宽高由自身内容决定
行内元素中不可嵌套块元素（行内相对来说只能包含行内）
不能通过css指定其宽高

元素：span、a、img、strong、b、i、em、del、u、input、textarea、select…

常见的行内块级元素：

拥有内在尺寸，可设置高宽，不会自动换行
(button,input，textarea,select), img等，label标签不是

块级与行内区别：（高频面试题 80%）

块级独占一行，行内共享一行
块级可以直接设置狂傲，而行内不行（通过CSS的display:block / inline-block属性可以给行内元素设置宽高）
块级可以包含行内与块级，而行内只能包含行内

标签显示模式转换 display

块元素—>行内：display:inline;

行内元素—>块元素：display:block;

块、行内元素转换为行内块元素： display: inline-block;（可以设置宽高但是不会独占一行，尽量不用）

3 常用的元素标签

3.1 h标签

h标签表达的意思是网站的标题，根据网站标题的重要性分不同的等级。主要有

-

六个重要分级

被H系列1-6包含的会独占一行，并且表达加粗效果，H1最大，H6最小，超过H7时是没有效果的

<!-- 
    h标签影响文章在搜索引擎中的排名 
    常用h标签 h1、h2、h3 
    对于搜索引擎来说，h1标签仅次于title标签
    一个页面最好只写一个h1标签
-->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<h7>我是h7标签</h7>

在这里插入图片描述

3.2

p标签

段落标签

表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距

段落与段落之间有空隙

br标签

单标签，表示强制换行
是一个自结束标签 br标签的语义是不另起一个段落换行

hr标签

hr标签可以在页面中生成一个分割线

常见字符实体

空格  &nbsp;
  <  &lt;
  >  &gt;
  “  &quot;
  &  &amp;
  ‘  &apos;

<p>
    段落标签，段落&quot;标签&quot;用于表示内容中的一个自然段,<br><hr>
	使用p标签来表示一个段落,
	p标签中的文字，会独占一行，并且段与段之间会有一个间距
</p>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;p标签用于在HTML文档里定义一个段落。浏览器在显示段落时,将在其前后分别插入一个空白行。
</p>

在这里插入图片描述

3.3 img标签

在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置
**src：**设置一个图片的路径（绝对路径和相对路径，最好使用相对路径）
**alt：**可以用来设置在图片不能显示的时，对图片的描述
**width：**设置图片的宽度
**height：**设置图片的高度
**title：**鼠标悬停的时候，弹出的描述框中显示相应内容。

相对路径：

./1-box.html

.代表当前目录（./也可省略）

…/images/1.png

…代表上级目录（…/不可以省略）

绝对路径：

远程路径：http://ip:端口号/项目名/文件名

本地路径：file://d:/Briup/Code/02-HTML/day01/01-HelloHtml.html

<!-- 加载本地的图片 -->
<!-- 使用img自带的height和width属性,只需要设置宽或高中的其中一个属性即可（根据设置的属性原比例调整）-->
<img src="./images/background3.jpg" alt="网络过慢，图片加载失败" width="400px" title="这是一个图片">

<!-- 加载url链接的图片 -->
<img src="https://t7.baidu.com/it/u=2609096218,1652764947&fm=193&f=GIF" alt="" width="400px">

在这里插入图片描述

3.4 a标签

标签定义超链接，用于从一张页面链接到另一张页面。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

href=" " 跳转路径
如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https://

**target属性：**控制如何跳转
_self:用于当前的选项卡中进行跳转，也就是不新建页面跳转
_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转

<!-- 加载本地页面 -->
<a href="./05-img标签.html" target="_blank">05-img标签.html</a><br>

<!-- 加载外部网站 -->
<a href="https://www.baidu.com/" target="_blank" title="百度">百度一下</a><br>

<!-- 将img标签当做a标签 在a标签里嵌套img标签 -->
<a href="https://www.baidu.com/" target="_self"title="百度">
    <img src="./images/background3.jpg" alt="" width="200px">
</a>

mailto链接

mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook，那么直接点击mailto链接就可以获得默认设置的邮件信息。

创建mailto链接

<a href="mailto:name@email.com">Email</a>

参数如下：

参数	描述
mailto:name@email.com	e-mail recipient address
cc=name@email.com	carbon copy e-mail address
bcc=name@email.com	blind carbon copy e-mail address
subject=subject text	e-mail的题目
body=body text	e-mail的内容
?	和浏览器地址操作一样，第一个参数符合是？
&	其他参数符号是&

**仅仅填写发送邮件的地址！**
<a href="mailto:haorooms@126.com">给haorooms发送邮件</a>
**有邮件地址和邮件主题的链接**
<a href="mailto:haorooms@126.com?subject=The%20subject%20of%20the%20mail">给haorooms发送邮件</a>

base标签

base标签为页面上的所有链接规定默认地址或默认目标

base标签必须要写在head标签之间
如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行

<base target="_blank">

假链接

点击之后不需要跳转的链接我们称之为假链接，需要设置target属性

如果设置为#，返回顶部。href="#"
如果设置了id属性，那么我们可以在href中设置：#目标元素id值，进行跳转
如果href="javascript:;"表示什么都不执行，这样点击时就没有任何反应

锚点

使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="center">我是中部</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- 锚点 -->
<!-- 
1给目标位置的标签添加一个id属性
2告诉a标签你需要跳转到的目标标签对应的id
-->
<a href="#center">跳转到中部</a>

<!-- 通过锚点跳转到指定页面的指定位置 -->
<a href="04-h标签.html#somewhere">跳转到h标签页面</a>

//04-h标签.html
<p id="somewhere">找到我</p>

3.5 其他标签

<!-- em 意为强调，突出文章重点，文字用斜体来显示 -->
<em>我是em标签</em>

<!-- strong 用于强调文本，但它强调的程度比em更强一些 用加粗的字体（相对于斜体）来显示-->
<strong>我是strong标签</strong>
<hr>

<!-- 规定粗体文本 -->
<b>我是b标签</b>
<!-- 规定斜体文本 -->
<i>我是i标签</i>
<hr>

<!-- 下划线 -->
<u>我是下划线</u>

<!-- div 无意义的块级元素 主要用于搭建网页架构 -->
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>

<!-- span标签 无语义标签 用来组合文档中的行内元素 -->
<span>我是span标签</span>
<div>我是一个<span style="color: red;">块级</span>元素</div>

在这里插入图片描述
注意：HTML5 废了一些纯控制渲染的标签
center 、big、font、strike、b 等

3.6 h5新增标签

video标签

作用：用来播放视频

支持的视频格式：MP4、WebM、Ogg

格式一:
<video src=""></video>

<!-- video标签 -->
<video src="./static/Amazing design.mp4" width="600px" controls autoplay muted></video>

格式二:（了解）
<!-- 为了解决浏览器适配问题，没有一种视频格式是所有浏览器都支持的 -->
<video>
    <source src="" type=""></source>
	<source src="" type=""></source>
</video>

<!-- 把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放 -->
<video autoplay="autoplay" controls="controls">
    <source src="images/sb1.webm" type="video/webm"></source>
    <source src="images/sb1.mp4" type="video/mp4"></source>
    <source src="images/sb1.ogg" type="video/ogg"></source>
</video>

属性：

src: 告诉video标签需要播放的视频地址
autoplay: 用于浏览器加载完视频文件后自动播放（在谷歌、苹果浏览器中已禁用，可再添加muted属性实现）
controls: 规定浏览器应该为视频提供播放控件（播放、暂停、音量和进度条等控件）
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放
muted: 静音
width/height: 设置视频窗口的宽高

audio标签

作用：用来播放音频

格式:

<audio src=""></audio>
<audio>
    <source src="" type="">
</audio>

注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster

HTML 音频/视频方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道。
canPlayType()	检测浏览器是否能播放指定的音频/视频类型。
load()	重新加载音频/视频元素。
play()	开始播放音频/视频。
pause()	暂停当前播放的音频/视频。

3.7 h5新增语义化标签

并无实际样式，作用相当于div，这种语义化标签能提升搜索引擎的友好性

<header>:头部标签 
<nav>:导航标签
<article>:内容标签
<section>:块级标签
<aside>:侧边栏标签
<footer>:尾部标签
<details>:用于标识该元素内部的子元素可以被展开,收缩显示的元素
    open:用于展示该元素是否展开
    <summary>:details元素的子元素，描述信息

<!-- details标签 -->
<details open>
    <!-- 标题信息 -->
    <summary>球类运动</summary>
    <!-- 要展示的数据 -->
    <div>篮球</div>
    <div>足球</div>
    <div>乒乓球</div>
</details>