当前位置:沐岚SEO学习笔记 > SEO基础 >

新手入门必学html基础知识点(图文)

前言 要学习SEO,HTML基础知识的学习也是必不可少,就像是SEO代码,Div标签、Span标签、A标签、P标签、img标签、h标签、alt标签、strong标签、nofollpw标签等,这些是常用的。对于上面这些元素与标签一定要掌握,并且会敲代码。下面就简单介绍一下html 和 在SEO学习中的常用标签
 
目录

什么是HTML

常用标签

 

01

什么是HTML


Hello , my friend!  Finally meet you!  能在这里见到你真的开心呀, 这是SEO基础的重要部分, 有关HTML的理论知识和实战,那下面就开始啦

HTML指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的一种语言。不是编程语言哦,是一种标记语言, 且这种标记语言是一套标记标签(markup tag)

简单的说, 网页是由网页元素组成,这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户。
Html可以当做一个房子的大框架,然后CSS就是在这个大框架结构上进行装修,html+CSS就是用户在浏览器看到的网页页面样子啦

注:CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
 
什么是标签

标签是html中最基本的单位, 标签有以下几个【特点】


  1.  由<>包裹的关键词,比如<html>
  2. 通常成对出现,比如<div></div>, 第一个标签为开始标签, 表示修饰内容的开始,最后一个标签为结束, 表示修饰结束,其中闭合标签以/开头
  3. Html标签中也有可以单独存在的标签, 如<img /><input /> 等标签。
  4. 网页内容需要在<html>标签中,标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中,而网页需要展示的内容需要嵌套在<body>标签里

02

常用标签


<html>标签
<html>标签告知了浏览器这是html文档类型, 浏览器根据这个标识,就会将html中包裹的代码解析成对应的站点内容。同时<html>标签是html中最外层的元素, 是所有元素的容器。

<head>标签
<head>标签用于定义文档头部, 是所有头部元素的容器。<head>中的元素可以引用脚本(JS)、指示浏览器在哪里找到样式表(CSS)、提供元信息(网站title,描述等)等等。

<body>标签
<body>标签包含文档的所有内容(比如文本、超链接、图像、表格和列表等等

<div>标签
<div>是html框架中最重要的标签元素,html 是网页的骨架, 那div就是骨架的的脊椎,作用是把文档分割成为独立的、不同的部分,从而可以使用class 或者id 属性定义内容的格式  
 

标签效果 
 
注:<head>位于html网页的头部, <html>后<body>前的标签,并以<head>开始</head>结束。

文本标签
<p>,<span>,<strong>,<em>,<b>,<i>都是用来描述文字内容的标签

<p>标签定义段落, <span>标签被用来组合文档中的行内元素,两者效果类似,区别是<p>会自动换行, <span>不会自动换行(效果看下图);<span>标签包裹在<P>标签内的。

<strong>标签与<b>标签都是文字加粗效果,区别是<b>这个标签对应 bold,即文本加粗,其目的仅仅是为了加粗显示文本,是一种样式/风格需求;
<strong>这个标签意思是加强,表示该文本比较重要,提醒读者/终端注意。

<em>标签,<i>标签都是文字斜体效果,区别与<strong>和<b>标签类似, <i>为了斜体而斜体,<em>为了标明重点而斜体。
h标签效果 

<h> 标签

<h>标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题,页面效果如下图,SEO一般用到<h1><h2>,页面重要内容或网页标题<h1>,段落标题<h2>

 
 

<a>标签
<a>标签定义超链接,用于从一张页面链接到另一张页面。 seo常用到的属性是href(Hypertext Reference),意思是指定超链接目标的URL。 href属性的值可以是任何有效文档的相对或绝对URL
 
举例,
沐岚seo学习笔记的部分源代码(见下图),使用<a>标签将【关于沐岚】链接到相对URL,/ml/ 上,除此之外,还加上rel="nofollow",用来屏蔽不想传递网站权重的URL,因为我的【关于沐岚】栏目上没有布局关键词,所以一般网站出现外链或者不参与排名的内链,为了不分散权重,可以使用nofollow 标签

a标签的使用 
 
<img> 标签
<img>标签向网页中嵌入一幅图像,其中src、alt 是最重要的两大属性。src 规定图像的URL,alt规定图像的替代文本
 
举例,
下图我写了2个<img>标签, 左边是效果, 右边是源代码。主要区别是第二个图片是失效的,显示了alt属性里的文本内容(这里的title是标题的意思,把鼠标放到关键词上,会显示文字)
 
特别说明一下, alt属性的增加, 除了在图片失效情况下告诉用户图片内容, 也在告诉搜索引擎图片的内容, 所以你也能猜到这非常有利于SEO工作。
img标签效果 
 
 
<meta>标签
<meta http-equiv=Content-Type content="text/html; charset=utf-8">,这段代码出现在网站头部,需要注意后面的编码格式, charset=utf-8国际编码格式,charset=gb2312中文编码格式,编码格式错误会造成出现乱码现象。
 
这些标签都是SEO学习中比较常用的, 其实还有很多,我整理了一下,放在页面上可能有点小不是很清晰, 需要的话找我要吧
html基础知识脑图
 
 

小结

Html学习还是比较简单的, 但是还是要多加练习, 动手哦, 看和写是不一样的, 真正能做到输出才是真的学会了。内容的学习真的哪里都有的, 网站资源非常多,我推荐个我觉得不错的html学习的网站和在用的软件

网站:百度搜索W3school,这个网站提供HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等编程语言和开源技术的在线教程及使用手册;还可以在线实践编写

软件:用记事本或者Visual  Studio Code就可以,写个内容保存为html格式后, 查看页面源代码(第一张图就是记事本写的)


每天进步一点点!
 

作者:沐岚
公众号:Mulan SEO学习笔记

 

  • 关注微信

猜你喜欢

微信公众号