从零带你认识HTML(一)

oldchao

已于 2022-12-26 10:28:07 修改

阅读量78

点赞数

文章标签： html 前端

于 2022-12-19 11:42:03 首次发布

本文链接：https://blog.csdn.net/oldchao/article/details/128345010

版权

1.初始HTML

1.1 HTNML到底是什么

HTML是超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用，也是一种规范，一种标准。HTML是一种标记语言（markup language），是网页制作所必备的工具。

我觉得大家看完这个也是一脸懵，那我就用白话文解释一下吧。文本，什么是文本，你的记事本，你的word，只要可以写展示文字的的地方大家都可以认为这就是一种文本。那这个超文本又是什么含义呢，其实这个超呀，大家可以理解为强悍的，厉害的。那我们来解释超文本是什么意思，就是说HTML不仅可以支持文本还有图片、视频、音频、表单、表格…所以说HTML还是非常强大的。那超文本我们知道了，现在就来看看标记语言是什么意思。

什么是标记，其实标记你可以理解为一个标识，但这个标识不是给我们看的。是给浏览器看的。浏览器会有一个叫做排版引擎主要是负责获取网页内容（HTML、XML、图像、CSS、JS）等信息进行解析、渲染网页，将网页的代码转换为看得到的页面。所以这个标记只要按照固定的格式写，就行了。语言就不需要解释了，如果你需要和英国人交谈，你是不是需要使用英语。我们自己交谈交谈就需要使用汉语。那我们想让计算机给我们做事情，那我们是不是就需要用计算机能看懂的语言呀。说到这，大家应该理解的八九不离十了。

1.2 HTML的发展史

HTML的发展史

1.2 HTML能干啥

   	HTML能做的事情丰富多彩 列如文本，图片，表单，表格，视频，音频等等

1.3 什么是网站和网页

	 网页可以理解为就是一个超文本（上面介绍过），而网页就是多个网页和其他文件（css，js...） 的集合

2.常见的浏览器内核有哪些？

说到现在大家应该知道了什么是HTML,那我们已经知道HTMl是通过浏览器的排版引擎来绘制页面，那我们市面上常见的浏览器有哪些。这些浏览器的有什么区别（指的是内核，其实大家可以理解为内核就是渲染页面的，后面会出个详解浏览器内核的。）。

2.1市面上常见的浏览器

市面上常见的浏览器

2.2 各个浏览器的区别

ie trident内核
Firefox: 火狐 gecko内核
opear: webkit 内核
safari: webkit 内核
chrome: webkit内核一个分支blink内核

3.什么是W3C

3.1 介绍W3C

那我们来说一说什么是W3C，那什么是W3C？

W3C 指万维网联盟(World Wide Web Consortium) ，其实W3C大家可以理解为一种约定，规范。而这个W3C就是制定这个约束的企业。所以我们就把W3C认作为约束。比如标签里面的属性名必须用双引号包起来。

3.2 常用的W3C规范有哪些

标签里面的属性名必须用双引号包起来。
标签尽量用小写。
图片添加有意义的alt。
css写样式的时候必须加上单位。

4.Web标准的构成

主要包含三部分
结构（Structure）：结构用于对网页元素进行整理和分类 HTML 等用于（骨架）
表现（Presentation）：表现用于设置网页元素的版式、颜色、大小等外观样式 CSS （衣服）
行为（Behavior）：网页模型的定义及交互的编写，JavaScript （动作，行为）

5.HTML 标签基本规范

标签名必须出现在一对尖括号<>内部。
标签名必须出现在一对尖括号<>内部。
标签分为单标签和双标签，双标签必须成对出现，即开始标签和结束标签（结束标签必须有关闭符号/）
双标签还可以分为两类：
- 文本标签：标签内部只能存放文本或者文本标签，如 span （行内元素）
- 容器标签：标签内部除了可以存放文本之外，还可以嵌套任意标签，如 div （块级元素）
- 标签属性：每个标签都会有一些自身独特的属性
空白折叠现象,在普通文本之间如果有空格、缩进、换行等导致的空白区域，在浏览器中加载时会被折叠成一个空格显示。

6.HTML基本标签

基本HTML架构图

描述	含义
<!DOCTYPE html>	文档类型的声明,让浏览器按照相应版本的HTML进行解析。这里我可以制定浏览器一HTMl的什么版本进行解析。默认是第一行
html	网页的根标签,所有其它的标签都被包含。也就是说你写的任何代码都必须要写入到HTML标签里面去。如果写在HTML之外，浏览器会自动把这个标签放入HTML内部。但是这种写法是绝对不允许的。
head	头部标签,关于网页的一些配置信息。
meta	称为元数据。元数据是对数据的描述。一般很多人会遗忘这个标签。其实这个标签还是挺重要的。他的数据格式为键值对（K -> V）。列如名称(名字=张三年龄 = 18) 一个值对饮另外一个值。这个就叫做键值对。举例<meta charset=“utf-8”>:字符集设置或者叫编码设置。<meta name=“keywords” content=“手机，电脑，平板”>可以让爬虫爬取到相应的关键词。
title	这个简单就是你网页的标题。
body	主体标签,所有在浏览器中显示的其他的内容和标签都被包含。我们写的HTML代码都要写在这个里面。

7. 标签

7.1 标签的类型

上面也说过标签分为单标签，和双标签。
双标签 <html></html>
单标签 <meta/> 必须在末尾加上/

7.2 标签的关系

嵌套关系:也叫包含关系、是祖先和后代之间的关系
并列关系:也叫同级关系、是兄弟之间的关系

7.3 HTML常用标签

h1-h6: 标题标签（双标签）
hr:水平线标签（单标签）
p: 段落标签（双标签）
br:换行标签（单标签）
b、strong 加粗标签（双标签）
i、em 倾斜标签（双标签）
u、ins 下划线标签（双标签）
s、del 删除线标签（双标签）
span 行内标签对元素不会产生任何影响（双标签）

7.4 图片标签

图片标签

属性	描述
src	这个属性是你图片的路径
alt	当你图片路径不正确时显示的文本
width	图片的宽度，单位是像素。当单独分别设置宽度或者高度时,宽高会跟着等比例缩放
height	图片的高度单位是像素, 当单独分别设置宽度或者高度时,宽高会跟着等比例缩放
border	图片边框
title	当鼠标悬浮在文本上的时候提示的文字