前端体系复习-html和css(二)

知识不过脑子
184 阅读9分钟

HTML

HTML结构

1.1文档声明

HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型

1.2 html元素

元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素

所有其他元素必须是此元素的后代。

W3C标准建议为html元素增加一个lang属性，作用是

  • 帮助语音合成工具确定要使用的发音;
  • 帮助翻译工具确定要使用的翻译规则;

比如常用的规则：

  • lang=“en”表示这个HTML文档的语言是英文；
  • lang=“zh-CN”表示这个HTML文档的语言是中文；

1.3 head

HTML head 元素 规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

什么是元数据（meta data），是描述数据的数据； 什么是元数据（meta data），是描述数据的数据；

这里我们可以理解成对整个页面的配置：

image.png

常见的设置有哪些呢？一般会至少包含如下2个设置。

  • 网页的标题：title元素

image.png

  • 网页的编码：meta元素 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码； 

一般都使用utf-8编码，涵盖了世界上几乎所有的文字；

image.png

body元素

body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。

developer.mozilla.org/zh-CN/docs/…

2.1h1~h6

在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。

h1，h6 标题 (Heading) 元素呈现了六个不同的级别的标题

Heading是头部的意思，通常会用来做标题

h1 级别最高，而 h6 级别最低。

补充 SEO优化（h元素通常和SEO优化有关系）

2.2p元素

如果我们想表示一个段落，这个时候可以使用p元素。

HTML ，p元素（或者说 HTML 段落元素）表示文本的一个段落。

p元素是paragraph单词的缩写，是段落、分段的意思；

p元素多个段落之间会有一定的间距；

2.3img元素

HTML img元素将一份图像嵌入文档。

img是image单词的所以，是图像、图像的意思；

src属性：source单词的缩写，表示源；是必须的，它包含了你想嵌入的图片的文件路径

alt属性：不是强制性的，有两个作用；

  • 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
  • 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

ps:很多元素都有一些基本别的属性，但是css出现后，都抛弃了

补充图片格式：

image.png

2.4 a元素（anchor）

在网页中我们经常需要跳转到另外一个链接，这个时候我们使用a元素；

HTML a元素（或称锚（anchor）元素）：

定义超链接，用于打开新的URL；

a元素有两个常见的属性：

href：Hypertext Reference的简称

  1. 指定要打开的URL地址；
  2. 也可以是一个本地地址

a元素有两个常见的属性：

  • _self：默认值，在当前窗口打开URL；
  • _blank：在一个新的窗口中打开URL；
  • 其他不常用

补充：a元素 - 锚点链接

锚点链接可以实现：跳转到网页中的具体位置

锚点链接有两个重要步骤：

  • 在要跳到的元素上定义一个id属性；
  • 定义a元素，并且a元素的href指向对应的id

image.png

2.5iframe元素

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档

frameborder属性

用于规定是否显示边框

1：显示

0：不显示

但是这个在很多网页被禁用

2.6 div/span

div元素、span元素的历史：

在HTML中有两个特殊的元素div元素、span元素：

div元素：division，分开、分配的意思；

span元素：跨域、涵盖的意思；

产生的历史：

网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；

后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可；

比如h1元素可以是一段普通的文本+CSS修饰样式； 

这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理；

div元素、span元素的区别

div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹

div元素： 多个div元素包裹的内容会在不同的行显示；

  • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
  • 用于把网页分割为多个独立的部分

span元素： 多个span元素包裹的内容会在同一行显示；

  • 默认情况下，跟普通文本几乎没差别
  • 用于区分特殊文本和普通文本，比如用来显示一些关键字

2.7不常用元素

strong元素：内容加粗、强调；（css替代了）

i元素：内容倾斜（开发中偶尔会用它来做字体图标，因为看起来像是icon的缩写））

code元素：用于显示代码

br元素：换行元素（已经不用）

更多元素详解，查看MDN文档： developer.mozilla.org/zh-CN/docs/…

补充：学习建议： 多查看官网文档，多思考，整理笔记 推介用chrome浏览器和有道笔记和单词

image.png

可以将自己在开发中遇到的问题，找到答案后，保存到对应文件，整理到有道笔记

2.8全局属性

我们发现某些属性只能设置在特定的元素中：

也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为 “全局属性（Global Attributes）”

常见的全局属性如下：

  • id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。
  • class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素；
  • style：给元素添加内联样式；
  • title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的。

2.9字符实体

  • 为什么需要字符实体;

我们编写的HTML代码会被浏览器解析

  • 如下代码是如何被解析的呢？

如果你使用小于号（<），浏览器会将其后的文本解析为一个tag。 

但是某些情况下，我们确实需要编写一个小于号（<）；

这个时候我们就可以使用字符实体；

image.png

HTML 实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）：

实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）；

  1. 实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）；
  2. 你也可以用实体来代替其他难以用标准键盘键入的字符；

image.png

3.0元素语义化

元素语义化就是用正确的元素做正确的事情。

虽然在理论上，所以的html元素都可以通过css样式实现相同的事情，但是这么做会使事情复杂化，所以我们需要元素语义化来降低复杂度。

元素语义化在我们实际的开发中有很多好处，比如：

  • 提高代码的阅读性和可维护性;
  • 减少coder之间的沟通成本;
  • 能让语音合成工具正确识别网页元素的用途，以便做出正确的反应
  • 有利于SEO(Search Engine Optimization)

3.1SEO优化

SEO就是搜索引擎优化(Search Engine Optimization)，SEO通过了解搜索引擎的运行规则来调整网站，以提高网站的曝光度,以及网站的排名。

这个很重要，为什么呢？给大家举个例子：

你下载一个外卖软件：百分之90以上的顾客都会选择前面三个软件，后面的根本不会去看（因此SO优化对公司的重要性可想而之）

Google 搜索引擎的工作流程主要分为三个阶段：

抓取：Google 会使用名为“抓取工具”的自动程序搜索网络，以查找新网页或更新后的网页。Google 会将这些网页的地址（即网址）存储在一个大型列表中，以便日后查看。我们会通过许多不同的方法查找网页，但主要方法是跟踪我们已知的网页中的链接。

编入索引：Google 会访问它通过抓取得知的网页，并会尝试分析每个网页的主题。Google 会分析网页中的内容、图片和视频文件，尝试了解网页的主题。这些信息存储在 Google 索引中，而 Google 索引是一个存储在海量计算机中的巨大数据库。

呈现搜索结果：当用户在 Google 上进行搜索时，Google 会尝试确定最优质的搜索结果。“最佳”结果取决于许多因素，包括用户的位置、语言、设备（桌面设备或手机）以及先前用过的搜索查询。例如，在用户搜索“自行车维修店”后，Google 向巴黎用户显示的答案与向香港用户显示的答案有所不同。支付费用不能提高网页在 Google 搜索结果中的排名，网页排名是完全依靠算法完成的。

avatar
文章
阅读
粉丝