前端基础——HTML(一)
HTML
- html超文本标记语言
- 前端三层
- HTML结构层
- css样式层
- JavaScript行为层
- 其他多媒体内容（图片，音频等等）
-
互联网运行过程
客 --http请求--> 服 户 http协议 务 端 <--http响应-- 器
- 互联网原理
- 服务器server，一种特殊的计算器，包括处理器、硬盘、内存、系统总线等，但是由于需要提供更可靠的服务，因此在处理能力、稳定性、可靠性、安全性等方面要求较高。
- 作用：对于WEB来讲，用于存储开发人员上传的网页数据，且需要响应服务请求，并进行处理。
- 要求：对于网站服务器来说，为了让用户随时进行访问，必须24小时不间断工作
- 云服务器
- 简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。不用提前购买，即可徐速创建或释放任意多台云服务器。
- 客户端Client
- 用户端，普通用户使用的终端，客户端有多种形式，比如最常用的是浏览器、app等，而web开发最主要的客户端形式还是浏览器。
- 浏览器
- 用于发送HTTP请求到服务器，接收服务器发回的HTTP响应，渲染HTML网页
主流浏览器： 内核（渲染引擎）: 说明:
微软的IE和Microsoft Edge ---Trident IE内核
Mozilla的Firefox ---Gecko Firefox内核
苹果的Safari ---Webkit
Google的chrome ---Webkit-->Blink 统称为chrome内核
Opera的Opera ---Presto-->Webkit-->Blink
- 浏览器功能：
- 发送http请求
- 接受服务器发回的http响应
- 将接收的html进行解析并显示
- HTTP协议
是客户端浏览器或其他程序与web服务器之间的应用层通信协议
- http请求
- request，浏览器根据网址向对应的服务器发送请求
- 发起请求的方法：在浏览器地址栏中输入网址，或者点击网址链接
- html页面解析过程中，会发出多个http请求，包含网页的图片、视频、音频等文件请求。
- http响应
- response，服务器根据请求响应一个HTML文件，将HTML传输给客户端，在浏览器中进行HTML网页的渲染。
HTML
- 超文本标记语言，用来制作网页的一种标记语言；是一种纯文本格式的文件，但在网页中可以呈现包含文字以外的内容效果。
- 功能：利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构。
- html的语义化
- 语义化网页的优势
- 方便代码的阅读和后期的维护
- 便于浏览器或是网络爬虫更好的解析网站内容
- 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名
HTML基本语法
HTML规范版本：HTML1.0—html5
- HTML标签语法
- 标签必须写在一堆尖括号<>内部
- 标签分为单标签和双标签，双标签必须成对出现
- 双标签包含开始标签和及结束标签，结束标签必须书写关闭符合/，单标签也需要进行自封闭书写。
HTML元素
- html元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签
元素内容
- 元素内容可以是纯文本，也可以是其他的html元素。当这种元素内容包含其他html元素的情况，称之为嵌套
- 嵌套关系可以有多层
- 单标签是不能添加元素内容的，称之为空元素
标签级别
根据标签内部可以存放的元素不同，可以将双标签划分为：
容器级：标签内部可以存放任意内容，包含容器级标签；
文本级：标签内部只能存放文字或类似文字的内容，如：图片，表单元素。
HTML元素的特性
- 浏览器识别的是元素的开始和结束以及互相之间的嵌套关系
- 空白折叠现象：当元素内容是文本，所有的文字（类似文字内容）之间有空格、换行、缩进等空白字符，在浏览器加载时，连接在一起的空白会折叠程一个空格显示
HTML属性规范
- 书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔
- 属性包含：属性名（key）、属性值（value）；属性名和属性值之间的写法通常称为键值对写法，
一个标签内可以设置多个不同的属性，属性与属性之间使用空格分隔
部分标签属性k值可以设置多个属性值v，但是要写在同一对双引号内，值之间用空格分隔
HTML基本结构–基本骨架
<html>标签
- 定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在
<html>标签的内部
<head>标签
- 用于存放
<title>、<meta>、<base>、<style>、<script>、<link>，内部用于对网页的设置 - 除了
<title>内部的文字，其他标签都不显示在浏览器上。 - 浏览器加载html文件时是从上至下进行渲染，link如果写在body内，会导致前面的元素没有样式，不利于用户体验，浏览器渲染到link时表示页样式发生了改变，会重新渲染前面的HTML元素，导致页面加载时间变长，所以link要写在
<head>内部。<title>标签 - 作用：页面显示的标题，也作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化
<body>标签
- 作用：定义网页的主体部分，用于存放所有的HTML显示内容的标签，其内部的元素会显示在浏览器的窗口中
HTML基本结构–DTD
DTD
- 完整的HTML文件的第一行内容叫做文档定义类型DocType Definition，简称DTD，也称文档声明类型
- DocType Declaration。
- 作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面
HTML基本结构–命名空间
命名空间xmlns
- xml：可扩展标记语言，使用在传输过程中的规范，被设计用来传输和存储数据，是html的补充。
- xmlns：全称叫做XML NameSpace，NameSpace叫做命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容
<html>元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，避免出现标签名冲突，- 这个标准使用的是一个固定网址https://www.w3.org/1999/xhtml中的规范
语言- xml:lang=”en”和lang=”en” 表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器都是有帮助的
- lang=”zh-cn” 表示中文（中国）
HTML基本结构–字符集
<head>标签内部的<meta>标签通过http-equiv属性定义了当前网页所使用的字符编码- char:character，字符。set：集合
- XHTML1.0版本
<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”>- 字符集常见问题：
若没有网页加载速度要求，或者制作的是外文网站，建议使用utf-8（包含世界所有国家需要的字符）
若有使用大量中文汉字，且要求网页加载速度快的，建议使用gbk（国标码）
注意！meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码
版权声明：本文为dreamtown原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。