前端之html
HTML介绍
1.1Web服务本质
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
2.2html简介
- 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。一套规则,浏览器认识的规则
- 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性)
- 静态网页文件扩展名:.html 或 .htm
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
HTML 使用标记标签来描述网页
2.3html结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
</body>
</html>
HTML常用标签
定义网页标题 | |
定义内部样式表 | |
定义JS代码或引入外部JS文件 | |
引入外部样式表文件或网站图标 | |
定义网页原信息 |
标签
元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 提供的信息是用户不可见的
meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
(1)name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"><meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑">
(2)http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
标签
标题内容
<title>hantao</title>
内标签
基本标签
: n的取值范围是1~6; 从大到小. 用来表示标题.
: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
: 加粗标签.
: 为文字加上一条中线.
: 文字变成斜体.
和: 上角标 和 下角表.
:换行.
:水平线
标签和标签
:
标签
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
标签
绝对 URL - 指向另一个站点(比如 href="http://www.jd.com)
相对 URL - 指当前站点中确切的路径(href="index.htm")
锚 URL - 指向页面中的锚(href="#top")
列表标签
- :列表中的每一项.
- 列表标题
- 列表项
标签
标题
表头
表主体
表尾
<table border="2" cellspacing="10" cellpadding="20"> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> <th>薪水</th> </tr> <tr> <td colspan="2" style="text-align: center">hantao</td> <td>s19</td> <td>100</td> </tr> <tr> <td>xiaoxiaojing</td> <td>38</td> <td>s19</td> <td rowspan="2">1000000</td> </tr> <tr> <td>miaomiao</td> <td>1</td> <td>s19</td> </tr> </table>
: table row
: table head cell
: table data cell
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.(最好通过css来设置长宽)
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
标签
功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
02-13 01:25-
在Laravel中使用自己的类库三种方式
-
C# List<T>的并集、交集、差集
-
【.NET 与树莓派】PWM 调节LED小灯的亮度
-
010 调整数组顺序使奇数位于偶数前面
-
详解SQL Server中的事务与锁问题
-
Vue 高德地图 路径规划 画点
-
Supervisor-守护进程工具
-
贾樟柯多屏影像展“特写”亮相鹿特丹国际电影节
-
国家邮政局:预计初一到初七快递业务量达平均每天7000万件
-
记一次修复yum被破坏
-
第十九章 一般控制问题
-
SQL优化-如何分析性能瓶颈
-
Python 你见过三行代码的爬虫吗
-
很简陋的验证码学习
-
用OC实现双向链表:构造链表、插入节点、删除节点、遍历节点
-
定义列表
- 列表标题
: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
: 有序列表