HTML(上)
浏览器
- 浏览器也是一个客户端
#这是一个服务器,我们通过浏览器就可以访问的到服务器发送的"hello"
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\n\r\n") #必须要加上这一句,不然浏览器不认识
conn.send(b"hello")
conn.close()
- 浏览器不通过服务端也可以渲染文本
HTML
什么是HTML
HTML全称HyperText Markup Language,超文本标记语言,是一种描述性的标记语言。
- 超文本:音频、视频、图片
- 标记:<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成。
HTML的作用
负责描述文档语义的语言
编写HTML的规范
1)所有标记元素都要正确的嵌套,不能交叉嵌套。eg:
<h1><a></a></h1>
2)所有标记都必须小写
3)所有标记都必须关闭
- 双标签:
<h></h1>
- 单标签:
<img src=“URL” />
4)所有属性值必须加引号。eg:<h1 id="head"></h1>
5)所有属性必须有值:<a href="02.html" target="_blank">首页</a>
HTML结构
用pycharm新建一个HTML文件,文件会自动生成如下代码的一个HTML模板
<!DOCTYPE html>
<!--文档声明头,告诉浏览器它应该用什么版本的html去解析以下代码-->
<html lang="en">
<!--文档的开始标记和结束标记,lang="en"表示用英语或者其他国家的语言,在它们之间是文档的头部(head)和主体(body)-->
<head>
<!--定义了HTML文档的开头部分,不会再浏览器的文档窗口显示-->
<meta charset="UTF-8">
<!--HTML的编码格式-->
<title>Title</title>
<!--网页标题,在浏览器标题栏显示-->
</head>
<body>
<!--文本主体,他们之间的文本是可见的网页主题内容-->
</body>
</html>
HTML常用标签
head内常用标签
基本标签
标签 | 意义 |
---|---|
<title></title> |
定义网页标题 |
<style></style> |
定义内部样式表 |
<script></script> |
定义JS代码或引入外部JS文件 |
<link/> |
引入外部样式表文件 |
<meta/> |
定义网页原信息 |
meta标签
<meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/">
<!--2秒过后跳到 https://www.cnblogs.com/yanjiayi098-001 网页-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<!--对网页并没有什么影响,就是给网页关键字,便于搜索引擎机器人查找信息和分类信息用的-->
<meta name="description" content="老男孩教育Python学院">
<!--这个也没有什么影响,就是给网页一个描述,便于搜索引擎机器人查找信息和分类信息用的-->
<meta http-equiv="content-Type" charset=UTF8">
<!--指定文档的编码类型-->
<meta http-equiv="x-ua-compatible" content="IE = edge">
<!--告诉IE以最高级模式渲染文档-->
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>
<!--这是一个水平线标签-->
特殊字符
<!--空格-->
>
<!--大于号(>)-->
<
<!--小于号(<)-->
&
<!--&符号-->
¥
<!--人民币(¥)符号-->
©
<!--版权符号-->
®
<!--注册符号-->
div标签和span标签
div标签:
<div>
<!--块级标签,无意义,通过CSS样式为其赋予不同的表现-->
</div>
span标签:
<span>
<!--内联标签,无意义,通过CSS样式为其赋予不同的表现-->
</span>
**块级标签与内联标签的区别**
块级标签:另起一行开始渲染元素
内联标签:不需要另起