HTML简介

昨日内容回顾

  • web的本质

    """
浏览器
服务端
文件（html文件）
"""
课程web方向
	前端 django bbs  路飞

  • HTTP协议

    """
HTTP协议的由来（与sql语句一样）
	一个浏览器如何兼容多个服务端
"""
# 四大特性
1、基于请求响应
2、基于TCP/IP作用域应用层之上的协议
3、无状态
	无论来多少次 都跟第一次一样，不会做记录
    如何做到保存用户状态
    	cookie、session、token
4、无/短链接
	请求来了，就响应，之后就没有联系
    长链接：websocket(群聊功能、服务端主动给客户发送数据)
    
# 请求数据格式
	请求首行(HTTP协议的版本，当前请求方式)
    请求头(一大堆的k、v键值对)
    \r\n
    请求体(并不是所有的请求方式都有请求体、get没有、post有)
    
# 响应数据格式
	响应首行(HTTP协议的版本，响应状态码)
    响应头(一大堆k、v键值对)
    
    响应体(浏览器展示给用户看的内容)
    
# URL
	统一资源定位符  类似于坐标
    
# 请求方式
	1、get请求
    	向别人要数据（也可以携带参数，只不过参数不是放在请求体里面，而时直接放在url后面）
       url?username=jason&password=123
   	2、post请求
    	向别人提交数据
        
# 响应状态码
"""用简短的数据来表示一大串的提示信息"""
1xx：服务端已经成功接收到了你的数据 正在处理你可以继续提交
2xx：请求成功(200，ok)
3xx：重定向(你想访问a页面，但是由于条件不符合，跳转到了b页面)
4xx：请求错误(404请求资源不存在，403请求不符合条件)
5xx：服务端内部错误(500)

ps:上述的状态码是HTTP协议规定的到了公司都是用公司设顶的状态码和提示信息

  • HTML简介

"""
超文本标记语言(在学习的时候只需要记忆每个标签表是的什么意思，没有什么逻辑可言，死记)
书写网页的一条标准
	除了HTML可以书写前端页面之外
	还有xml也可以书写前端页面
"""

# 注释 <!--注释-->

# 文档结构
<html>
	<hesd></head>:不是给用户看的，主要是给浏览器看的一些配置信息
    <body></body>书写的内容都是给用户看的
</html>

  • head常用的标签

    """
title:定义网页标题
style:内部支持书写css格式代码
link:引入外部css代码
script:内部可以书写js代码并未也可以引入外部js文件
meta:	定义网页源信息
	keywords
	description

"""

  • body内的标签

    """
h1-h6	标题标签
p	段落标签
u	加粗
i	斜体
b	
s

hr	分割线
br	换行
"""
# 特殊符号
空格	&nbsp;
大于	&gt;
小于	&lt;

&amp;
&reg;
&copy;
&yen;

  • 常用的标签

    """
div:块儿及标签  网页储器划定范围的
sapn：行及标签  划定文本的
"""

# a标签
	链接标签
    <a href='' target=''></a>
    	href
        1、可以放一个url点击自动跳转
        2、还可以放一个其他id值 锚点功能
        
        target
        控制是否在当前页面跳转
        	_self
            _blank
            
# img标签
	图片标签
    <img src='' alt='' title='' height='' width=''/>
    src
    1、可以存放图片的路径 本地路径或者线上路径
    2、还可以放一个url 会自动向一个url提交get请求获取图片的数据展示
    
    alt
    	图片加载不出来的时候  展示的提示信息
       
    title
    	鼠标悬浮在图片上之后显示出来的提示信息
        
    height、width
    	单独调整某一个 另一个会自动等比例调节
       
# 标签一般情况下都要有两个重要的属性
	id值
    	唯一标识  同一个页面不嫩有重复的
    class值
    	类似于类的继承 可以有多个

  • 标签的分类

    """
分类1
	双标签：<h1></h1>
	单标签:<img/>
	
分类2：
	块儿及标签：独占一行  可以设置长宽
		div  p
		注意；块儿及标签内部可以嵌套任意的行内标签和块儿及标签
		但是p标签只能嵌套行内标签
	
	行标签：本身文本多大就占多大  不能设置长宽
		span  a  img
		
	ps；上述的规定知识HTML书写规范  如果不遵寻  不会报错	浏览器会自动帮你解除嵌套关系
"""

  • 列表标签

    ul	
	li
页面上只要是带有规则的排序文字  一般用的都是无序列表

ol
	li
有序列表
dl
	dt
    dd
标题列表

今日内容概要

  • 表格标签(只要展示一些数据 一般都可能用到表格标签)
  • 表单标签(重要：获取前端用户数据发送给后端)
  • 后端框架的基本使用(flask)
  • css层贴央视表(选择器)

表格标签

一些数据按照表格的形式展示<table border="20">    <thead>	表头(字段信息)        <tr>  一个tr就表示一行            <th>username</th>  th 加粗文本            <th>password</th>	td 正常文本            <th>hobby</th>        </tr>    </thead>    <tbody>	表单(数据信息)        <tr>            <td>jason</td>  正常文本            <td>123 </td>            <td>read</td>        </tr>        <tr>            <td>egon</td>            <td colspan="2">qwe</td>            <td rowspan="2">dbj</td>        </tr>        <tr>            <td>tank</td>            <td>123</td>            <td>DBJ</td>        </tr>    </tbody></table><table border="1">  加外边宽<td colspan="2">qwe</td> 水平方向站多行<td rowspan="2">dbj</td>	垂直方向占多行# 原生的表格标签很丑  但是后续我们一般使用的都是框架封装好的 很好看

表单标签

"""能够获取到前端用户输入的数据(用户输入的、用户选择的、用户上传的...)基于网络发送给后端服务器"""# 一个注册功能<form action=""></form>  在该form标签颞部书写的获取用户的数据都会被form 标签提交到后端action：控制数据提交的后端路径（给哪个服务器提交数据）	1、什么都不写  默认就是像当前页面所在的url提交交数据    2、只写路径；https://www.baidu.com 像百度服务端提交    3、只写路径后缀action='/index/'    	自动识别出党亲服务端的ip和port拼接到前面        host:port/index/            <label for='d1'>第一种直接将input框西写在label内username:<input type='text' id='d1'>    第二种 通过链接id即可		无需嵌套<label for="d2">password:</label><input type="text" id="d2">ps:input 不跟label关联也没问题    """label 和 input都是行内标签"""input标签  就类似于前端的变形金刚  通过type变形	text：普通文本    password；密文    date ：日期    sumbit：用来触发form表单的提交数据的动作    button：就是一个普普通的按钮，没有任何功能  但是他是最后用的  学完js之后就可以给他自定义任何功能    reset：重置表单    	默认选中要加checked='checked'        <input type="radio" name="gender" 	checked='checked'>男   name 要指定同一名字变成三选一        当标签的属性名和属性值一样的时候可以简写        <input type="radio" name="gender" checked>女		checkbox:多选        <p>hobby            <input type="checkbox" name="hobby" checked>篮球            <input type="checkbox" name="hobby" checked>足球            <input type="checkbox" name="hobby">橄榄球        </p>	    file：获取文件 也可以一次性获取多个    	<input type='file' multiple>            hidden:隐藏当前input框        钓鱼网站            	select 标签 默认是单选可以加multiple参数变多选         默认选中  selected        <p>province:                <select name="province" id="" multiple>                    <option value="">上海</option>                    <option>北京</option>                    <option selected>深圳</option>                </select>    	</p>    textarea标签  获取大段文本    	<textarea name="" id="" cols="30" rows="10"></textarea>        # 能够触发form表单提交数据的按钮有哪些（****重点）	1、<input type="submit" value="注册">    2、<button>点你</button>    <p>            <input type="submit" value="注册"> 能            <input type="button" value="按钮"> 不能            <input type="reset" value="重置"> 不能            <button>点你</button>  也能刷新网页    </p># 所有获取用户输入的标签  都应该有name属性	name就相当于字典的key    用户的数据就相当于是字典的value    <p>gender:            <input type="radio" name="gender">男            <input type="radio" name="gender">女            <input type="radio" name="gender">其他  	</p>

验证form表单提交数据

# 验证代码无需掌握。看一下效果form表单默认提交表单数据的方式是get请求  数据是直接放再url后面的	http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on你可以指定method指定提交的方式		<form action="http://127.0.0.1:5000/index/" method="post">    # 针对用户选择的标签  用户不需要输入内容 但是你需要提前给这标签添加内容value值<p>gender:            <input type="radio" name="gender" value="male">男            <input type="radio" name="gender" checked value="female">女            <input type="radio" name="gender" value="others">其他</p><p>hobby:            <input type="checkbox" name="hobby" value="basketball">篮球            <input type="checkbox" checked name="hobby" value="football">足球            <input type="checkbox" checked name="hobby" value="doublecolorball">双色球</p><p>province：            <select name="province" id="">                <option value="sh">上海</option>                <option value="bj" selected>北京</option>                <option value="sz">深圳</option>            </select></p>"""form 表单提交文件需要注意	1、method必须是post	2、enctype="multipart/form-data"		enctype类似于数据提交的编码格式			默认是urlencoded 只能提交普通的数据文本			formdata 就可以支持提交文件数据"""<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">"""后端flask框架实现"""from flask import Flask, requestapp = Flask(__name__)# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求@app.route('/index/',methods=['GET','POST'])def index():    print(request.form)  # 获取form表单提交过来的非文件数据    # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])    print(request.files)  # 获取文件数据    file_obj = request.files.get('myfile.png')    file_obj.save(file_obj.name)    return 'OK'app.run()# 针对用户输入的标签 如果你加了value 那么就是默认值<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>disable 禁用readonly只读

css

层贴杨样式表：就是给HTML标签添加样式的 让他更加的好看

# 注释/*单行注释*//*多行注释1多行注释2多行注释3*/通常在写css样式代码的时候会用注释来划分样式区域(因为HTML代码多的所以对css代码也会很多)/*这是博客园首页的css样式文件*//*顶部导航条样式*/.../*左侧菜单栏样式*/.../*右侧菜单栏样式*/...# css语法结构选择器 {    属性1:值1;    属性2:值2;    属性3:值3;    属性4:值4;}# css引入的三种方式	1、style标签直接书写    <style>        h1  {            color: rosybrown;    </style>                2、link标签引入外部css文件(最正规的方法  解耦合)       	<link rel="stylesheet" href="mycss.css">       3、行内式（一般不用）    	<h1 style="color: blue">你好</h1>

"""css学习流程	1、先学习如何查找标签		css查找标签的方式要学学会		后面的框架封装的查找语句都是基于css来的		css选择器很简单	2、子后再学习如何添加样式"""

css选择器

基本选择器

# id选择器# 类选择器# 元素/标签选择器# 通用选择器<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*id选择器*/ # 找到id是d1的标签         /*#d1 {*/        /*    color: rosybrown;*/        /*}*/        /*类选择器*/  # 找到class值李包含c2的标签        /*.c2 {*/        /*    color: yellow;*/        /*}*/        /*    元素选择器*/  # 找到所有span的标签        /*    span    {*/        /*        color: blue;*/        /*    }*/        /*    通用选择器*/ # 将html的所有标签找到        /*    *   {*/        /*        color: blue;*/        /*    }*/    </style></head><body>    <h1 id="d1" class="c1 c2">你好啊</h1>    <h1 class="c2">hello world</h1>    <span>        111    </span></body></html>

组合选择器

"""在前端 将用标签的欠条用亲戚关系表述层级	<div>div        <p>div p</p>        <p>div p            <span>div p span</span>        </p>        <span>span</span>        <span>span</span>  	</div>  	  	div里面的p  span都是div的后代  	p是div的儿子  	p里面的span是p的儿子，是div的孙子  	div是p的爹"""# 后代选择器# 儿子选择器# 毗邻选择器# 弟弟选择器<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*后代选择器*/  # 要用空格隔开        /*div span {*/        /*    color: blue;*/        /*}*/        /*儿子选择器*/ # 用>表示        /*div>p {*/        /*    color: red;*/        /*}*/        /*毗邻选择器*/ # 用加号表示 同级别紧挨下边的第一个        /*div+span { */        /*    color: red;*/        /*}*/        /*弟弟选择器*/ # 同级别下面的所有的span        /*div~p {*/        /*    color: red;*/        /*}*/    </style></head><body>    <div>div        <p>div p</p>        <p>div p            <span>div p span</span>        </p>        <span>span</span>        <span>span</span>  </div>    <span>11</span>    <span>22</span>    <p>qq</p></body></html>

属性选择器

"""1、含有某个属性2、含有某个属性并且含有某个值3、含有某个属性并且含有某个值的某个标签"""# 属性选择器是以[]为标志的<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*[username] {*/  # 将所有含有属性名username的标签的背景色改为蓝色        /*    background-color: blue;*/        /*}*/                /*[username='tank'] {*/  # 将找到所有的属性名是username并且属性值是jason的标签        /*    background-color: red;*/        /*}*/                /*input[username='jason'] {*/ # 找到所有的属性名是username 并且属性值是jason的input标签        /*    background-color: yellow;*/        /*}*/    </style></head><body>    <input type="text" username="tank">    <input type="text" username="jason">    <input type="text" username="kevin">    <p username="tank">水箱老师</p>    <div username="egon">矮子老师</div>    <span username="jason">jason老师 </span></body></html>
posted @ 2021-07-01 11:31  倔强￥  阅读(50)  评论(0)    收藏  举报