pythonweb day01

 

目录

1，web

2，HTML概述

3，HTML 基础语法

4，HTML结构组成

5，文本相关的标签

6，列表标签

7，图像与超链接标签

---

1，web

1. 什么是web
   web就是网页，是一种基于B/S的应用程序
   B：Browser 浏览器
   S ：Server 服务器
   C：Client 客户端
2. web 组成
   浏览器：代替用户向服务器发送请求
   服务器：接收用户请求并响应
   通信协议：规范数据在网络中是如何打包即传递的
   http:HyperText transfer protocal
   超文本传输协议
3. web服务器
   1. 作用：
      接收用户请求并响应
      存储web信息
      具备安全性功能
   2. 产品：
      1，Apache
      2，Tomcat
      3，IIS - Internet Information Service
      4，Nginx
      ...
   3. 技术
      1，JSP - Java Sever Page
      2，PHP
      3，ASP.net
      4，Python web（Django Flask...）
4. web浏览器
   1. 作用：
      代替用户向服务器发送请求
      作为响应数据的解释引擎，向用户呈现界面
   2. 主流浏览器产品
      根据浏览器的内核/引擎进行划分
      1，Microsoft  IE
      2，Google  Chrome
      3，Mozilla  FireFox
      4，Apple  Safari
      5，Opera  Opera
      浏览器引擎
      1. 渲染引擎 - 解析HTML,CSS,控制界面的渲染效果
      2. JS引擎 - 解释网页脚本文件
   3. 前端开发技术
      HTML CSS JavaScript

2，HTML概述

1. HTML介绍
   1. 什么是HTML
      HyperText Markup language
      超文本       标记     语言
      作用：书写网页结构
   2. 超文本
      具备特殊功能的文本就是超文本
      et：
      普通文本 a:普通字符
      超级文本 a:表示超链接功能
      
      普通文本 a:普通字符
      超级文本 b:表示加粗功能
   3. 标记
      也叫标签，主要是用来标记网页中的内容，以实现网页的布局和JS操作
2. HTML 在计算机中的表现
   所有的网页文件在计算机中都是以.html/.htm文件存储的
   开发工具：
   1,记事本
   2,Editplus，Dreamweaver
   3,sublime，Webstorm，Hbuilder，VSCode，Atom...
   
   运行工具：
   Chrome浏览器
   
   调试工具：
   开发者工具，F12打开

3，HTML 基础语法

1. 标签/标记
   在网页中具有特殊功能的符号
   1. HTML 中所有的标签都以<>为标志，区分普通文本
   2. 标签分类
      1. 双标签：成对出现，有开始有结束
         <开始标签>标签内容
         et：
         

         一级标题

      2. 单标签：只有开始标签，没有结束标签，可以手动添加/表示结束
         <标签名>
         <标签名/>
         et:
         
         换行标签--等同于
         
         

         ---

         水平线--等同于

         ---

   3. 标签嵌套
      1. 在成对的标签中出现其他标签
         超链接标签:首页
         文本加粗标签:首页
         ---加粗的超链接文本--

         
             首页
         
         
             首页
         

      2. 嵌套结构中，外层元素称为父元素，内层元素称为子元素
   4. 文档结构
      1. 新建文件，保存为.htm / .html格式
      2. 书写一对html标签
      3. 在html标签中嵌套一对head标签
      4. 在html标签中嵌套一对body标签
      5. 为body标签添加文本内容，内容不限

         
         	
         	
         		Hello
         		
         

          

   5. 书写规范
      1. HTML不区分大小写
         推荐使用小写
      2. 保持适当缩进，增强代码可读性
2. 标签属性
   标签属性主要用来修饰标签的显示效果
   语法：
   1. 属性由属性名和属性值组成
      属性名=‘属性值’
   2. 属性的声明必须写在开始标签中
      <开始标签 属性名=‘属性值’>..
   3. 每个标签都可以设置多个属性，属性之间使用空格隔开
      <开始标签 属性名=‘属性值’ 属性名=‘属性值’ 属性名=‘属性值’>..
   4. 练习
      再body标签添加一对p标签，内容不限
      为p标签增加属性align，取值 center
      为p标签增加属性id，取值p1

      
      	
      	
      		Hello
      		
      延禧攻略
      		
      

       

3. HTML 注释
    
   注意：
   1. 注释不能写在标签里的
      错误：
      

      >

   2. 注释不能嵌套
