程序员必知:前端之HTML

简介: 程序员必知:前端之HTML

前戏

一、简介

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:

相关文章
|
存储 移动开发 前端开发
2023 最新前端面试题 (HTML 篇)
2023 最新前端面试题 (HTML 篇)
94 0
|
1月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
22 0
|
3月前
|
移动开发 前端开发 搜索推荐
前端基础101之HTML总结
【8月更文挑战第1天】
23 4
|
5月前
|
前端开发 网络协议 JavaScript
程序员必知:前端之HTML
程序员必知:前端之HTML
21 0
|
移动开发 前端开发 JavaScript
web前端基础知识——HTML/HTML5
HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面
146 2
|
存储 移动开发 前端开发
2023年前端html面试题
2023年前端html面试题
|
存储 移动开发 缓存
详细前端面试题HTML篇 1
详细前端面试题HTML篇
79 0
|
存储 Web App开发 移动开发
详细前端面试题HTML篇 2
详细前端面试题HTML篇
59 0
|
前端开发 JavaScript 数据可视化
前端知识大全之HTML(上)
前端包含什么? 结构:HTML(Hyper Text Markup Language--超文本标记语言) 页面原始和内容
73734 3
前端知识大全之HTML(上)
|
存储 数据采集 移动开发
前端面试题之HTML篇
前端面试题之HTML篇
229 39
下一篇
无影云桌面