本文详细介绍了HTML的基础知识，包括HTML5的文档类型、语言属性lang、字符集charset、常用标签如DOCTYPE、lang、charset、img、链接a、表单元素input、textarea、以及表单的提交方式GET和POST。还探讨了字符集、meta属性、CSS中的1px与设备像素比、浏览器渲染等概念，并提供了实例和练习。
文章目录
一.介绍HTML
1. html概述
HTML是HyperText Markup Language（超文本标记语言）的缩写
-
语言：用来交流的工具
-
超文本：页面内可以包含图片、链接、音乐、视频等非文字元素
-
标记：一种标识符，可以告诉浏览器如何显示其中的内容；
- 标签是由<>包围的关键词，通常成对出现，分为标签开头和标签结尾。（部分标签是单标签）
- 标签分为三部分:标签名称，标签内容，标签属性
tips：
-
HTML 不是一种编程语言（HTML中没有变量，流程控制等），而是一种标记语言（markup language）
-
标记语言是一套标记标签 (markup tag)
如：
<b>我是你爹</b> -
HTML 使用标记标签来描述网页
-
HTML文档也叫做 web 页面
2.HTML元素标签分类
- 常规元素(双标签)
- 空元素(单标签)
常规元素(双标签)
<标签名> 内容 </标签名> 比如<body>我是文字</body>
空元素(单标签)
<标签名 /> 比如 <br />或<br>
3.HTML标签关系
-
嵌套关系父子级包含关系
-
并列关系兄弟级并列关系
-
- 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。
二、常用标签
1.文档类型DOCTYPE
**「文档类型」**用来说明你用的XHTML或者HTML是什么版本。告诉浏览器按照HTML5标准解析页面。
2.页面语言lang
2.1 lang的用法
lang指定该html标签内容所用的语言
<html lang="en">
en 定义语言为英语
zh-CN定义语言为中文
2.2 lang的作用
- 根据根据lang属性来设定不同语言的css样式，或者字体
- 告诉搜索引擎做精确的识别
- 让语法检查程序做语言识别
- 帮助翻译工具做识别
- 帮助网页阅读程序做识别
3.字符集charset
3.1定义
字符集(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
- UTF-8是目前最常用的字符集编码方式
- 让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。
<meta charset="UTF-8" />
3.2meta属性（name 和 http-equiv）
3.2.1name属性的取值
-
keywords(关键字) 告诉搜索引擎，该网页的关键字
-
description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。
-
viewport(移动端的窗口)
-
robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
-
author(作者)
-
generator(网页制作软件）
-
copyright(版权)
-
viewport的用法
通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。
在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口。
3.2.2 http-equiv有以下参数
http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容
-
content-Type 设定网页字符集(Html4用法，不推荐)
-
Expires(期限) ,可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
-
Pragma(cache模式),是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
-
Refresh(刷新),自动刷新并指向新页面。
-
cache-control（请求和响应遵循的缓存机制）
例子：
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" maximum-scale=1 minimum-scale=1 user-scalable=no>
<!--
1.viewport标记，用于指定用户是否可以缩放Web页面.
2.width和height 分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度.
3.initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面.
4.maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制，值的范围为0.25~10.0之间。
5.user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图，值为yes时允许用户进行缩放，值为no时不允许缩放。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--1.用以声明当前页面用chrome内核来渲染。-->
<!--
这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染。 -->
<!-- 2. 为了测试，我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。
<meta http-equiv="x-ua-compatible" content="IE=edge" >
-->
<!-- 3.多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子，在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为他本身不支持IE9和IE10。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
-->
扩展知识：
1.css中的1px并不等于设备的1px
在移动端浏览器中以及某些桌面浏览器中， window对象有一个devicePixelRatio属性（设备像素比），它的官方的定义为：设备分辨率和设备独立像素的比例，也就是 devicePixelRatio = 设备的物理像素（分辨率） / 独立像素（实际css中像素）。独立像素也就是设备的宽度（device-width），device-width = 设备分辨率/devicePixelRatio(设备像素比) 。
2.浏览器的渲染：
| 浏览器版本 | 结果 | 描述 |
|---|---|---|
| Windows Store app或Windows UI中的浏览器 | IE 10 标准模式 | 这是Windows Store app和Windows UI中唯一支持的模式 |
| Internet Explorer for the Desktop 或者 Internet Explorer 9 | IE9 标准模式 | 这正是x-ua-compatible指定的模式，而且浏览器支持这种模式 |
| Internet Explorer 8 | IE8 标准模式 | 因为浏览器不支持IE9标准模式，所以使用浏览器支持的最高标准模式 |
| Internet Explorer 7, Internet Explorer 6 或者 Internet Explorer 5.5 for mac | IE5 (Quirks)模式 | 这些浏览器不支持这个标签头，并且网页中也没有指定<!DOCTYPE> |
4.其他标签
- 标题标签h(h1~h6)
- 段落标签p,可以把 HTML 文档分割为若干段落
- 水平线标签hr
- 换行标签br
- div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。
- b和strong 文字以粗体显示
- i和em 文字以斜体显示
s和del 文字以加删除线显示- u和ins 文字以加下划线显示
5.图像标签img
<img src="D:/web/note/img/640.png" width="500" height="300" border="3" title="这是绝对路径" />
效果：
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
