首页 > 其他分享> > 前端html页面基础，元素，超文本标记语言

前端html页面基础，元素，超文本标记语言

2022-08-22 20:31:25 作者：互联网

前端
- 什么是前端
- 前端核心
超文本传输协议前戏
HTTP超文本传输协议
- 什么是超文本传输协议
- HTTP传输协议四大特性
- 数据格式
- 响应状态码
html简介
head内常见的标签
body内基本标签
body内基本符号
body内常见标签
块级元素和行内元素
标签的两大重要属性
列表标签
- 无序列表
- 有序列表
- 标题列表
表格标签
表单标签
- input中type的重要属性

前端

什么是前端

前端	和用户直接打交道的操作界面(浏览器界面，手机app界面)
后端	不直接与用户打交道的内部真正执行核心业务逻辑的代码程序

前端核心

html	(网页的布局)类似于人的骨架
css	(网页的样式)类似于人的衣服
js	(网页的动态)类似于人的神经让人可以动起来

超文本传输协议前戏

1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件为了实现无障碍沟通交流有了一些协议
HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题因为别人早就封装好了
问题出在我们自己写的服务端的响应数据格式

超文本传输协议

什么是超文本传输协议

HTTP协议定义了浏览器（即万维网客户进程）怎样向万维网服务器轻请求万维网文档，以及服务器怎样把文档传送给浏览器。简单来说，就是客户端和服务器进行数据传输的一种规则。

HTTP超文本传输协议四大特性

1.基于请求响应（客户端先主动请求，服务端才会给出响应）

2.基于tcp/ip之上作用于应用层的协议

3.无状态（服务端不记住客户端，服务端发送一次请求，客户端执行结束后直接忘记）

4.无/短链接（服务端不单单会忘记客户端，而且也会断开链接）

数据格式

请求数据格式	1.请求首行(请求方式:有很多种协议名称及版本) 2.请求头(一大堆K:V键值对) 3.换行 4.请求体(携带一些敏感的数据不是所有的请求都有请求体)
响应数据格式	1.响应首行(响应状态码) 2.响应头(一大堆K:V键值对) 3.换行 4.响应体(一般情况下就是浏览器要展示给用户看的数据)

请求首行
GET / HTTP/1.1\r\n  
请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
sec-ch-ua: "Chromium";v="104", " Not A;Brand";v="99", "Google Chrome";v="104"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "Windows"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
Accept-Encoding: gzip, deflate\r\n
换行
\r\n
请求体
GET请求没有请求体 所以这里是空

响应状态码

利用数字来表示一些复杂的情况说明(类似于暗号)

1xx	服务端已经接收到你的请求正在处理你可以继续提交或者等待
2xx	200 OK服务端给出了相应响应
3xx	重定向
4xx	403请求不符合条件 404请求资源不存在
5xx	服务端内部错误

我们在公司中还会自己定义更多的状态码
一般情况下从10000开始

HTML简介

超文本标记语言

是网页制作必备的标记语言 “超文本”就是指页面内可以包含多种元素图片、链接，甚至音乐、程序等非文字元素。

后缀	一般为.html/.hml
注释语法	<!--注释语言-->
文件结构	<html> <head>head内的数据一般都不是给用户看的</head> <body>body内的数据一般是给用户看的</body> </html>
标签的分类	单标签<img/> 双标签<a></a>

head内常见的标签

title	页面的标题
style	支持编写css
link	引入外部css文件
script	支持编写JS代码 JS还可以通过src引入外部JS文件
meta	<meta name="keywords" content="填写一些关键字提升网页被搜索的概率"> <meta name="description" content="填写一些网页的简介">

body内基本标签

h1~h6	标题标签
p	段落标签
hr	水平分割线
br	换行符
u	下换线
i	斜体
s	删除线
b	加粗

body内基本符号

	空格
>	大于号
<	小于号
&	$
¥	￥
®	注册
©	版权

body内常见标签

a标签(超链接标签)	href 可以填写网址点击自动跳转 href还可以填写其他标签的id值实现锚点功能 target 可以控制是否新建页面跳转 _self(原网页打开) _blank(另起一个网页)
img标签(图片标签)	src 填写图片地址(网络地址本地地址) title 鼠标悬浮在图片上就会有提示信息 alt 图片加载失败提示的信息 height 调整图片的高度 width 调整图片的宽度上述两个调整一个另外一个等比例缩放

块级标签和行内标签

块级标签独占一行

行内标签可以并排

块级标签	h1~h6 p hr br div img
行内标签	u i s b span

注意：

1.块级标签可以通过css嵌套块级标签或者行内标签(p标签不能嵌套任何块级标签)

2.行内标签只能嵌套行内标签

标签两大重要属性

id属性(一对一管理)	类似于身份证号在同一个html页面上 id值不能重复(css用的时候用#)
class属性(批量管理)	类似于分组多个标签可以拥有相同的class值 (css用的时候用.)

列表标签

无序列表(ul)

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

<ul>
        <li>python</li>
        <li>golang</li>
        <li>linux</li>
    </ul>

有序列表(ol)

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

<ol type="I" start="10">
          <li>第一项</li>
          <li>第二项</li>
          <li>第二项</li>
    </ol>

标题列表(dt,dd)

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

表格标签（table,thead,tbody）

<table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>jason</td>
                <td>123</td>
            </tr>
        </tbody>
</table>

表单标签(form,input)

能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器

input的type属性主要类型

text	单行文本
password	密码
date	日期
email	上传email
radio	单选按钮
checkbox	复选框
file	上传文件
select	默认是单选下拉菜单 multiple是多选下拉菜单
textarea	多行文本
submit reset button	提交按钮重置按钮普通按钮

<form action="" method=""></form>
    action属性
        用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
    method属性
        用于控制请求的方式(get\post)

<form action="" method="post">
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <p>birthday:<input type="date"></p>
        <p>email:<input type="email"></p>
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
        </p>
        <p>hobby:
            <input type="checkbox" name="hobby">篮球
            <input type="checkbox" name="hobby">足球
            <input type="checkbox" name="hobby">双色球
        </p>
        <p>file:
            <input type="file">
        </p>
        <p>files:
            <input type="file" multiple>
        </p>
        <p>province:
            <select name="" id="">
                <option value="">上海</option>
                <option value="">北京</option>
                <option value="">深圳</option>
            </select>
        </p>
        <p>GF:
            <select name="" id="" multiple>
                <option value="">小明</option>
                <option value="">小波</option>
                <option value="">小冲</option>
                <option value="">小黄</option>
            </select>
        </p>
        <p>info:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置内容">
        <input type="button" value="普通按钮">
    </form>

标签：协议,请求,标签,响应,html,超文本,服务端,页面
来源： https://www.cnblogs.com/scx-xiaochun/p/16613438.html