html易忘点整理
meta标签
meta标签共有两个属性,它们分别是http-equiv
属性和name
属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
1、name属性
name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
2、http-equiv属性
http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新下载-->
<meta http-equiv="expires" content="0">
<!--禁止浏览器从本地机的缓存中调阅页面内容-->
<meta http-equiv="pragma" content="no-cache">
<!--清楚缓存,再访问这个网页需要重新下载-->
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
如何解决页面乱码问题?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
charset=utf-8 页面字符集
link标签
可以在title上显示小图标
<link rel="shortcut icon" href="brand/images/sydj.ico">
link标签内引入媒体查询,加上属性
media=“screen and (min-width:1200px)"
a标签
a标签添加title属性可以提供SEO
// 手机的通话功能
<a href="tel:010-81205678">010-81205678</a>
// 调取邮箱功能
<a href="mailto:mobile@cnpc.com.cn">cnpc.com.cn</a>
HTML嵌套规则:
<a>
不可以包含另一个a标签
p
元素不能包含任意块元素
HTML5结构标签
结构标签(块状元素)-有意义的div
<article>
标记定义一篇文章
<header>
标记定义一个页面或一个区域的头部
<nav>
标记定义导航链接
<section>
标记定义一个区域
<aside>
标记定义页面内容部分的侧边栏
<hgroup>
标记定义文件中一个区块的相关信息
<figure>
标记定义一组媒体内容以及它们的标题
<figcaption>
标签定义figure元素的标题
<footer>
标记定义一个页面或一个区域的底部
<dialog>
标记定义一个对话框(会话框)类似微信
【注意】在一个文档中,不能出现一个以上的<main>
元素。<main>
元素不能是以下元素的后代:<article>
、<aside>
、<footer>
、<header>
或 <nav>
。
新布局的意义
HTML5可以让很多更语义化的结构化代码标签代替大量的无意义的div标签,对搜索引起更友好。
1、这种语义化的特性提升了网页的质量和语义。
2、减少了以前用于css调用的class和id属性。
搜索
搜索引擎中页面的排名,title > h1 > h2
header、footer 头尾 section、article区域 nav导航 aside不重要的内容 figure > figuration、div 这会进入大纲算法
h5大纲工具,结构合理利于搜索引擎抓取http://h5o.github.io/
表单
fieldset
元素可将表单内的相关元素分组。
<fieldset>
标签将表单内容的一部分打包,生成一组相关表单的字段。
当一组表单元素放到 <fieldset>
标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
<fieldset>
标签没有必需的或唯一的属性。
<legend>
标签为 fieldset
元素定义标题。
// 只能上传安卓安装包
<input type="file" accept=".apk" >
// 只能上传苹果安装包
<input type="file" accept=".ipa" >
// 只能上传windows系统包装包
<input type="file" accept=".exe" >
表单属性
1、autocomplete属性
autocomplete
属性适用于<form>
标签,以及以下类型的<input>
标签:text,search,url,telephone,email,password,datapickers,range,color
。
<form autocomplete="on"></form>
2、autofocus属性
规定页面加载时,域自动地获得焦点
autofocus
属性适用于所有<input>
标签的类型
<input type="text" autofocus = "autofocus/>
3、multiple属性
规定输入域中可选择多个值
PS:mutiple
属性适用于以下属性的<input>标签
:email
和file
以及select
4、placeholder属性
提供一种提示,描述输入域所期待的值
<input type="search" placeholder="Search Content"/>
PS:placeholder
属性适用于<input>
标签type
属性值为:text
,search
,url
,telephone
,email
,password
。
5、required属性
规定必须在提交之前填写输入域(不能为空)
<input type = "text" required = "required" />
PS:requried
属性适用于<input>
标签type属性值为:text
,search
,url
,telephone
,email
,password
,date pickers
,number
,checkbox
,radio
,file
。