HTML

HTTP协议

http协议： 超文本传输协议，'用来规定服务端和浏览器之间的数据交互的格式'···
该协议可以不遵循，但是自己写的服务端，就不能被浏览器正常访问，只可以自己写客户端或者app

HTTP协议四大特性

复制代码
1 基于请求响应
2 基于TCP/IP作用于应用层之上的协议
3 无状态 
    -不保存用户的信息，
    由于HTTP协议是无状态的，所以后续出现了一些专门用来记录用户状态的技术
    coolie ， session ， token·····
4 无/短连接
    请求来一次响应一次 ，之后就没有任何链接关系了。
        长链接： 双方建立链接之后默认不断开  websocket(后面会讲)
    
# ·····················································
# 请求数据格式
    请求首行(请求方式 协议 版本号)
    请求头(一大堆k:v键值对)
    /r/n
    请求体(并不是所有的请求方式都有，get没有，post有，post存放的是post请求提交数据的明哥那数据)
 

# ·····················································

# 响应数据格式
   响应首行(标识HTTP协议版本，响应状态码)
    响应头(一大堆k:v键值对)
    
    响应体(返回浏览器展示给用户看的数据)
    
#···················································

# 响应状态码
    用一串简单的数字来表示一些复杂的状态或者描述性信息。 404：请求资源不存在
    1xx 服务端已经接收到你的数据正在处理，你可以继续额外提交
    2xx 服务端已经成功响应了你想要的数据(200 ok请求成功)
    3xx 重定向(当访问一个需要登录才能看页面，会自动跳转到登录页面)
    4xx 请求错误 (404 请求资源不存在   403 当前请求不合法或者不符合访问资源的条件)
    5xx 服务器内部错误（500   机房的问题，和客户端没关系） 
    
# ·····················································
    
    
#请求方式
    1 get 请求
    朝服务端要数据
    eg：输入网址获取对应的内容
    2 post 请求
    朝服务端提交数据 提交到服务端后做身份校验
    
# url：统一资源定位符(网址)
复制代码

HTML简介（网页骨架）

超文本标记语言
如果想要让浏览器能够渲染出你写的页面，就必须遵循HTML语法
我们浏览器看到的页面，其实都是HTML代码(所有的网站内部其实都是HTML代码)

HTML 就是书写网页的一套标准

复制代码
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的朝朝
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码
<!--左侧菜单栏结束-->
复制代码

HTML文档结构

复制代码
<html>
    <head></head>:head内的标签不是给用户看的，而是定义一些配置主要给浏览器看到
    
    <body></body>:body 内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>

ps: 文件的后缀名其实是给用户看到的，只不过对应不同的 后缀名有不同的软件来处理并添加很多功能

注意：HTML代码没有格式的，可以全部写在一行都没问题，只不过我们习惯缩进来表示代码
复制代码

两种打开html文件的方式

1 找到文件所在的位置选择浏览
2  在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是电脑上安装了对应的浏览器)直接全部使用谷歌浏览器

标签的分类：

复制代码
<h1></h1>
<a herf="https://www.mzitu.con/"></a>
</img>

1 双标签
<h1></h1>
<a herf="https://www.mzitu.con/"></a>

2 单标签(自闭和标签)
</img>
复制代码

head内常用标签

复制代码
<！--在写heml代码的时候，只需要写标签名，tab健就能自动补全-->    
<title>title里面写网页标题</title>
<style>
        /*style里面一般写CSS样式*/
        h1 {
            color: red;
        }
</style>

<script>
// 写js代码 也可以引入外部js文件 放js文件路径 (本地/网络)
alert(123)
</script>

    
<link rel="stylesheet" href="mycss.css">  # 引入外部CSS文件
<script src="myjs.js"></script>  # 引入外部js文件

<link rel="stylesheet" href="../../mycss.css"> 
<script src="../../myjs.js"></script>
    
<meta  http-equiv='refresh' content="2:URL=https://www.baidu.com" > //2秒后跳入到对应的网址，了解即可    
<meta name="keyword" content="淘宝，网上购物，xxxxxx"> 当在浏览器搜索的时候，只要输入了keywords后面指定的关键字，那么该网页都有可能被百度搜索出来展示给用户
<meta name="description" content="淘宝网-xxxxxxx">  网页的描述性信息

'总结'：sytle script link 掌握        meta 了解
 
head标签：中可以写sytle(css样式) script(js代码)，link(引入的css代码) mete(跳转网址/网址关键字/网页描述信息)
复制代码

body中常用标签

肉眼能够在浏览器上面看到的花里胡哨的页面，内部都是HTML代码

复制代码
<h1>这是一级标题</h1>    h1~h6标题标签，其中 h1最大  h6最小
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> 段落标签  一个p标签一行
<br> 换行
<hr> 水平分割线

<img> 图片标签
<a>超链接标签
table 表格标签
form 标单标签

body标签中，主要编写的网页内容，包括文本，图片，链接，表单等。

### body标签内的相当于人的是身体。head标签内的相当于人的衣服还有动作。
复制代码

标签的分类2

复制代码
1. 块儿级标签
    # 独自占一行
    h1~h6  p   div
    *1 块级标签可以修改长宽，行内标签不可以，修改了也不会变化
    *2 块级标签内部可以嵌套任意的块级标签和行内标签
    
    *3 虽然p标签 是块级标签，但是它只能嵌套行内标签，不能嵌套块儿级标签,套了也问题不大，浏览器会自动解开
    
    总结：只要是块儿级标签都可以嵌套任意的块儿标签和行内标签，除了p标签，p只能嵌套行内标签
    
    
    
2. 行内标签(内联标签)
    # 自身文本有多大，就占多大
    b i u s标签 span
    行内标签不能嵌套块级标签，可以嵌套行内标签
复制代码

特殊字符

复制代码
&nbsp;    空格 
> &gt;    大于号
< &lt;    小于号
&amp;    & 符号
&yen;    ¥ 价格符号
&copy;    版权     ©
&reg;    商标 ®

# 可以直接在body标签中用 
# 我们浏览器内部看到的都是html源码
复制代码

常用标签(div / span)

div 块儿级标签
span    行内标签
# 上面两个标签是在构造页面初期最常用的，
# 页面的布局一般先用div 和span 占位之后再去调整样式， 
# div 使用非常频繁idv 可以把它看成是一块区域，也就意味着用div 来提前规定所有的区域，之后往该区域内部填写内容即可。

···········································
# 普通的文本先用span标签

img标签

复制代码
'图片标签'
<img src="" alt="">
 
src ：
    1 图片的路径，可以是本地也可以是网络上的
    2 url    自动朝该url发送get请求获取数据
alt="xxxx"    ：
    alt ="网络不行"
    当图片加载不出来的时候，给图片的描述性信息
    
title="xx":
    当鼠标悬浮到图片上之后，自动给出来的提示信息
    

height="800px" width="":
    高度和宽度，
    当修改一个参数的时候，另一个参数会等比例缩放
    如果修改了两个参数，但没有考虑比例问题的时候，那么图片就会失真。
复制代码

 

a标签

复制代码
# 链接标签
<a href=""></a>
'当a标签指定的网址从来没被点击过，那么a标签的字体是蓝色，如果点击过了就会变色，（浏览器记忆了）'

href
    1 放url，用户点击后就会跳转到的页面
    2 放其他a标签的id值，点击即可跳转到对应的标签位置
target
    默认a标签是在当前页面完成跳转 _self
    也可以修改为新建页面跳转    _blank

例子：
    <a href="https://www.baidu.com/" target="_self">点我看看</a>    
   
target='_self'         在当前页面打开
target='_blank'   在新建页面打开

···············································
# a标签的锚点功能
'eg:点击一个文本标题，页面自动跳转到标题对应的内容区域'
<!-- a标签的锚点功能-->
<a href="" id="d1">顶部</a>
<h id="d111">hello</h>
<div style="height: 1000px;background-color:red"></div>
<a href="" id ="d2">中间</a>
<div style="height: 1000px;background-color:greenyellow"></div>

<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到顶部</a>
复制代码

标签具有的两个重要属性

复制代码
1 id 值
    类似于标签的身份证号，在同一个html页面上id值不能重复
    
2 class值
    该值类似于面向对象里面的继承，一个标签可以继承多个class值
一个html中class值可以用多个并且可重复

 "标签既可以有默认的书写也可以有自定义的书写"
<p id ="di" class="c1" username="jason" password="123"></p>
复制代码

列表标签

复制代码
无序列表
有序列表
标题列表

'无序标签'
<ul type="circle">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
ul默认是实心圆点，可以通过添加参数改变 
type = 'circle' 空心圆点
type = 'none'  没有样式    
type = 'squre'    方块
···············································
'有序列表'
  <ol type='A' start = 'C'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
简写方式  ol>*3+tab键 自动生成
type = 'A' 从A开始排序
type = 'a' 从a开始排序
start 参数  从某个位置开始
····················································
列表标签（了解即可） 后面有写好的东西可以用
    <dl>
        <dt>1</dt>
        <dd>2</dd>
        <dt>1</dt>
        <dd>2</dd>
        <dt>1</dt>
        <dd>2</dd>
    </dl>
复制代码

 

前端标签分类有几种

复制代码
结构标签（Semantic Markup）：用于定义页面的结构，如<header>、<nav>、<main>、<section>、<article>、<footer>等。

文本标签（Text Markup）：用于标记文本内容，如<h1>到<h6>表示标题级别，<p>表示段落，<span>表示内联文本等。

