基本标签

最新推荐文章于 2022-07-01 11:11:39 发布

小余不完美

最新推荐文章于 2022-07-01 11:11:39 发布

阅读量638

点赞数

分类专栏：我的html一小笔记收集

本文链接：https://blog.csdn.net/m0_46466262/article/details/106131338

版权

我的html一小笔记收集专栏收录该内容

16 篇文章 1 订阅

订阅专栏

基本标签

怎么写标签?

标签是由：小于号+中间字符+大于号组成的代码(注意:代码里所有字符都由英文字符组成)

标签的格式

单标签 (单身标签)
双标签(情侣标签)

如果有/(斜杠)的为该标签的结束标签,没有的就为开始标签.

标签即元素,元素即标签.

注释标签

用法:代码的作用，含义，意图写在四个减号中间,内容不会被浏览器解析;

让别人更能明白这段代码你写的是什么内容,有什么作用

!DOCTYPE html 定义html5的文档类型

!表示着重声明,专业术语称为DTD,这是一条指令,告诉游览器所用的标记的版本;

卸载文档的第一行.告诉游览器这是HTML页面,不区分大小写,但是按照惯例,doctype大写.

这个声明是向前兼容的.

html会在老内容支持的前提下不断加入新内容,即使你用以前技术去做的网站,目前仍然能在html5的文档格式进行兼容达到正常的显示.

html 根标签

网页中的所有内容全部放在html标签内部;

网页根标签 lang是language的缩写，代表是该网页属于哪一个国家或是地区的网页;不能写多个.

如果是中文网站写中文,如果写英文,因为一些插件,会识别你这为英文网站并且提示你是否要翻译

head 头部标签

header是网页的头部标签,head里面的内容不会直接出现在网页中,

作用:

主要是帮助游览器和搜索引擎去解析网页.

title 标题标签

title中的内容会显示在游览器的标题栏,游览器会根据title判断网页的主要内容

方便用户通过搜索网页的名字找到相应的网站.

title标签的内容会作为搜索结果的超链接上的文字显示

网页的名字,当把文档加入用户的收藏夹或书签列表时，标题标签的内容将成为该文档链接的默认名称

**注意:**尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的title标题中不要设置相同的内容。

meta标签单标签

meta标签被称为网页的元数据

元数据就是一些与生俱来的底层数据,类比于相当于人的DNA.

作用告诉游览器和搜索引擎基本数据

meta charset=“utf-8”

作用:网页文字的编码格式,避免乱码问题.

游览器不知道网页文件的编码集的话就会导致乱码

(计算机不认识中文,我们也可能不认识法语),写上utf-8就是支持中文的万国码.

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为’UTF-8’。

如果一个网页要显示很多国家的语言就开发出了utf-8,在开发中我们使用的字符集都是utf-8.

meta name=“keywords” content=“关键字信息”

name属性指定网页的数据名称

content属性指定数据的内容

表示网页的关键字信息

可以同时指定多个关键字没有限制,关键字之间用,隔开

例如: 京东网站 content写网上购物,网上商城,家电,家居,母婴,图书,可以根据这些关键字找到网站

meta name=“description” content=“网页的描述信息”

描述信息被搜索引擎采用后,作为页面的摘要去显示

网站的描述会显示在搜索引擎的搜索结果中

body存放用户看到的所有内容

body是html的子元素,表现网页的主题部分.所有可见部分都应该放在body里面

可以存放包含文字,图片,视频,音频.整个网页就这四类资源

视频目前最占带宽流量的流媒体服务

div(DIVision) 划分区域标签

Div标签本身没有什么特别之处,没有语义，没有权重,

div标签最大功劳的是替代了以前table标签布局,

正因为没有语义我们可以利用idv在网页内容中划分出多个矩形区域,存放不一样的内容.

一个个div就像一个个集装箱,我们去用这些集装箱去各式各样的物品,也就是我们去装我们的标签,来达到页面的位置布局.

目前来说div还是我们主要的布局元素

h标签正文中的标题

H标签的重要性仅次于页面Title,文章会有标题,如首页的logo上可以加H1标签,包含最重要的关键词.

h1标签自带的权重使得网页的蜘蛛爬虫认为它最重要.

一个页面最多一个h1标签,就像你生命中最重要的女人一个.

更小的标题可以使用h3标签,没有明确的个数限制,但是要和h2有一定的比例关系,一个h2对应三个h3.就像一个公司最上面一个总裁,两三个副总裁,后面还有各个部门和职员一样.

