HTML汇总梳理
学习前端半年有余，回头回顾基础也有不少新的发现和感悟，梳理一下主要知识。主要为《HTML & CSS: Design and Build Websites》和《HTML5: The Missing Manual》的读书笔记
概念
- 超文本标记语言
- web的骨架
- 一套标记标签
主要标签
- 文本：
机构化：标题h1、h2；段落：p；粗体b；斜体i；上下标：sup、sub；换行符br；水平线：hr；
语义化：strong、em、blockquote（较长的一段引用）、abbr（title属性写全称）、cite（参考文献）、dfn（定义 ）、address、ins、del、s（不重要的删除） - 列表
有序：ol、li
无序： ul、li
定义列表：dt、dt、dd - 链接：a
href=“#id”跳转页面某一位置，也可以是url+#id跳转其他页面内某一位置，url可以使绝对的也可以相对的；href=“mailto:emial‘直接打开邮件界面
target=“_blank"打开空白标签页 - 图像 img
src、alt、titile三个必写属性
图片色彩多的用jpeg，色彩单一的平面适用于png和gif - 表格 table、th、tr、td
colspan用于横跨列、rowspan用于横跨行，thead和tfoot用于长表格 - 表单form
form标签：action=url；method=POST/GET；
GET:短表单、只获取数据
POST：上传文件、非常长、包含密码等敏感信息、向数据库添加或者删除数据
input标签：text、password、textarea(默认值会提交)、radio（同一个name，checked只能一个）、checkbox、select+option（可添加multiple多选）、file、submit、image、hidden、date、email、url 、search
label可以把input包起来，也可以用属性for
组合表单：fieldset、legend（标记表单用途） - 其他
DOCTYPE
<!-- -->注释
块级元素div,内联元素span，主要是为了划分空间分配样式，便于阅读理解
内联框架iframe，src指向即可，限制高宽、
meta页面信息： name+content组合，可以是description（150内）、keywords（检索用）、robots（是否加入检索）、author、pragma（缓存信息）、expires（过期时间）
H5新特性
H5设计原则
兼容性，不破坏web, 不用XML的严格规范
实用至上
使用
- <DOCTYPE html>
- 在meta中可以加入charset指定编码，lang指定页面语言
- <link>CSS文件可以不用type=“text/css” <link rel=‘Stylesheet’ href=’’>
- 编写规范：1.包含<html>、<body>、<head>元素；2.标签全部小写3.为属性值加引号
- H5验证器，validator.w3.org
- H5浏览器支持情况查询：caniuse.com
- 浏览器使用统计网站：http://gs.statcounter.com
- 语义元素：不真正做任何事情，有含义便于对页面结构的理解，无障碍访问页面、搜索引擎优化。header\footer、article、hgroup(只放一些标题标签)、figure（插图）、aside、nav、section、footer（执法那个版权信息、来源一类的）
- 文本级语义：<time> 标记时间和日期、<output> 标记Jscript返回值、<mark>、
- 推荐思路：一级标题页面上最好只有一个；用列表的方式写一组链接；section适用于一标题开头的内容区块
- 为了获得H5的支持，可以分浏览器加载一个脚本文件
- 一些属性的出现就是为了ARIA，为无障碍阅读提供额外的信息，比如role
- 表单的改进：1.加入占位符placeholder，一般是示例不是提示说明2.增加自动焦点autofocus和自动完成autocomplete 3.增加自动校验required、novalidate、pattern(正则验证)、oninput验证 4.多文件提交multiple
- 表单验证分为浏览器端验证和服务器端的，一些验证属性浏览器不一定支持，http://tinyurl.com/polyfills 包含Js库可用于表单验证，对于浏览器支持不好的控件，用JS库是一个好的选择
- H5新增输入控件email、url、search、tel、number、range、时间控件、color
- <datalist>(和input配合使用)、<progress>、<meter>进度条和计量条、<command>、<menu>工具条和菜单
- 块级元素特点：比较霸道，自己独占一行；宽度、外边距以及内边距都可以控制；宽度默认是容器（父级宽度）的100%；是一个容器及盒子，里面可以放行内或者块级元素。p,h1-h16,dt这类文字组成的块级标签，内部不能放置其他块级标签
- 行内元素特点：相邻行内元素在一行上，一行可以显示多个；高、宽直接设置是无效的；默认宽度就是它本身内容的宽度；行内元素只能容纳文本或则其他行内元素。链接里面不能放链接，链接里面放块级元素可以转换一下块级模式
- 行内块元素img、input、td：相邻显示在同一个行中，中间有空隙；设置高宽是有效的；默认宽度是本身宽度
html设计理念
- 设计html尽量简洁，专注于重要的内容，优化搜索
- 尽量用语义化标签
- 具体使用哪个H5标签比较好的流程图
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
