2021-04-25

于 2021-04-27 00:37:50 发布
阅读量100 收藏
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57497737/article/details/116140249
版权

HTML知识总结（部分）

对于4.20~4.23所学习的关于html的总结

 

前言

超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。（摘自百度百科）

简而言之，HTML是一种编写网页时会用上的标记语言。

本片文章对HTML的应用场景和应用职位做了简短的介绍，并简单分析HTML所属的技术栈以及相关拓展。主要对HTML实际操作中会用到的知识点、常用标签进行梳理归纳。

本文章是对写者几日学习的简单总结，可能对某些知识要点的解释和理解还不到位，请谨慎观看。

一、前端与前端工程师

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。（摘自百度百科）

除了HTML+CSS+JAVASCRIPT这一基础技术栈，前端工程师还可以扩展学习以下相关知识：

  • Bootstrap（Web框架）
  • jQuery(JS框架) AngularJS(JS架构) node.js Echars(可视化的图表库)
  • ES5 ES6 ajax（异步JavaScript和XML）
  • Mysql（关系型数据库管理系统） redis（远程字典服务）
  • Linux（操作系统） CentOS（社区企业操作系统）Nignx（web服务器）等
  • 必须要掌握一门应用级语言 Java Python 等

二、HTML+CSS+JAVASCRIPT

这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。（摘自百度百科）

其各自对应的层次如下：

结构层：html5—XHTML HTML4.0版本 超文本标记语言

表现层：css3.0 -css2.0版本 层叠样式表

行为层：javascript 脚本语言 用于定义整个网站的行为

三、HTML（Hyper Text Markup Language）

超文本标记语言

3.1HTML知识要点

HTML 是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

  区分HTML与XML：

  HTML——超文本标记语言---展示数据

  XML——可扩展标记语言 ----存储数据 配置文件 json

  内容上

  HTML ——固定标签 h1 body

  XML——没有固定标签  任何标签都可以。 标签——Tag

详细可查询W3school

3.2网页的创建

推荐大家使用的前端工具：Vscode  hbuilder  sublime_text 等等，以下以sublime_text演示

1.在创建网页之前，应先建立好一个文件夹，避免之后文件存放混乱的情况。可按照以下示例进行创建：

先创建名为code的文件夹，在于其中建立css、image、js、music、video文件夹

    css    存放css文件
 image  存放图像资源文件
 js    存放JavaScript脚本文件
 music  存放音频资源文件
 video   存放视频资源文件

2.打开Sublime_text，按下Ctrl+S(保存快捷键)，弹出保存对话框，将网页名称更改为想要的网页名字加后缀.html，然后把创建好的.html文件保存在刚刚创建的Code文件夹内。

创建

3.使用快捷键!+Tab，就可生成模板。

模板生成

4.!DOCTYPE 声明（上述补充说明）

<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
1）doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML，因此不要求引用 DTD。
2）对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。

3.3HTML文档结构

以模板为例：

1.定义了文档类型为html，是一种MIME类型

MIME类型：所有的文件在网络上无论用于显示还是用于下载，都存在自己响应的类型。例如gif、jpeg都存在自己的MIME类型，用于给文档做一些自己的相关标识。

2.lang属性规定了元素内容的语言。

3.head元素包含了所有的头部标签元素。在head元素中可以插入JavaScript脚本、CSS样式表。

4.<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

charset为编码字符集，UTF-8为编码格式。部分页面会出现乱码问题，这是字符集不统一导致的。我们在国内打开的浏览器的默认的编码格式都是GBK，需要把原有的GBK的格式修改成全球统一的格式UTF-8。

5.<title></title>可定义网页的标题。

6.<body></body>包含文档的所有内容，网页的主体就写在这里。

Body中的另外三个属性 alink  活动链接 link   未访问链接 vlink  访问链接(由于css中有替代，不常用)

Html的格式

7.Html的格式由两个种类的标签构成：

1）双标签  如<html> </html>等

2）单标签  如<meta charset=”utf-8”>等

3.4基本常用标签

3.4.1标题标签<hn></hn>

n = 1-6 表示的是网页或者文章的标题  字体大小从大到小 默认加粗

3.4.2标尺线<hr>

划出一条分割线。

3.4.3行的控制<p></p>

划分段落，p标签结束处自动换行。

align 属性节点  3个值 left center right 效果如下：

3.4.4区域划分<div></div> 

使用div标签可以把文档划分为不同的部分，以便可以给不同的区域使用不同的样式。

3.4.5超链接<a></a>

定义超链接，用于页面跳转。

