前端之HTML

目录

前端之HTML

HTTP协议

http协议：超文本传输协议，用来规范服务端和浏览器之间的数据交互

四大特性：

  • 基于请求的响应
  • 基于tcp/ip作用于应用层之上的协议
  • 无状态
  • 无/短链接 ：你来一次我响应一次，长连接是建立连接之后默认不离开

请求数据格式：

# 请求首行\r\n请求头\r\n\r\n请求体\r\n

请求首行：标识HTTP协议版本，当前请求方式
请求头：一大堆k, v键值对
请求体：并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据

# 请求方式
get请求：向服务端要数据		
post请求：向服务端提交数据

# 补充；
url：统一资源定位单位，即所谓的网址

响应数据格式

# 响应首行\r\n响应头\r\n\r\n响应体\r\n

响应首行：标识HTTP协议版本，响应状态码
响应头：一大堆k, v键值对
响应体：返回给浏览器展示给用户的数据

# 响应状态码：一串表示复杂状态或者描述信息的数字
1xx：服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2xx：服务端成功响应了你想要的数据(200 OK请求成功)
3xx：重定向(301,302)
4xx：请求错误（404，资源不存在；403，没有访问权限）
5xx：服务器内部存错（500）

HTML

超文本标记语言，我们看到的浏览器的页面，内部就是HTML代码

HTML书写标准

# 注释:注释是代码之母
<!--单行注释-->

多行注释1

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

HTML文档格式

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

HTML标签

标签分类

  • 双标签和单标签

    双标签：<h1></h1>, <a></a>等
单标签：<img/>等

  • 块级标签和行内标签

    块级标签：h1~h6 p div等
行内标签：i u s b span等

# 块级标签独占一行；行内标签自身文本多大就占多大
# 1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
# 2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
# 3 p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
# 4 行内标签不能嵌套块儿级标签 可以嵌套行内标签

head内常用的标签

<title></title> # 网页标题 
<style></style> # 内部用来书写css代码  
<script></script>  # 内部用来书写js代码
<script src="myjs.js"></script> # 还可以引入外部js文件  
<link rel="stylesheet" href="mycss.css">  # 引入外部css文件

<meta charset="UTF-8">  # 指定页面字符编码
<meta name="keywords" content="">  # 书写网页检索内容的关键词
<meta name="description" content="">  # 书写网页的描述性信息

body 常用的标签

基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>>
<s>删除线</s>
<p>断货</p>
<br>换行
<hr>水平分割线

特殊符号

&nbsp;  空格
&gt;    大于号
&lt;    小于号
&amp;   &
&yen;   ¥
&copy;	©
&reg;  ®注册商标

常用标签

div  块儿级标签
span  行内标签
页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域,之后往该区域内部填写内容即可
而普通的文本先用span标签

img图片标签

<img src="" alt="" title="" height="" width="">

参数：
src	图片路径（本地|网络）,还可以是url,将自动想该url发get请求获取数
alt，当图片加载不出来的时候 给图片的描述性信息
title，当鼠标悬浮到图片上之后 自动展示的提示信息
height|width，宽高，单位是px，修改一个，等比例缩放；修改两个，图片可能失真

a标签

<a href="" target=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
参数
href
	-1.放url，用户点击就会跳转到该url页面
	-2.放其他标签的id值 点击即可跳转到对应的标签位置

target
	 _self 默认a标签是在当前页面完成跳转 
     _blank 你也可以修改为新建页面跳转			

# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<a href="#d1">回到顶部</a>

标签的属性

# id值， 标识唯一身份，一个html页面内id值不允许重复
# class值， 标识一类标签

# 补充：标签既可以有默认的属性，也可以自定义新属性
<p id="first-one" class="orange" username="xliu" password="none"></p>

列表标签

# 无序列表、有序列表、标题列表

# 无序列表
<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第二项</li>
        <li>第二项</li>
</ul>

# 有序列表
<ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

# 标题列表
<dl>
    <dt>标题1</dt>
    	<dd>内容1</dd>
    <dt>标题2</dt>
    	<dd>内容2</dd>
    <dt>标题3</dt>
    	<dd>内容3</dd>
</dl>

表格标签

