一、认识WEB
「网页」主要是由文字、图像和超链接等元素构成,当然除了这些元素,网页中还可以包括音频、视频以及Flash等。
「浏览器」是网页显示、运行的平台。
「浏览器内核」(排版引擎、解释引擎、渲染引擎)
负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
Web标准
「构成」结构标准,表现标准和行为标准
结构标准用于对网页元素进行整理和分类(HTML) 表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS) 行为标准用于对网页模型的定义及交互的编写(JavaScript)
「Web标准的优点」
易于维护:只需更改CSS文件,就可以改变整站的样式 页面响应快:HTML文档体积变小,响应时间短 可访问性:语义化的HTML(结构和表现相分离的HTML)编写的网页文件,更容易被屏幕阅读器识别 设备兼容性:不同的样式表可以让网页在不同的设备上呈现不同的样式 搜索引擎:语义化的HTML能更容易被搜索引擎解析,提升排名
二.认识HTML
1.HTML是一种用于创建网页的超文本标记语言(Hyper Text Markup Language)
所谓超文本,有2层含义:
它可以加入图片、声音、动画、多媒体等内容(超越文本限制 )
不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。
HTML语言是Web的基础,可以说Internet是建立在HTML基础之上的。HTML5是新一代HTML标准,大部分浏览器已经支持。
2.HTML5基本结构
```<!DOCTYPE html>//html5网页声明
<html lang="en"> //<html>元素是HTML页面根元素
//lang属性:声明当前页面的语言类型,“en"英文,”zh“中文
<head>
<meta charset="utf-8" />//<meta />设置网页编码格式位utf-8
<title>文档标题</title>//<title>设置文档标题
</head>
<body>
....页面内容(各种标签)
</body>
</html>
```js
3.基本标签
「团队约定大小写」
- HTML标签名、类名、标签属性和大部分属性值统一用小写
「HTML元素标签分类」
- 常规元素(双标签)
- 空元素(单标签)
``` 常规元素(双标签)
<标签名> 内容 </标签名> 比如<body>我是文字</body>
空元素(单标签)
<标签名 /> 比如 <br />或<br>
`
1、**div**和**span**
```js
1.1 <div>标签:
块级元素,可用于组合其他HTML元素的容器
div没有特定的含义,通常用于对文档结构进行逻辑上的分块
div的前后会换行
1.2 <span>标签:
行内元素(内联元素),可用作文本的容器
span没有特点的含义
span的前后不会换行
【HTML标签关系】
嵌套关系父子级包含关系
并列关系兄弟级并列关系
如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位(一个tab是4个空格)。如果是并列关系,最好上下对齐。
文档类型
「文档类型」用来说明你用的XHTML或者HTML是什么版本。告诉浏览器按照HTML5标准解析页面。
页面语言lang
lang指定该html标签内容所用的语言
``` <html lang="en">
en 定义语言为英语 zh-CN定义语言为中文
```js
「lang的作用」
- 根据根据lang属性来设定不同语言的css样式,或者字体
- 告诉搜索引擎做精确的识别
- 让语法检查程序做语言识别
- 帮助翻译工具做识别
- 帮助网页阅读程序做识别