一、初识web
1.web就是网页，网页其实是基于B/S模式的应用程序
B/S：Browser / Server
C/S：Client / Server
2.web的组成
浏览器：代替用户向服务器发送请求
服务器：接收用户请求并响应
通信协议：规范数据传输及打包方式
3.浏览器：代替用户向服务器发送请求，作为响应数据的解释引擎，呈现图形化界面
主流产品：Chorme、IE、Safari、Firefox、Opera
浏览器引擎（内核）：1、渲染引擎：解析HTML、CSS，控制页面渲染效果
2、JS引擎：解析JS脚本
前端技术：1、HTML：书写页面结构和内容
2、CSS：设置网页中元素的样式
3、JS：实现网页的交互
4、工具库，框架
4.服务器：接收用户请求并响应、存储数据、具有安全性功能
产品：Tomcat Apache Nginx IIS
技术：Python-Web(Django,Flask)、PHP、JAVA、ASP.net、JSP
二、HTML概述
HTML：HyperText Markup Language
超文本 标记 语言
超文本：具有特殊功能的文本
标记：标签、元素，用来标记网页中的内容，可以实现网页布局及JS交互
网页文件在计算机中以 .html / .htm 为后缀
开发工具：记事本 EditPlus Sublime WebStorm VSCode
运行工具：浏览器以Chorme浏览器为准
调试工具：浏览器开发者工具F12
三、基础语法
标签/标记：HTML中标签以<>为标志，可以分为双标签、单标签
双标签：成对出现<html></html>
单标签：只有开始标签没有结束标签，可以手动添加/表示闭合
标签嵌套：顾名思义，在成对的标签中出现其他的标签。外层标签称为父元素，内层元素称为子元素，多层嵌套时，内部元素称为后代元素
html文件的文档结构
<html> 文档开始 <head>
网页头部信息：编码方式，网页名称
网页选项卡的小图标，网页信息介绍
引入外部资源文件
</head> <body>
网页的主题信息：所有需要呈现给用户的，需要显示在窗口中的内容，都在body中书写
</body> </html> 文档结束
标签属性：用来修饰当前标签的显示效果，对当前标签或者网页的补充设置
书写在开始标签中，与标签名之间使用空格隔开
属性名=“属性值”
多个属性时，属性之间使用空格隔开
语法规范：html不区分大小写，推荐使用小写字母，保持适当缩进和注释，保证代码可读性
注释： <!-- 注释内容 -->
注释不能嵌套，不能书写在标签内部
html中会忽略多余的空格、代码中的换行，在浏览器中只显示为一个空格，需要使用对应的字符表示，在后面会讲到
四、HTML文档组成
在文档开头，<html>标签之前
<!DOCTYPE html> 声明当前为HTML文档 告诉浏览器此文档为HTML文档，按照H5的渲染方式解析网页 <html> <head>
<meta charset="utf-8"> 设置网页的字符编码方式为utf-8
<title>网页标题</title> 设置网页标题
</head> <body>
网页主体
</body> </html>
五、常用标签
1、标题标签：以标题的形式显示文本（加粗，字号不同）
<h1></h1> <h2></h2> ....... <h6></h6> 标题文本大小，从h1至h6逐级减小
2、段落标签：<p></p> 可以通过标签属性 align="值" 设置水平对齐方式 取值：left、center、right 默认左对齐
3、文本标签：
<b></b> 文本加粗 <i></i> 文本斜体 <u></u> 添加下划线 <s></s> 添加删除线 以上四种标签涉及到文本样式，都可以通过css添加同样的效果
<sup></sup> 添加上标 <sub></sub> 添加下标 <span></span> 行内分区标签，一般嵌套在标签中，用来为特殊文本添加样式 <label></label> 普通文本标签
4、格式标签
<br> 换行标签 等同于<br/> <hr> 水平线 等同于<hr/>
5、字符实体
< 表示< > 表示> 表示一个空格 © 表示版权符号© ¥ 表示人民币符号￥
6、块级分区标签
<div></div> 容器标签，用于页面模块划分
7、标签嵌套规范
标签可划分为块级元素和行内元素
块级元素：独占一行，不与其他元素共行 h1-h6 p div
行内元素：可以与其他元素共行显示 b strong i u s span label sup sub
嵌套规范：块元素中可以嵌套任意类型的元素，行内元素尽量只嵌套行内元素
注意：段落标签<p></p>比较特殊，不可以嵌套其他块元素
六、列表标签
列表分为三类：有序、无序、自定义
<ul> 无序列表 标题 <li>第一行</li> <li>第二行</li> </ul>
<ol> 有序列表 <li></li> </ol> <dl> 自定义列表 <dt>标题1</dt> <dd>第一行</dd> <dd>第一行</dd> <dt>标题2</dt> <dd>第一行</dd> <dd>第二行</dd> </dl>
列表属性：只针对有序列表和无序列表
有序列表属性：
type：设置项目符号类型
取值：1 表示按照数字排序，默认符号
a 按照小写字母排序
A 按照大写字母排序
i 使用小写罗马数字排序
I 使用大写罗马数字排序
start：设置项目编号从第几个开始
取值：数字，表示从第几个开始
无序列表属性：
type：设置项目符号
取值：disc 实心圆点 默认符号
circle 空心远点
square 实心正方形
七、图片与超链接
完整的URL：http://www.baidu.com
图片标签：<img src=""> src为图片的URL 可以是网络路径，也可以是本地路径