2024年前端基础html知识点汇总.doc

HTML知识點汇總

HTML基础知识

HTML简介

HTML(HypertextMarkupLanguage)，超文本標识語言，HTML运用多种標识来標识文档的构造以及標识超链接的信息。它是從SGML(StandardGeneralizedMarkupLanguage，原则通用標识語言)中的一种子集演变而来的。

HTML的標识构成

HTML用于描述功能的符号称為“標识”。標识在使用時必须用尖括号“”括起来，并且是成對出現的，無斜杠的標识表达该標识的作用開始，有斜杠的標识表达该標识的作用結束。如body/body、p/p等

單標识：有些標识能完整的体現標识裏的意思，只须在尖括号中输入標识名即可，此类標识叫單標识。XHTML中规定單標识也必须闭合，即在標识“”前添加斜杠。常見的單標识如br/、hr/等。

双標识：双標识有頭有尾，且前面的標识与背面的標识保持一致，但在背面的標识前有斜线，語法形如：標识内容/標识。例如：p段落/p

XHTML规定所有標识均為小写，且所有標识属性必须添加双引号

標识對不能交叉

HTML基本构造

html

head

title网页標題/title

/head

body

!--下面是网页的正文--

/body

/html

title標识對不能放在body標识對中，同理，其他表达内容的標识也不能放在head標识對中

html/html表达HTML語言，在html/html裏面包括頭部(head/head)和内容体(body/body)。

HTML注释表达為!--注释内容--

文字与图像

设置文字字体、大小与颜色

語法：fontface=”宋体”size=”1”color=”red”文字/font

设置文字的字体、大小、颜色需要使用font標签

Face属性设置文字字体，多种字体用逗号隔開

Size属性设置文字大小

Color属性设置文字颜色，参数值可以是RGB颜色值，如#000000，也可以用颜色的單詞表达，如red

设置正文的標題

語法：h#主題文字/h#，其中“#”代表数字1-6中的任意一种，從数字1到数字6，標題大小排列由大到小(数字越大，標題字号就越小)。

设置段落

語法：p這裏表达段落/p

强制换行与不换行

强制换行：br/

强制不换行：nobr/

字体標识

物理字体

b…/b 设置成粗体 i…/i 设置成斜体

u…/u 增長下划线 s…/s 增長删除线

sup…/sup 设置成上標字体 sub…/sub 设置成下標字体

tt…/tt 设置成打字机字体

逻辑字体

em…/em 强调文字 strong…/strong 字体加重

code…/code 显示编程代码 samp…/samp 显示救命文字

kbd…/kbd 显示键盘按键文字 small…/small 缩小文字

big…/big 放大文字

文字對齐

文字對齐使用標签的align属性，例如：palign=”#”對齐文字/p，其中“#”代码表达方位，可选择”left”(向左)、”right”(向右)、”center”(居中)。Align属性可用于p、div、table、td等標签。

居中對齐可使用center標签，例如：center居中文字/center

列表

無序列表

ultype=”#”

li表项一/li

li表项二/li

/ul

Type=”#”取值可為disc(默认，实心黑點)、square(实心黑方块)、circle(空心圆)

有序列表

oltype=”#”

li表项一/li

li表项二/li

/ol

Type=”#”取值可為A、a、I、i、1等

定义列表

dl

dt项目/dt

dd描述一/dd

dd描述二/dd

/dl

dt標签定义了定义列表中的项目，dd標签在定义列表中定义条目的定义部分，可以理解為對定义条目進行特性描述。

無序列表、有序列表、定义列表间可以互相嵌套，但一定要注意嵌套時不能交叉

其他方式修饰文本

欲格式化文本：pre…/pre

代码样式斜体字渲染：var…/var

表达它所包括的文本對某個参照文献的引用：cite…/cite

图像

插入图像基本語法：imgsrc=”#”/，其中#代表图像的URL途径，示例：imgsrc=”c.jpg”/

图像無法显示時的提醒信息，使用alt属性，如：imgsrc=”c.jpg”alt=”風景”/

图像的大小：imgsrc=”c.jpg”width=”400px”height=”300px”/，width属性定义图像的宽度，height属性定义图像的高度

图像和文字對齐：imgsrc=”c.jpg”align=”top”/