HTML5 基础结构和标签

type

status

date

slug

summary

第一章基础结构

1. HTML基础框

在VS Code中新建html文件,然后输入! 回车即可生成整个html文件的代码框架.

1.1 框架标签

标签名	说明	包含属性及含义	属性值及含义
Doctype	指定创建文档类型,避免浏览器的怪异模式	ㅤ	ㅤ
html	HTML树结构,包含内容和定义的样式	lang:文档内容的语言	en:英文
head	HTML文档头,网页标题,字符编码方式及文档相关信息	ㅤ	ㅤ
body	HTML文档内容正文	ㅤ	ㅤ

1.2 head内标签

标签名	说明
meta	定义文档字符编码方式
title	指定文档标题
link	引入外部样式文件,如css3
style	内部定义css样式
script	用于包含Javascript脚本

1.3 注释

VS Code注释/取消注释快捷键:Ctrl + /

2.语法

标签和属性都不区分大小写

元素可以省略结束标签

支持Boolean值的属性

允许属性值不适用引号

第二章标签，元素及属性

2.1 标签，元素及属性概念

2.1.1 标签概念

结构说明:

标签由<,>,/,英文单词或字母组成.并且把标签中<>包括起来的英文单词或字母称为标签名.

常见标签有两部分组成,我们称之为:双标签.前部分叫开始标签,后部分加结束标签.两部分之间包裹内容.

少部分标签由一部分组成,称之为:单标签.自成一体,无法包裹内容.

2.1.2 元素概念

从开始标签到结束标签的所有代码，就是HTML元素，如<p>HTML</p>。位于起始标签和结束标签之间的文本就是HTML元素的内容。

2.1.3 属性概念

为HTML元素提供各种附加信息的就是HTML属性。以“属性名=属性值”形式存在，放置在开始标签中。多个属性之间需要用空格隔开

2.2 文档头部标签

<head>标签是网页的头部标签，是所有头部元素的容器。<head>中的元素可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等。

2.2.1 设置页面标题标签<title>

2.2.2 引用外部文件标签<link>

2.2.3 内嵌样式标签<style>

用于用于内嵌CSS样式

2.2.4 <meta>标签（了解）

主要用来做网页的关键字，页面内容，作者信息等声明。

1、设置页面关键字

<meta name="keywords" content="前端，网页开发，学习">

2、设置页面说明

<meta name="description" content="关于web技术的笔记">

3、设置作者信息

<meta name="author" content="王大样，邮箱">

2.3 排版标签

2.3.1 标题标签（h）

特点：文字都有加粗，都有变大，独占一行

2.3.2 段落标签（p）

段落间间隔默认，可通过css改变

2.3.3 换行标签（br单）

在VS Code中，内容需要添加换行，则在右边添加空格再打br才会出现联想

2.3.4 水平线标签（hr单）

一般用于将标题和内同之间添加水平分割线

2.4 文本格式化标签

给文字添加加粗，倾斜，下划线，删除线等效果。

标签1	标签2	作用	说明
b	strong	加粗	ㅤ
u	ins	下划线	ㅤ
i	em	倾斜	ㅤ
s	del	删除线	ㅤ

2.5 媒体标签

2.5.1 图片标签(img)

注：标签和属性之间，属性和属性间都是以空格隔开；标签可以存在多个属性，并没有顺序之分

src：图片文件的路径+文件名。可以是相对路径也可以是绝对路径。

alt：图片加载失败时显示的文本，成功不显示。

title：图片标题，鼠标放在图片上，隔几秒会显示（title标签不仅仅可以用于图片标签，其他标签也可以用）

width和height：图片的宽高。只需要写一个属性，另一个属性自动等比例变形。

2.5.2 音频标签(audio)

注：目前音频文件只支持MP3，Wav，Ogg

src：音频路径（必有）

controls：显示播放的控件（必有）

autoplay：自动播放（部分浏览器不支持）

loop：循环播放

2.5.3 视频标签

注：目前视频文件只支持MP4，WebM，Ogg

src：音频路径（必有）

controls：显示播放的控件（必有）

autoplay：自动播放（谷歌浏览器加muted 属性可实现静音自动播放）

