关于HTML
- HTML(Hyper Text Markup Language):超文本标记语言。
- HTML的作用:由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,用于定义页面结构。
基本元素:👉详情
- 元素=起始标签+元素内容+结束标签+[标签属性]
标签属性=属性名称+属性值;
属性分类:
全局属性:所有标签通用。
局部属性:某些标签所特有的。
对于布尔属性,只有两种状态即不写或者取值只能为其属性名。(在HTML5中,书写时可以省略其属性值) 例如:controls(显示控件)、muted(静音播放)、autoplay(自动播放)、loop(循环播放)
如下图: - 空元素:没有结束标签的元素。
- 空元素的两种表达形式:
< meta charset=“utf-8” /> (旧版本所使用的);
< meta charset=“utf-8” > (新版本HTML5所使用的)
(charset:指定网页内容编码) - 根元素:< html lang =“cmn-hans” > 内容< /html >,是其他元素的父元素或者祖先元素,且一个页面中最多一个,HTML5版本中可以省略不写,但若要兼容之前的版本则必须写。
- lang属性:language,全局属性,表示该元素内部使用的文字属于何种自然语言。
例如:lang =“cmn-hans” 表示该文档使用的是中国官方标准——中文简体 - < head >内容< /head >:文档头,文档头内部的内容不会显示在页面上
- < body>内容< /body>:文档体,用于放置所有待显示的元素。
- < !DOCTYPE html >:文档声明,用于告知浏览器当前文档使用的HTML标准 是HTML5。(若不写文档声明则将会导致浏览器进入怪异渲染模式。)
- 语义化:选择什么元素标签取决于元素内容的含义而不是其显示效果。 (故根据显示时是否独占一行来区分行级元素和块级元素的说法已在HTML5中弃用)
- 空白折叠:在源代码中连续的空白字符(空格、换行、制表),在页面显示时会被折叠成一个空格。(发生在行盒/行块盒内部或者行盒/行块盒之间)
- < pre > 内容< /pre >:有着默认的css属性,其内容会按照源代码格式显示在页面上,不会出现空白折叠,故常用来显示代码。
- figure元素标签:用于把相互关联的图片、图片标题、描述等包裹起来(其中图片标题可用其子元素标签figcaption包裹起来)
- 图片元素:< img usemap=“# mapID” src=“图片地址” alt=" “>
< map name=“mapID” > < area shape=“形状(圆形/矩形/多边形) " coords=” 坐标位置(圆心坐标及其半径/左上角和右下角坐标/所有顶点的坐标)” href=" " alt=" " target =" ">< /map > - XML(extension markup language):可扩展的标记语言。
- XML的作用:用于定义文档结构。
- VSCODE快捷键:
ctrl + shift + enter:在当前行切换至上一行;ctrl:在当前行切换至下一行;
!+ tab:快速生成基本的HTML文档结构;
h$ * n>{hello $} + enter:快速生成n个内容为hello $的不同级别标题;
p* n>lorem + enter:快速生成n个内容为没有任何含义的英文字母的p标签;
(元素标签1>{元素内容1}) + 兄弟标签2>{元素内容2} + enter:快速生成元素标签1和兄弟标签2的相邻模式;
( (元素标签1>{元素内容1}) + 兄弟标签2>{元素内容2} )· n + tab:快速生成n个元素标签1和兄弟标签2的相邻模式;
元素标签1>{元素内容1}) + 兄弟标签2>{元素内容2} + enter:快速生成元素标签1包含兄弟标签2的组合模式;
(元素标签1>{元素内容1}) + 兄弟标签2>{元素内容2} )· n + tab:快速生成n个元素标签1包含兄弟标签2的组合模式;
loremk + enter:快速生成k个没有任何含义的英文字母。 - 实体字符:用于在页面中显示一些特殊符号。👉参考资料
写法:
&单词;,例如:>; 等价于 >
&#数字;,例如:<; 等价于 <
-
超链接:< a href=“链接地址”> 内容< /a >
href(hyper reference):表示跳转地址或某个锚点。
target:表示跳转窗口位置。取值可能有如下:
_self:表示在当前页面打开,为默认值。
_blank:表示在新窗口打开。 -
链接类型:
普通链接
锚链接:ID属性为全局属性,即表示元素在文档中的唯一编号。
功能链接:点击后触发某个功能。
例如:执行JS代码,发送邮件(要求用户计算机上安装有邮件发送软件);拨号(要求用户计算机上安装有拨号软件或使用移动端进行访问) -
路径的写法:
站内资源:当前网站的资源。采用相对路径。
站外资源:非当前网站的资源。采用绝对路径。
绝对路径书写格式:
协议名://主机名:端口号/路径(schema://host:port/path);
相对路径书写格式:
例如:./html/index.html
./ 表示当前资源所在目录,可省略。
…/ 表示返回上一级目录。
(若为http协议,则默认端口号为80;若为https协议,则默认端口号为443) -
媒体元素
视频标签:< video > < /video >
音频标签:< audio > < /audio >
controls:控制控件的显示,取值只能为controls。
(不同浏览器支持的音视频格式可能不一致) -
列表元素
有序列表:ol(ordered list) li(list item)
无序列表:ul(unordered list) li(list item)
定义列表:
dl(definition list)
dt(definition title)
dd(definition description)
(无序列表常用于制作菜单或新闻列表) -
容器元素:表示一个区域,内部用于放置其他元素。
没有语义化的容器元素:div、span
语义化的容器元素:
header:用于表示页头或者文章的头部。
footer:用于表示页脚或者文章的尾部。
article:用于表示文章正文。
section:用于表示文章章节。
aside:用于表示侧边栏。 -
元素包含关系:
旧版本:块级元素可以包含行级元素,但行级元素不可以包含块级元素(a元素除外);
HTML5版本:元素的包含关系由元素的内容类别即其语义所决定。
快速查看方法:在百度搜索框内输入标签名 mdn并搜索。
注意:
-
iframe元素
为可替换元素,用于在网页中嵌入另一个页面,一般为行盒,显示的内容取决于元素的属性,CSS不能完全控制其中的样式,具有行块盒特点, -
在页面中使用flash
object、embed:它们都是可替换元素
多用途互联网邮件类型MIME(Multipurpose Internet Mail Extensions) -
表单元素
一系列,主要用于收集用户数据。
input元素:
输入框
type:输入框类型。(type取值为reset、submit、button时,input为按钮)
value:输入框的值。
placeholder:显示提示的文本,文本框没有内容时显示。
select元素:下拉列表选择框,通常和option元素配合使用。
textarea元素:文本域,多行文本框。
datalist元素:数据列表,该元素本身不会显示到页面,通常用于和普通文本配合。
button元素:按钮(type取值可以有reset、submit、button);
label:标签文本,通常配合单选和复选框使用。
显示关联:可以通过for属性,使label元素关联某一个表单元素(for属性书写表单元素id的值);
隐式关联:在label元素里嵌套表单元素。
form元素:会将整个表单元素,放置form元素的内部,当提交表单时,会将form元素内部的表单内容以合适的方式提交到服务器。
fieldset元素:表单分组。(legend:分组标题)
表单状态:
readonly:布尔属性,表示是否表单可读,不会改变表单显示样式。
disabled:布尔属性,表示是否禁用,会改变表单显示样式。