HTML
2022/4/22 23:45:35
本文主要是介绍HTML,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录- 前端简介
- 什么是前端?什么是后端?
- 知识脉络
- HTTP协议
- 简介
- HTTP协议四大特性
- HTTP协议数据格式
- HTTP协议响应状态码
- HTML
- 简介
- HTML文档结构
- HTML标签的分类
- HTML注释语法
- 标签的两大重要参数
- head内常见标签
- body内标签
- body基本标签
- body内特殊符号
- body内常见标签
- 1.布局标签
- 2.图片标签
- 3.链接标签
- 4.列表标签
- 5.表格标签
前端简介
什么是前端?什么是后端?
前端:任何与用户直接打交道的界面都可以称之为前端。eg:淘宝页面,游戏页面,操作页面。
后端:不直接与用户打交道的用于执行真正业务逻辑的代码。eg:python代码,java代码,c++代码。
知识脉络
知识点: HTML CSS JavaScript jQuery(框架) Bootstrap(框架) 只要学习前端看到要学'前端三剑客'>>>:HTML CSS JavaScript 比喻说明:HTML:网页的骨架;CSS:网页的样式;JavaScript:网页的动态效果
HTTP协议
简介
我们自己写的TCP服务端与浏览器之间通信了,但是浏览器不识别服务端数据。不同的服务端数据的组织策略千差万别,但是浏览器却需要做到能够统一处理,最佳的解决措施是统一规定一个标准“HTTP协议”。
HTTP协议规定了服务端与浏览器之间的数据交互格式及其他事项。
如果服务端遵循HTTP协议,就可以被浏览器正常访问并展示内容。 如果服务端不遵循HTTP协议,浏览器就不会正常访问和展示,但是不影响服务端。
HTTP协议四大特性
1.基于请求、响应 服务端永远不会主动给客户端发消息,必须是客户端先请求服务端被动响应. 2.基于TCP/IP作用于应用层之上的协议 应用层协议:HTTP HTTPS FTP ... 3.无状态 服务端不保存客户端状态(纵使见她千百遍,我都当她如初见). 4.短链接 不保持客户端与服务端之间的链接导通,补充:websocket(长连接) 主要用于加好友聊天等业务.
HTTP协议数据格式
请求格式:客户端给服务端发送消息应该遵循的数据格式
1.请求首行(请求方法 协议版本) 2.请求头(一大堆k:v键值对) 3.(换行不能省略) 4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有
响应格式:服务端给客户端发送消息应该遵循的数据格式
1.响应首行(响应状态码 协议版本) 2.响应头(一大堆k:v键值对) 3.(换行不能省略) 4.响应体(给浏览器展示给用户看的页面内容)
HTTP协议响应状态码
用数字来表示一串中文意思(简化理解)。
1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送 2XX:200 OK 表示请求成功 服务端给出了响应 3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面) 4XX:403请求不合法(权限不够) 404请求资源不存在 5XX:都是服务端错误 与客户端无关(代码bug、机房炸了...) 在工作中还会自定义状态码(因为默认的不够),自定义状态码一般都是从10000开始
HTML
简介
HTML---超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言,不是一种编程语言,HTML使用标签来描述网页。
本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
网页文件的扩展名:.html或.htm。
HTML文档结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>
<!DOCTYPE html>
声明为HTML5文档。<html>、</html>
是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。<head>、</head>
定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据,给浏览器看的数据<title>、</title>
定义了网页标题,在浏览器标题栏显示。<body>、</body>
之间的文本是可见的网页主体内容。给用户看的数据
HTML标签的分类
-
双标签:有头有尾,内容写在中间
<h1>内容</h1> <p>内容</p>
-
自闭合标签:单标签
<img/> <link /> <br />
HTML注释语法
<!--单行注释--> <!-- 多行注 --> '''html由于标签非常的多 所以可以通过注释区分页面区域'''
补充知识:在pycharm中编写html
1.在pycharm中的html文件内,标签只需要写表名称,然后按Tab自动补全即可 2.在pycharm中的html文件里,注释的快捷键也是ctrl+? 3.html标签其实没有缩进的概念,因为我们写python缩进习惯了,可以让代码更加美观 4.如何打开html标签,右键选择打开方式,在pycharm中html文件右上角有浏览器图标快捷方式点击即可(前提是安装了该浏览器)
标签的两大重要参数
-
id
类似于身份证号,同一个html页面上标签的id值不允许重复,用于精确查找某个标签(因为一个html页面上相同标签名的标签太多). -
class
类似于面向对象知识,可以将多个标签归为一类,分类查找(范围查找一次性多个).
head内常见标签
head标签内编写的标签一般都是给浏览器看的,用户看不到。
标签 | 作用 |
---|---|
title | 控制网页小标题 |
style | 内部支持编写css代码 |
link | 引入外部css文件+ |
script | 内部支持编写js代码,也可以通过src属性引入外部js文件 |
meta | 功能非常多,keywords:搜索引擎查询关键字;description:用于展示页面搜索结果的文本描述 |
正常的业务逻辑HTML,CSS,JS都会分不同的文件存储,用于解耦合。
body内标签
body基本标签
1.标题系列 h1~h6(1到6级标题) 2.字体系列 <i>斜体</i> <b>加粗</b> <u>下划线</u> <s>删除线</s> 3.文本段落 <p>段落</p> 4.其他 hr 水平分割线 br 换行符
body内特殊符号
内容 | 对应代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权 | © |
注册 | ® |
body内常见标签
标签的类别:块儿级标签,行内标签。
块儿级标签:h1~h6 p div 默认独占浏览器一行内 行内标签:s i u b span 自身内部文本多大就占多大 标签之间支持嵌套(最好是布局类相关标签参与),块儿级标签可以嵌套任意标签,行内标签只能嵌套行内标签.
1.布局标签
div---用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。 span---用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。 页面的编写首先就是先用布局标签占位,之后填充内容即可.
2.图片标签
<img src='111.jpg' title='美女图片' alt='这是一直美女图片' height='200px' width='200px'/>
属性 | 值和作用 |
---|---|
img | 图片标签 |
src | 图片路径 |
title | 鼠标悬浮自动展示提示信息 |
alt | 当图片无法正常展示自动提示的信息 |
height | 自定义图片高度 |
width | 自定义图片宽度 |
ps:height和width调整一个另外一个自适应调节,单位是px(像素).
3.链接标签
<a href="https://www.sogo.com" target="_self">click me</a>
属性 | 值和作用 |
---|---|
a | 超链接标签 |
href | 点击跳转到位置,可以写网址,也可以写标签id值 |
target | 控制是否当前页跳转,默认_self当前页,设置_blank新建页 |
4.列表标签
无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
type属性:
- disc(实心圆点,默认值)
- circle(空心圆圈)
- square(实心方块)
- none(无样式)
无序列表是使用频率最高的列表标签,页面上只有是有规则排列的横向或者竖向内容,几乎使用的都是无序列表。
5.表格标签
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:
<table border="1px" cellpadding="2px" > <thead> <tr> <!--tr表示一行--> <th>编号</th> <!--th加粗文本--> <th>姓名</th> <th>年龄</th> </tr> </thead> <!--表头字段--> <tbody> <tr> <td>1</td> <!--td普通文本--> <td>jason</td> <td>18</td> </tr> <tr> <td>2</td> <td>tony</td> <td>28</td> </tr> <tr> <td>3</td> <td>kevin</td> <td>38</td> </tr> </tbody> <!--表单数据--> </table>
属性:
- border: 表格边框
- cellpadding: 内边距
- cellspacing: 外边距
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)
这篇关于HTML的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15AntDesign项目实战:新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战:新手指南
- 2024-11-14ESLint课程:初学者指南
- 2024-11-14Form.List 动态表单课程:新手入门教程
- 2024-11-14Redux课程:新手入门完全指南
- 2024-11-13MobX 使用入门教程:轻松掌握前端状态管理
- 2024-11-12前端编程资料:新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料:适合新手与初级用户的简单教程
- 2024-11-12前端入门资料:新手必读指南