欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

pythonweb day01

程序员文章站 2022-06-13 12:30:09
...

 

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:
        <h1>一级标题</h1>
      2. 单标签:只有开始标签,没有结束标签,可以手动添加/表示结束
        <标签名>
        <标签名/>
        et:
        <br>换行标签--等同于<br/>
        <hr>水平线--等同于<hr/>
    3. 标签嵌套
      1. 在成对的标签中出现其他标签
        超链接标签:<a>首页</a>
        文本加粗标签:<a>首页</b>
        ---加粗的超链接文本--
        <a>
            <b>首页</b>
        </a>
        <b>
            <a>首页</a>
        </b>
      2. 嵌套结构中,外层元素称为父元素,内层元素称为子元素
    4. 文档结构
      1. 新建文件,保存为.htm / .html格式
      2. 书写一对html标签<html></html>
      3. 在html标签中嵌套一对head标签
      4. 在html标签中嵌套一对body标签
      5. 为body标签添加文本内容,内容不限
        <html>
        	<head></head>
        	<body>
        		Hello
        	</body>	
        </html>

         

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

       

  3. HTML 注释
     
    <!--
        注释内容
    -->
    
    注意:
    1. 注释不能写在标签里的
      错误:
      <p <!-- -->></p>
    2. 注释不能嵌套
  4. HTML中的换行与空格
    HTML文档会忽略掉多余的空格,只显示为一个空格,如果需要显示多个空格或者 <  > ,都需要使用特殊符号代替

4,HTML结构组成

  1. 文档的类型声明
    <!doctype html> h5的声明方式
    作用:告诉浏览器当前使用的HTML版本,以便浏览器能正确解析HTML标签和渲染样式
    书写位置:文档最开始的位置
  2. 文档开始和结束
    1. 在文档类型声明之后,使用一对<html></html> 标签标示文档的开始和结束
    2. 在HTML标签中,包含了两对子元素
      <html>
          <head></head>
          <body></body>
      </html>
      <head>标签标示网页的头部信息,包含网页的标题,选项卡的图标,网页的关键字,作者,描述等信息,还可以引入外部的资源文件
      <body>标签表示网页的主体信息,网页所呈现的内容都要写body里
    3. <head>标签中包含的子元素
      1. 设置网页的标题
        <title>我的第一个网页</title>
      2. 设置网页的字符编码
        <meta charset='utf-8'>
        浏览器按照utf-8的编码方式解析网页

