HTML笔记

HTML超文本标记语言。超文本——链接，标记——标签，带尖括号的文本。

常用标签

标题标签 h1~h6

双标签，独占一行

h1标签在一个网页中只能用一次，用来放新闻标题或网页logo

段落标签 p

双标签，独占一行

换行<br>与水平线<hr>标签 

单标签

浏览器不识别代码中的enter键换行

文本格式化标签

不换行，双标签

标签名	标签名	效果
strong	b	加粗
em	i	倾斜
ins	u	下划线
del	s	删除线

strong、em、ins、del标签自带强调含义（语义）。

图像标签 <img>

单标签，不换行

<img src="图片的URL">

src是用于指定图像的位置和名称，是<img>的必须属性 。

属性	作用	说明
alt	替换文本	图片无法显示的时候显示文字
title	提示文本	鼠标悬停在图片上的时候显示的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

超链接标签 a

双标签，不换行

<a href=""></a>

herf属性值是跳转地址，是超链接的必须属性。

 属性target="_blank" 新窗口跳转页面。

开发初期，不知道超链接跳转地址，herf属性值写 # ，表示空链接。

<a href="javascript:;"></a>

//点击不会跳转到顶部

音频标签 audio

<audio src=""></audio>

属性	作用	说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能。

在HTML5里面，如果属性名和属性值完全一样，可以简写为一个单词。

视频标签 video

<video src=""></video>

属性	作用	说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为了提升用户体验，浏览器一般在静音状态自动播放。autoplay属性生效要配合muted属性

列表

无序列表

ul嵌套li，ul是无序列表，li是列表条目。

ul里面只能包裹li标签，li标签里面可以包裹任何内容。

有序列表

ol嵌套li，ol是有序列表，li是列表条目。

ol里面只能包裹li标签，li标签里面可以包裹任何内容。

定义列表

dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述。

dl里面只能包裹dt和dd，dt和dd里面可以包裹任何内容。

一般用于网页的底部，帮助中心区域。

表格

table嵌套tr，tr嵌套 td/th。

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

 在网页中，表格默认没有边框线，使用border属性可以添加边框线。

表格结构标签：

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

合并单元格步骤：

1、明确合并目标

2、保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格的数量）

      跨行合并，保留最上单元格，添加属性rowspan

      跨列合并，保留最左单元格，添加属性colspan

3、删除其他单元格

表单

作用：收集用户信息

使用场景：登录页面、注册页面、搜索区域

input标签

input标签type属性值不同，则功能不同。

type属性值	说明
text	文本框，输入单行文本
password	密码框
radio	单选框
checkbook	多选框
file	上传文件

input标签占位文本 ：

<input type="" placeholder="提示信息">

 文本框和密码框都可以使用。

单选框

属性名	作用	说明
name	控件名称	控件分组，同组只能选中一个
checked	默认选中	属性名和属性值相同，简写为一个单词

多选默认选中也是checked属性。

上传文件 file

默认情况下，文件上传表单控件只能上传一个文件，添加mutiple属性可以实现多文件上传。

<input type="file" multiple>

下拉菜单

select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项，selected属性表示默认选中。

文本域 textarea

作用：多行输入文本

label标签

作用：网页中，某个标签的说明文本。

用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

增大点击范围：

• 写法一

       1、label标签只包裹内容，不包裹表单控件

       2、设置label标签的for属性值和表单控件的id属性值相同

<input type="radio" id="man"><label for="man"> 男</label>

• 写法二

       label标签包裹内容和表单控件，不需要属性。

<label><input type="radio"> 女</label>

按钮 button

<button type=""></button>

type属性值：

type属性值	说明
submit	提交按钮，点击后提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JS使用

如果省略type属性，功能是提交。

表单区域标签 form

<form action=""></form>

通常把所有的表单控件都放到form双标签里面，所有的表单控件需要让form 统一管理，才能有实际的功能。

action属性是发送数据的地址。

路径 

相对路径：从当前文件位置出发查找文件

.        当前文件所在文件夹

..       当前文件上一级文件夹

/        进入某个文件夹里面

绝对路径：从盘符出发查找目标文件