前端之HTML篇

Posted NQ31

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端之HTML篇相关的知识，希望对你有一定的参考价值。

HTTP协议：

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

四大特性：

　　基于请求响应

        基于TCP/IP作用于应用层之上的协议

　　无状态：不会保存用户信息跟状态

　　　　　　cookie、session、token...这些出现就是为了弥补无状态这个特性，可以用来记录用户的状态

　　无/短链接：请求后得到响应后，就没有任何链接和关系了

请求格式：（请求首行 + 请求头 + \r\n + 请求体）

　　请求首行（标识http协议版本，当前请求方式）

　　请求头（一大推k,v键值对）

　　\r\n

　　请求体（只用post请求才有，存放post请求提交的敏感数据）

　　注意：如果请求头没有，则要用\r\n 代替，也就是无论请求首行、请求头还是请球体缺失，都要用\r\n补上）

响应数据格式：
       响应首行 （标识http协议版本，响应状态码）
       响应头 （一大推k,v键值对）
       \r\n 
       响应体 （返回给浏览器展示给用户看的数据）

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

响应状态码：用一串简单的数字来表示一些复杂的状态或者描述性信息，主要有五个系列
　　1xx:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
　　2xx:服务端成功响应了你想要的数据
　　3xx:重定向（当你在访问一个需要登陆后才能看到的页面，会自动跳转到登陆页面）
　　4xx:请求错误
　　5xx:服务器内部错误。

url：统一资源定位符　

html

HTML：超文本标记语言，是一种用于创建网页的标记语言，文件扩展名：.htm或.htm

HTML文档结构：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> #设置编码 <title>Title</title>　　#设置标题</head><body></body> </html> #注释<!--单行注释-->
<!--1 多行注释23-->

HTML标签分类及语法：

  1. 单标签：<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

  2. 双标签：<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

HTML三个重要属性：

  • id：定义标签的唯一ID，HTML文档树中唯一

  • class：css样式类名，作用于html元素

  • style：规定元素的行内样式（css样式）

HTML常用标签

head内常用标签：

  • <title></title>  定义网页标题

  • <style>内部样式内容（css代码) </style>  定义内部样式表

Meta标签

组成：http-equiv属性和name属性组成

  • http-equiv属性：相当于http的文件头作用，主要向浏览器传回一些有用的信息，以帮助正确的显示网页

  • name属性：主要用于描述网页，属性值content的内容主要是便于搜索引擎机器的查找

<!--指定文档的编码类型(需要知道)--><meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--><meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--name属性--><meta name="keywords" content="战争，战争片、战争电影"><!--当你用浏览器搜索的时候，只要输入kwywords后面指定的关键字，比如战争等，那么该网页就有可能被百度搜索出来展示给用户--><meta name="description" content="NQ31">

body内常用标签

基本标签：

<h1>标题标签</h1> <!--1~6级标题--><b>加粗</b><i>斜体</i><u>下划线</u><s>删除</s><p>段落标签</p><!--换行--><br><!--水平分割线--><hr>


特殊符号：

  • &nbsp;   空格

  • &gt;        大于号

  • &lt;         小于号

  • &amp;    &

  • &yen;     ￥

  • $copy;    ©

  • &reg;      ®（商标）

常用标签

  • div标签：块儿级标签，用来定义一个块级元素，独占一行

  • span标签：行内标签，用来定义内联（行内）元素

　　块儿级标签：独占一行（h1-h6、p、div这些都是块儿级标签）

　　行内标签：自身文本多大就占多大（i、u、s、b、span 这几个都是行内标签）

       总结：只要是块儿级标签都可以嵌套任意块儿级标签和行内标签

　　　　　但是p标签只能嵌套行内标签

　　　　　块儿级标签可以修改长宽，行内标签不可以。　　

img标签及参数：

<img src="" alt="" title=""/>src：图片路径，也可以是图片的urlalt: 当图片加载不出来的时候，给图片的描述性信息title: 当鼠标悬浮在图片上之后，自动展示的提示信息height\width：图片的高度和宽度注意：当高度和宽度只修改一个的时候，另一个参数会等比例缩放 两个同时修改，没有考虑比例时，图片会失真。


a标签

<a href=""></a>
href：放url，当用户点击就会跳转到该url页面 放其他a标签的id值 也叫锚点跳转 例如：<a href="#id值"></a>
target: 默认a标签是在当前页面完成跳转 _self <a href="www.baidu.com" target="_self"></a> 新建页面跳转 _blank <a href="www.baidu.com" target="_blank"></a>

 列表标签