5,文本相关的标签

  1. 字符实体(具有特殊意义的符号)
    1. &nbsp;表示一个空格
    2. &it;表示小于号 <
    3. &gt;表示大于号
    4. &copy;表示版权符号 ©
    5. &yen;表示人民币符号 ¥
      <!--文档类型声明 -->
      <!doctype html>
      <!--表名文档开始 -->
      <html>
      	<head>
      		<!-- 网页标题设置 -->
      		<title>我的第一个网页</title>
      		<!-- 字符编码方式 -->
      		<meta charset='utf-8'>
      		<!-- 设置选项卡小图标 -->
      		<link rel='shortcut icon' href='web.ico' type='image/x-icon'>
      	</head>
      	<body>
      		<!-- 网页的主体内容 -->
      		<如&nbsp;&nbsp;&nbsp;懿&nbsp;&nbsp;&nbsp;传>
      		&lt;b&gt;
      		版本所有&copy;达内科技
      		价格:&yen;10000.00
      	</body>
      
      
      <!-- 表明文档结束 -->
      </html>

       

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

    作业1:
    pythonweb day01

    <!DOCTYPE html>
    <html>
    	<head>
    		<title></title>
    		<meta charset="utf-8">
    	</head>
    	<body>
    		<h1 align="center">HTML &lt;Day01&gt;</h1>
    		<!-- 水平线 -->
    		<hr>
    		<h2>1. HTML 文档片段</h2>
    		<h3>1.1 问题</h3>
    		<p>创建如图-1所示的HTML页面</p>
    		<h3>1.2 方案</h3>
    		<p>使用HTML完成效果</p>
    		<h3>1.3 实现</h3>
    		<p>创建index.html,完成操作</p>
    	</body>
    </html>


     

  6. 分区标签

    1. 块分区
      标签:<div></div>
      作用:划分页面结构,配合CSS实现网页布局
      特点:独占一行显示(独占一块)

    2. 行内分区元素
      标签:<span></span>
      作用:设置同一行文本的不同样式(结合CSS)
      特点:可以与其他元素或文本共行显示
       

      <!doctype html>
      <html>
      	<head>
      		<title>文本样式</title>
      		<meta charset="utf-8">
      	</head>
      	<body>
      		这是一段有<b>加粗</b>,<i>斜体</i>,<u>下滑线</u>,<s>删除线</s>,<sup>上</sup>标,<sub>下</sub>标
      		<!-- 标题标签 -->
      		<h1 align="center">咏鹅</h1>
      		<h2 align="right">骆宾王</h2>
      		<h3 align="center">鹅鹅鹅</h3>
      		<h4 align="center">曲项向天歌</h4>
      		<h5 align="center">白毛浮绿水</h5>
      		<h6 align="center">红掌拨清波</h6>
      		<!-- 段落标签 -->
      		<p align="center">我们一起学猫叫</p>
      		<p align="right">一起喵喵喵</p>
      		<!-- 换行标签 -->
      		西湖美景三月天,<br>
      		春雨无度柳如烟
      
      		<!-- 块分区标签 -->
      		<div>块分区元素</div>
      		<div>块分区元素</div>
      
      		<!-- 行内分区元素 -->
      		<h1><span>红色</span>文本</h1>
      		<p>这是一段文本,包含<span>绿色</span>文本</p>
      		<div><span>DIV</span>标签</div>
      
      	</body>
      </html>

       

  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. 有序列表<ol></ol>(ordered list)
        默认是按照数字排列
      2. 无序列表<ul></ul>(unordered list)
        默认以实心原点作为标识
    2. 列表项
      列表中的每一条数据都是一个列表项
      语法:<li></li>
      注意:列表项要嵌套在列表标签中使用
      et:
      <ol>
          <li>Java</li>
          <li>PHP<li>
          <li>Python</li>
      <ol>

      练习:

      1. 创建新的HTML文件

      2. 搭建网页结构

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

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

        <!doctype html>
        <html>
        	<head>
        		<title>列表练习</title>
        		<meta charset="utf-8">
        
        	
        	</head>
        
        	<body>
        		<!-- 使用有序列表展示四大名著 
        		    1.xxx
        		    2.xxx-->
        		<ol>
        			<li>红楼梦</li>
        			<li>西游记</li>
        			<li>水浒传</li>
        			<li>三国演义</li>
        		</ol>
        
        		<ul>
        			<li>刘德华</li>
        			<li>黎明</li>
        			<li>巨人网络</li>
        			<li>盛大网络</li>
        		</ul>
        		
        	</body>
        
        </html>
        

         

    3. 列表属性

      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 不显示项目符号
             
    4. 列表嵌套
      1. 在一个列表中又出现了其它的列表
        <ul>
            <li>
                列表属性
                <ol>
                    <li>type属性</li>
                    <li>type属性</li>
                </ol>
        
            <li>
        </ul>

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

        1. 水浒传

          1. 武松

          2. 西门庆

          3. 潘金莲

        2. 西游记

          1. 大师兄

          2. 二师兄

          3. 沙师弟

            <!doctype html>
            <html>
            	<head>
            		<title>列表练习</title>
            		<meta charset="utf-8">
            
            	
            	</head>
            
            	<body>
            		<!-- 使用有序列表展示四大名著 
            		    1.xxx
            		    2.xxx-->
            		    <!-- type -->
            		<ol type='a' start="3">
            			<li>红楼梦</li>
            			<li>西游记</li>
            			<li>水浒传</li>
            			<li>三国演义</li>
            		</ol>
            
            		<ul type='square'>
            			<li>刘德华</li>
            			<li>黎明</li>
            			<li>巨人网络</li>
            			<li>盛大网络</li>
            		</ul>
            
            		<!-- 列表嵌套 -->
            		<ol>
            			<li>
            				西游记
            				<ol>
            					<li>大师兄</li>
            					<li>二师兄</li>
            					<li>沙师弟</li>
            				</ol>
            			</li>
            			<li>
            				红楼梦
            				<ol>
            					<li>贾宝玉</li>
            					<li>林黛玉</li>
            					<li>薛宝钗</li>
            				</ol>
            			</li>
            
            		</ol>
            
            		<!-- 不推荐下面写法 -->
            		<ul>
            			<li>
            				西游记
            				<ol>
            					<li>大师兄</li>
            					<li>二师兄</li>
            					<li>沙师弟</li>
            				</ol>
            			</li>
            		</ul>
            		
            	</body>
            
            </html>
            

             

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. 语法:<img>
    3. 属性:
      1. src:指定要显示的图片路径
      2. width:设置图片的宽度,以像素px为单位,也可以省略单位
      3. height:设置图片的高度
        注意:src为必填属性,宽高可以省略,省略宽高的话,图片将以原始尺寸显示在网页中
      4. title:用来设置图片的标题,当鼠标悬停在图片上方时出现
      5. alt:用来设置图片加载失败之后提示文本
        <!doctype html>
        <html>
        	<head>
        		<meta charset="utf-8">
        	</head>
        	<body>
        		<!-- 图片标签 -->
        		<!-- 绝对路径加载网络文件 -->
        		<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1535620319&di=d01e46bb6b462c5ad9538a54c7989d55&src=http://img4q.duitang.com/uploads/item/201504/18/20150418H4122_zk8BM.jpeg">
        		<!-- 绝对路径加载本地文件 
        			1. windows电脑上绝对路径都是以盘符开始的
        			2. 需要手动补全文件名
        			3. Windows电脑两种斜杠都可以识别,需要手动修改路径中的斜杠为/
        				\ 是转义字符的标志
        		  -->
        		<img src="C:/Users/Python/Desktop/day01/web.ico">
        
        		<!-- 相对路径 -->
        		<img src="web.ico">
        		<img src="timg.jpg">
        		
        		<!-- ../ 表示返回上一级目录文件夹 -->
        
        		<!-- 图片属性 宽高属性,如果只设置一个值,另外一个会等比缩放-->
        		<img src="img/cat.jpg" width="300px">
        		<img src="img/cat.jpg" width="300px" height="300">
        
        		<img src="img/cat.jpg" width="300px" title="猫" alt="猫咪消失了">
        		<img src="img/ca.jpg" width="300px" title="猫" alt="猫咪消失了">
        
        
        
        
        
        
        	</body>
        </html>

         

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关标签: pythonweb