前端之html
目录
什么是前端
简单来说,任何直接与用户打交道的操作界面都叫前端。
前端基础
html ---> 骨架
css ----> 衣服、打扮
JavaScript ----> 动态效果
- html 标签
- css 属性、选择器
- JavaScript BOOM & DOOM
前端必备知识点
软件开发架构
c/s
b/s 本质上也是c/s
web服务的本质
客户端向服务端请求,
服务端向客户端相应
当在浏览器地址栏输入网址,回车会发生什么事情:
- 向指定的服务器地址(也就是IP+PORT)发送请求
- 服务器接受请求,并处理
- 服务器相应浏览器的请求
- 浏览器接收到,并渲染出好看的界面供用户观看
import socket
server = socket.socket()
server.bind(('127.0.0.1', 9527))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 ok\r\n\r\n')
conn.send('hello'.encode('utf-8'))
conn.close()
请求方式
- get 向服务器要数据 如 :输入百度网址,浏览器返回的是百度首页
- post 向服务器提交数据 如: 登录功能
HTTP协议
是什么
超文本传输协议,规定了浏览器与服务端数据传输的数据格式。
四大特性
- 基于TCP/IP作用于应用层之上的协议
- 基于请求 响应
- 无状态
- 不保存客户端状态
- 无论来多少次,都当你如初见
- 无连接
- http连接,请求发过来立即给客户端相应,之后就与客户端断掉了。
- 长连接,用websocket 做聊天室
数据格式
请求格式
请求首行(请求方式 协议版本)
请求头(一大堆k:v键值对)
请求体(敏感信息 密码 身份证号码)
注意:请求头下面有一行空格,\r\n
响应格式
响应首行(响应方式 协议版本)
响应头(一大堆k:v键值对)
响应体(给用户看的数据)
响应状态码
就是用数字来表示一串文字需要表达的意思
- 1xx:服务器已经成功接收到了请求,正在处理,你可以继续提交其他数据
- 2xx:服务器成功响应了相应的数据。如200
- 3xx:重定向。如访问一个需要登录才能访问的网页,就会跳转到登录页面
- 4xx:如404表示请求的资源不存在,403表示当前不符合某一些条件,无法正常访问
- 5xx:服务器内部错误 (500)
HTML是什么
HTML全称为超文本标记语言(Hyper Text Markup Language),是一种创建网页的标记语言
HTML文档结构
最基本的HTML文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
声明为HMTL5<html> </html>
是文档开始结束的标记<head> </head>
定义了HTML文档开头的部分,之间的内容不会在浏览器的文档窗口。<title> </title>
定义了网页标题<body> </body>
是文本的主体内容
HTML的注释
<!--单行注释-->
<!--
多行注释1
多行注释2
-->
标签的分类
双标签和自闭合标签
块级标签和行级标签
块级标签:h1~h6 p br hr div 独占一行
- 块级标签内可以嵌套其他块级标签和行内标签
- p标签虽然是块级标签,但它内部不能嵌套任何块级标签,只能嵌套行内标签
行内标签 s i u b span
内部文本多大,就占多大
行内不能嵌套行内和块级标签
标签属性
- id 每一个标签都应该有id值,并且在同一个html文档中,id值不能重复
- class 类属性
HTML常用标签
head内常用标签
标签 | 意义 |
---|---|
定义网页标题 | |
内部支持写css代码 | |
内部可以直接写js代码,也可以引入外部js代码 | |
引入外部css样式文件 | |
定义网页源信息 |
meta标签 内部keyword关键字提高被搜索引擎搜索的概率
body内常用标签
标签 | 意义 |
---|---|
h1~h6 | 标题标签 |
p | 段落标签 |
s | 删除线 |
u | 下划线 |
i | 斜体 |
br | 换行 |
hr | 分割线 |
b | 加粗 |
body内特殊符号
符号 | 意义 |
---|---|
|
空格 |
& |
& |
¥ |
¥ |
> ; |
> |
< |
< |
© |
© |
® |
® |
body内重要的标签
div和span标签
div 就是一块区域
span 用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
div和span是前期构建网页的基本骨架
链接标签a
- 跳转功能
<a href="https://www.baidu.com" target="_blank">首页</a>
href 参数控制跳转的地址,target参数: target = '_blank
' 表示新建窗口打开;target = '_self
' 在当前窗口跳转
- 锚点功能
给a标签设置id值, 然后在href中书写对应的a标签id值 点击即可跳转到对应的位置
<h1 id="h1">我是标题1</h1>
<a href="#h1">首页</a>
img图片标签
<img src="3.jpg" alt="这里是图片" title="美化" width="200">
src 是图片地址
alt 当图片加载不出来时展示的信息
width和height 这两个参数 你只需要设置一个 就可以 默认是等比例缩放
列表标签
- 无序列表
<ul type="circle">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
type参数
disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
- 有序列表
<ol type="a">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>
type参数
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表
<dl>
<dt>
标题1
</dt>
<dd>
章节1
</dd>
<dt>
标题2
</dt>
<dd>
章节2
</dd>
</dl>
表格标签
展示数据
<table border="1">
<thead>
<tr>
<th>user</th>
<th>pwd</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>neo</td>
<td>123</td>
<td>20</td>
</tr>
<tr>
<td>jason</td>
<td>qwe</td>
<td>18</td>
</tr>
</tbody>
</table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)
原文地址:https://www.cnblogs.com/setcreed/p/11845354.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Java List.add()方法:向集合列表中添加对象
- Linux下查看NVIDIA的GPU使用情况
- 数据结构算法操作试题(C++/Python)——有效的数独
- Java List.addAll()方法:添加所有元素到列表中
- HDFS的Shell操作(开发重点)
- 数据结构算法操作试题(C++/Python)——字符串相乘
- Java基础知识笔记四(详细)
- [推荐]Linux入门系列(三)Vim编辑器(Vim工作模式+代码演示)
- 机器学习性能评价指标汇总
- [推荐]Linux入门系列(四)系统用户账号管理(代码图文示例)
- 逆波兰表达式
- 字符串:替换空格
- 字符串:花式反转还不够!
- 字符串:反转个字符串还有这个用处?
- 字符串: KMP是时候上场了(一文读懂系列)