html 介绍
web 服务本质
- import socket
- sk = socket.socket()
- sk.bind(('127.0.0.1',8080))
- sk.listen(5)
- while True:
- conn,addr= sk.accept()
- data = conn.recv(1024)
- conn.send(b'HTTP/1.1 200 OK\r\r\n')
- conn.send(b'<h1>hello world!</h1>')
- conn.close()
浏览器发请求 --> HTTP 协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把 HTML 文件内容发给浏览器 --> 浏览器渲染页面
HTML 是什么?
超文本标记语言 (Hypertext Markup Language, 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>
- 之间的文本是可见的网页主体内容.
注意: 对于中文网页需要使用 <meta charset="utf-8"> 声明编码, 否则会出现乱码. 有些浏览器会设置 GBK 为默认编码, 则你需要设置为 <meta charset="gbk">.
HTML 标签格式
HTML 标签是由尖括号包围的关键字, 如 < HTML>, <div > 等
HTML 标签通常是成对出现的, 比如:<div > 和</div>, 第一个标签是开始, 第二个标签是结束. 结束标签会有斜线.
也有一部分标签是单独呈现的, 比如:<br/>,<hr/>,<img src="1.jpg" />等.
标签里面可以有若干属性, 也可以不带属性.
标签的语法:
- <标签名 属性 1="属性值 1" 属性 2="属性值 2"......>内容部分</ 标签名>
- <标签名 属性 1="属性值 1" 属性 2="属性值 2"...... />
几个很重要的属性:
id: 定义标签的唯一 ID,HTML 文档树中唯一
class: 为 HTML 元素定义一个或多个类名(classname)(CSS 样式类名)
style: 规定元素的行内样式(CSS 样式)
HTML 注释
- CTRL+/
- <!DOCTYPE> 标签
- <!DOCTYPE> 声明必须是 HTML 文档的第一行, 位于 <HTML> 标签之前.
- <!DOCTYPE> 声明不是 HTML 标签; 它是指示 Web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.
HTML 常用标签
head 内常用标签
标签 | 意义 |
---|---|
<title></title> | 定义网页标题 |
<style></style> | 定义内部样式表 |
<script></script> | 定义 JS 代码或引入外部 JS 文件 |
<link/> | 引入外部样式表文件或网站图标 |
<meta/> | 定义网页原信息 |
Meta 标签
Meta 标签介绍:
- <meta>
- 元素可提供有关页面的元信息(mata-information), 针对搜索引擎和更新频度的描述和关键词.
- <meta>
- 标签位于文档的头部, 不包含任何内容.
- <meta>
- 提供的信息是用户不可见的.
meta 标签的组成: meta 标签共有两个属性, 它们分别是 http-equiv 属性和 name 属性, 不同的属性又有不同的参数值, 这些不同的参数值就实现了不同的网页功能.
1.http-equiv 属性: 相当于 http 的文件头作用, 它可以向浏览器传回一些有用的信息, 以帮助正确地显示网页内容, 与之对应的属性值为 content,content 中的内容其实就是各个参数的变量值.
- <!-- 指定文档的编码类型(需要知道)-->
- <meta http-equiv="content-Type" charset=UTF8 ">
- <!--2 秒后跳转到对应的网址, 注意引号(了解)-->
- <meta http-equiv="refresh " content="2;URL=https://www.cnblogs.com/ ">
- <!-- 告诉 IE 以最高级模式渲染文档(了解)-->
- <meta http-equiv="x-ua-compatible " content="IE=edge
- ">
2.name 属性: 主要用于描述网页, 与之对应的属性值为 content,content 中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.
- <meta name="keywords" content="meta 总结, html meta,meta 属性, meta 跳转">
- <meta name="description" content="博客园 Python">
body 内常用标签
基本标签(块级标签和内联标签)
- <b>
- 加粗
- </b>
- <i>
- 斜体
- </i>
- <u>
- 下划线
- </u>
- <s>
- 删除
- </s>
- <p>
- 段落标签
- </p>
- <h1>
- 标题 1
- </h1>
- <h2>
- 标题 2
- </h2>
- <h3>
- 标题 3
- </h3>
- <h4>
- 标题 4
- </h4>
- <h5>
- 标题 5
- </h5>
- <h6>
- 标题 6
- </h6>
- <!-- 换行 -->
- <br>
- <!-- 水平线 -->
- <hr>
特殊字符
内容 | 对应代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权 | © |
注册 | ® |
来源: http://www.bubuko.com/infodetail-3061409.html