表单标签（Form Elements）：用于创建表单，收集用户输入，如<form>、<input>、<textarea>、<select>、<button>等。

图片和多媒体标签（Image and Media Elements）：用于插入图片和多媒体内容，如<img>、<video>、<audio>等。

超链接标签（Hyperlink Elements）：用于创建超链接，如<a>标签。

列表标签（List Elements）：用于创建有序或无序列表，如<ul>、<ol>、<li>等。
复制代码

表格标签(table)

 

复制代码
<table border="1" cellpadding="5" cellspacing="5" >
    
<thead> # 表头(字段信息)
    <tr>    # 一个tr 就代表 一行
        <th>username</th>  # th 加粗
        <th>passwrod</th>
        <th>read</th>
    </tr>
 </thead>
 <tbody>     # 表单（数据信息）
    <tr>
        <td>jason</td> # td正常文本
        <td>123</td>
        <td>read</td>
     <tr>
        <td rowspan="2">jason</td> # 水平占两行
        <td>123</td>
        <td>read</td>
    </tr>
    <tr>
        <td colspan="2">ben</td> # 竖直占两行
        <td>123</td>
        <td>read</td>
    </tr>
    </tr>
 </tbody>
</table>


<table border="1" > 加外边框
<td rowspan="2">jason</td> # 竖直占两行
<td colspan="2">ben</td> # 水平占两行
 # 原生的表格标签很丑，后期都是用封装好的，很好看
    
    
``` table 中的属性`````````
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.（最好通过css来设置长宽）
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）
复制代码

表单标签（form）

复制代码
表单标签: 能够获取到前端用户数据（用户输入的，用户选择，用户上传。。）基于网络发送给后端服务器
# 写一个注册功能
<form action=""></form> # 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action: 控制数据提交的后端路径（给哪个服务端提交数据）
    1 什么都不写，默认向当前页面所在的url提交数据
    2 写全路径：https：//www.baidu.con  向百度服务端提交
    3 只写路i纪念馆后缀 action='/index' 自动识别出当前服务端的ip和port拼接的到前面 （djiango会用）host：port/index/

·······································
<label for="d1"> # 第一种直接将input框写在label内
         username: <input type ='text' id="d1">
</label>
# 第二种 通过id连接即可， 无需嵌套
<label for="d2">password:</label>
<input type="text" id ="d2">

作用：将输入框与文字进行绑定，点文字即可选定输入框
ps：input 不跟label关联也可以

<input type="text" placeholder="请输入用户名">#输入框内写字
······································  
'文本输入组'
input标签，类似于前端的变形金刚，通过 type 属性变形
type="date" # 日期格式
type="password" # 密码格式，密文展示
type="text" # 普通文本格式

······································  
'按钮组'
<!-- 当没有指定内容的时候，不同浏览器渲染的内容不一致-->
<input type="submit" value="注册"> # 触发form表单提交动作
    
<input type="button"  value="按钮"> # 普通按钮 最有用的 学完js之后可以给它自定义各种功能

<input type="reset" value="重置"> # 重置输入框内容
    
# 能够触发form表单数据提交的按钮 有哪些？？
    <input type="submit" value="重置">
    <button>点我</button>
······································  
 '所有获取用户输入的标签，都应该有name属性'
 <label for="d4">
        gender:
        <input type="radio" name="gender">男
        <input type="radio" name="gender" checked>女
        
        <input type="radio" name="gender">其他
 </label>
        
radio：单选
        默认选中checked='checked'

 # 当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked="checked">女
<input type="radio" name="gender" checked>女

checkbox：多选
        <input type="checkbox" checked>read
         <input type="checkbox" checked>study
         <input type="checkbox">bbq
······································
    <p>  # 单选
        <label for="d6">province
            <select name="" id="">
                <option value="">北京</option>
                <option value="" selected>上海</option>
                <option value="">深圳</option>
            </select>
        </label>
    </p>
            
 <p>爱好： # 多选     
         <select name="" id="" multiple>
            <option value="">aa</option>
            <option value="">bb</option>
            <option value="">cc</option>
        </select>
 </p>

······································
 <select name="" id="">
            <optgroup label="北京">
                <option value="">朝阳</option>
                <option value="">海淀</option>
                <option value="">石景山</option>
            </optgroup>
# 带提示的选择项 
······································
 <p>文件：
        <input type="fike" multiple>
 </p> # 获取文件，也可以一次性获取多个
······································
   <p>自我介绍
        <textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea>
    </p>  # textarea 获取大段文本 maxlength限制长度
······································
# label 和input都是行内标签

from表单就是提交数据的
复制代码

 

posted @   路过不说话  阅读(40)  评论(0)  编辑  收藏  举报
相关博文：
·  python网络编程 socket
·  BBS基于forms组件和Ajax请求的注册功能(代码)
·  Http协议
·  HTTP协议初见
·  HTTP协议；HTML
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示