Web前端入门（二）HTML入门

原创已于 2022-05-15 21:28:31 修改 · 165 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

于 2022-05-09 15:32:12 首次发布

Web前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了HTML的基本概念，包括超文本的双重含义、HTML骨架结构、元素标签的分类及关系。还讲解了文档类型<!DOCTYPE>、页面语言lang、字符集UTF-8的设置以及meta标签的作用，特别是viewport的配置。强调了HTML标签语义化的重要性，有助于代码阅读、SEO和无障碍访问。此外，提及了base标签的使用，用于设定页面链接的基础URL和默认打开方式。

总目录

1.HTML概述

「HTML」(Hyper Text Markup Language):超文本标记语言

「所谓超文本，有2层含义：」

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

「HTML骨架格式」

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

「HTML元素标签分类」

常规元素(双标签)
空元素(单标签)

 常规元素(双标签)
  <标签名> 内容 </标签名>   比如<body>我是文字</body>

  空元素(单标签)
  <标签名 />  比如 <br />或<br>

「HTML标签关系」

嵌套关系父子级包含关系
并列关系兄弟级并列关系
如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

2.文档类型<!DOCTYPE>

「文档类型」 用来说明你用的XHTML或者HTML是什么版本。告诉浏览器按照HTML5标准解析页面。

3.页面语言lang

lang指定该html标签内容所用的语言

  <html lang="en">  
  <!-- en 定义语言为英语 zh-CN定义语言为中文 -->

「lang的作用」

根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别

4.字符集

「字符集」(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计

算机能够识别和存储各种文字。

UTF-8是目前最常用的字符集编码方式
让 html 文件是以 UTF-8 编码保存的，浏览器根据编码去解码对应的html内容。

  <meta charset="UTF-8" />

「meta viewport的用法」

通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口meta有两个属性name 和 http-equiv

name属性的取值

keywords(关键字) 告诉搜索引擎，该网页的关键字
description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。
viewport(移动端的窗口)
robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
author(作者)
generator(网页制作软件）
copyright(版权)

http-equiv有以下参数

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容

content-Type 设定网页字符集(Html4用法，不推荐)
Expires(期限) ,可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
Pragma(cache模式),是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
Refresh(刷新),自动刷新并指向新页面。
cache-control（请求和响应遵循的缓存机制）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5.HTML标签的语义化

方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页

「拓展」 标签：规定页面上所有链接的默认 URL 和设置整体链接的打开状态

<head>
	<!-- 规定默认链接的默认URL为http://www.baidu.com，打开方式为_blank -->
    <base href="http://www.baidu.com" target="_blank">
</head>
<body>
    <a href="">测试</a> 跳转到 百度
</body>