02-基本标签

基本标签

• 什么是标签?

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

如里面的的冒号: 和分号 引号;
建议你们在输入法属性设置里将中文输入时键入英文标点,习惯使用英文的半角标点符号.

• 单标签 (单身标签)

<br> <hr> <img> <input> <meta> <link> 
不用去写斜杠.
在HTML中单标签加与不加'/'都是可以正常解析的，但在HTML中不需要加，只有在XHTML中才必须加。

• 双标签(情侣标签)

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

HTML模板

注释标签:

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

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

1.!DOCTYPE html 定义html5的文档类型

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

专业术语称为DTD,这是一条指令,告诉游览器所用的标记的版本;

!表示着重声明

这个声明是向后兼容的.

扫描二维码关注公众号，回复： 10391893 查看本文章

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

2.

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

代码统一全部放在html标签内部;

不能写多个.

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

3.head头部标签

里面放的是思想(灵魂),设置浏览器和搜索引擎看的东西

比如一个迎面走来美少女,她脑子里的东西你看不见但是你能看见他的小蛮腰大长腿等等.

4.title

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

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

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

5.meta标签

meta标签被称为元数据

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

6.**meta charset=“utf-8”**单标签

作用:网页文字的编码格式,

游览器不知道网页文件的编码集的话就会导致乱码(计算机不认识中文,我们也可能不认识法语),写上utf-8就是支持中文的万国码.

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

如果一个网页要显示很多国家的语言就开发出了utf-8,

为什么utf-8不作为默认文字编码格式,因为要适配这么多国家的语言,但是我们要保证网页显示所有文字加载的足够快,

所以utf-8有时候不是最优的选择.

由于一个网页的网址和网站搜索信息的局限出现了关键字

7.meta name=“keywords” content=“关键字信息” 单标签

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

字数没有限制;

但是百度有其防作弊算法,你写的几十万的词,网上网站内容内容没有那么多,网页实际内容和关键字描述不匹配;

当用户点击进立马关闭,用户点击关闭的这段时间少于一个阈值,此时百度就会判断是垃圾网站,排名反而会下降.

8.**meta name=“description” content=“网页的描述信息”**单标签

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

什么是SEO？

SEO(Search Engine Optimization)，即搜索引擎优化。SEO是随着搜索引擎的出现而来的，两者是相互促进，互利共生的关系。SEO的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。而优化的目的就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。

为什么搜索引擎带来了SEO？

​ 在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。一个关键词对应多个网址，因此就出现了排序的问题，相应的与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为SEO。

为什么要做SEO？

提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善（潜在）用户体验，促进销售的作用。

SEO的分类：

白帽SEO：白帽SEO,起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。

黑帽SEO：黑帽SEO,利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。

白帽SEO是做什么的？

对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；

网站内容优化：内容与关键字的对应，增加关键字的密度；

在网站上合理设置Robot.txt文件；

生成针对搜索引擎友好的网站地图；

增加外部链接，到各个网站上宣传。

如果你想让你的网站排名靠前

交钱,百度有自己的一套竞价排名系统,你充钱就相当于VIP就能变得更强.有更好得排名.

我们搜索美食,大约有十万个搜索结果,第一页就是黄金广告位,那第一页的十个网站为什么就能脱颖而出,

可以看到下面有广告的基本都是交了很多钱的,那有同学说,那没有钱就公司就不能活下来了?

我们来看美食杰这个网站,它就是没有打广告的,这里没有vip和广告标识,美食杰就是靠各种seo在代码优化,把网站做的非常优秀,形成一波自己粘性用户.所以写出标准代码规范是非常重要的.

那看到美食杰这个是我们网站的什么东西,是我们网站的标题,那你只看到标题你肯定不敢随意去买这个东西,就像我们在我们各大商城里面除了排列货品的同时,旁边还会站上推销人员,竭尽全力的推销我们的网站有多么的好.用了之后迎娶白富美,走上人生巅峰.就是这样的一个功能.

在使用标签的时候如何注意？

• 标签：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的title标题中不要设置相同的内容。
• 标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
• 标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

• 标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 rel=“nofollow” 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

• 正文标题要用

  标签：h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。副标题用

  标签, 而其它地方不应该随便乱用 h 标题标签。

• 应使用 “alt” 属性加以说明。

• 表格应该使用表格标题标签，caption 元素定义表格标题。caption 标签必须紧随 table 标签之后，您只能对每个表格定义一标题。

• 
  标签：只用于文本内容的换行。

