HTML文档创建
1.文档类型声明:<!DOCTYPE HTML> 这是HTML5标准的文档类型声明
他告诉了浏览器两件事: 本文档处理的是HTML文档
用来标记文档内容的HTML所属版本(在HTML5中版本号已经不在书写了,浏览器能够自动的探索出这里使用的是HTML5)
2.html元素 即根元素 此处表示文档HTML部分的开始
该元素包含两个子元素 head body
3.head元素 此处包含着文档的元数据(此处要总结的主要内容)
元数据向浏览器提供了有关文档内容、标记的信息、js脚本和对外部资源的引用(css样式表)。
head元素下面所包含的元素由title、base、meta、link、style、script、noscript
1.title元素
作用:设置文档的标题或者名称。浏览器通常将该元素的内容显示在窗口顶部或者标签页上。
每个HTML文档只能有一个,必须有一个title元素
2.base元素
作用:设置基准URL,让html文档的相对链接在此基础进行解析。
如果不用此元素,那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。
属性:href:设置基准URL
target 打开该HTML文档的方式
3.meta元素 用来定义文档的各种元数据
属性:name content charset http-equiv name属性用来表示元数据的类型 content属性用来提供值
用法1 <meta name="Author" content="鹏"> 指定当前文档的作者
<meta name="Keywords" content="html,前端,哇啦啦"> 用来描述当前网页的内容(已经被用来制造假象)可以让搜索引擎通过关键字搜索到
<meta name="Description" content="这是一段前端的测试文件,这是漫漫人生路的第一步"> 当前也面的说明
<meta name="Generator" content="EditPlus®"> 用来说明当前文档的生成工具
<meta name="application name" content="webworket"/> 如果将HTML网页看作一个应用程序 这里将指明 web程序的名称
还有一些扩展值 大家可以去W3C网站去找 例如:
<meta name="robots" content=" noindex"/> 表示不要索引本网页 还可以取值为noarchive 表示不要将本页存档或缓存 nofollow 表示不要顺着本页中的链接继续搜索下去
用法2 <meta charset="UTF-8"> 声明字符的编码格式
用法3 模拟HTTP标头字段
<meta http-equiv="refresh" content="10"> 在指定的时间里刷新页面(如果在时间后面添加上一个URL ,则是在指定的时间之后另外再载入一个页面)
<meta http-equiv="default-style" content="css1"> 指定页面的优先使用样式表,对应的content属性值应该和同一文档中style元素和link元素的title属性值相同
<meta http-equiv="content-type" content="text/html charset=utf-8"> 另一种指定文档编码方式的方法
4.link元素 指定外部资源
允许具有的父元素head noscript
局部属性 :href 指定link元素指向的资源的URL
: hreflang 说明所光联的资源使用的语言
:media 指定所关联的内容使用哪种设备
:rel 说明HTML文档所关联资源的关系类型
:sizes(这是HTML5新属性)指定关联图标的大小
:type 指定所关联资源的MIME类型 可以省
rel属性的可取值 stylesheet 载入外部样式表
help 链接倒当前文档的说明文档
author 链接倒当前文档的作者
prefetch 预先获取一个资源
icon 指定图标资源
! 如果网站标志文件位于(web服务器的根目录)浏览器会自动请求网站标志文件。所以一般不用link来载入标志文件
5 . style元素
作用:用来定义HTML文档的内嵌CSS样式
局部属性:type 由于浏览器只认识css一种机制,所以该值总是 text/css 可以省略
:edia 指定样式适用的媒体,即媒体查询
取值:screen 计算机显示器屏幕 print 打印预览的时候 braill盲文设备 aural 语音合成器 tv电视机(media在使用的时候通常会配合 AND NOT ,一起来配合使用 对于一些修饰width height)
For:<style media="screen AND (max-width:500px)" ><style/> 指的是在PC端 屏幕最大宽度为500px的设备使用,媒体查询多用于响应式网页的制作
style元素可以出现在HTML文档的各个部分,一个文档可以包含多个style元素,在使用模板引擎生成页面的情况下这个特性很有帮助,可以用页面特有的样式为模板定义样式提供补充
6. script 元素
作用:在文档中定义脚本或者引用外部脚本
局部属性:type (可有可无 浏览器会自动的认为加载了javascript )
:src 指定外部脚本文件的URL
:defer async(确定啥时候加载解析脚本文件 只可以和src一起使用)
:charset (指定外部资源的编码格式 只可以和src一起使用)