1、无序列表

<ul type="disc"> <li>第一项</li> <li>第二项</li></ul><!--type属性：-->disc（实心圆点，默认值）circle（空心圆圈）square（实心方块）none（无样式）

2、有序列表

<ol type="1" start="2"> <li>第一项</li> <li>第二项</li></ol><!-- type属性-->1 数字列表，默认值A 大写字母a 小写字母Ⅰ大写罗马ⅰ小写罗马<!--start属性：表示起始位置-->

3、标题列表

<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd></dl>

表格

表格的基本结构：

<table 属性=“属性值”> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan =2>Egon</td> <td>杠娘</td> </tr> </tbody></table><!-- <thead>表示表格头，用来放表格标题也就是表格的列名          <th>表格的段名          也可以用<td>，一般都是用<th> <tbody>用来放表格数据的身体部分 <tr>表示行 <td>表示行里面的每一列--><!--table属性-->border: 表格边框.cellpadding: 内边距cellspacing: 外边距.width: 像素 百分比.（最好通过css来设置长宽）<!--td属性-->rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格）


表单标签

form 标签属性：

<form action=""></form> 在该form标签内部书写的、获取用户的数据都会被form标签提交到后端
action属性：控制数据提交的后端路径（给哪个服务端提交数据）
　　　　　　1、什么都不写，默认就是朝当前页面所在的url提交数据　　　　　　2、写全路径，比如：https://www.baidu.com 这样就是朝百度服务端提交数据　　　　　　3、只写路径后缀 action=“/index/"　　　　　　　　自动识别出当前服务端的ip和port拼接到前面。比如：host:port/index/accept-charset: 规定在被提交表单中使用的字符集（默认：页面字符集）autocomplete: 规定浏览器应该自动完成表单（默认：开启）enctype: 规定被提交数据的编码（默认：url-encoded）。method: 规定在提交表单时所用的 HTTP 方法（默认：GET）。name: 规定识别表单的名称（对于 DOM 使用：document.forms.name）。novalidate: 规定浏览器不验证表单。target:规定 action 属性中地址的目标（默认：_self）

label标签

<label for="d1">第一种，直接将input写在label内　　username：<input type="text" id="d1"></label><label fro="d2">  第二种，通过id连接即可，不用嵌套在label内　　password:</label><input type="passwor" id="d2"><!---注意：label和input都是行内标签，input可以不跟label关联-->

input标签

input属性：

  • name：表单提交时的键，类似于参数

  • value：表单提交时对应项的值

  • checked：radion和checkbox默认被选中的项

  • readonly：text和password设置只读

  • disabled：所有input均适用。

type属性：

text：普通文本password：密文date：日期submit：用来触发form表单提交数据的动作button：一个普通按钮，没有任何功能，可以给它自定义各种功能<!--能够触发form表单提交数据的按钮有 <input type="submit" value="注册”> <button>点击</button>-->reset：重置内容radio: 单选 <!--默认选中要加checked="checked"--> <input type="radio" name="gender" checked="checked">男 <!--当标签的属性名跟属性值一样的时候可以简写--> <input type="radio" name="gender" checked>男checkbox：多选 <input type="checkbox" checked>肠粉file: 获取文件 也可以一次性获取多个文件 <input type="file" multiple>

select 标签 默认是单选 可以mutiple参数变多选，默认选中是selected="selected"简写为selected

<select name="" id="" multiple> <option value="" selected>航母</option> <option value="" selected>战斗机</option> <option value="">坦克</option></select>

textarea标签：获取大段文本

<p>个性签名： <textarea name="" id="" cols="30" rows="10"></textarea></p>name:名称cols:列数rows:行数disable:禁用

注意：所有获取用户输入的标签，都应该有name属性：

　　　name就类似于字典的关键字key

　　　用户输入的数据就类似于字典的值value

<p>gendeer: <input type="radion" name="gender">男 <input type="radion" name="gender">女</p>




以上是关于前端之HTML篇的主要内容，如果未能解决你的问题，请参考以下文章

python之基础篇——模块与包

T4模板之菜菜鸟篇

全栈之前端 | 5.HTML表格列表标签元素学习篇

全栈之前端 | 4.HTML样式布局区块标签元素学习篇

全栈之前端| 6.HTML输入提交表单标签元素学习篇

前端之HTML篇