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

相关文章
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
39 1
前端基础(十七)_HTML5新特性
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
19 2
|
1月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
28 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
114 1
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
61 19
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
51 13
|
2月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
2月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
92 0
|
3月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
65 0
下一篇
无影云桌面