基础标签简介（img/br/a/base/列表/表格/表单/video/audio/summary&detail/marquee/字符实体）

img标签：

1. img标签中的img其实是英文image的缩写,所以img标签的作用, 就是告诉浏览器我们需要显示一张图片;
2. img标签格式:< img src="">其实img标签中的src是英文source的缩写，所以img标签中的src就是用来告诉img标签, 需要显示的图片名称.
3. 注意点：

1. 和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行.
2. 如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可
3. 只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形

4.img中的其它属性:

• width: 宽度 & height: 高度
  在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高;
  如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示,
  如果img标签指定的宽高, 那么系统会按照指定的宽高来显示.

• title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容

• alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容。

br标签：

1. br标签作用: 换行
2. br标签格式:
/

3. br标签的注意点:

• 多个br标签可以连续使用, 使用了多少个br标签就会换多少行;
• 由于HTML的作用就是用来给文本添加语义, 而br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签。

a标签：

1. 什么是a标签?
   a标签的作用: 就是用于控制页面与页面之间跳转的；
   a标签的格式: < a href="指定需要跳转的目标界面">需要展现给用户查看的内容< /a >
2. a 标签的属性：

• target属性, 这个属性的作用就是专门用于控制如何跳转：
  _self: 用于在当前选项卡中跳转, 也就是不新建页面跳转. target默认属性。
  _blank: 用于在新的选项卡中跳转, 也就是新建页面跳转。

• title属性，a标签中的title和img标签中的title一样, 都是用来控制鼠标悬停时显示的提示文本的。

3. 注意点:

1. a标签不仅可以让文字可以点击, 还可以让图片也能够被点击；
2. 一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方；
3. 如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://
4. a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址。

base标签：

base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开。
例子：

注意点:

1. base标签必须写在head标签的开始标签和结束标签之间;
2. 如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行;
3. 如需要单独给某个a链接添加跳转方式，可以在那个a标签中单独指定跳转样式。

列表标签

作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体。
分类：

1. 无序列表(最多)(unordered list)
2. 有序列表(最少)(ordered list)
3. 定义列表(其次)(definition list)
   无序列表作用：给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分。

格式：

< ul>
    
需要显示的条目内容

li其实是英文list item的缩写；
list是列表的意思，item是条目的意思，所以结合起来就是 列表条目的意思。

注意点：

1. 一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的；
2. ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用；
3. 由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签。

应用场景
1.新闻列表
2.商品列表
3.导航条

表格标签

作用：用来给一堆数据添加表格语义。
其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式。
格式：

< table>
    
        需要显示的内容
    

表格标签中的table代表整个表格, 也就是一个table标签所包裹的内容就是一个表格。
表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行；
其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格。

注意点

• 表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框;
• 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现。

属性

1. width&height:可以给table标签和td标签使用。

• 表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度；
• 如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度；

2. 水平对齐和垂直对齐的属性：其中水平对齐可以给table标签和tr标签和td标签使用，垂直对齐只能给tr标签和td标签使用。

• 给table标签设置align属性, 可以控制表格在水平方向的对齐方式；
• 给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式
• 给td标签设置align属性, 可以控制当前单元格中内容在水平方向的对齐方式
  注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐。

3. 外边距和内边距的属性：只能给table标签使用。

• 外边距就是单元格和单元格之间的距离, 我们称之为外边
  距，默认情况下单元格和单元格之间的外边距的距离是2px；

• 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距，默认情况下内边距是1；

细线表格：
细线表格的制作方式:

1. 给table标签设置bgcolor;
2. 给tr标签设置bgcolor;
3. 给table标签设置cellspacing = "1px".
   注意点:
   table标签和tr标签以及td标签都支持bgcolor属性。
   （但是以上内容仅仅作为了解, 因为样式以后都是通过css来控制）

表格标签的其它标签：

1. 表格标题：这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中。
   注意点：
   caption一定要写在table标签中, 否则无效；
   caption一定要紧跟在table标签后面；
2. 标题单元格：这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字；
   到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th，td是专门用来存储数据的, th是专门用来存储当前列的标题的。

表格的结构

1. 由于表格中存储的数据比较复杂, 为了方便管理和阅读以及提升语义, 我们可以对表格中存储的数据进行分类。
   表格中存储的数据可以分为4类：

• 表格的标题(caption);
• 表格的表头信息(thead);
• 表格的主体信息(tbody);
• 表格的页尾信息(tfoot)

2. 表格的完整结构

    
表格的标题
    

        

            
每一列的标题
        
    
    

        

            
数据
        
    
    

        

            
数据
        
    

3. 注意点:

• 如果我们没有编写tbody, 系统会系统给我们添加tbody；
• 如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化；

合并单元格

1. 水平方向上的单元格合并：
   可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
   例如:

含义: 把当前单元格当做两个单元格来看待;
注意点：

