html标签属性

html标签属性

1. !DOCTYPE html

DTD：文件类型声明

放在html文件的第一行

2.html

html:html文件对，里边通常包含head和body两部分

• lang：html中设置的属性，属性值定义该html文件的语言，en是英文，ch是中文

3.head

head：这里的head不是网页头部的意思，而是网页配置信息存放的位置。

head内没有属性可以设置，所以下边的三级标题都是body中可以设置的标签

3.1style

style：样式标签，在style标签里边可以通过div标签的class属性值来设置该div的样式

3.2.title

title：在head标签中配置，也是一个标签，用来配置在网页标题栏中显示的网页标题名字

3.3link

link：链接标签，声明在head中，表示要引入哪些文件贡该html使用

• rel:关系属性，表示连接文件与该文件的关系
  • stylesheet：样式表属性值，表示链接的文件是一个提供样式的文件
  • icon：网页的标题旁的图标。
• href：连接地址属性，表示链接文件的具体路径

3.4meta

meta：元标签，配置在head标签中，可以根据属性配置很多配置信息

• name：name属性贯穿整个html文件，通过设置不同的属性值可以配置不同的配置信息
  • KeyWords：name中的属性值，用来配置关键字，当搜索引擎SEO在搜索时会根据这里检索。
  • Description：描述，就是在搜索引擎中搜索结果中下边的小字

• content：内容属性，与name同时用，就是设置name属性中属性值的内容。

4.body

body:网页真正显示的数据，就是网页头部，网页内容，网页尾部都不在这里配置

body内没有属性可以设置，所以下边的三级标题都是body中可以设置的标签

4.1.h

h(headline):标题标签，在body标签中使用，有1-6级，其中h1标签最大，h6标签最小

4.2.p

p（paragraph）：段落标签，在代码编辑文本段落时用回车换行段落，在页面展示上是不会换行的，所以我们每一个段落都需要用p标签包住，一个p标签中的内容，相当于一个段落。

4.3div

div（division）：分割标签，能够将整个页面分割成多个小的模块，每一个模块都相当于一个盒子，盒子里边还可以再放盒子，将一个盒子再划分为多个模块儿，div里边也可放任何的其他标签。

• class：div中的属性，为一个div设置一个唯一名，可以通过这个名指定到这个div

4.4ul

ul （unordered list）：无序列表，与li标签组合使用，只能嵌套li标签，li标签中能够嵌套任何标签。

4.5ol

ol（ordered list）：有序列表，同ul标签，只是他们两个的前缀一个有序，一个无序，只能嵌套li标签，必须跟li标签组合使用

• type：类型，排序前缀的类型可以是1（数字排序）,a(小写字母排序)，A（大写字母排序），i（小写罗马数字排序），I（大写罗马数字排序）
• start：起始，用阿拉伯数字设定起始值从数字几开始排序
• reversed：翻转，按降序排序，只有属性，不需要写属性值

4.6dl

dl（definition list）：定义列表，子列表只能包含多个dt和dd标签。

• dt：data teram：数据项，数据的名字
• dd：data definition：数据定义，数据说明，说明dt中的数据项

4.7img

img(image):图片标签，可以通过该标签向网页中插入图片，但是图片不是真正的插入到了网页中，而是通过src路径被引用到了网页中，真正的图片一般存放在该目录下的images子目录下。

**注意：**如果想要图片按列的形式显示，就需要将每个img放到一个p标签中

• src（soource）：来源属性，属性值指定图片真正的路径，路径名必须保证完整，否则会获取失败。
• alt（alternate）：替代品属性，属性值内容是在图片没有加载成功时显示的信息，也会作为网页朗读器的朗读内容
• width：宽度，用来设置一个图片的宽度，默认单位为像素px
• heigth：高度，用来设置一个图片的高度，如果只设置了宽度没有设置高度，那么图片会按照原图片的大小根据宽度的比例放大或缩小高度

4.8a

a(anchor):锚点，超链接标签，用来定义一个超链接，指向另一个html网页，能够实现页面的跳转。

• href（hyper text reference）：超文本引用，a标签中的属性，用来指定跳转的地址，可以是相对路径，可以是绝对路径，也可以是网络地址访问路径

  • mailto：href中的属性值前缀，以这个为前缀说明该链接是一个发送邮件链接

  • tel(telphone):href中的属性值前缀，以这个为前缀说明该链接是一个电话链接

  • #：跳转到顶部

  • #footer：挑战到底部

  • javascript:;:禁止跳转

  • 什么也不填：刷新页面

• target：目标，a标签中的属性，用来指定访问页面的方式，默认是在本页面中访问链接页面，属性值更改为blank以后，就是在新页面中打开链接页面，原页面保留

  • _self:本页面那跳转
  • _blank:新页面跳转

4.9audio

audio：音频标签，该标签定义一个音频播放器，可以在浏览器中设置音频

• controls：显示播放组件属性，没有属性值。
• src（source）：来源，指定音频的来源路径。一般的音频格式为MP3和ogg格式文件
• loop：循环，只有属性，在音频标签中声明，设置后该音频就会循环播放
• autoplay：自动播放，只有属性，当访问该页面时，音频就会自动播放

4.10video

video：视频标签，该标签定义一个视频播放器，其属性作用与audio相同

