1.初始HTML
1.1 HTNML到底是什么
HTML是超文本标记语言(Hyper Text Markup Language),缩写为HTML,标准通用标记语言下的一个应用 ,也是一种规范,一种标准。HTML是一种标记语言(markup language),是网页制作所必备的工具。
我觉得大家看完这个也是一脸懵,那我就用白话文解释一下吧。文本,什么是文本,你的记事本,你的word,只要可以写展示文字的的地方大家都可以认为这就是一种文本。那这个超文本又是什么含义呢,其实这个超呀,大家可以理解为强悍的,厉害的。那我们来解释超文本是什么意思,就是说HTML不仅可以支持文本还有图片、视频、音频、表单、表格…所以说HTML还是非常强大的。那超文本我们知道了,现在就来看看标记语言是什么意思。
什么是标记,其实标记你可以理解为一个标识,但这个标识不是给我们看的。是给浏览器看的。浏览器会有一个叫做排版引擎主要是负责获取网页内容(HTML、XML、图像、CSS、JS)等信息进行解析、渲染网页,将网页的代码转换为看得到的页面。所以这个标记只要按照固定的格式写,就行了。语言就不需要解释了,如果你需要和英国人交谈,你是不是需要使用英语。我们自己交谈交谈就需要使用汉语。那我们想让计算机给我们做事情,那我们是不是就需要用计算机能看懂的语言呀。说到这,大家应该理解的八九不离十了。
1.2 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基本标签
描述 | 含义 |
---|---|
<!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 | 当鼠标悬浮在文本上的时候提示的文字 |
我最后提一嘴网页中使用的基本单位是像素px