HTML和CSS ——3、常用标签

最新推荐文章于 2022-09-27 17:33:24 发布

不能吃的莴苣

最新推荐文章于 2022-09-27 17:33:24 发布

阅读量208

点赞数

分类专栏： HTML和CSS笔记文章标签： html css css3

本文链接：https://blog.csdn.net/m0_46291458/article/details/108006380

版权

HTML和CSS笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

常用标签

一、属性

可以为HTML标签设置属性。
通过属性为HTML元素提供附加信息
属性需要设置在开始标签和自结束标签中
属性总是以名称/值对的形式出现。
比如：name=“Value”
有些属性可以是任意值，有些则必须是指定值。

例如：

标题

二、HTML5基本结构

<!-- 文档声明 -->
<doctype html>
<html>
    <!-- 头标签 -->
    <head>
        <!-- 告诉浏览器网页所采用的彪马字符集，浏览器应该以什么解码，
			 meta标签中也可告诉浏览器其他的内容，下面会说 
			 meta标签用来设置网页的一些元数据，比如网页的字符集，关键字，简介
			 meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个/
		-->
        <meta charset="utf-8">
        <!-- 网页标题 -->
        <title></title>
    </head>
    <body>
        <!-- 此处写网页的结构 -->
    </body>
</html>

补充meta标签
- 使用meta标签还可以用来设置网页的关键字
```
<meata name="keywords" content="HTML5,JavaScript,前端，Java"/>
```
- 还可以用来指定网页的描述
  
  搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎的排名
```
<meta name"description" content="发布h5,js等前端相关的信息"/>
```
- 使用meta可以用来做请求的重定向
```
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>s
```

三、常用标签

3.1 标题标签

在HTML中，一共有六级标题标签

h1~h6

在显示效果上h1最大，h6最小，但是文字的大小我们并不关心

使用HTML标签时，h1的最重要，表示一个网页中的主要内容，h2~h6重要性依次降低

对于搜索引擎来说，h1的重要性仅此于title，搜索引擎检索完title，会立即查看h1中的内容

h1标签非常重要，它会影响到页面在搜索引擎中的牌面，页面只能写一个h1

一般也米娜中标题标签只使用h1 h2 h3，h3以后的基本不使用

↓下方为标题的标签的展示效果

h1标题

h2标题

h3标题

h4标题

h5标题

h6标题

3.2 段落标签

段落标签，段落标签用于表示内容中的一个自然根

使用p标签来表示一个段落

p标签的文字，默认会独占一行，并且与段之间会有一个间距
```
<p>
    这是一个p标签
</p>
<p>
    这是一个p标签
</p>
```
显示效果↓

这是一个p标签

这是一个p标签

3.3 换行标签

在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，

换行也会当成一个空格解析
在页面中可以使用br标签来表示一个换行，br标签是自结束标签

<font>这是一个演示</font><br/>

3.4 hr标签

hr标签也是一个自结束标签，可以在页面中生成一条水平线

<hr/>
<!-- 下面有例子 -->

3.5 实体

<!-- 
	在HTML中，一些如< > 这种特殊字符是不能直接使用，
		需要使用一些特殊的字符来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
		浏览器解析到实体时，会自动将实体转换为其对的字符
	实体的语法：
		&实体的名字；
			< &lt;
			> &gt;
			空格  &nbap;
			版权符号  &copy;
-->

3.6 图片标签

img标签解释

使用img标签来向网页中引入一个外部图片，img也是要给自结束标签

属性：

src：设置一个外部图片的路径

alt：可以用来设置在图片不能显示时，对图片的描述

搜索引擎可以通过alt属性来识别不同的图片

如果不写alt属性，则搜索引擎不会对Img中的图片进行收录

width：可以用来修改图片的高度，一般使用px作为单位

height：可以用来修改图片的高度，一般使用px作为单位

宽度高度两个属性如果只设置一个，另一个也会同时等比例调整大小

如果两个值同时指定则按照你指定的值来设置

