10_02、HTTP协议

一、HTML概念

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

二、书写和打开HTML代码文件

方式1：

　　直接新建一个txt文件，只需要把后缀名改为.html即可

　　双击文件名打开

方式2：

　　pycharm中新建html文件

　　在pycharm中右键运行打开，或在右上角点击浏览器图标打开

三、HTML的文档结构



>

>
  这里是文档的头部 ...主要给浏览器设置的配置信息 ...
>

>
  这里是文档的主体 ...直接给用户查看的相关信息 ...
>

>


# head标签一般写的不是让用户看的 
# body标签一般写想让用户看的到的东西



四、常用标签


head内常用标签



title   定义网页标题信息
style   内部支持直接书写css代码
link    引入外部css文件
script  内部可以直接书写js代码，也可以引入外部js文件
meta    定义网页源信息 



body内的常用标签



h1-h6  标题标签
p 　　　段落标签
hr　　　水平线
br　　　换行 

b 加粗　　
i 斜体　　
u 下划线　　
s 删除线



div划定区域范围
span划定文本范围





img标签



<img src="../../img/aaa/123.png" title="好美哦" width="200px"  alt="">

src:
    1. 外链地址
    2. 本地地址
title:
    当鼠标悬浮时候显示的文字信息, title属性是所有标签都有的属性
width：
    设置图片的大小，一般只设置一个宽或者一个高，默认是等比例缩放
alt：
    当图片加载失败的时候，显示的提示信息



a标签



<a href="http://www.baidu.com" title="这是标题" target="_blank">点我a>

href:
    跳转的地址
target：
    _self　　 默认，从当前标签跳转
    _blank　　新开一个标签跳转



表格标签



表格标签的常用属性

# border:边框的宽度
# cellpadding: 内容距离内边框的距离
# cellspacing: 单元格与单元格之间的距离



 实例:






DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签测试title>
head>

<body>
<table border='1' cellpadding cellspacing="5">
    <thead>
    <tr>
        <td>idtd>
        <td>nametd>
        <td>agetd>
        <td>gendertd>
    tr>
    thead>

    <tbody>
    <tr>
        <td>1td>
        <td>tomtd>
        <td>18td>
        <td>maletd>
    tr>
    <tr>
        <td>2td>
        <td>jerrytd>
        <td>15td>
        <td>maletd>
    tr>
    tbody>


table>
body>

html>




无序列表



无序列表：
<ul type="circle">
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
    <li>6li>
ul>




有序列表(了解)
    <ol type="A" start="2">
        <li>ali>
        <li>bli>
        <li>cli>
        <li>dli>
        <li>eli>
        <li>fli>
    ol>




标题列表(了解)
<dl>
    <dt>标题dt>
    <dd>内容dd>
    <dt>标题dt>
    <dd>内容dd>
dl>



form表单



form表单可以让前端输入的数据提交到后端

<form action="" method="post">
    # 朝后端提交的地址
    1. 什么都不写，默认提交的是当前地址
    2. 全写：https://passport.baidu.com/v2/api/?login
    3. 只写后缀
        /index/ # 他会自动帮你拼接 ip:port/index/
修改请求方式：    
    method="post"

请求数据格式：
    1. urlencode
    2. form-data
    3. json

form表单只能提交：
    1. urlencode
    2. form-data
       # 不能提交json格式的数据

提交json格式的数据：
    1. ajax
    2. api管理工具    



结合后端验证form表单如何提交数据



轻量级的python框架：flask
安装： pip install flask


form表单提交数据时候，每一个标签都应该有一个name属性，否则，后端是接收不到的
而name的属性值相当于字典的key，用户数据的数据相当于字典的value


form上传文件：
    1. 请求方式必须是post请求
    2. enctype='multipart/form-data'



五、标签的相关特征


标签的分类


1. 单双分类
        单标签
        双标签



2. 性质分类
        块儿级标签：
            内容独自占一行
            div, p, h1~h6都是
        行内标签：
            内容不是独自占一行，自身文本有多大就站多大
            b,i, u, s,  span


标签的嵌套


块儿级元素可以嵌套所有的行内元素，行内元素不可以嵌套块儿元素
注意：p标签不能嵌套块儿级元素



我们在前端中使用亲戚关系表示嵌套关系
  '''
    <div> div是p和span的父亲
        <p> p是span的父亲
            <span>span是p的儿子，是div 的孙子，后代span>
        <p>
        <span>span>
    div>

    <span>是div的弟弟span>

  '''



标签的两个重要属性



id     # id属性不能重复
class  # class属性可以重复


这两个属性是所有标签自带的


						  
					  

						
							


						

							
							
			10、前端							
						



						

						
						


						

						
					

					

					
					

						
相关

						

				
						
			            
            
            
                                    
           
  			
						

					

					
				


				

														
					
					

					
									

					
									   
标签