前戏
一、简介
HTML(超文本标记语言)是一种面向描述的用于开发web网页的一种语言。
网页文件的扩展名:.html或.htm
HTML开发没有任何的逻辑,就是记的东西有点多。
二、注释
正所谓注释是代码之母,我们学习每一种语言都应该先学习其注释。
Python中对HTML的注释格式是,如下:
ps:快捷键为ctrl + /
HTML
一、特性
html语言是基于HTTP协议下的语言,而HTTP协议具有如下四大特性:
基于请求响应
只有当你请求访问时,html才会做出反应
就好比癞蛤蟆,你戳一下,它动一下
基于TCP/IP作用于应用层之上的协议
就是要满足一定的网络通信规范,关于TCP/IP可参见TCP/IP协议
无状态
不保存用户的信息,就算你访问了一千次,http也待你如陌生人一样
ps:由于http是无状态的,所以有时为了记录用户状态,可以使用cookie、session、token等技术
短链接
就是你来一次我响应一次,之后我们之间就没有任何关系了
ps: websocket可以建立长链接,默认建立连接后不断开
二、html结构
首先新建一个html_study.html文件,观察初始格式:
<!DOCTYPE html
[/span>html lang="en"
[/span>head
[/span>meta charset="UTF-8"
[/span>title
[/span>body
注意:对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 。
html结构可以分为三部分:
响应首行:用于标识HTTP协议版本、状态码、语言等内容
<!DOCTYPE html
[/span>html lang="en"
...
响应头:可以看成是一大堆键值对,用于书写给浏览器看的内容
[/span>head
[/span>meta charset="UTF-8"
[/span>title
响应体:用于写展示给用户看的内容
[/span>body
...
head内常用标签
title标签
title标签用于书写网页标题(在网页最上端显示的标签名)
[/span>title
style标签
style标签用于在内部书写css代码
[/span>style
h1{color:red;}
link标签
[/span>link rel="stylesheet" href="outside.css"
script标签
script标签用于内部书写js代码或引入外部js文件
[/span>script
[/span>script src="outside.js"
meta标签
meta标签用于提供一些页面的元信息,包括一些描述和关键词
(了解)meta标签常用有两个属性:http-equiv和name
http-equiv:相当于html的文件头,用于向浏览器传一些信息或一些跳转操作,其属性值为content
[/span>meta http-equiv="content-type" charset="UTF-8"
[/span>meta http-equiv="refresh" content="2;URL="
name:用于向浏览器机器人提供一些描述网页的信息和分类词,其属性值表述在content中
[/span>meta name="keywords" content="python,weer,study"
[/span>meta name="description" content="weer的博客 python study"
body内常用标签
基本标签
h1~h6表示一级到六级标题
b是文本加粗标签,i是文本斜体标签,p是段落标签
u是下划线标签,s是删除线标签
br是换行标签,hr是水平分割线标签
[/span>h1
[/span>h2
[/span>h3
[/span>h4
[/span>h5
[/span>h6
[/span>b
[/span>p
[/span>i
[/span>u
[/span>s
[/span>br
[/span>hr
列表标签
列表分为无序列表和有序列表以及带标题的列表
无序列表
ul标签里搭配li标签嵌套,type指定形状,如circle(默认)、square等
[/span>ul type="square"
[/span>li
[/span>li
[/span>li
[/span>li
结果如下:
有序列表
ol标签里搭配li标签嵌套,type指定数字类型(I,1,a,A等),start指定起始编号
[/span>ol type="1" start="2"
[/span>li
[/span>li
[/span>li
3. 标题列表(了解)
[/span>dl
[/span>dt
[/span>dd
[/span>dt
[/span>dd
表格标签
table标签用于绘制表格,分为thead和tbody。thead用于提示各列的属性,tbody用于显示表格内的内容。
table中可以加border属性,用于显示外边框(很丑,但后期可以美化),整数表示外边框厚度
[/span>table border="1"
[/span>thead
[/span>tr
[/span>th
[/span>td
[/span>td
[/span>tbody
[/span>tr
[/span>td
[/span>td
[/span>td
基本、列表、表格标签完整代码
<!DOCTYPE html
[/span>html lang="en"
[/span>head
[/span>title
[/span>style
h1{color:red;}
[/span>link rel="stylesheet" href="outside.css"
[/span>script
[/span>script src="outside.js"
<!--显示文档编码类型<span style="color: