人工智能（PythonWeb）—— HTML

目录

参考源码：https://github.com/hilqiqi0/AI/tree/master/3.Web/html

一、WEB

    1、什么是WEB

    2、WEB的组成 & 运行流程

    3、WEB服务器

    4、WEB浏览器

二、HTML概述

    1、HTML介绍 和 基本语法

三、HTML 基础语法（重点）

    1、标记的语法

    2、标记的嵌套

    3、标记的属性 和 值

    4、HTML中的注释

    5、HTML中不区分大小写

四、HTML 文档结构

    1、文档类型声明

    2、HTML页面

                      3、标记

五、文本相关标记

    1、HTML中特殊字符处理

    2、文本样式标记

    3、标题标记

    4、段落元素

    5、换行元素

    6、分区元素

    7、行内元素 与 块元素

六、列表标记

    1、作用

    2、列表的组成

    3、列表的属性

    4、列表的嵌套

七、图像 和 超链接

    1、URL

    2、图像

    3、超链接

八、表格

    1、表格的语法

    2、不规则表格

    3、行分组

九、表单

    1、作用

    2、form 元素

    3、表单控件(重难点)

十、附录：目录

---

参考源码：https://github.com/hilqiqi0/AI/tree/master/3.Web/html

 

一、WEB

    1、什么是WEB

        web就是互联网上的一种应用程序 - 网页
        典型的应用：
            1、C / S
                Client : 客户端
                Server : 服务器
            2、B / S
                B ：Browser 浏览器
                S ：Server 服务器

    2、WEB的组成 & 运行流程

        由服务器，浏览器 和 通信协议组成
        服务器：处理用户的请求(request)和响应(response)
        浏览器：代替用户向服务器发送请求(User Agent)
        通信协议：规范了数据是如何打包以及传递的 - http
            http : Hyper    Text  Transfer Protocal
                        超级   文本  传输       协议

    3、WEB服务器

        1、作用
            接受用户的请求并给出响应
            存储WEB信息
            具备安全性功能
        2、产品
            1、APACHE
            2、TOMCAT
            3、IIS - Internet Information Service
            4、Nginx
        3、技术
            1、JSP - Java Servre Page
            2、Php
            3、ASP.NET
            4、Python Web (Django，Flask，... ...)

    4、WEB浏览器

        1、作用
            1、代替用户向服务器发送请求
            2、作为响应数据的解释引擎
        2、主流浏览器产品
            1、Micosoft Internet Explorer (IE)
            2、Google Chrome
            3、Mozilla Firefox
            4、Apple Safari
            5、Opera Opera

            浏览器靠内核处理数据，内核包含两部分：
                1、内容排版引擎(静态页面) - HTML，CSS
                2、脚本解释引擎(动态交互) - JS
        3、浏览器技术
            也称为 "前端技术"
            HTML,CSS,JavaScript

二、HTML概述

    1、HTML介绍 和 基本语法

        1、什么是HTML
            HTML ：Hyper Text Markup Language
                           超级  文本 标记   语言
                         编写网页的一款语言
            超文本：具备特殊功能的文本就是超文本
                普通文本 a ：普通字符a
                超文本 a ：表示的是超链接功能

                普通文本 b ：普通字符b
                超文本 b ：表示文字加粗功能

            标记：超文本的组成形式
                普通文本 a : a
                超文本 a :
            语言：语言有自己的语法规范
            

            W3C：World Wide Web Consortium
                万维网联盟
        2、HTML在计算机中的表现
            所有的网页在计算机中都是以 .html 或 .htm 作为结尾的文件来进行表示的
            
            开发工具：所有的文本编辑类软件都可以作为开发工具
                1、记事本
                2、Editplus，Sublime
                3、Dreamweaver,WebStorm,... ...
            运行工具：浏览器
                推荐使用：Google Chrome

三、HTML 基础语法（重点）

    1、标记的语法

        1、什么是标记
            在网页中，用于表示功能的符号称为 "标记/标签/元素"
        2、语法
            所有的标记，在使用时必须用<>括起来
            标记分为 双标记 和 单标记
            1、双标记
                由开始标记 和 结束标记组成
                <标记>...
                ex:
                    1、...
                    2、...
                    3、div 标记
                        

....

                    4、p 标记
                        