一般开发中除了自适应的页面，不建议设置width和height，通过美工修改图片后再引用

<img src=" " alt=" " width=" " height=" "/>

相对路径

src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径
- 相对路径
  
  相对路径指相对于当前资源所在目录的位置
  
  可以使用 …/ 来返回一级目录，返回几级目录就写几个 …/
```

<img src="../../img/demo1.jpg"/>
```
- 绝对路径
```

<img src="C:\Users\不能吃的莴苣\Desktop\HTML+CSS\3.常用标签"/>
```
图片格式
- 图片的格式
  - JPEG
    
    — JPEG图片支持的颜色较多，图片可以压缩，但是不支持透明
    
    — 一般使用JPEG来保存照片等颜色丰富的图片
  - GIF
    
    — GIF支持的颜色少，只支持简单的透明，支持动态图
    
    — 图片颜色单一或者是动态图时可以使用GIF
  - PNG
    
    — PNG支持的颜色多，并且支持复杂的透明
    
    — 可以用来显示颜色复杂的透明的图片
  图片的使用原则：
  
  效果不一致，使用效果好的
  
  效果一致，使用小的

3.7内联框架

使用内联框架可以引入一个外部的页面

使用iframe来创建一个内联框架

属性：

src：指向一个外部页面的路径，可以使用相对路径

在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索

<iframe src="C:\Users\不能吃的莴苣\Desktop\HTML+CSS\2.HTML和CSS简介\HTML和CSS简介.md"></iframe>

↓下方为示例

内联框架示例

3.8 超链接

3.8.1 标签

<a>超链接内容</a>

3.8.2 使用方法一

简单超链接

<!-- 
	使用超链接可以让我们从一个页面跳转到另一个页面
	使用a标签来创建一个超链接
	属性：
		href:指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址
-->
<a href=“http://www.baidu.com”>我是一个超链接</a><br/>

3.8.3 使用方法二

改变内联框架

<!-- 
	a标签中的target属性可以用来指定打开链接的位置
		可选值：
			_self,表示在当前窗口中打开（默认值）
			_blank,在新的窗口中打开链接
			可以设置一个内联框架的name属性，链接会在指定的内敛框架中打开
-->
<a href="https://www.bilibili.com/" target="tom">我是一个超链接</a><br/>
<iframe src="http://www.baidu.com" name="tom"></iframe>

3.8.4 使用方法三

当前页面跳转到指定位置

<!-- 如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部-->
<a href="#">回到顶部</a>

<!--
	html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
	这个属性就是id，id属性在同一个页面中只能有一个不能重复
	href中写#id可以直接跳转到该id的元素所在的位置
-->
<a href="#bottom">回到底部</a>
<p id="bottom">这是带id的p标签</p>

3.8.5 使用方法四

发送电子邮件的超链接（没什么用。。。）

<!--
	发送电子邮件的超链接，点击链接以后可以自动打开计算机默认的邮件客户端
	href="mailto:邮件地址"
	
	当点击这个超链接时，会默认打开计算机的默认电子邮件客户端
-->
<a href="mailto:abc@hahaha.com">发送邮件链接我们</a>

3.9 标签补充

<q></q><!-- 表示一个段引用 -->
<blockquote></blockquote><!-- 表示一个长引用 -->
<strong></strong><!-- 表示强调重要内容 -->
<em></em><!-- 表示语音语调的一个加重 -->

3.10 语义标签

布局化标签，语义标签（没有任何效果）

<!-- 
	header 表示网页的头部
	main   表示网页的主体部分
	footer 表示网页的底部
	nav	   表示网页中的导航
-->
<heager></heager>
<main></main>
<footer></footer>
<nav></nav>

<!--
	aside   和主体相关的其他内容（例边栏）
	article 表示一个独立的文章
	section 表示一个独立的区块，上边的标签都不能表示时使用section
-->
<aside></aside>
<article></article>
<section></section>

<!--
	div  没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
	span 行内元素，没有任何的语义，一般用于在网页中选中文字
-->

3.11 列表标签