<body>
<!-- 表格   -->
<table border="1">
    <!-- 表头   -->
    <thead>
        <tr>
            <th>username</th>
            <td>username</td>
        </tr>
    </thead>
    <!-- 表头结束   -->
    <!--   表单   -->
    <tbody>
        <tr>
            <td >json</td>
            <td >123</td>
        </tr>
    </tbody>
    <!-- 表单结束   -->
</table>

</body>
标签 描述
<table> 定义表格
<th> 定义表格的头
<tr> 定义表格行
<td> 定义表格的单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格主体
<tfoot> 定义表格页脚

表单标签

form表单标签

<form action=""></form>  # 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
参数
	action：控制数据提交的后端路径(给哪个服务端提交数据)
        1.什么都不写，默认就是朝当前页面所在的url提交数据
        2.写全路径:https://www.baidu.com ，朝百度服务端提交
        3.只写路径后缀action='/index/'，自动识别出当前服务端的ip和port拼接到前面host:port/index/

input标签

常用的input标签演示

  • 文本域：文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

    浏览器显示：

    First name:

    注意：表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

  • 密码字段：密码字段通过标签<input type="password"> 来定义:
    浏览器显示：

    Password:
    **注意:**密码字段字符不会明文显示，而是以星号或圆点替代。

  • 单选按钮：<input type="radio"> 标签定义了表单单选框选项

    浏览器显示效果如下:

    Male
    Female

  • 复选框：<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项

    苹果
    香蕉

  • 提交按钮：<input type="submit"> 定义了提交按钮.

    当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

    Username:

    这里的提交按钮action我把它连接到百度

input标签类型 描述
<input type="text"> 普通文本
<input type="passowrd"> 密码文本，密码密文现实
<input type="date"> 日期，固定日期提交格式
<input type="submit"> 提交，用来触发form表单提交数据的动作
<input type="button"> 按钮，普通按钮，本身没有功能，但是结合js可以绑定事件
<input type="reset"> 重置
<input type="radio"> 单选
<input type="checkbox"> 多选
<input type="file"> 文件，上传文件
<input type="hidden"> 隐藏，隐藏当前输入框，钓鱼网站
<input type="textarea"> 文本域，支持大段文本

input标签的参数：

<input type="hidden" name="usernamename" value="骗子账户"> # 隐藏字段
用户名: 
username:<input type="text" id="d1" name="username" value="默认值" readonly> # 只可读
<input type="text" name='username'>	# 设置上传数据的键
<input type="passowrd" value=''>        # 获取上传数据的值 		 
<input type="date">			 
<input type="submit">		 
<input type="button">		 
<input type="reset">		 
<input type="radio" checked>	  # 默认选中：checked='checked'，可简写为checked
<input type="checkbox">	
<input type="file" multiple>			            # 多文件：multiple
<input type="hidden">	
<input type="textarea" cols="30" rows="10">		    # cols|rows,设置输入框宽高

# 补充：
	- 当标签的属性名和属性值一样的时候可以简写，只写标签属性名即可
	- 所有获取用户输入的标签 都应该有name属性, name就类似于字典的key
	- 用户的数据就类似于字典的value，会提交给后台。value可以有初始默认值，会显示在输入框内

label标签

label标签一般和input标签配合使用。两种配合方式。

# 方式1：直接将input嵌套在在label内
<label for="d1">
	username:<input type="text" id="d1">
</label>					

# 方式2：直接id关联，不嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题

select下拉框标签

``` html
<select name="" id="" multiple>   
    <option value="" selected>python</option> 
    <option value="" selected>liunx</option> 
    <option value="">java</option> 
</select>
```

补充：

  • form表单默认请求方式是get请求，数据直接放在url后面，可以通过method参数修改提交方式。

    <form action="http://127.0.0.1:5000/index/" method="post">

  • input中用户的输入和选择项，都必须要有name属性，才能提交给后台。name和value构成数据键值对。

  • 对于是用户选择而不是输入的标签，需要提前给这些标签添加内容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表单提交文件时，提交方式method必须是post，且enctype必须是"multipart/form-data"

    <form action="" method="post" enctype="multipart/form-data">

    # enctype类似于数据提交的编码格式
- 默认是urlencoded 只能够提交普通的文本数据
- formdata 不仅支持文本数据还支持提交文件数据
posted @ 2020-05-11 21:04  小子，你摊上事了  阅读(92)  评论(0)  编辑  收藏  举报