h分出的区域和div分出的区域用户看起来没有任何区别,

标签写的更加符合规范时是给搜索引擎看的,搜索引擎只会收录一些比较重要的标签

div京东和h1京东,h1写的京东肯定会被收录

大量使用H标签反而会适得其反,使得主题不能突出,搜索引擎爬虫就不能正确的爬出你想要它爬出的内容.最终网站排名反而不好.

ul（ Unordered List) li (list-item) 无序列表标签

内容相似、结构相仿、布局接近使用无序列表.

使用li表示列表项

ul 标签子层级里只能写li标签.

如果你想添加p,div等标签,你在li里面添加一万个都没关系.

用ul标签划分出很多相同大区域,li划分大区域里面单个相似的区域.

布局之前先做结构也是去用好标签,标签使用正确网络布局才可能正确.

属性:type

无序列表的符号,不建议去使用,但凡是样式的表现效果请使用css去实现.
值:默认disc：实体圆、circle：空心圆、square：实体方块
仅做了解

<!-- 无序列表默认属性type的值是disc，disc定义一个实体圆，所以disc不用刻意去设置 -->
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>


    <!-- 这些都是通过type来定义的，circle是定义一个空心圆 -->
        <ul type="circle">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>

    <!-- square定义实体方块 -->
        <ul type="square">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>

ol（ ordered lists ）li (list-item) 有序列表标签

也是划分内容相似、结构相仿、布局接近的区域

但是每个区域的内容是有先后关系的

属性:type

无序列表的符号,不建议去使用,但凡是样式的表现效果请使用css去实现.
值:1、A、a、l、i、start.
仅做了解

	<!-- 有序列表默认是数字往下计数的 -->
        <ol>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
  

<!-- 定义A，就是按照大写字母来计数的，当然了，不能直接定义B，它不是不会从B开始数的 -->
        <ol type="A">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    

<!-- 定义a，就是安装小写字母开始计数的 -->
        <ol type="a">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    

<!-- 定义I，就是按照大写罗马数字计数的 -->
        <ol type="I">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    

<!-- 定义i，就是按照大写罗马数字计数的 -->
        <ol type="i">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    

<!-- start属性，就是按照从多少数来计数，比如我想从3开始计数。start属性只能定义数字，不支持英文字母哦。-->
        <ol start="3">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>

dl （ definition list) > dt + dd自定义列表标签

<dl>/*Definition List 定义列表*/
	<dt>我是标题</dt>/*Definition Term 定义项*/
     <dd>我是正文，我必须长长长长长长长长长</dd>/*Definition Description 定义描述*/
</dl>

内容不完全一样、结构相仿、布局接近、每个区域的内容没有先后关系的的区域

从语义上来讲DT是名称,是标题,DD是解释,是内容.

dt和dd标签是同级的,都放于dl标签之内,dt和dd不能相互嵌套.

必须结合dl标签去使用dd,dt标签,不能单独使用dt,dd标签.

ps:列表之间可以相互嵌套

p(paragraph)标签段落标签

作用:在网页上划分出一个专门存放大段文字的区域.

span标签划分文字区域

作用:

在网页圈出内容进行单独处理

如果一段文字某几个文字变需要变色和加背景颜色,那这些特殊的文字就用span去包裹.

strong b标签重要文字标注

作用:

网页内容中的某段文字中间标注出特别重要的文字,会对相应的文字进行加粗处理.

b标签只是规定文本加粗,是一个表现效果的标签

strong还有除了文本加粗强调文字的作用.能让搜索引擎觉得里面的字很重要.

em i都为斜体标签

em不仅能使文本变成斜体,而且还能够强调

b标签只是规定文本变斜,是一个表现效果的标签

但是i标签现在没有被淘汰,广泛应用于小图标上.(iconfont)

blockquote 标签用于大段引用文字展示

主要去划分区域展示引用的古典,名人名言.

a标签

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

链接:a 标签最重要的属性是 href 属性，它指示链接的目标。

属性:

href 指定跳转的目标路径

1.值可以是一个外部网站的地址

2.值也可以写一个内部的地址

**锚点:**href="#ID名" 跳转到页面的指定位置, 只需讲 href属性设置为 #目标元素id的属性值

在开发中可以将#作为超链接的路径的占位符使用,会跳转页面的顶部

可以使用javascript:;来作为href的属性,此时点击这个超链接什么也不会发生.

target属性 用来指定超链接的打开方式

target="_self" 默认值在当前窗口打开。

target="__blank" 在新窗口打开；

