HTML

最新推荐文章于 2020-04-10 19:03:37 发布

原创最新推荐文章于 2020-04-10 19:03:37 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

本文深入浅出地讲解了Web的工作原理，详细介绍了HTML、CSS和JavaScript如何共同构成现代网页，探讨了静态与动态网页的区别，以及HTML标签的使用方法。

0x00:写在开头：对于WEB的理解

上网就是下载文件的一个过程。浏览器帮我们把下载的文件解释称丰富的页面。
何为页面？
页面就是一个执行结果。
何为浏览器？
浏览器可以认为是一个客户端，用来把html,css,javascript解释成人类看着很舒服的页面。

题外话：
其实C/S和B/S是一种东西。B/S只不过是C/S的一种变种。
C/S的流程：客户端发送请求，服务端返回文件给客户端。
B/S流程：浏览器发送请求，服务端返回文件给浏览器，浏览器进行解释，解释成对人类友好的页面。
正是因为C/S和B/S的一致性，我们才能够用程序模仿浏览器前的人类的行为进行爬虫编写。
验证性实验：验证性实验应该有两个。一个是写客户端模仿浏览器访问服务器。另一个是写服务端，让浏览器访问。第一个的典型应用是爬虫。另一个的典型应用是WEB后端开发。
在这里我写了第二个实验。

import socket as st
ip = '127.0.0.1'
port = 8888
servers_ip = (ip,port)
servers = st.socket(st.AF_INET,st.SOCK_STREAM)
servers.bind(servers_ip) # bind接受一个元组
servers.listen(5)
while True:
    conn,addr = servers.accept() # 建立好的链接  对方地址
    buf = conn.recv(1024)
    print(buf.decode())
    conn.sendall('HTTP/1.1 201 OK\r\n\r\n'.encode('GBK'))
    conn.send('fuckbeat'.encode('gbk'))
    conn.close()

servers.close()
输出：
GET / HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134
Accept-Language: zh-CN
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Upgrade-Insecure-Requests: 1
Accept-Encoding: gzip, deflate
Host: 127.0.0.1:8888
Connection: Keep-Alive

浏览器显示的内容：
在这里插入图片描述

HTML+CSS+JAVASCRIPT构成了我们当代的页面。
HTML是负责标记语言的。
CSS是负责布局的。
JAVASCRIPT可以做出动态效果。（看小说时，不良图片抖阿抖可以通过禁用浏览器的JS功能来解决）
关于框架的理解：老听说有什么框架。前端框架，DJango框架，Flask框架。听起来就觉得高端大气上档次，不是我这种能懂的。但是，框架其实就是相当于一套模板，把经常用的东西集合在一起。举个有现实意义的例子：英语考研作文很难写，一字一句的写，除非英语素养特别高，不然肯定写不出。所以会有一些聪明的同学把常见的好句子写成一个模板，到时候只需要往这个模板上添加几个自己写的句子就可以组成一篇高水平的作文了！

0x01 正式开始：

HTML是超文本标记语言。
什么叫超文本？
就是超越文本的一些东西，比如音频，视频，图片等。
什么叫标记语言?
就是交给别的程序去解析（注意不是解释）
什么叫网页？
网页就是HTML文档。分为静态网页和动态网页。
静态网页就是一个写死的html文件。无法与后台进行交互。
动态网页就是可以与后台进行交互。大大增强了用户的体验。
HTML语言是一个大盒子套小盒子的结构。盗用一张runoob的图：
在这里插入图片描述

<html></html>中包含了两个小盒子 
<head></head><body></body>

这是html页面的最基本的结构。
什么是标签？
标签就是由尖括号<>组成的东西。
标签不区分大小写
标签有两种，一种是正常标签，一种是自闭和标签。
什么是正常标签？
正常标签包括开始标签和结束标签

<html></html>

什么是自闭和标签？
自闭和标签其实就是一个标签。只不过在标签要结束的时候添加了结束标记。

<img src = '佟丽娅.jpg'/>

标签可以嵌套，但是不能交叉嵌套。（也就是大盒子里面可以装小盒子）

✳标签的属性
属性通常以键值对的方式出现。就好像上个例子给出的src = '佟丽娅.jpg'一样。
属性只能出现在开始标签和自闭和标签之中。
属性的名字全部小写（键）属性的值（值）和python字符串一样
如果Key和Value完全一样，可以省略value。<img src='src'/>与<img src>等价。

加上<!DOCTYPE html>的意义：
使浏览器按照W3C标准进行网页渲染。

先来讲head标签中的东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> # 指定字符集为UTF-8
    <title>我是标题</title>
</head>
<body>
</body>
</html>

meta标签：
meta标签一共有两个属性，一个是http-equiv属性，另外一个是name属性。不同的属性又有不同的参数值，这些不同的参数值实现了不同的网页功能。
name属性主要用于描述网页，与之对应的属性值是content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
示例代码：

<meta charset="UTF-8" name = 'keywords' content="meta学习">

http-equiv属性，顾名思义这个相当于http的文件头的作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content。 content中的内容实际上就是各个参数的变量值。
示例代码：

<meta http-equiv="Refresh" content = "0.01;URL=http://www.bjfu.edu.cn">

如果不加URL 就是定时刷新，时间给定在了content中。这段代码的含义是打开0.01秒之后跳转到北京林业大学主页。想想看吧（是不是拿站之后修改这里就能跳转到钓鱼页面，而且不会被察觉）

<meta http-equiv="content-Type" charset="UTF-8">
# 这个才是charset的完整写法

为了解决兼容性：

<meta http-equiv="X-UA-Compatible" content = "IE=EmulateIE7"/>
# 可以兼容IE7

非meta标签

<title>bjfuvth</title>
<link rel="icon" href="//www.jd.com/favicon.ico" />
<!-- 我是注释  -->
<link rel = "stylesheet" href = "css.css"> # 写好的css文件必须要被html引用来能渲染布局。
# css 和  Js 都是被引入过来来控制html的。
<scrpt src = "hello.js"</script> # 我是js  来搞html

再来讲讲body标签

<h1>我是标题</h1>
# 数字1可以替换成1到7中的任何东西。1最大。
标题的标签会自动换行。
在正文中，很多空格被浏览器解释称1个空格。
<p>我是段落，我也会自动换行 而且我会产生不同于其他行的行距</p>
</br>标签是换行
<b>我是加粗的</b>和<strong>我也是加粗的</strong>没有别的区别。
<strike>我是删除线</strike>
<em>我是斜体</em>
3<sub>2</sub>  2是3的下角标
3<sup>2</sup> 3的平方
<hr> 横着的分割线

###重点要来了
<div>我没有特性，我是一个空标签。是为CSS无偏差渲染准备的</div>
#  什么叫无偏差渲染？div不会改变CSS的渲染效果，别的标签会，这就叫无偏差渲染。

块级标签和内联标签。
h就是块级标签，块级标签特点：独占一行。宽度是它容器的100% 可以容纳内联元素和其他块级元素
内联标签的特点：不独占一行。宽度不可改变，就是它本身的宽度。只能容纳文本和其他内联元素。
之前说过多个空格会被解析成一个，那想用很多空格怎么办？
答案是用特殊字符。
HTML特殊字符（知道几个常用的，到时候查就行。这个在转码的时候好用）：

faker      faker&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;faker
&nbsp;就是空格。
&lt;是小于号
&gt;是大于号
&quot;是双引号
&copy;是©号
&reg;是®号