....

                注意：双标记，有开始，必须要有结束，否则显示效果会出错

            2、单标记
                只有一个标记，既能表示开始，又能表示结束。
                单标记自己就是个独立的功能，没有文本或其他内容可以控制
                <标记>   或   <标记/>
                ex:
                    1、
或
: 换行
                    2、

---

或

---

: 一条水平线
                    3、 或 : 显示图片

    2、标记的嵌套

        在一对标记中，再出现另外一对标记，目的是为了实现功能的嵌套
            超链接 ：
            加粗 ：
        加粗的超链接：
            1、....
            2、....
        为了良好的可读性，被嵌套的内容尽量独占一行，并添加缩进
            
                ... ...
            
        练习：
            1、编写一对 html 标记
            2、在html标记中嵌套一对 head 标记
            3、在html标记中嵌套一对 body 标记

              -- 父元素/父标记
                 -- 子元素/子标记
                 -- 子元素/子标记
            

    3、标记的属性 和 值

        1、什么是属性
            在标记中，用来修饰标记显示效果的东西就是属性
        2、语法
            1、属性的声明必须在开始标记中
                <标记 属性的声明位置处>
            2、属性名 和 标记名 之间要用空格隔开
                <标记 属性名称>
            3、属性名 和 属性值之间用=连接，属性值要用" " 或 ' ' 引起来
                <标记 属性名="值">
            4、一个元素允许设置多个属性，多属性之间排名不分先后，但多属性之间要用空格隔开
                <标记 属性1="值1" 属性2="值2">
            练习：
                1、创建一对p标记，内容随意
                2、增加一个属性，名称为 align 取值为 center
                3、增加一个属性，名称为 id 取值为 p1
                
                

xxx

    4、HTML中的注释

       
        注意：
            1、注释不能出现在<>中
                >... ...

                以上写法是错误的
            2、注释不能嵌套
                
                -->
                以上写法是错误的

    5、HTML中不区分大小写

       

        

        

四、HTML 文档结构

    1、文档类型声明

        出现在网页最顶端的第一个标记
        作用：告诉浏览器使用HTML的哪个版本
        

    2、HTML页面

        在文档类型声明之下，使用一对 html 标记来表示网页的开始和结束
        
        在 html 中，包含两对子元素
        1、
            表示网页头部信息
        2、
            表示网页主体信息
        练习：
            1、创建01-page.html 网页文件
            2、搭建网页结构
                1、增加文档类型声明
                2、增加html根标记
                3、在 html 中增加头部 和 主体
                4、增加适当的注释

    3、 标记

        作用：描述网页的头部信息，对于网页起到控制的作用
        子元素：
            1、
            2、指定网页编码
                
                告诉浏览器按照utf-8的编码方式进行网页解析
                注意：必须要保证网页文件的编码方式也是utf-8

五、文本相关标记

    1、HTML中特殊字符处理

        1、   表示一个空格
        2、<  表示一个 <
        3、>  表示一个 >
        4、© 表示一个 ©
        5、¥ 表示 ￥

    2、文本样式标记

        1、作用
            修改文本在网页中的表现形式
        2、标记
            1、 : 斜体显示文本
            2、 : 下划线显示文本
            3、 : 删除线显示文本
            4、 : 加粗显示文本
            5、 : 上标方式显示文本
            6、 : 下标方式显示文本
            练习：
                这是一段有加粗，斜体，删除线，下划线，上标 和 下标的文本
            特点：
                该组标记能够与其他的标记或文本在一行内显示

    3、标题标记

        1、作用
            以不同的文字大小以及加粗方式显示文本
        2、语法
            
            # : 1-6
            

:一级标题
            

:二级标题
            ... ...

            练习：（02-page.html）
                静夜思
                李白
                床前明月光
                疑是地上霜
                举头望明月
                低头思故乡
            特点：
                1、会改变文字的大小以及加粗效果
                2、每个标题都会具备垂直的空白距离
                3、每个标题独占一行
                4、每个标题都会具备一个属性
                    属性：align
                    取值：
                        1、left ：左对齐
                        2、center ：居中对齐
                        3、right ：右对齐

    4、段落元素

        1、作用
            突出显示一段文本，每段文本独占一行/块，并且每个段落都会具备一小段的垂直空白距离
        2、语法
            

            属性：
                align
            取值：left / center / right

            练习：
                天长地久有时尽
                此恨绵绵无绝期

    5、换行元素

       