4. HTML中的换行与空格
   HTML文档会忽略掉多余的空格，只显示为一个空格，如果需要显示多个空格或者 <  > ,都需要使用特殊符号代替

4，HTML结构组成

1. 文档的类型声明
   h5的声明方式
   作用：告诉浏览器当前使用的HTML版本，以便浏览器能正确解析HTML标签和渲染样式
   书写位置：文档最开始的位置
2. 文档开始和结束
   1. 在文档类型声明之后，使用一对 标签标示文档的开始和结束
   2. 在HTML标签中，包含了两对子元素

      
          
          
      
      标签标示网页的头部信息，包含网页的标题，选项卡的图标，网页的关键字，作者，描述等信息，还可以引入外部的资源文件
      标签表示网页的主体信息，网页所呈现的内容都要写body里

   3. 标签中包含的子元素
      1. 设置网页的标题
         
      2. 设置网页的字符编码
         
         浏览器按照utf-8的编码方式解析网页

5，文本相关的标签

1. 字符实体（具有特殊意义的符号）
   1.  ；表示一个空格
   2. &it；表示小于号 <
   3. >；表示大于号
   4. ©；表示版权符号 ©
   5. ¥；表示人民币符号 ￥

      
      
      
      
      	
      		
      		
      		
      		
      		
      		
      	
      	
      		
      		<如   懿   传>
      		<b>
      		版本所有©达内科技
      		价格：¥10000.00
      	
      
      
      
      

       

2. 文本样式标记
   1. 斜体显示文本：
   2. 文本添加下划线：
   3. 文本加粗效果：
   4. 文本添加删除线：
   5. 上标显示文本：
   6. 下标显示文本：
      练习：
      这是一段有加粗，斜体，删除线，下划线，上标和下标的文本
      特点：这些标签可以与其他标签或文本工行显示
3. 标题标签
   1. 作用
      以不同的文字大小和加粗方式显示文本
   2. 语法
      n取值 1-6，字体大小是逐级递减
      
      一级标题
      ...
      
      六级标题
      练习：
          咏鹅
        骆宾王
      鹅，鹅，鹅
      曲项向天歌
      白毛浮绿水
      红掌拨清波
      特点：
      1. 会改变文字的大小并且具有加粗效果
      2. 每个标题都会具备垂直的空白距离
      3. 每个标题都独占一行，不与其他元素共行显示
      4. 每个标题都可以添加属性align
         取值：left / center / right
         设置文本的水平对齐方式，默认居左对齐
4. 段落标签
   1. 作用
      突出显示一段文本，每段文本都独占一行或一块，不予其他元素共行显示，并且也具备垂直的空白距离
   2. 语法
      
      
      属性 align 设置文本的水平对齐方式
      取值 left / center / right
       
5. 格式标签
   换行标签
   等同于
   
   水平线标签

   ---

   等同于 

   ---

   
    

   作业1：
   

   
   
   	
   		
   		
   	
   	
   		
   HTML <Day01>
   		
   		
   
   		
   1. HTML 文档片段
   		
   1.1 问题
   		
   创建如图-1所示的HTML页面
   		
   1.2 方案
   		
   使用HTML完成效果
   		
   1.3 实现
   		
   创建index.html,完成操作
   	
   

   
    

6. 分区标签

   1. 块分区
      标签：

      
      作用：划分页面结构，配合CSS实现网页布局
      特点：独占一行显示（独占一块）

   2. 行内分区元素
      标签：
      作用：设置同一行文本的不同样式（结合CSS）
      特点：可以与其他元素或文本共行显示
       

      
      
      	
      		
      		
      	
      	
      		这是一段有加粗，斜体，下滑线，删除线，上标，下标
      		
      		
      咏鹅
      		
      骆宾王
      		
      鹅鹅鹅
      		
      曲项向天歌
      		
      白毛浮绿水
      		
      红掌拨清波
      		
      		
      我们一起学猫叫
      		
      一起喵喵喵
      		
      		西湖美景三月天，
      
      		春雨无度柳如烟
      
      		
      		
      块分区元素
      		
      块分区元素
      
      		
      		
      红色文本
      		
      这是一段文本，包含绿色文本
      		
      DIV标签
      
      	
      

       