基本格式：<a href="(目标链接)">文本</a>

<a> 标签的应用：

1）外链接——使用a标签进行外部跳转  

2）锚点——使用a标签跳转到网页的内部 

如：回到顶部

3.4.6插图标签<img>

用于在页面中引入图片，它有两个必须属性：

 src  引用图像的路径
 alt   图像无法显示时的替代文本

关于HTML图像的位图
<img>的位图属性：
  usemap  属性将图像定义为客户端图像映射

该属性需要与<map>标签和<area>标签搭配使用，属性值为#+位图map的id值。

<map>
定义一个图像映射。常用属性：
  id     唯一的名称
  name  唯一的名称

<area>
定义图像映射中的区域，总是嵌套在<map>标签中。必须属性：
  alt  图像无法显示时的替换文本
常用属性：
  coords    定义可点击的坐标
  href    此区域跳转的目标地址
  shape   定义可点击区域的形状

3.5表单（重点标签）

未完成，细节尚待补充

用于收集用户数据 在什么样的场景会使用到表单

登陆、注册 表格 需要提交的场景 都会用表单

<form></form>

action  -----表单提交路径  -----跳转的功能

method -----提交的方式

 <input> 输入

Type  ----- text password checkbox radio submit reset file 等等

Text  ----文本框

Password ----密码框

Checkbox ---多选框

Radio ----单选框

Submit  ----提交按钮

Reset ----重置按钮

File   -----文件上传

路径地址例子 ：

file:///D:/Project/code/1.html?

https://www.baidu.com/?

https://www.baidu.com/?username=zhangsanfeng&pwd=123123

file:///D:/Project/code/1.html

file:///D:/Project/code/1.html?username=zhangsan&pwd=123&sex=on&hobby=on&hobby=on

file:///D:/Project/code/1.html?username=zhangsan&pwd=123&sex=%E7%94%B7&hobby=%E7%9D%A1%E8%A7%89&hobby=%E5%90%AC%E6%AD%8C

 

路径的规则  ?  和 &

? 号表示的是 路径的跳转地址结束

& 号表示的是 属性之间的间隔

问题1：

表单提交时 什么情况下属于get请求 什么情况下属于post请求？

Get请求  默认情况下 和 method为get请求

Post请求 method为post 时

 

问题2：

Get请求和post请求有什么区别？

 安全上：

post请求提交时路径上没有属性的信息 相对安全

Get 请求提交路径上存在属性的信息   不安全

路径地址上：     

因为get请求在路径的地址上存在属性值 url的地址是有限制的，最大为64kb

 

问题3

什么时候使用get请求 什么时候使用post请求？

要根据数据性质——

热数据 安全度不重要的数据  使用get和post都可以

如果数据的性质需要安全性比较高时  那么一定要使用post

在写文件上传的功能时  请求必须是post的提交方式

 