• 、标签 ：需要强调时使用。标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，标签强调效果仅次于标签。

• 、标签：只是用于显示效果时使用，在SEO中不会起任何效果。

• 尽量少使用框架,因为“蜘蛛”一般不会读取其中的内容。

1. 存放用户看到的所有内容(肉体)

作为主体身体部分,存放包含文字,图片,视频,音频.整个网页就这四类资源

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

1. div(DIVision划分)

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

div标签最大功劳的是替代了以前table标签布局,可以在网页内容中划分出多个矩形区域,存放不一样的内容.

就因为没有任何特点特性,当自己去设计网页,可以用div去划分区域.

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

2.h标签正文中的标题 h1-h6

H标签的重要性仅次于页面Title,文章会有标题,如首页的logo上可以加H1标签,包含最重要的关键词,h1标签自带的权重使得网页的蜘蛛爬虫认为它最重要,一个页面最多一个h1标签,就像你生命中最重要的女人一个.

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

再低层的标签意义不大,不仅使文章结构复杂,游览器给予的权重也很低

即使是h6的重要性也远远大于div h1只能是一个

第七个级别太复杂,大多数图书目录没有这么深的层级

h标签在视觉上表现为黑体字体变大,但语法意义和黑体完全不同,不要滥用,这些标签很重要不是它看上去很大很粗,这些都可以通过控制我们CSS去实现,而是真正的重要的是取决于它是什么标签.h1或者h6;

h分出的区域和div分出的区域用户看起来没有任何区别,标签写的更加符合规范时是给搜索引擎看的,搜索引擎 只会收录一些比较重要的标签 div京东和h1京东,h1写的京东肯定会被收录

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

3.ul（ Unordered List ）li(list) 成对的标签 无序列表标签

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

ul标签只能写li标签,如果你想添加p标签,你在li里面添加一万个都没关系.

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

比如淘宝商品列表 新闻列表等等

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

属性:type

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

<!-- 无序列表默认属性是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>

4.ol（ ordered lists ）有序列表标签

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

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

属性:type reversed倒叙不建议使用

1. 无序列表的符号,不建议去使用,但凡是样式的表现效果请使用css去实现.
2. 值: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>

5.dl （ definition list) > dt + dd自定义列表标签 组合型标签

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

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

类似字典词典的表现形式

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

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

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

6.P标签 段落标签

作用:在网页上划分出一个专门存放大段文字的区域.
＜h1＞什么是SEO＜/h1＞
＜p＞第一段文字…＜/p＞
＜h2＞SEo是搜索引擎优化＜/h2＞
＜p＞扩展、论述上面h2中内容＜/p＞
＜h2＞SEO是策略,不是作弊＜/h2＞
＜p＞扩展、论述上面h2中内容,最后点题＜/p＞

7.span标签 划分文字区域

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

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

8.strong b标签 重要文字标注

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

如果想让搜索引擎知道这个字是很重要的用strong.

它的不是为了变得更黑,这只是一个显示样式而已,它的目的使让搜索引擎觉得这个字很重要而已.有seo优化的功能

b标签相对于strong已经淘汰H3版本,b标签只是规定文本加粗,是一个表现效果的标签,strong还有强调.

9.em i都为斜体标签

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

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

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

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

11.video 视频标签

尽量视频名字不要为中文,可能会乱码

支持格式

MP4

WebM

Ogg

12.a标签

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

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

**锚点:**href="#ID名" 将游览器位置切换到id所在的位置.

target属性：_blank在新窗口打开；__self在当前窗口打开。

13.img标签

属性

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

width/height:预留空间 一开始就写原始尺寸,就像一开始就规定墙壁大小后面只需要拿图片区张贴就行了.就像你帮我做个相册,你不知道我相册的大小,你把我照片拿过去了还得去量我相册尺寸再去做.现在我告诉你我相册的大小,你都不用量照片尺寸直接照着相册尺寸来就行了.

默认不用写像素,就像你买一部手机,厂商会说前后两千万柔光双摄,它会加像素吗?因为它默认的就是像素.互联网传输图片默认都是以像素为单位的.

14.audio标签 音频标签

支持格式:

wav、mp3、ogg

其他标签

s del删除线 u ins 下划线 big文字变大115% small文字变小85%

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>

几个特殊的字符

• 空格; nbsp

• 小于号: &ltless than

• 大于号: &gtgreater than

标签语义化

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

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

代码规范:tab来缩进代码

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

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

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

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