→这种实心圆效果的标签

<!--
ul标签效果如下方所示，如果想分成多级，可以在ul中嵌套ul标签
<ul>

</ul>
li标签内填写一项一项的内容
<li></li>
-->
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>
        嵌套内容
    	<ul>
             <li>aaa</li>
    		<li>bbb</li>
    		<li>ccc</li>
        </ul>
    </li>
</ul>

aaa
bbb
ccc
嵌套内容：
- aaa
- bbb
- ccc

→这种数字项的标签

<!--
	ul变成ol,li不变
	效果在下方
-->
<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <ol>
        嵌套内容
    	<ol>
             <li>aaa</li>
    		<li>bbb</li>
    		<li>ccc</li>
        </ol>
    </li>
</ol>

aaa
bbb
ccc
嵌套内容
1. aaa
2. bbb
3. ccc

### 3.12 音频视频标签

音频标签

<!-- 下方有效果 -->
<!--
	audio 标签用来向页面中引入一个外部的音频文件，音视频文件引入时，默认情况下不允许用于自己控制播放停止属性
	audio标签，属性：
		controls:是否允许用户控制播放
		autoplay:音频文件是否自动播放，如果设置了autoplay则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐播放，因为用户体验不好
		loop 音乐是否循环播放
-->
<audio src="1.mp3" controls loop autoplay></audio>

<!-- 除了通过CSS来制定外部文件的路径以外，还可以通过source来指定文件的路径 -->
<audio controls>
    <!-- 4.如果123都不能用，会显示这句话 -->
	对不起，您的浏览器不支持播放音频！请升级浏览器！
    <!-- 1.先看浏览器支持mp3格式吗 -->
    <source src="1.mp3"> 
    <!-- 2.不支持MP3,再看支持ogg格式吗 -->
    <source src="1.ogg">
    <!-- 3.如果是老版浏览器，则用下面这个标签 -->
    <embed src="1.mp3" type="audio/mp3" width="300px">
</audio>

视频标签

<!-- 将audio替换成video,使用方式与audio基本一致 -->
<video src="a.mp4"></video>
<!-- 也可以通过source来引入外部文件 -->
<video controls>
	<source src="a.mp4">
</video>

效果图↓

四、xHTML语法规范

1.HTML中不区分大小写，但是我们一般都使用小写
2.HTML中的注释不能嵌套
3.HTML标签必须结构完整，要么成对出现，要么自结束标签

但即便标签不规范，浏览器也会尽最大的努力解析页面，自动修正不合理代码，但有时会修正错误

4.HTML标签可以嵌套，但是不能交叉嵌套

<!-- 例如 -->
<!-- 正确示范 -->
<p>
    今天天气<font>真好</font>
</p>
<!-- 错误示范 -->
<p>
    今天天气<font>真好</p>
</font>

五、内联和块元素

块元素

div就是一个块元素，
	所谓的块元素就是会独占一行的元素，无论他的内容有多少他都会独占一行
	例如：p   h1   h2   h3   ...
	div这个标签没有任何意义，就是一个纯粹的块元素，并且不会为它里面的元素设置任何的默认样式，
	div元素主要用来对页面进行布局的

行元素

span是一个内联元素（行内元素）
	所谓的行内元素，指的是只占自身大小的元素不会占用一行
	常见的内联元素：a img iframe span
	span没有任何的意义，span标签专门用来选中文字，然后为文字来设置央视

块元素主要用来做页面中的布局，内联元素主要用来选中文本色设置样式，

一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素

a元素可以包含任意元素，除了它本身

p元素不可以包含任何其他的块元素

不能吃的莴苣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS ——3、常用标签

常用标签一、属性可以为HTML标签设置属性。通过属性为HTML元素提供附加信息属性需要设置在开始标签和自结束标签中属性总是以名称/值对的形式出现。比如：name=“Value”有些属性可以是任意值，有些则必须是指定值。例如：标题二、HTML5基本结构<doctype html><html>  <head> <!-- 告诉浏
复制链接

扫一扫