HTML强化知识

yesy
194 阅读5分钟

HTML常见元素与理解

head中的元素

  • meta
  • title
  • style
  • link
  • script
  • base

body中的元素

  • div/section/article/aside/header/footer
  • 段落 p
  • 行内元素 span/em/strong
  • 表格元素 table/thead/tbody/tr/td
  • 列表元素 ul/ol/li/dl/dt/dd
  • 链接 a
  • 表单元素 form/input/select/textarea/button

重要属性的理解

  • meta

    <meta charset="utf-8">

    页面使用utf-8的字符集，基本上utf-8包括了所有字符

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

    适配移动端的第一步：加上viewport

    viewport 视口

    width=device-width 视口宽度=设备宽度

    initial-scale=1.0 初始化缩放比例为1

    maximum-scale=1.0 最大缩放为1

    user-scalable=no 用户不能进行缩放

  • base

    <base href="/">

    指定基础路径，所有路径都按这个路径进行计算。

  • a

    a[href,target]

    target规定在何处打开目标 URL。仅在 href 属性存在时使用。

    常用：_self 默认， _blank 在新窗口打开

  • form

    form[action,target,method,enctype]

    action:规定当提交表单时向何处发送表单数据。

    target:规定在何处打开 action URL

    method:提交方式 get/post

    enctype:规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）, 主要有urlencoded(提交文本)/form-data(数据编码后提交，可以上传文件)

  • label

    label[for]

    <label for="radio1"></label>radio1是单选框的ID

    "for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值.

  • input type="radio"

    name相同的里面只能选一个

如何理解HTML

HTML是有大纲的文档。

查看结构化文档：h5o.github.io/

避免写出无语义无结构的文档。

HTML版本

  • HTML4/4.01 基于 SGML
  • XHTML/XML(可扩展的严格的标记语言)
  • HTML5 基于 HTML4 (相对XML没有那么严格了)
HTML4 XHTML HTML5
标签允许不结束 标签必须结束 标签允许不结束
属性不用带引号 属性必须带引号 属性不用带引号
标签属性可大写 标签属性必须小写 标签属性可大写
Boolean属性可省略值 Boolean属性必须写值 Boolean属性可省略值

检测HTML编写语法的网站

validator.w3.org/

HTML5新增内容

①新区块标签

  • section
  • article
  • nav
  • aside

除了aside都会出现在大纲中

②表单增强

  • 日期、时间、搜索
  • 表单验证
  • Placeholder 自动聚焦

③新增语义

  • header/footer 头尾
  • section/article 区域
  • nav 导航
  • aside 不重要内容/侧边栏
  • em/strong 强调
  • i icon

HTML元素分类

按默认样式分

  • 块级 block

    一定是方形，默认占据整行

    div,p,section,article,aside

  • 行内/内联 inline

    不会占据整行,不一定有规则形状

    span,em,strong

  • 内联块级 inline-block

    对外像inline是不占据一整行，对内像block，有宽高

    select,input

按内容分

  • Flow 在文档流中有影响
  • Metadata
  • Heading
  • Sectioning
  • Interactive
  • Embedded
  • Phrasing

HTML元素嵌套关系

了解哪些元素可以包含在其他元素内。

  • 块级元素可以包含行内元素

  • 块级元素不一定可以包含块级元素

    div内可以包含div

    section内可以包含div

    p内不可以包含div

  • 行内元素一般不能包含块级元素

    特例：a元素内可以包含块级元素

HTML元素默认样式和reset

CSS Reset

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

简便但有争议的写法：

*{
    margin:0;
    padding:0;
}

也许' * ' 容易带来性能的问题。

HTML面试题

  1. Doctype的意义是什么？

    • 让浏览器以标准模式渲染
    • 它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档，让浏览器知道元素的合法性。

  2. HTML、XHTML、HTML5的关系？

    • HTML属于SGML
    • XHTML属于XML，是HTML进行XML严格化后的结果
    • HTML5不属于SGML或者XML，比XHTML宽松，是独立的规范

  3. HTML5有什么变化？

    • 新的语义化元素：section,article,aside,footer,nav...
    • 表单增强
    • 新的API(离线、音视频、图形SVG、实时通信WebSocket、本地存储WebStorage、设备能力)
    • 分类和嵌套变更

  4. em和i有什么区别？

    • 相同点：默认样式都是斜体

    • 区别：em是语义化的标签，表强调

      ​ i是纯样式的标签，表斜体

    • H5中i不推荐使用，一般用作图标icon

  5. 语义化的意义是什么？

    HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。

    • 结构清晰，容易阅读，利于开发和维护
    • 机器容易理解结构从而进行渲染网页(搜索、爬取网页、盲人读屏软件)
    • 有助于SEO(搜索引擎优化)，搜索引擎爬虫根据不同的标签赋予不同的权重
    • semantic microdata

  6. 哪些元素可以自闭合？

    这些元素XML中要加反斜杠，H5中可以不用反斜杠

    • 表单元素 input
    • 图片 img
    • br hr
    • meta link

  7. HTML和DOM的关系？

    • HTML是“死”的
    • DOM由HTML解析而来，是树形结构，是活的
    • JS可以维护DOM

  8. property和attribute的区别？

    • 翻译过来都是属性的意思
    • property是DOM中的属性，是JavaScript里的对象，是活的；
    • attribute是HTML标签上的特性，它的值只能够是字符串,是死的

  9. form的作用？

    • 直接用get/post提交表单
    • 使用submit/resrt按钮
    • 便于浏览器保存表单
    • 第三方库可以整体提取值
    • 第三方库可以进行表单验证
avatar
文章
阅读
粉丝