img标签

用于向当前页面引入一个外部图片

属性

src=“图片地址” src是sourse的缩写，表示我们需要显示的图片文件所在的位置

width/height 图片的宽高, (单位是像素) 最好写图片原始尺寸.

-宽度和高度如果只修改一个,另一个会等比例缩放

**注意:**一般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大

但是在移动端,经常需要对图片的缩放(一般是大图缩小)

alt图片描述图片无法加载出来显示搜索引擎会根据alt内容来识别图片,如果不写不会被搜索引擎收录

title鼠标悬停会出现文字提示

常见的图片格式

jpeg(jpg)

—支持的颜色丰富,不支持透明效果,不支持动图

—一般用来显示照片

gif

----支持的颜色比较少,支持简单透明,支持动图

—颜色单一的图片,动图

png

—支持的颜色丰富

—复杂透明的图片(专为网页而生的)

webp

—这是谷歌专门推出来表现网页中的图片的一种格式

—它具备所有图片的优点,而且文件还特别小

—缺点:兼容性不好

base64

—将图片使用base64进行编码,这样可以直接将图片直接转换为字符.通过字符的形式引入图片

—一般都是一些需要和网页一起加载的图片才会使用base64

**原则: **效果一样,用小的

效果不一样,用效果好的,同样考虑下图片大小

video 视频标签

src=“视频地址”: 表示我们需要显示的视频文件所在的位置

支持格式

MP4 WebM Ogg

属性:

controls 是否允许用户控制播放暂停

autoplay 自动播放打开页面时候自动播放,目前大部分游览器都不会对音乐自动播放

loop 循环播放

audio标签音频标签

src=“视频地址”: 表示我们需要显示的视频文件所在的位置

默认情况下不允许用户自己控制播放停止

属性:

controls 是否允许用户控制播放暂停

autoplay 自动播放打开页面时候自动播放,目前大部分游览器都不会对音乐自动播放

loop 循环播放

支持格式:

wav、mp3、ogg

pre标签

完全按照你的书写格式还原

其他标签

s del删除线

u ins 下划线

big文字变大115% small文字变小85%

hr 水平分割线 br换行

sub规定下标 sup规定上标

<p>  2h+o=h<sub>2</sub>o  </p>
<p>  3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup>   </p>

特殊的字符

因为网页编写的多个空格默认情况下会自动被游览器解析为一个空格

在html有些时候我们不能直接书写一些特殊符号.

比如:多个连续的空格,字母两侧的大于号和小于号

如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符);

实体的语法:

&实体的名字

空格;  
小于号: < less than
大于号: > greater than
版权符号 ©

常用块级和行内元素

块元素(block element)

div h ol ul li dl dt dd p blockquote pre

行内元素 (inline elemnet)

a b strong em i span video audio img

块级元素独占一行,在网页中一般使用块元素进行页面的布局

行内元素并列一行,主要用来包裹文字

一般情况下我们在块级元素可以包裹任何类型的标签,行内元素只能包裹行内元素.

特殊:

p元素不能放任何的块级元素.

a标签可以放块级元素

HTML标签语义化

HTML标签语义化就是用正确的标签做正确的事情,让标签有自己的含义。

作用:

让⻚⾯的内容结构化，便于对浏览器、搜索引擎解析；

<p>一行文字</p>
<span>一行文字</span>
/*此时都是写了一行文字,而p标签的含义为段落,span标签则没有独特的含义.*/

代码规范:tab来缩进代码

正确嵌套,元素嵌套就是一颗种族树,最上面是曾祖父,下面是所有的孩子和孙子.

子层级代码相对父层级代码缩进一个tab.

开始标签和结束标签发生换行请保证在竖直位置对齐.

注意:我们一定要严格要求我们书写规范.

在企业面试时面试官第一眼看的是代码格式.这是工程师的第一要求,也是工程师的自我修养.

小余不完美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基本标签

基本标签怎么写标签?标签是由：小于号+中间字符+大于号组成的代码(注意:代码里所有字符都由英文字符组成)标签的格式单标签 (单身标签)双标签(情侣标签)如果有/(斜杠)的为该标签的结束标签,没有的就为开始标签.标签即元素,元素即标签.注释标签用法:代码的作用，含义，意图写在四个减号中间,内容不会被浏览器解析;让别人更能明白这段代码你写的是什么内容,有什么作用!DOCTYPE html 定义html5的文档类型!表示着重声明,专业术语称为DTD,这是一条指令,告诉
复制链接

扫一扫