StoneVulcan
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021-04-21
qq_56102648的博客
04-21 782
2021-04-09
HCZ_hhh的博客
04-09 358
淘宝放单源码Java-arthas-all-2021-04-25:arthas-all-2021-04-25
06-07
淘宝放单源码Java 阿尔萨斯 Arthas是阿里巴巴开源的 Java 诊断工具。 Arthas 允许开发人员在不修改代码或重新启动服务器的情况下解决 Java 应用程序的生产问题。...很多时候，生产系统网络无法从本地开发环境访问。...
Serial-COM25_2021-04-04_14-37-43.log
04-04
Serial-COM25_2021-04-04_14-37-43.log
Chipsbank APTool量产工具最新版CBM219X-UMPToolV7200(2021-04-26)
04-27
Chipsbank APTool量产工具最新版CBM219X-UMPToolV7200(2021-04-26)
App4UITestToolint-tests-Empty-TC-Add-Tools-2021-04-06T17-25-04.298Z:为工具链创建
04-07
在“App4UITestToolint-tests-Empty-TC-Add-Tools-2021-04-06T17-25-04.298Z-master”这个压缩包中，我们可以看到一个名为“master”的分支或版本。这通常意味着该版本包含了项目的核心代码和测试结构，可能是用于...
App4UITestToolint-tests-Empty-TC-Add-Tools-2021-04-05T22-53-25.468Z:为工具链创建
04-06
在"App4UITestToolint-tests-Empty-TC-Add-Tools-2021-04-05T22-53-25.468Z-master"这个压缩包中，我们可以找到项目源码、测试脚本、配置文件以及其他相关资源。通过对这些文件的分析，开发者可以学习到如何配置和...
2021-2022收藏的精品资料2021-2022年APQP全套表单——新产品质量策划进度计划APQP.doc
09-16
开发部进行可行性分析，包括开发可行性分析报告（TR-0701-03）和评估表（TR-0701-04），以确保项目的技术和经济可行性。 2. **确定新产品项目开发任务**：开发部根据分析结果制定设计开发任务书（TR-0701-05），并...
5G核心网前沿报告[2021-04-06]（25页）.pdf
05-18
《5G核心网前沿报告》是中国通信学会在2019年发布的一份关于5G技术演进的重要研究报告。报告详尽阐述了5G核心网（5GC）相较于4G Evolved Packet Core（EPC）在多个层面的显著变化，为移动通信网络的技术升级提供了...
防火控制中心_编码设备_2021-03-04 11_25_04.xlsx
09-17
windows2012 域控环境及常规软件部署教程
C1534805_2MH@10KHZ30A_2021-04-22_扼流圈.PDF
12-17
KEMET公司的C1534805_2MH@10KHZ30A_2021-04-22_扼流圈PDF文件详细介绍了其专有的S15H铁氧体材料制造的共模扼流圈，这款产品具有高磁导率、高阻抗以及节省空间等优势。 KEMET SCR系列的共模扼流圈设计独特，采用了...
精品资料（2021-2022年收藏）人力资源审计报告定稿.doc
10-10
这份2010年的审计报告涵盖了2009年11月18日至12月25日期间对某公司人力资源的详细审查，主要关注了以下几个关键领域： 1. **人力基本情况**： - **组织结构**：报告提到公司有42个部门，员工总数为963人。 - **...
江苏省徐州市邳州市运河中学2020-2021学年高一下学期期中考试英语试卷（普通班） Word版含答案.doc
04-27
江苏省徐州市邳州市运河中学2020-2021学年高一下学期期中考试英语试卷（普通班） Word版含答案.doc
syllabus-2021-1:课程大纲IIC2343准计算机计算研究所2021-1
03-25
IIC2343-计算计算机 :floppy_disk: 课程大纲IIC2343准计算机计算研究所2021-1。 El cursoconstaráde 4评价，dos interrogaciones y dos tareas，donde cada una tiene unatankeraciónde 25％，和标记。 持续性发展...
优质资料（2021-2022年收藏）数控铣床加工中心模拟试题一.doc
10-11
25. 高速精铣铸钢零件应选用的刀具材料为（A．W6Mo5Cr4V2）。 26. 数控电火花线切割慢走丝的工具电极铜丝可用（C．很多次）。 27. 同一被测平面的平面度和平行度公差值之间的关系，一定是平面度公差值（D．大于或...
精品专题（2021-2022年收藏）2009.04社会保险基金管理与监督试题及答案.doc
10-02
25. 社保基金统计报表核心：数字资料是报表的关键部分，用于分析和评估基金运行状况。 26. 企业年金运行模式：主要包括委托管理、集合管理等模式，为企业员工提供补充养老保障。 以上内容涵盖了社会保险基金管理与...
使用python中的pymsql完成如下：表结构与数据创建 1. 建立 `users` 表和 `orders` 表。 `users` 表有用户ID、用户名、年龄字段，（id，name，age） `orders` 表有订单ID、订单日期、订单金额，用户id字段。（id，order_date，amount，user_id） 2 两表的id作为主键，`orders` 表用户id为users的外键 3 插入数据 `users` (1, '张三', 18), (2, '李四', 20), (3, '王五', 22), (4, '赵六', 25), (5, '钱七', 28); `orders` (1, '2021-09-01', 500, 1), (2, '2021-09-02', 1000, 2), (3, '2021-09-03', 600, 3), (4, '2021-09-04', 800, 4), (5, '2021-09-05', 1500, 5), (6, '2021-09-06', 1200, 3), (7, '2021-09-07', 2000, 1), (8, '2021-09-08', 300, 2), (9, '2021-09-09', 700, 5), (10, '2021-09-10', 900, 4); 查询语句 1. 查询订单总金额 2. 查询所有用户的平均年龄，并将结果四舍五入保留两位小数。 3. 查询订单总数最多的用户的姓名和订单总数。 4. 查询所有不重复的年龄。 5. 查询订单日期在2021年9月1日至9月4日之间的订单总金额。 6. 查询年龄不大于25岁的用户的订单数量，并按照降序排序。 7. 查询订单总金额排名前3的用户的姓名和订单总金额。 8. 查询订单总金额最大的用户的姓名和订单总金额。 9. 查询订单总金额最小的用户的姓名和订单总金额。 10. 查询所有名字中含有“李”的用户，按照名字升序排序。 11. 查询所有年龄大于20岁的用户，按照年龄降序排序，并只显示前5条记录。 12. 查询每个用户的订单数量和订单总金额，并按照总金额降序排序。
最新发布
06-03
这里是使用 Python 的 PyMySQL 完成上述任务的代码： ```python import pymysql # 连接数据库 conn = pymysql.connect(host='localhost', port=3306, user='root', password='123456', database='test') # 创建游标 cur = conn.cursor() # 创建 users 表 cur.execute(''' CREATE TABLE users ( id INT PRIMARY KEY, name VARCHAR(20), age INT ) ''') # 创建 orders 表 cur.execute(''' CREATE TABLE orders ( id INT PRIMARY KEY, order_date DATE, amount INT, user_id INT, FOREIGN KEY (user_id) REFERENCES users(id) ) ''') # 插入数据 users_data = [ (1, '张三', 18), (2, '李四', 20), (3, '王五', 22), (4, '赵六', 25), (5, '钱七', 28) ] orders_data = [ (1, '2021-09-01', 500, 1), (2, '2021-09-02', 1000, 2), (3, '2021-09-03', 600, 3), (4, '2021-09-04', 800, 4), (5, '2021-09-05', 1500, 5), (6, '2021-09-06', 1200, 3), (7, '2021-09-07', 2000, 1), (8, '2021-09-08', 300, 2), (9, '2021-09-09', 700, 5), (10, '2021-09-10', 900, 4) ] for user in users_data: cur.execute('INSERT INTO users VALUES (%s, %s, %s)', user) for order in orders_data: cur.execute('INSERT INTO orders VALUES (%s, %s, %s, %s)', order) # 提交事务 conn.commit() # 查询语句 # 1. 查询订单总金额 cur.execute('SELECT SUM(amount) FROM orders') print(cur.fetchone()[0]) # 2. 查询所有用户的平均年龄，并将结果四舍五入保留两位小数。 cur.execute('SELECT ROUND(AVG(age), 2) FROM users') print(cur.fetchone()[0]) # 3. 查询订单总数最多的用户的姓名和订单总数。 cur.execute(''' SELECT users.name, COUNT(*) AS total_orders FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_orders DESC LIMIT 1 ''') print(cur.fetchone()) # 4. 查询所有不重复的年龄。 cur.execute('SELECT DISTINCT age FROM users') print([row[0] for row in cur.fetchall()]) # 5. 查询订单日期在2021年9月1日至9月4日之间的订单总金额。 cur.execute('SELECT SUM(amount) FROM orders WHERE order_date BETWEEN "2021-09-01" AND "2021-09-04"') print(cur.fetchone()[0]) # 6. 查询年龄不大于25岁的用户的订单数量，并按照降序排序。 cur.execute(''' SELECT users.name, COUNT(*) AS total_orders FROM users JOIN orders ON users.id = orders.user_id WHERE age <= 25 GROUP BY users.id ORDER BY total_orders DESC ''') print(cur.fetchall()) # 7. 查询订单总金额排名前3的用户的姓名和订单总金额。 cur.execute(''' SELECT users.name, SUM(amount) AS total_amount FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_amount DESC LIMIT 3 ''') print(cur.fetchall()) # 8. 查询订单总金额最大的用户的姓名和订单总金额。 cur.execute(''' SELECT users.name, SUM(amount) AS total_amount FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_amount DESC LIMIT 1 ''') print(cur.fetchone()) # 9. 查询订单总金额最小的用户的姓名和订单总金额。 cur.execute(''' SELECT users.name, SUM(amount) AS total_amount FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_amount ASC LIMIT 1 ''') print(cur.fetchone()) # 10. 查询所有名字中含有“李”的用户，按照名字升序排序。 cur.execute('SELECT * FROM users WHERE name LIKE "%李%" ORDER BY name ASC') print(cur.fetchall()) # 11. 查询所有年龄大于20岁的用户，按照年龄降序排序，并只显示前5条记录。 cur.execute('SELECT * FROM users WHERE age > 20 ORDER BY age DESC LIMIT 5') print(cur.fetchall()) # 12. 查询每个用户的订单数量和订单总金额，并按照总金额降序排序。 cur.execute(''' SELECT users.name, COUNT(*) AS total_orders, SUM(amount) AS total_amount FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_amount DESC ''') print(cur.fetchall()) # 关闭游标和连接 cur.close() conn.close() ``` 注意：在运行代码之前，需要先安装 PyMySQL 模块，可以使用以下命令进行安装： ``` pip install pymysql ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值