或

    6、分区元素

        1、块分区元素
            标记：

            作用：布局(配合CSS)
            特点：独占一行/一块
        2、行内分区元素
            标记：
            作用：设置同一行文本的不同样式(配合CSS)
            特点：允许在一行内显示多个span元素，也能够与其他的文本在一行内显示

    7、行内元素 与 块元素

        1、块元素
            只要在网页中能独占一行/一块的元素都称为块级元素，简称为块元素
            p,h1,h2,h3,h4,h5,h6,div
            作用：都可以做布局
            所有的块元素都会具备align属性
        2、行内元素
            多个元素能够在一行内显示的，就是行内元素
            span,i,b,s,u,sub,sup
            作用：处理文本的样式

六、列表标记

    1、作用

        按照从上到下的方式来进行数据排列
        并能够显示列表的标识在内容的前面

    2、列表的组成

        1、列表的类型
            1、有序列表 -

  (Order List)
            2、无序列表 -

  (Unordered List)
        2、列表项
            

(List Item)

        ex:
            

                
1. 内容1

                
2. 内容2

            

        练习：
            1、创建03-list.html
            2、搭建网页结构
            3、在body中创建一个有序列表，用四个列表项分别表示四大名著的名称
            4、在body中创建一个无序列表，用四个列表项分别表示四大天王的名称

    3、列表的属性

        1、有序列表 - ol
            1、type
                取值：
                    1、1：按数字方式排列显示，默认值
                    2、A：按大写英文字符显示
                    3、a：按小写英文字符显示
                    4、I：按大写罗马数字显示
                    5、i：按小写罗马数字显示
            2、start
                指定有序的字符是从 几 开始显示
        2、无序列表 - ul
            1、type
                取值：
                    1、disc : 实心圆点，默认值
                    2、circle : 空心圆点
                    3、square : 实心方块
                    4、none : 不显示任何标识

    4、列表的嵌套

        在一个列表项中，又出现一个列表

        

            
• 
                  
  
                      
  
                  
  
              

        

七、图像 和 超链接

    1、URL

        Uniform Resource Locator
        统一资源定位器，用于标识网络中资源的位置，俗称路径
        
        URL分类：
            1、绝对路径
                访问网络资源时，使用绝对路径
                ex：
                    http://www.baidu.com
                    http://www.baidu.com/img/bd_logo1.png
            2、相对路径
                从当前文件所在的位置处去开始查找资源文件所经过的路径

            3、根相对路径
                从WEB程序所在的根目录处开始查找资源文件
            
            注意：
                1、url中不能出现中文
                2、url是严格区分大小写

    2、图像

        1、标记
            
        2、属性
            1、src
                指定要显示的图片的路径
            2、width
                宽度，以px为单位的数值(允许省略px)
                px : pixel,像素
            3、height
                高度，以px为单位的数值(允许省略px)

            注意：
                如果宽度 和 高度只设定一个值的话，那么另外一个值也跟着等比缩放

    3、超链接

        1、什么是超链接
            用户可以通过点击的操作来完成页面的跳转的行为的
        2、语法
            标记：内容
            属性：
                1、href
                    表示是链接地址
                2、target
                    指定要打开的新网页的方式
                    取值：
                        1、_self
                            默认值，在自身标签页中打开新网页
                        2、_blank
                            在新标签页中打开新网页

八、表格

    1、表格的语法

        1、标记
            表格：

            表行：  --- Table Row
            单元格(列)： --- Table Data

            ex: 创建一个 4(行)*4(列)的表格
        2、属性
            1、table属性
                1、width
                    指定表格的宽度，以px为单位数值(px可以省略)
                2、height
                    指定表格的高度，以px为单位数值(px可以省略)
                3、border
                    指定边框宽度，以px为单位数值(px可以省略)
                4、align
                    指定表格在其父元素中的水平对齐方式
                    取值：left / center / right
                5、cellpadding
                    指定单元格内边距
                    指定单元格边框与内容之间的距离
                6、cellspacing
                    指定单元格外边距
                    指定单元格之间的距离(单元格与表格之间的距离)
            2、tr属性
                1、align
                    控制当前行内容的水平对齐方式
                    取值：left / center / right
                2、valign
                    控制当前行内容的垂直对齐方式
                    取值：top / middle / bottom
                3、bgcolor
                    控制当前行内容的背景颜色
                    取值：表示颜色的英文单词
            3、td属性
                1、width
                2、height
                3、align
                4、valign
                5、bgcolor
                6、colspan ：跨列 / 合并列
                7、rowspan ：跨行 / 合并行

    2、不规则表格

        1、单元格的跨列
            从指定单元格的位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除出去
            语法：colspan="n"
        2、单元格的跨行
            从指定单元格的位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要删除出去
            语法：rowspan="n"

    3、行分组

        1、什么是行分组
            允许将表格中的若干行划分到一组中，方便管理
        2、语法
            1、表头行分组
                允许将表格中最上方的若干行划分到一组中
                
            2、表尾行分组
                允许将表格中最下方的若干行划分到一组中
                
            3、表主体行分组
                表格中除了最上方和最下方之外的行们进行分组的话允许放在表主体行分组中
                

九、表单

    1、作用

        用于接收用户的数据并提交给服务器
        表单二要素：
            1、form元素
                表单，用于收集用户信息并提交给服务器
            2、表单控件
                提供了能够与用户交互的可视化组件

    2、form 元素

        1、作用
            用于收集用户信息并提交给服务器
            form元素在网页中是不可见的，但功能不能忽略
        2、语法
            1、标记
                

            2、属性
                1、action
                    指定处理程序的地址
                    默认提交给本页
                2、method
                    提交方式 / 方法
                    共提供了 7-8 个值，但是有用的只有两个
                    1、get(默认值)
                        通常是在向服务器要数据时使用
                        特点：
                            1、提交的数据会显示在地址栏上
                            2、安全性较低
                            3、提交数据最大为2KB
                    2、post
                        要将数据提交给服务器处理时使用
                        特点：
                            1、隐式提交，看不到提交数据
                            2、安全性较高
                            3、无提交数据的大小限制

    3、表单控件(重难点)

        1、作用 & 注意
            作用：提供了能够与用户交互的可视化组件
            注意：
                只有放在表单中的表单控件才允许被提交
                表单控件都是"行内块"元素
        2、表单控件详解(难点)
            1、文本框 & 密码框
                文本框：
                密码框：

                属性：
                    1、name ：定义控件名称
                        提交给服务器使用，如果没有name的话则无法提交
                    2、value ：值
                        要提交给服务器的值，同时也是默认能够显示在控件上的值
                    3、maxlength
                        限制输入的最大字符数
                    4、placeholder
                        占位符
                        用户在未输入任何数据时所显示的内容
            2、按钮
                1、提交按钮：
                    将表单数据提交给服务器
                2、重置按钮：
                    将表单内容恢复到初始化的状态
                3、普通按钮：
                    允许通过JS自定义功能
                属性：
                    value ：按钮上显示的文本

                4、内容
                    属性：type
                    取值：submit / reset / button
            3、单选按钮 和 复选框
                单选按钮：
                复选框：

                属性：
                    1、name
                        定义控件名称，除了定义名称之外，还起到分组的作用
                        一组中的单选按钮 或 复选框 名称必须一致
                    2、value
                        值，尽量提前声明
                    3、checked
                        设置预选中，该属性无值
            4、隐藏域 和 文件选择框
                1、隐藏域
                    作用：想提交给服务器但不想给用户看的数据可以放在隐藏域中
                    语法：
                        
                    属性：
                        name：定义控件的名称
                        value：定义控件的值
                2、文件选择框
                    作用：文件上传时使用
                    标记：
                    属性：
                        name ：定义控件的名称
            5、多行文本域
                标记：
                属性：
                    1、name ：控件名称
                    2、cols ：指定文本域默认显示的列数
                        一行能够显示的英文字符量，中文减半
                    3、rows ：指定文本域默认显示的行数
            6、下拉选择框 (下拉列表)
                
                    显示数据
                

 

注意：
    p标记是不能嵌套块级元素的

补充：
        1. label for ID
            男
            
            使用label标签显示文本,将label的标签属性 for 的属性值设置为将要绑定的表单控件的id值,实现点击文本跟点击控件一样的效果

            补充 :
            maxlength 属性 用来设置输入框可输入的最大字符数

        2. 取色板
            

十、附录：目录

        人工智能（PythonWeb）—— 目录汇总