logo

Timeless

花开成景，花落成诗

HTML基础入门笔记

HTML基础入门笔记

六月 1, 2018 82 1529 4 分钟
html

学习HTML时候的基础入门知识的笔记，包括HTML5。

前言

HTML（超文本标记语言)是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。

结构层：这一层的作用是表述一个页面中有哪些信息，以及这些信息之间的关系是什么。

HTML元素

  • 开始标签：包含元素的名称（p），被左、右角括号所包围。
  • 结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。
  • 内容（Content）：元素的内容。
  • 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

常用标签

标签名 描述 说明
<html></html> 所有html中标签的一个根节点
<html lang="en">

lang属性:用来设置当页面的语言。作用：

1.设置页面上主要使用语言的类型。

2.将来做SEO的时候在权重上起到一定的作用。 

3.用于特殊设备上的设置。
<head></head> 文档的头部

用于存放：title,meta,base,style,script,link

 注意在head标签中我们必须要设置的标签是titile
<title></title> 文档的标题 title中的文本在seo中占有很大的权重
<meta> meta中设置的所有的内容在页面都不会显示

常用：

description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。

keywords：关键词，可以用来提高页。面的关健词的比重（前升排名的一种方式。）

charset：字符集（编码格式）
<body></body> 文档的主体部分，用于存放html标签  
<h1> - <h6> 标题标签 为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题。
<p></p> 段落标签 在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
<img src="" /> 图片标签  

<ul>

<li></li>

<li></li>

</ul>
无序列表

作用：显示一列没有排列顺序的数据。

语义：就是一组没有顺序的数据。

1、无序列表中的数据没有先后顺序之分。

2、ul标签最好不要单独出现。

3、ul标签是用来管理li标签。

4、ul标签中只能放li标签。

5、li标签中可以放其它标签。

<ol>

<li></li>

<p"><li></li>

</ol>
有序列表

作用：显示一段有顺序的数据。

语义：一组有顺序的数据。

有序列表中的所有数据都是顺序的。

现在一般情况下ul标签用的比较多，ol标签用的比较少。

<table>

<tr>

<th></th>

</tr>

<tr>

<td></td>

</tr>

</table>

表格

作用：用来将数据以表格形式显示出来。

 

<input type=“text” />

输入框

作用：收集信息。

text:文本框

password：密码框

hidden:隐藏域

radio:单选框

checkbox:多选框

button:按钮

reset:重置

image:图片按钮

submit:提交

字符集

  • 字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
  • 在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
  • <meta charset=" UTF-8" />
  • charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.
  • 注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8"。

DOM树创建过程

  1. 转换： 浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成各个字符。
  2. 令牌化： 浏览器将字符串转换成 W3C规定的各种令牌，例如，“<html>”、“<body>” 。每个令牌都具有特殊含义和一组规则。
  3. 词法分析： 发出的令牌转换成定义其属性和规则的“对象”。
  4. DOM 构建： 最后，由于 HTML 标记定义不同标记之间的关系创建的对象链接在一个树数据结构内。

SEO与标签的语义化

SEO

是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

  • 花钱买排名
  • 将页面做成静态页面
  • 发外链（网站就越受欢迎，将来被用户搜索出来的机会就要大）
  • 页面的友好性（语义化规范）

语义化

每个html标签都有属于自己的语义，有使用标签时候要一定要了解每个标签的语义，合理使用。

语义化的好处：

  • 对搜索引擎的友好。（网络爬虫进入页面之后可以很方便的得到页面的重要信息）
  • 提升用户体验。（缺失样式也能展示不同标签的特点）
  • 利于代码的可读、维护、提高开发效率。

Html中大部分的标签都具有语义，所在使用的时候一定要注意。还有一部分标签没有语义，没有语义的标签一般只用来进行布局。

1、Div

<div></div>

特点：默认占一整行，并且一行里面只能显示一个。

 

2、Span

<span></span>

特点：大小由内容来决定，并且一行里面可以显示多个。

 

Div和span默认显示特点：

  • Div默认占一整行（根据浏览器的显示大小），div的高度是由div中的内容来决定的。（块级元素）
  • Span的宽度和高度都是由内容来决定。（行内元素）

恰饭区

广告位招租

评论

Power by Node.js + Nuxt.js，由 腾讯云 腾讯云提供服务, 已经稳稳地存活了 8年95天

Copyright © 2018 - 2026 Timeless. All rights reserved.桂ICP备18003656号-1公网安备桂公网安备45092102000147号