大前端入门基础知识，今天分享html5标签。
什么是a标签?
a标签的作用: 就是用于控制页面与页面之间跳转的a标签的格式: 需要展现给用户查看的内容a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转_self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self_blank: 用于在新的选项卡中跳转, 也就是新建界面跳转a标签中还有一个属性, 叫做title。 a标签中的title和img标签中的title一样, 都是用来控制鼠标悬停时显示的提示文本的注意点:1.a标签不仅可以让文字可以点击, 还可以让图片也能够被点击2.一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方3.如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://4.a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开例如：注意点:1.base标签必须写在head标签的开始标签和结束标签之间2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行1.什么是假链接?就是点击之后不会跳转的链接我们称之为假链接2.假链接存在的意义:在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接替换为真链接3.假链接的格式:1.#2.javascript：4.两者之间的区别:#的假链接会自动回到网页的顶部, 而javascript：的假链接不会自动回到网页顶部什么是锚点呢？1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的ID, 这样a标签才能在当前界面中找到需要跳转到的目标位置2.如果和HTML中的标签绑定一个独一无二的id呢?在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的id的3.所以要想实现通过a标签跳转到指定的位置分为两步3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值3.2告诉a标签你需要跳转到的目标标签对应的独一无二的id号码是多少格式:跳转到中部
我是中部
注意点:1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置格式:
跳转到锚点测试界面我是锚点测试界面
1.什么是列表标签?列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体2.HTML中列表标签的分类2.1无序列表(最多)(unordered list)2.2有序列表(最少)(ordered list)2.3定义列表(其次)(definition list)3.无序列表作用:给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分什么叫有先后之分?例如: 排行榜什么叫没有先后之分?例如: 中国有哪些城市4.无序列表格式:
li其实是英文list item的缩写list是列表的意思item是条目的意思所以结合起来就是 列表条目的意思5.注意点:1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的2. ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签无序列表应用场景:1.新闻列表2.商品列表3.导航条虽然ul中最好只放li标签, 但是在企业开发中, li标签中的内容可能会很复杂, 所以我们可以继续在li标签中添加其它的标签来丰富我的界面总结:1.一定更要记住ul标签中最好只放li标签2.但是li标签中还可以继续放其它的标签3.无序列表中的li标签中除了可以添加其它标签来丰富我们的界面以外, 还可以添加ul标签来丰富我的界面，也就是说ul中有li, li中又可以有ul什么是有序列表?有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分有序列表格式:
其它用法和ul都差不多, 也就是应用场景/注意点都和ul差不多什么是定义列表？1.定义列表的作用:1.1给一堆数据添加列表语义1.2先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息2.定义列表的格式:
其实dt和dd都是英文的缩写dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的3.定义列表的应用场景1.做网站尾部的相关信息2.做图文混排4.定义列表的注意点4.1 和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现4.2 和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签4.3 一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.推荐使用一个dt对应一个dd4.4 和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签1.什么是表单?表单就是专门用来收集用户信息的2.什么是表单元素?2.1什么是元素?在HTML中 标签/标记/元素都是指HTML中的标签例如:
a标签/a标记/a元素表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能3.表单的格式:4.常见的表单元素input标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同5.注意:表单元素一定要写在表单中例子：什么是label 标签？1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签3.绑定的格式:3.1将文字利用label标签包裹起来3.2给输入框添加一个id属性3.3在label标签中通过for属性和输入框中的id进行绑定即可什么是datalist标签？1.datalist标签作用: 给输入框绑定待选项2.datalist格式:3.如何给输入框绑定待选列表1.搞一个输入框2.搞一个datalist列表3.给datalist列表标签添加一个id4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可其他表单标签补充：邮箱:域名:
电话:
时间:
颜色:
什么是select标签？1.select标签作用: 用于定义下拉列表格式:注意点:1.下拉列表不能输入内容, 但是可以直接在列表中选择内容2.可以通过给option标签添加一个selected属性来指定列表的默认值3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类2.textarea标签作用: 定义一个多行输入框格式:注意点:1.默认情况下输入框可以无限换行2.默认情况下输入框有自己的宽度和高度3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入4.默认情况下输入框是可以手动拉伸的1.什么是video标签?作用: 播放视频格式:video标签的属性src: 用于告诉video标签需要播放的视频地址autoplay: 用于告诉video标签是否需要自动播放视频controls: 用于告诉video标签是否需要显示控制条poster: 用于告诉video标签视频没有播放之前显示的占位图片loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效muted:静音width/height: 和img标签中的一模一样video标签的第二种格式：1.格式:2.第二种格式存在的意义:由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式video标签的第二种格式存在的意义就是为了解决浏览器适配问题video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放3.注意点:3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现1.什么是audio标签?作用: 播放音频格式:注意点:audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样只不过有3个属性不能用, height/width/poster1.什么是详情和概要标签?作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息默认情况下是折叠展示, 想看见详情必须点击格式:概要信息
详情信息
以上标签都是没有语义的,都是用来修改样式的b(bold) 加粗文本, 没有任何语义的u(underline) 给文本天津下划线, 没有任何语义的i(italic) 将文本倾斜, 没有任何语义的s(strikethourgh) 给文本添加删除线, 没有任何语义的注意点:以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用strong == bins == uem == idel == sstrong语义: 定义重要性强调的文字ins语义(inseted): 定义插入的文字em语义(emphasized): 定义强调的文字del语义(deleted): 定义被删除的文字什么是字符实体？1.在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理2.什么是字符实体?在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体 空格, 一个就是一个空格, 有多少个就有多少个空格< 小于符号 <(less than)> 大于符号 >(greater than)© 版权符号此文以便于碎片化时间学习或者需要时查询。下一篇分享CSS。