web 的组成 浏览器 服务器：代替用户向服务器发送请求 通信协议：规范数据传输及打包方式（http,https） 服务器： 1 作用： 1 接收用户请求并响应 2 存储数据 3 具有安全性功能 2 产品： 1 Tomcat 2 Aapache 3 Nginx 4 IIS 3 技术： 1 python web （django flash ,tornado） 2 PHP 3 JAVA 4 ASP.net 5 JSp (java serverlet page) 4 浏览器： 1 作用： 1 代替用户向服务器发送请求 2 作为响应数据的解释引擎，呈现图形化界面 2 主流的浏览器产品： 1 Chrome -- Google 公司 2 IE -- microsoft 3 safari -- Apple 4 Firefox -- Mozilla 5 Opera --Opera 3 浏览器引擎（内核） 1 渲染引擎 - 解析 HTML 。css.控制而面渲染效果 2 js 引擎 -- 解析js 脚本 4 前端技术 1 HTML 书写页面结构和内容 2 CSS 设置网页中的元素的样式 3 JS 实现网页的交互 4 工具库，框架 2 html 概述 1 html介绍 HyperText Markup Language 超文本 标记 语言 2 超文本： 具有特殊功能文本 et: 普通文本 a 超文本 a 表示超链接 普通文本 b 超文本 b 表示加粗 3 标记 1 也叫标签。元素 2 主要用来标记网页中的内容 3 可以实现网页布局及JS交互 4 HTML 在计算机中的表现形式 网页文件在计算机中都是以.html/ .htm 后缀表示 工具 1 记事本 2 EditPlus Sublime WebStorm Vscode 运行工具：浏览器 以Chrome 浏览器为准 调试工具：浏览器开发者工具 F12 1 HTML 中的标签都以<>为标志 2 标签分类 1 双标签：成对出现，有开始标签，有结束标签 <html></html> 2 单标签: <hr> 水平线 <hr/> 3 标签嵌套 1 在嵌套结构中，外层标签称为“父元素‘，内层元素称为’子元素‘ 多层元素时，内部元素称为后代元素 head 网页头部信息：编码方式，网页名称 网页选项卡的小图标，网页信息介绍 引入外部资源文件 body 网页的主体信息：所有需要呈现给用户的，需要显示在窗口中的内容，都应在body中书写 4 标签属性 标签属性主要是用来修饰当前标签的显示效果，对当前标签或者网页的补充设置 语法： 1 书写位置： 标签属性都书写在开始标签中，与标签名之间使用空格隔开 2 属性是由属性名和属性值组成的 属性名= ‘属性值’ 属性值必须使用引号引起来，单双引号都可以 3 多个属性时，属性之间使用空格隔开 5 HTML 语法规范 1 HTML 不区分大小写 (推荐使用小写) 2 保持适当缩进，保证代码可读性 3 保持适当注释，保证代码可读性 6 HTML注释 <!-- 注释内容 --> 注意 : 1 HTML 注释不能嵌套 2 不能书写在标签内部的 7 HTML 中的换行与空格 1 HTML会忽略多余的空格，只显示为一个空格 2 代码中 4 文档组成 1 文档类型声明 <!DOCTYPE html> 声明当前为HTML文档 ，这种H5 的声明方式 作用： 1 告诉浏览器文档为html文档 2 按照H5的渲染方式解析网页 书写位置： 文档开头：<html>标签之前 2 文档内容 <!doctype html> <html> <head> <meta charset='utf-8'> <title>网页标题</title> </head> <body> 网页主体 </body> </html> 5 常用标签 1 标题标签 1 作用：以标题的形式显示文本（加粗，字号不同） 2 语法： <h1></h1> 一级标题 .... <h6></h6> 注意：标题文本大小，从h1 至h6逐级减小 2 段落标签 1 语法：<p></p> 2 可以通过标签属性 align = ''设置水平对齐方式取值 left/center/right 默认左对齐， 3 其他的文本标签 1 文本加粗：<b></b> <strong></strong> 2 文本斜体：<i></i> (italic) 3 添加下划线：<u></u> (underline) 4 添加删除线：<s></s> 说明： 以上4种标签，涉及到样式， 都可以使用css添加效果 加粗 倾斜 下划线 5 添加上标： <sup></sup> 6 添加下标 <sub></sub> 7 行内分区标签 <span></span>,一般嵌套在其他标签中，用来为特殊文本添加样式 8 <label></label>普通文本标签 4 格式标签 1 换行标签 <br> 等价于 <br/> 2 水平线 <hr> 等价于 <hr/> 5 字符实体 1 < ; 表示 < 2 > 表示 > 3   ; 表示一个空格 4 © ; 表示版权符号 5 @yen ; 表示人民币￥ 6 块级分区标签 语法：<div></div> 作用：容器标签，长用于页面模块划分 7 标签嵌套的规范： 1 标签类型划分： 1 块级元素： 独占一行，不与其他元素共行 h1 - h6 p div 2 行内元素： 可以与其他元素共行显示 b strong i u s span label sup sub 2 标签嵌套规范： 1 块元素中可以嵌套任意类型的元素 2 行内元素中尽量只嵌套行内元素 3 特殊情况： 段落标签中不可以嵌套其他块元素的 6 列表标签 1 列表： 从上到下排列数据的结构 列表中的数据都带有项目符号 2 语法： 1 列表分类： 1 无序列表 2 有序列表 3 自定义列表 2 列表的组成 1 无序列表由列表标签与列表项标签组成 <ul> unordered list <li></li> list item </ul> 注意：ul中嵌套li元素，每一个li元素表示一条数据 2 有序列表由列表标签与列表项组成 <ol> order list <li></li> </ol> 3 定义列表 <dl> <dt></dt> <dd></dd> </dl> 4 列表属性 只针对有序列表和无序列表 1 有序列表 -ol 1 type: 取值： 1 表示按照数字排序，默认项目符号 a 表示按照小写字母排序 A 使用大写字母作为项目符号 i 使用小写罗马数字 I 使用大写罗马数字 2 start:设置项目编号从第几个开始 取值：数字，表示从第几个开始 2 无序列表 -ul 1 .type ：设置项目符号 取值： disc:默认实心圆点 circle:空心圆 square:实心正方形 7.图片与超链接 1 URL 2 路径分类： 相对路径：从当前所在的文件夹开始查找 绝对路径：从计算机的根目录开始查找 3 图片标签： <img src =''> src中为图片的URL，可以是网络路径，也可以是本地路径