html-小记

h:标题 双标签	p：段落 双标签	br：换行 单标签
hr：水平分割线 单标签	div 通用内容容器	span 通用行内容器

HTML的属性

1. 什么是属性
   1. 属性可以提供一些额外的信息,这些信息不会直接显示在内容中.但可以改变标签的样式或数据使用
2. 定义格式
   1. 属性名 = 属性值
3. 属性的规范
   1. 同一个标签中属性的名称必须唯一
   2. 不区分大小写,建议使用小写
   3. 属性值可以使用单引号或双引号括起来,建议使用双引号
4. 常用的属性
   1. class : 定义元素的类名,用来选择和访问特定的元素
   2. id : 定义元素的唯一标识,在整个文档中必须是惟一的
   3. name : 定义元素的名称,一般用于表单数据提交到服务器
   4. value : 定义在元素内显示的默认值,一般常用于表单标签中
   5. style : 定义元素的css样式

div和span

:是一个通用的内容容器,没有特殊语义.
:是一个通用的行内容器,没有特殊语义,一般被用来编织元素以达到某种样式.
有语义的布局标签
header:网页头部
nav:网页导航
footer:网页底部
aside:网页侧边栏
section:网页区块
article:网页文章

常用属性:
class:定义元素的类名,用来选择和访问特定的元素
id:定义元素的唯一标识,在整个文档中必须是唯一的
name:定义元素的名称,一般用于表单数据提交到服务器
value:定义在元素内显示的默认值,一般用于表单标签中
style:定义元素的css样式

HTML特殊字符

原义字符	等价字符引用
<	<
>	>
"	"
’	'
&	&
空格

文本格式化标签

b：加粗	u：下划线	i：倾斜
s：删除线	strong：加粗	ins：下划线
em：倾斜	del：删除线

媒体标签

| 图片：

| 音频: <audio src=“路径”
controls(显示播放的控制器)
autoplay(自动播放(部分浏览器不支持)“)
loop(循环播放)> | 视频:<video src=“路径” controls(显示播放的控制器)
autoplay(自动播放(部分浏览器不支持)”)
loop(循环播放)> |
| — | — | — |
| 单标签 | 音频标签目前支持三种格式:mp3、Wav、Ogg | 谷歌浏览器可以让视频自动播放,但是必须是在禁音状态下muted |
| 案例示范:点击进入 | 案例示范:点击进入 | 案例示范:点击进入 |

• 路径：
  • 绝对路径：指目标下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
  • 相对路径：
    • 同级文件夹下：
      - 方法一：
      - 方法二：
    • 下级文件夹下：
      - 方法一：
      - 方法二：
    • 上级文件夹下:
      - 往上几级就增加几个…/
      - 方法:

连接标签

a标签
代码:超链接
- 场景: - 点击之后从一个页面跳转到另个页面 - 注意点: - #代表空连接

列表标签

无序列表	有序列表	自定义列表
ul:表示无序列表的整体,用于包裹li标签	ol:表示有序列表的整体,用于包裹li	dl:表示自定义列表的整体.用于包裹dt/dd标签
li:表示无序列表的每一项,用于包含每一行的内容	il:表示有序列表的每一项,用于包含每一行的内容	dt:表示自定义列表的主题
		dd表示自定义列表的针对主题的每一项内容
注意点: ul中只允许包含li li可以包含任意内容	注意点: ol中只允许包含li li可以包含任意内容	注意点: dl标签中只允许包含dt/dd dt.dd标签可以包含任意内容
特点: 列表的每一项前默认显示圆点标识	特点: 列表的每一项前默认显示序号标识	特点: dd前会默认现实缩进效果

表格标签

表格的基本标签

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

注意点:
表格合并
竖着用:rowspan
横着用colspan

• 标签的嵌套关系: table > tr > td
  

表格的相关属性

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

注意点:

• 实际开发时对于样式效果推荐使用css设置
  

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

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

注意点:

• caption标签书写在table标签内部
• th标签书写在tr标签内部(用于替换td标签)
• 
  

表单标签

标签名	作用	属性
form	表示表单标签	action属性,用于提交数据的路径
		method属性,提交表单的方式(get和post)
		autocomplete属性,是否记录补全(on和off)

表单项标签input系列的基本介绍

input可以通过type属性值的不同,展示不同的效果

标签名	type属性值	说明
input	text
input	password
input	radio	单选框,用于多选一 选项必须有相同的name属性值,value属性设置实际提交的值,cheked属性代表默认选中
input	email
input	chekbox	**复选框,(用于多选多)**选项必须有相同的name属性值,value属性设置实际提交的值,cheked属性代表默认选中
input	file	文件上传框
input	submit	提交按钮,用于提交
input	reset	重置按钮
input	button	普通按钮,默认无功能,配合js添加功能

type属性值:text

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

type属性值:radio

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

type属性值:file

属性名	说明
multiple	多文件选择

属性值	作用	注意
date	日期框
time	时间框
datetime-local	时间日期框
number	数字框
range	滚动条数值框	min最小值,max最大值,step步进值
search	可删除文本框
tel	电话框
url	网址框
hidden	隐藏域	value属性设置实际提交的值

其他常用表单项标签

标签名	作用	属性
select	表示下拉列表标签	与input标签常见属性相似
optgroup	表示下拉列表分组标签	label属性,设置分组名称
option	表示下拉列表项标签
	表示文本域标签	rows属性表示行数,cols属性代表列数

常见属性:
selected 下拉菜单的默认选中

textarea文本域标签

场景:在网页中提供可输入多行文本的表单控制件
常见属性:
cols;规定了文本域内可见宽度
rows:规定了文本域内可见行数
注意点:
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用css设置

lable标签
场景:常用于绑定内容与表单标签的关系
使用方法1:
使用label标签把内容包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
使用方法2:
直接使用label标签把内容和表单标签一起包裹起来
需要把label标签的for属性删除即可

表单标签

form
表单项标签