• controls：播放器空间，只有属性，设置了该属性，则会显示该视频播放器组件
• autoplay：自动播放，只有属性，设置了该属性，则会在页面加载完成时自动播放
• src（source）：来源，指定视频的来源路径，视频格式可以是mp4/ogv/webm格式
• loop：循环，只有属性，设置了该属性，则会循环播放视频
• width:设置视频的宽度
• height：设置视频的高度

4.11区块标签

在之前将页面分区用的都是div分割标签，但是这样会显得代码十分多，十分冗杂，html5

推出了新的区块标签，能够直接定义分区。

• section：部分，文档的区域，语义比div大，多个div可以放到一个section中
• article：文档的核心文章，会被搜索引擎主要抓取
• aside：文档非必要相关内容，比如说广告
• nav：导航栏
• header：页头
• main：网页核心部分
• footer：页脚.

4.12b、i、u标签

b（bold）：加粗，为字体加粗

i(incline):倾斜，使字体倾斜

u（underline）：下划线，为字体添加下化线

4.13strong、mark、em

strong:强调标签，效果也是使文字加粗

mark：标记，为文字加黄色底色

em：使文字倾斜

4.14figure、figcaption

figure：图标签，作为图片的存放标签，使每个图片作为一个单独的个体

figcaption：图标题标签，是figure的子标签，为图设置标题

4.15span

span:当加入该标签后文字并不会有什么变化，但是该标签可以通过css样式设置很多文字样式

4.16form

form：表单标签，提交一组数据

• action：表单提交的目标，就是提交到哪里
• method：提交的方式，与post和get两种方式

4.17input

input：输入，是向表单中输入信息的标签，input的类型有很多，属性也有很多，input是单标签

• type：类型

  • text：文本框

  • radio：单选按钮，单选按钮要有value值，向服务器提交的就是value值，单选按钮加一个checked属性就会默认选择该按钮，想要实现单选的功能还需要将多个按钮设置相同的name属性值，单选按钮的分组就是按照name属性值分组的。

  • checkbox：多选框，用法与单选框相同

  • password：密码框，在该框输入的文本会被隐藏掉，保证私密性

  • button：普通按钮

  • reset:重置按钮，点击之后就会初始化表单内容

  • submit：提交按钮，点击后就会将表单信息提交给服务器

  • color：颜色属性值

  • date、time：日期时间属性值

  • email：邮件属性值

  • file：文件属性值

  • number：数字输入属性值

    • min：最小值
    • max：最大值

  • range：拖拽条

    • min：最小值
    • max：最大值

  • search：搜索属性值

  • url：网址输入属性值

• value：默认值，就是文本框中默认存在的值，按钮中值

• placeholder：提示标签，就是在文本框中提示你应该输入什么，而不是真实存在的值

• disabled：锁死的，加上该属性，该文本框就不能被修改了

• required：必填，加上该属性就说明该文本框是不能为空的

• list：列表，属性值与datalist的id绑定

4.18lable

lable：绑定，在不是用这个标签之前，当我们点击按钮后边的文字时是无法选中这个按钮的，这个标签就是将按钮和后边的文字绑定起来，只需要将input标签和后边的文字放到lable标签中即可

4.19select

select:下拉框标签，子标签使用option，设置可以选择的选项，option标签不能单独放置，select标签中只能放置option标签

4.20option

option：选项，不能够单独存在，必须作为select的子标签。

• value：提交给服务器的值，不一定与显示的值一样

4.21textarea

textarea：文本区域，多行文本框，用来定义一块文本区域，用户可以在里边编写文本。

• rows：行属性，定义多少行
• cols：列属性，定义多少列

4.22datalist

datalist:数据列表标签，通过id值与input标签的list属性值实现，实现以后当在文本框中输入文本时就会得到datalist中的提示。

4.23table

table：表格标签，设置一个标签，子标签为 tr，孙标签为td

• border：边框属性，设置边框的宽度，没有该属性表格默认不显示边框，border默认是双线表格。
• cellpadding：文字与单元格边框的距离
• cellspacing：单元格边框之间的距离，设为0就成为单线表格
• border-collapse：合并边框

4.24caption

caption：表格标题标签，通常在table的所有tr前，作为表格的标题。

4.25tr、th、td

tr:表格行

th：表格头

td：表格数据

tr是th和td的父标签，tr用来定义表格的一行，th用来定义表格单格的标题，放在第一个tr中，td就是数据格，一个tr中有几个td就代表着页面上一行中有几个数据格

• rowspan：跨行属性，表示跨多少行，可以在th和td标签上使用
• calspan：跨列属性，表示跨多少列，可以在th和td标签上使用

4.26thead、tbody、tfoot

thead：表头标签，在之前表格的基础上设置的，将tr包裹th的标签都放到这里，表示这是标题

tbody：表体标签，里边存放表的数据体

tfoot：表脚标签，一般用来表体内容的汇总，在表的底部

新学习的标签

4.27pre

pre（preformatted）：预定义格式标签，按照编辑器里面预先设置好的格式显示到页面上

4.28iframe

iframe：内联框架标签，可以在一个html中内嵌一个页面

• iframeborder：设置内嵌页面的边框宽度，0就是没有边框

单标签

目前学到的单标签

• meta
• input
• img
• link

标签元素类型划分

标签元素类型分为三种：行内元素、块级元素，行内块儿元素

• 行内元素：span、a、格式化标签

• 块级元素：div、h1-h6、列表标签、p标签

• 行内块元素：img、audio、video