loop：循环播放

width 和 height：视频的宽高。只需要写一个属性，另一个属性自动等比例变形

2.6 链接标签（a）

href：为跳转地址，值可以为网站，其他html文件或# （表示空）

target：跳转方式

_self：默认值，将覆盖原网页

_blank：保留原窗口，在新窗口打开

2.7 列表标签

当网页中按照行展示关联性的内容,如:新闻列表,排行榜,账单等.

分为无序列表,有序列表和自定义列表.

2.7.1 无序列表和有序列表

标签组成:

标签名	说明
ul	表示无序列表整体,只用于包裹li标签
ol	表示有序列表整体,只用于包裹li标签
li	表示无序列表的每一项,用于包含每一行内容

示例:

2.7.2 自定义列表

标签组成:

标签名	说明
dl	表示自定义列表的整体,只用于包裹dt,dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

示例:

2.8 表格标签

2.8.1 基本标签

标签名	说明
table	表格整体,用于包裹多个tr
tr	表格每行
td	表格单元格,包裹内容

常见属性（实际开发通过css实现）:

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

示例:

2.8.2 表格标题和表头单元格标签

标签名	名称	说明
caption	表格大标题	表示表格整体大标题,默认在表格整体顶部居中位置显示(标签写在table标签内部)
th	表头单元格	表示一列小标题,通常位于第一行,默认内部文字加粗并居中显示

2.8.3 表格的结构标签(了解)

为了让表格的内部结构分组,突出表格的不同部分(头部,主体,底部),使语义更清晰(可以省略)

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

2.8.4 合并单元格

合并方式：左右合并(保留左) 上下合并(保留上)

注：同一个结构标签才能合并，不能跨结构标签合并

属性名	属性值	作用
rowspan	合并单元格数	跨行合并
colspan	合并单元格数	跨列合并

2.9 表单标签

2.9.1 input系列标签

用于在填写文本,选项或者搜索文本等场景.input标签通过不同的type属性值会展示不同效果

基本使用

标签名	type属性值	说明
input	text	文本框,用于输入单行文本
input	password	密码框,用于输入密码
input	radio	单选框,用于多选一
input	checkbox	多选框,用于多选多
input	file	文件选择,用于之后上传文件
input	submit	提交按钮,用于提交
input	reset	重置按钮,用于重置
input	button	普通按钮,默认无功能,之后配合js添加功能

文本占位符(文本框或密码框)

属性名	说明
placeholder	占位符,提示用户输入内容的文本

单选框(radio)

属性名	说明
name	分组,有相同那么属性值的单选框为一组,一组中同时只能有一个选中
checked	默认选中

重置和提交

重置和提交中value熟悉可以在按钮内给按钮命名

重置和提交功能需要在<form action=""> </form>框架中使用,做整体对象.

2.9.2 button按钮标签

在网页中显示用户点击的按钮.

标签名	type属性值	说明
button	submit	提交按钮,点击后数据给后端服务器
button	reset	重置按钮,点击之后恢复表单默认值
button	button	普通按钮,默认无功能,之后配合js添加功能

2.9.3 select下拉菜单标签

网页中提供多个选择项的下拉菜单表单控件,下拉菜单由父标签select和子便签option共同组成.前者表示菜单栏整体,后者表示下拉菜单的每一个选项.option中有属性optioned,为默认选中.,

2.9.4 label标签

用于绑定内容与表单关系.例如即使点击内容也照样能点击内容对应的按钮.

2.9.5 textarea 文本域标签

cols和rows属性分别规定文本域内的可见宽度和高度,但是在实际开发过程中针对样式效果推荐用css设置.

2.10 样式/节标签

标签	说明
style	定义文档的样式信息
div	定义文档的节
span	定义文档的节
header	定义section或page的页眉
footer	定义section或page的页脚
section	定义section
article	定义文章
aside	定义页面内容之外的内容
details	定义元素的细节
dialog	定义对话框或窗口
summary	为details元素定义可见的标题

2.11 字符实体

网页不认识多个空格,只认识空格,此时就需要添加字符实体

空格: &nbsp；

特殊符号：&特殊符号;

第一章 基础结构