HTML学习笔记（标签、语义化）

（最近前端学习的一些笔记，随便记记）

1、Web标准的构成

结构：HTML（超文本标记语言）——页面元素

表现：CSS——页面样式

行为：JavaScript——页面交互的动态效果

 

2、绝对路径：指目录下的绝对位置，从盘符开始到达目标位置

     相对路径：从当前文件开始出发找目标文件的过程 （同级目录—目标文件名；下级目录—文件夹名/目标文件 名；上级目录—../目标文件名）

 

3、实体

空格：&nbps

大于号：>

小于号：<

版权符号：&cope

注释：<!-- --> （快捷键ctrl+/)

 

4、meta

meta用于设置网页中的一些元数据

charset：指定网页的字符集UTF-8或gbk

name：指定数据的名称

content：指定的数据的内容

keyword：表示网站的关键字，可以同时指定多个

description：指定网站的描述

http-equiv：跳转refresh，content：时间；url=网址

 

5、语义化标签：

Header：网页头部

main：网页主体（一个网页只有一个）

Footer：网页底部

Nav：网页中的导航

Aside：侧边栏，和网页主体有关的其他内容

Article：一个独立文章

Div：没有语义，用来表示一个区块

Span：行内元素，没有任何语义，用于在网页中选中元素

 

6、html标签

标题标签：h1-h6

段落标签：p (独占一行，段落之间存在一些间隙）

换行：br

水平线标签：hr

文本格式化标签：加粗strong、下划线ins、斜线em、删除线del

图片标签：<img src="" alt="" title=""> （alt当图片没有加载出来时显示，title鼠标在图片上悬停时显示）

音频标签：<audio src="" control></audio> (control显示播放的控件；autoplay自动播放，部分浏览器不支持；loop循环播放）

视频标签：<video scr="" control></video> （一个网页有多个链接，前一个不能用时可以用后面的

<video controls><source src=""><source src=""></video>)

链接标签：<a href="" target="_self">xx</a> (默认有下划线，显示蓝色，点击过后显示紫色；_self当前窗口跳转，默认值；_blank在新窗口跳转）

空链接：<a href="#"></a> 空链接点击后回到页面顶部

 

7、图片类型

Jpg：色彩丰富，不支持透明效果，不支持动图，一般用来显示照片

Gif：色彩比较少，支持简单透明，支持动图

Png：色彩丰富，支持复杂透明，不支持动图

Webp：具备其他图片格式所有的有点，且文件小，但兼容性差

base64：将图片转换为字符，一般需要图片和网页一起加载时才使用

 

8、列表标签

Ul：无序列表

Ol：有序列表

Li：有序和无序列表中的表项

Dl：自定义列表（dt：定义的内容；dd：对定义的内容进行解释说明）

列表间可以相互嵌套

 

9、表格标签

table>tr>td

caption：表格大标题

th：表头单元格，替换td标签

表格的结构标签：thread表格头部，tbody表格主体，tfoot表格底部，用于包裹tr标签

rowspan：多行垂直合并，即合并行

colspan：多列水平合并，即合并列

 

10、表单标签<input type="">

text：文本域

password：密码框

radio：单元框，多选一

checkbox：多选框，多选多

file：文件选择

submit：提交按钮

reset：重置按钮

button：普通按钮

select：下拉菜单标签，option下拉菜单中的每一项，selected下拉菜单中的每一项

textarea：文本域标签，cols规定可见宽，rows规定文本域可见行

placeholder：占位符，提示用户输入内容

value：用户输入的内容

name：当前控件的含义

checked：默认选中

multiple：file中多文件选择