前端初始-HTML
前端初始
前端的本质
import socketsk = socket.socket()sk.bind(("127.0.0.1", 8080))sk.listen()while 1:conn, addr = sk.accept()ret = conn.recv(1024)print(ret.decode("utf-8"))conn.send(b"http/1.1 201 ok\r\n\r\n") # 发送网页的协议# conn.send(b"hello")conn.send("hello world
".encode('utf-8'))conn.close()sk.close()
当浏览器发送请求(客户端)-> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
HTML是啥？
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。是一种标记语言，不是编程语言。
HTML的结构
Title
HTML标签的格式
- HTML标签是由尖括号包围的关键字：如,等
- HTML标签通常是成对出现的：如其中的第一个标签表示了开始，第二个标签表示了结束
- 也存在单独呈现的标签：如
、
、
等。 - 标签里面可以有若干属性，也可以不带属性
标签的语法
- 内容部分标签名>
几个重要的标签的属性
id:定义标签的唯一ID，HTML文档树中唯一，将来页面上的标签有很多
class:为html元素定义一个或多个类名(classname)
style:规定元素的行内样式（CSS样式）
HTML的注释
# 在pycharm中 快捷键 ctrl+/HTML常用的标签
Head内常见的标签
| 标签代码 | 含义 |
|---|---|
| 定义内部样式表或引入外部的css文件 | |
| 定义JS代码或引入外部JS文件 | |
| 引入外部样式表文件 | |
| 定义网页原信息 |
Meta标签
元素可提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
http-quiv
可以简写： name
name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
body内的标签
基本的标签
加粗
斜体
下划线
删除段落标签
#独占一个段落标题1
标题2
标题3
标题4
标题5
标题6
# 换行
# 水平线特殊的字符
| 内容 | 对应代码 |
|---|---|
| 空格(默认不显示空格的，通过空格键加了空格也没有多个空格的效果，加多少也就一个，通过特殊字符显示) | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权标识（写公司网站的时候会用到） | © |
| 注册（一个圆圈里面有个R） | ® |
div标签和spam标签
div标签用来定义一个块级元素
span标签用来定义内联(行内)元素
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
块级标签：独占一行 p div hr h1-h6
内联标签：不独占一行：b i s u spam img 也叫行内标签
img标签
a标签
超链接标签
超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
百度 href="xxxx"
href属性指定目标网页地址
- 绝对URL - 指向另一个站点（比如 href="http://www.baidu.com）
- 相对URL - 指当前站点中确切的路径（href="index.html"）
target="xxx"
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
列表
无序列表
- 显示1
- 显示2
type的属性"
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
有序列表
- 显示1
- 显示2
type的属性
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
标题列表
- 标题1
- 内容1
- 内容2
- 标题2
- 内容3
表格
序号 姓名 爱好
1 Yang 看电影
2 Wang play
属性:
- border: 表格边框.
- cellpadding: 内边距 （内边框和内容的距离）
- cellspacing: 外边距.（内外边框的距离）
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
转载于:https://www.cnblogs.com/yangchangjie150330/p/10792318.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！