1. 由于把某一个单元格当做了多个单元格来看待，所以需要删掉一些单元格才能正常显示；
2. 一定要记住单元格合并永远都是向后或者向下合并，而不能向前或者向上合并。
3. 垂直方向上的单元格合并：
   可以给td标签设置一个rowspan属性，来指定把某一个单元格当做多个单元格来看待（垂直方向）
   例如：

含义：把当前单元格当做两个单元格来看待。

表单标签

1. 什么是表单？
   表单就是专门用来收集用户信息的；
2. 什么是表单元素？
   2.1 什么是元素？
   在HTML中标签/标记/元素都是HTML中的标
   签，例如< a >a标签/a标记/a元素。
   2.2表单元素其实还是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能。
3. 表单的格式：

    <表单元素>

4. 常见的表单元素：
   4.1 input标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同。
   常见的input属性
   明文输入框：

    账号:

暗文输入框:

    密码:

给输入框设置默认值:

    账号:

    密码:
`

单选框：

    性别:
    男
    女
    保密

注意点:
1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值;
2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性;
3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值。

多选框:

    爱好:
    篮球
    足球
    棒球
    足浴

按钮：

1. 普通按钮：可以通过value属性来给按钮指定标题；
   作用：配合JS来完成一些操作。

2. 图片按钮：可以用指定图片作为按钮；
   作用：同普通按钮一样，可以配合JS来完成一些操作。

3. 重置按钮：
   作用：用于清空表单中已经填写好的数据；
   注意点：如果想要修改重置按钮默认的按钮标题可以通过Value属性来修改。

4. 提交按钮：
   作用：将表单这种已经填写好的数据，提交到远程服务器。
   注意点：要想把填好的数据提交到远程服务器，必须具备两个条件：
5. 需要给form表单添加一个action的属性，通过这个action属性指定需要提交到的服务器
   地址；
6. 需要给需要提交到服务器的表单元素添加一个name属性。

隐藏域：
作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器。

H5新增input标签属性：

    可以自动校验输入的内容是否符合邮箱的格式：
    邮箱:

可以自动校验输入的内容是否是URL地址:
域名:

    输入框中只能输入数字:
    电话:

可以通过日历来选择时间:
时间:

    可以通过取色板来选择颜色:
    颜色: 

4.2 label标签，用于将文字和输入框关联起来。

1. 默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定;
2. 要想让输入框和文字绑定在一起, 那么我们可以使用Label标签;
3. 绑定的格式:
   3.1 将文字利用label标签包裹起来
   3.2 给输入框添加一个id属性
   3.3在label标签中通过for属性和输入框中的id进行绑定即可。

账号:

    账号:

    密码:

4.3 datalist标签:
作用：给输入框绑定待选项。
格式：

如何给输入框绑定待选列表:
1. 写一个输入框；
2. 写一个datalist列表；
3. 给datalist列表标签添加一个id;
4. 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可。

请输入你的车型: 

4.4 select 标签：
作用：用于定义下拉列表。
格式：

    
        列表数据
    

    
        朝阳区
        昌平区
        通州区
    
    
        天河区
        越秀区
        黄浦区
    

注意点：
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容;
2.可以通过给option标签添加一个selected属性来指定列表的默认值;
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类。

4.5 textarea标签:
作用: 定义一个多行输入框;
格式：

注意点：
1.默认情况下输入框可以无限换行；
2.默认情况下输入框有自己的宽度和高度；
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入；
4.默认情况下输入框是可以手动拉伸的（如设置resize: none则无法改变输入框大小）；
5.注意：
表单元素一定要写在表单中。

video/audio标签：

1. video标签：
   作用：用于播放视频。
   格式一：

格式二：

属性：
src: 用于告诉video标签需要播放的视频地址；
autoplay: 用于告诉video标签是否需要自动播放视频；
controls: 用于告诉video标签是否需要显示控制条；
poster: 用于告诉video标签视频没有播放之前显示的占位图片；
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放；
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效；
muted:静音；
width/height: 和img标签中的一模一样。

格式二存在的意义：
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的，这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式，其存在的意义就是为了解决浏览器适配问题。
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放。

注意点:

1. 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放;
2. 在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现。

2.audio标签：
作用：用于播放音频。
格式：同video一样，具有两种格式。

注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster,这与播放产品的性质有直接关系。

详情和概要

什么是详情和概要标签?
作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息；默认情况下是折叠展示, 想看见详情必须点击。
格式:

    
概要信息
    详情信息

    
郑伊健
简介：郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。1991年...

marquee

作用: 跑马灯
格式：

内容

属性:
direction: 设置滚动方向 left/right/up/down(默认left)；
scrollamount: 设置滚动速度, 值越大就越快；
loop: 设置滚动次数, 默认是-1, 也就是无限滚动；
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回。
注意点:
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好。

骑着马儿看着灯
骑着马儿看着灯
骑着马儿看着灯
骑着马儿看着灯


骑着马儿看着灯
骑着马儿看着灯

骑着马儿看着灯

骑着马儿看着灯
骑着马儿看着灯

字符实体

1.在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理。
2.什么是字符实体?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体。
3.常见的实体字符：

QQ截图20170624195808.png