程序员必知:前端之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:

相关文章
|
10天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
21 0
|
10天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
24 0
|
10天前
|
前端开发 JavaScript 程序员
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
|
12天前
|
XML 存储 前端开发
【前端】XML和HTML的区别详解
【前端】XML和HTML的区别详解
17 5
|
15天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
2天前
|
前端开发 JavaScript API
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
8 0
|
2天前
|
前端开发 JavaScript 程序员
程序员必知:完成登录与注册页面的前端
程序员必知:完成登录与注册页面的前端
|
4天前
|
移动开发 前端开发 程序员
程序员必知:基于HTML5堆木头游戏
程序员必知:基于HTML5堆木头游戏
|
1月前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
81 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
1月前
|
存储 监控 前端开发
局域网管理软件的前端设计与实现:HTML/CSS在网络拓扑展示中的应用
本文探讨了局域网管理软件的前端设计,强调了HTML/CSS在网络拓扑展示中的作用。通过HTML/CSS创建设备节点和绘制连线,实现清晰的网络设备连接展示。此外,利用JavaScript定时收集监控数据,并通过HTTP请求自动提交到网站,便于管理员进行数据分析,提升了局域网管理效率。
122 3