7. 标签分类

   1. 块级元素
      只要在网页中是独占一行，不予其他元素工行显示的元素都是块级元素，简称块元素，
      例如：h1 h2 h3 h4 h5 h6,p,div ul ol li...
      作用：都可以做布局
      特点：都可以添加algin属性，设置内容的水平对齐方式

   2. 行内元素 / 内联元素
      可以与其他元素共行显示的元素
      例如：i b u s sub sup span

6，列表标签

1. 作用
   按照从上到下的方式来排列数据，并且能够显示项目符号在数据的前面
2. 列表的组成
   1. 列表的类型
      1. 有序列表
         (ordered list)
         默认是按照数字排列
      2. 无序列表
         (unordered list)
         默认以实心原点作为标识
   2. 列表项
      列表中的每一条数据都是一个列表项
      语法：
   
   注意：列表项要嵌套在列表标签中使用
   et:

   
       
   Java
       
   PHP
   
       
   Python
   

   练习：

   1. 创建新的HTML文件

   2. 搭建网页结构

   3. 在body中创建有序列表，分别展示四大名著

   4. 再创建一个无序列表，展示四大天王

      
      
      	
      		
      		
      
      	
      	
      
      	
      		
      		
      
      			
      红楼梦
      			
      西游记
      			
      水浒传
      			
      三国演义
      		
      
      		
      
      			
      刘德华
      			
      黎明
      			
      巨人网络
      			
      盛大网络
      		
      		
      	
      
      
      

       

   4. 列表属性

      1. 有序列表 --ol

         1. type属性：设置项目符号
            取值：

            1. 1：按照数字排列显示，默认值

            2. a：按照小写字母顺序排列

            3. A：按照大写字母排列

            4. i：按照罗马数字排列

            5. I：按照罗马数字排列
               罗马数字：i ii iii iv v vi vii...

         2. start属性：设置从第几个字符开始排列
            取值：数字

             

      2. 无序列表 -ul
         1. type属性：设置项目符号
            取值：
            1. disc 实心原点（默认）
            2. circle 空心圆点
            3. square 实心方块
            4. none 不显示项目符号
                
   5. 列表嵌套
      1. 在一个列表中又出现了其它的列表

         
             
         
                 列表属性
                 
         
                     
         type属性
                     
         type属性
                 
         
             
         
         

         每一部名著中都列出三个主要任务

         1. 水浒传

            1. 武松

            2. 西门庆

            3. 潘金莲

         2. 西游记

            1. 大师兄

            2. 二师兄

            3. 沙师弟

               
               
               	
               		
               		
               
               	
               	
               
               	
               		
               		    
               		
               
               			
               红楼梦
               			
               西游记
               			
               水浒传
               			
               三国演义
               		
               
               		
               
               			
               刘德华
               			
               黎明
               			
               巨人网络
               			
               盛大网络
               		
               
               		
               		
               
               			
               
               				西游记
               				
               
               					
               大师兄
               					
               二师兄
               					
               沙师弟
               				
               			
               			
               
               				红楼梦
               				
               
               					
               贾宝玉
               					
               林黛玉
               					
               薛宝钗
               				
               			
               
               		
               
               		
               		
               
               			
               
               				西游记
               				
               
               					
               大师兄
               					
               二师兄
               					
               沙师弟
               				
               			
               		
               		
               	
               
               
               

                

7，图像与超链接标签

1. URL
   Uniform Resource Locator
   统一资源定位符：用来标识网络中资源的位置，俗称路径
   URL组成：协议  域名  文件目录及文件名
   URL分类：
   1. 绝对路径
      从根目录开始查找
      常用于网络文件路径
      et：访问网络资源
      http://www.baidu.com
      http://www.baidu.com/img/logo.png
   2. 相对路径
      从当前文件所在的文件夹开始查找
   3. 跟相对路径（了解）
      从web程序所在的跟目录开始查找资源文件
      注意：
      1. URL中不能出现中文
      2. URL严格区分大小写的
2. 图像标签
   1. 在网页中插入一张图片
   2. 语法：
   3. 属性：
      1. src：指定要显示的图片路径
      2. width：设置图片的宽度，以像素px为单位，也可以省略单位
      3. height：设置图片的高度
         注意：src为必填属性，宽高可以省略，省略宽高的话，图片将以原始尺寸显示在网页中
      4. title：用来设置图片的标题，当鼠标悬停在图片上方时出现
      5. alt：用来设置图片加载失败之后提示文本