HTML基础3--结构及语法元素

HTML 头部

    
    


    
公众号：伊洛的小屋

头部是包含在 元素里面的内容，head 里面的内容不会在浏览器中显示，它的作用是包含一些页面的元数据

标题

元素

的内容会出现在页面中

元素

元数据就是描述数据的数据，HTML中用到的就是，比如指定文档中字符的编码

添加作者和描述

元素包含了name 和 content 特性

关于页面内容的关键字的页面内容的描述是很有用的，可能让你的页面在搜索引擎的相关的搜索出现得更多(SEO)
NOTE: SEO(搜索引擎优化) 是一种让网站在搜索引擎结果中更加清晰, 帮助将搜索结果更靠前搜索引擎网页，跟随页面之间的链接，并索引找到的内容

设定主语言

通过添加lang属性到HTML开始标签中来实现

结构元素

HTML5定义了一组新的语义化结构标记来描述网页内容。虽然语义化结构标记也可以使用HTML4标记进行替换。但是它可以简化HTML页面设计，明确语义化更适合搜索引擎检索和抓取。在目前主流的浏览器中已经可以用这些元素了，新增语义化标记元素如
header：表示页面中一个内容区块或整个页面的标题
footer：表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息
section: 表示页面中的一个内容区块，入章节、页眉、页脚、页面中其他的部分。它可以与h1/h2/h3/h4/h5/h6等元素结合使用，标记文档结构
article: 表示页面中一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章
aside： 表示article元素内容之外的，与article元素的内容相关的辅助信息
nav: 表示页面中导航链接部分
main： 表示网页中主要内容。主要内容区域指与网页标题或应用程序中本网页只要功能直接相关或进行扩展的内容
figure： 表示一段独立的流内容。一般表示文档主体流内容中的一个独立单元。可以使用figcaption元素为figure元素组添加标题

功能元素

video： 定义视频，比如电影片段和其他视频流

audio: 定义音频，比如音乐或其他音乐流

embed：用来插入各种多媒体，格式可以是midi,wav,aiff,au,mp3等

mark: 只要用来在视觉上向用户呈现那些需要突出显示或者高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词

高亮

dialog： 定义对话框或窗口

打开对话窗口

bdi: 定义文本的文本方向，使其脱离其周围的文本方向设置
figcaption：定义figure元素标题
time： 表示日期或时间，也可以同时表示两者
canvas：表示图形，如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但是可以把一个api展现给客户端JavaScript，以使脚本能够把想绘制到这块画布上
output：表示不同类型的输出
source: 为媒介元素定义媒介资源
menu：表示菜单列表，当希望列出表单控件时使用该标签

    
光明
    
黑暗

ruby: 表示ruby注释（中文注音或字符）
rt： 表示字符（中文注音或字符）的解释或发音
rp: 在ruby注释中使用，以定义不支持ruby元素的浏览器所显示内容
wbr: 表示转换行。wbr元素和br元素的区别，br元素表示此处必须换行；而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽时，不进行换行，而当宽度不够时，主动在此进行换行
command: 表示命令按钮，如单选按钮，复选框按钮
detail: 表示用户要求得到并且可以得到得到细节信息。它可以与summary元素配合使用。summary元素提供标题和图例。标题是可见的。用户单击标题时，会显示出细节信息。summary元素应该是detail元素的一个子元素
summary：为detail元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表
datagrid：datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表
keygen：表示生成密钥
progress： 表示运行中的进程，可以使用process元素来显示JavaScript中耗费的时间的函数进程
meter： 度量给定范围内的数据
track：定义用在媒体播放器中的文本轨道

表单元素

通过type属性，HTML5为input元素增添了很多类型
tel： 表示必须输入电话号码的文本框
search ： 表示搜索文本框
url: 表示输入URL地址的文本框
email： 表示必须输入电子邮箱地址的文本框
datetime： 表示日期和时间的文本框
date：表示日期文本框
mouth: 表示月份文本框
week: 表示周几文本框
time: 表示时间文本框
datetime-local: 表示本地日期和时间文本框
number: 表示输入数字的文本框
range：表示范围文本框
color：表示颜色文本框
在发送服务器之前，进行输入类型的检查，意味着有更少的时间等待反馈