HTML5常用标签及其属性设置

一、Html5的基本结构








网页的内容


二、head标签内常用标签

1、meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息。常用属性:
⑴charset属性:设置文档的字符集编码格式,一般设置为UTF-8。
例:HTML5中设置编码


⑵http-equiv属性:需要配合content属性使用,提供了content属性的信息/值的HTTP头。
例1:HTML4.01中设置编码


例2:每隔 30 秒刷新一次,content属性的值为时间,单位秒


⑶name属性:使用方法同“http-equiv”,将我们的信息写给搜索引擎看。
⑷content属性:配合http-equiv属性或name属性使用。
2、title标签:浏览器标签页显示的标题
例:

xxx网页标题

3、link标签:链接一个外部样式表,其常用属性有:
⑴rel属性:声明链接文件的类型,此处可选stylesheet或icon
⑵type属性:可以省略
⑶href属性:表示链接文件的路径地址(可以是网络地址)
例:

//设置引用的css文件

//设置网页标签

三、body标签内常用标签

标签的分类
块级标签:显示为块,会自动换行,一个标签占用一行。
行级标签:按行从左往右逐一显示。
1、常用块级标签:
⑴h1-h6标签:标题标签,自动加粗,h1最大,h6最小。
例:

标题1

⑵hr标签:水平线标签,添加一条水平线
例:


⑶p标签:段落标签
例:

第一段内容

⑷br标签:换行标签
例:


⑸blockquote标签:引用标签,内容在浏览器会左右缩进40像素。cite属性,表明引用的来源,不会显示。
例:

引用的一段内容

⑹pre标签:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体,不使用之前设置好的字体。 2、代码中的换行、空格等元素能在浏览器中显示。
例:

//正常情况,内容1内容2会在一行,这里会显示两行
内空1
内容2

2、基于布局的块级标签
列表:无序列表、有序列表、定义列表
⑴ol标签:有序列表
例:

  1. 列表项1
  2. 列表项2

⑵ul标签:无序列表
例:

  • 列表项1
  • 列表项2

⑶dl标签:自定义列表
例:

列表标题
列表描述项,可以有很多项,内容会缩进

可以用于实现图文混排:
父元素dl使用position:relative;
子元素dt,dd使用position:absolute;设置合适的left,top;

3、常见的行级标签
⑴span标签:文本标签,无实际意义,用于包裹某部分文字,修改特定样式
例:

文字

⑵img标签:图片标签,属于行内块级标签,其常用属性:
src:表示引用图片的地址,路径地址的写法:相对路径。
height和width:图片的高度和宽度。可以用CSS样式代替
title:图片标。当鼠标指上之后显示的文字
alt:当图片无法显示的时候,显示的文字
例:

图片1

⑶em标签:表示倾斜强调,显示为倾斜。
⑷strong:表示加粗强调,显示为加粗。
⑸b:显示为加粗。
⑹i:显示为倾斜。
strong、em、b、i的区别
a、Strong、em都能表示强调,Strong为粗体,em为斜体,而Strong的强调程度比em高。
b、Strong和b都能加粗,em和i都能倾斜,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。
例:

倾斜强调
加粗强调
加粗
倾斜

⑺q标签:短引用,会自动加上双引号。
例:

被双引号括起来的内容

⑻small/big标签:缩小/放大字体,可以多层嵌套直至上限或下限。
例:


小小

⑼a标签:超链接标签,常用属性:
href:超链接的路径,可以是网络链接,也可以是本地文件。
target:跳转页面打开的位置。_self自身页面,_blank新页面。
title:鼠标指在超链接上显示的名称。
rel:指定从源文档到目标文档的关系(上/下一篇),搜索引擎会利用该属性获取更多的有关链接的信息。
rev:指定从目标文档到源文档的关系。
例:

这里是position1//这里是很长的内容
//#前面可加上url,如list.html#position2
跳转到position1

⑽s标签:有误文本,文字上显示删除线。
例:

带删除线的文字

⑾cite标签:显示为倾斜,常用于书、画作、作品的引用。
例:

引用自xxx作品

⑿code标签:对文档中的文本进行格式化,一般放计算机代码,不保留代码格式。
例:

一段电脑代码

⒀bdo标签:设置文本显示方向,属性:
dir="ltr"表示从左往右,dir="rtl"表示从右往左
例:

12345//显示为54321

⒁kbd标签:表示需要用户用键盘输入的内容,浏览器显示为等宽字体。
例:

请按Esc,退出全屏。

⒂sup标签:上标文本,sub标签:下标文本。可用于数学/化学公式书写。
例:

X2//X的平方

⒃u标签:为文字加上下划线。
例:

带下划线的文字

⒄mark标签:高亮或标记文本,显示为黄色背景。
例:

高亮的文字(黄色前景)

⒅input标签:输入标签,属于行内块级标签,常用属性:
type:输入框类型,可选值:text、password、hidden、checkbox、radio、submit、reset、file、image、button、email、url、date、time、month、week、number、range、color。
name:输入框别名,在form表单提交数据时,用于定位数据。
value:输入框的默认内容。
checked:checked="checked"表示默认选中。
disabled:disabled="disabled"设置控制不能使用(不可点击或不可编辑)。
H5新增属性
form属性:可以使input不用写在form标签下,也能通过表单提交数据,通过设置form的id确认属于哪个表单。
例:

autocomplete属性:自动完成功能(form标签中使用),记录用户之前输入的内容,并在用户下次输入时提示用户输入。属性值:on/off。
提示:某些浏览器中,可能需要手动启用自动完成功能。
autofocus属性:自动获得焦点,autofocus="autofocus"只能获得一个焦点。
placeholder属性:提示内容,当输入框有value时,提示内容消失。
required:required=“required”,表示必填,否则停止提交。
pattern:使用正则表达式验证input的模式。
例:

//只能输入三个字母的输入框,提交时检查

⒆select标签:下拉选择框
select标签属性:
name属性:写在select标签里,所有选项只有一个name。
子标签option标签,常用属性:
value属性:当option没有value属性时,往后台传递的是中间的文字,当有value属性时,传递的是value的属性值。
title属性:鼠标之上后现实的文字。
selected属性:selected=“selected”,设置为默认选项。可简写为selected。
H5新增属性
form:规定文本区域所属的一个或多个表单。值:form设置的id。
size:规定下拉列表中可见选项的数目,会影响select控件高度。
name:规定下拉列表的名称。
data-*:用于存储页面或应用程序的私有定制数据。
例:


⒇textarea标签:文本域,其常用属性 :
cols:文本区内的可见宽度。
rows:文本区内的可见行数。
disabled:禁用文本域,不可编辑。
name:文本域的名称。
readonly:文本域为只读模式。
H5新增属性
form:规定文本区域所属的一个或多个表单。
maxlength:文本区域的最大字符数。
placeholder:预期值的简短提示。
wrap:表单中提交时,文本区域中的文本如何换行。值:hard或soft。
例:


//显示提示的文本域,标签内容不能有空行,最多只能有一个换行

4、表格标签及属性
⑴table标签:表格的顶级标签,代表一个表格。
⑵th标签:表格的表头,显示为加粗字体,一个th代表有一列。
⑶tr标签:表格的行,一个tr代表一行。
⑷td标签:表格的列,用在tr的下级,一个td代表一列。
属性:
width/heigh:单元格的宽高。
bgcolor:单元格的背景颜色。
align:单元格中的文字水平对齐方式。值:left、center、right。
valign:单元格中的文字垂直对其方式。值:top、center、bottom。
border:表格的边框的宽度,值为数字。这个值>0时,单元格也会出现1 像素宽的边框。
cellspacing:单元格边框的间距,值为数字。
cellpadding:单元格的内边距。
bordercolor:边框颜色。
background:背景图片。可用于th,td。
例:

第一列表头 第二列表头
第一行第一列内容 第一行第二列内容
第二行第一列内容 第二行第二列内容

5、表单
⑴form标签:用于表单提交
form的两个属性:
action-表单提交的服务器地址
method-表单提交数据的方法,值:get或post
get方法:提交的数据跟在url后面,在地址栏可见,长度有限制,无法提交过多数据。
post方法:提交的数据看不到,长度无限制,可提交更多数据。

其它标签
⑴figure标签:组合标签,用于显示图片及图片标题
他有两个子标签:img标签(图片)和figcaption标签(图片标题)
例如:

图片1
图1

⑵div标签:分区标签(最常用的标签之一)
例:

⑶aside标签:定义其所处内容之外的内容,aside 的内容应该与附近的内容相关。(H5新标签)
提示:aside标签的内容可用作文章的侧栏。
⑷article标签:规定独立的自包含内容。(H5新标签)
一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

你可能感兴趣的:(笔记)