HTML基础知识普及

HTML常用元素

meta/title/style/link/script/base

<meta charset="utf-8"> 规定页面的字符编码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> meta name="viewport" viewport视口:手机屏幕/电脑屏幕等设备的视口有多大 width=device-width: 视口宽度=设备宽度 initial-scale=1.0: 初始化的缩放比例是1 maximum-scale=1.0: 最大缩放是1 user-scalable=no: 用户不能缩放

<base href="/"> 框架中用于指定 其它文件路径的基准路径

div: 是 层? 是 区域? 是 容易? 由于语义不明确,似乎可以是任意一种。 section, article, aside, header, footer: 有明确含义的 一块区域 p: 段落 span/em/strong: 行内元素(em, strong 带默认样式:em斜体 strong粗体)

table/thead/tbody/tr/td:表格相关元素。 tr(table row)表格中的一行,td(table data)单元格。 thead封装整行,将该行作为表头 th:将tr中的第一个单元格 设置为 标题单元格

ul/ol/li/dl/dt/dd:列表相关的元素。 ul(unordered list无序列表) ol(ordered list有序列表) li(list item列表项) dl(defined list定义的列表) dt(defined title定义的标题) dd(defined data定义的内容)

a:链接

form/input/select/textarea/button:表单 输入框 下拉框 文本输入区域 按钮

HTML重要属性
  • a[href, target] target:在哪儿打开链接,默认在当前窗口打开。target=blank新窗口打开
  • img[src, alt] alt:alternative替代资源,一般为文字
  • table td[colspan, rowspan] 单元行 需要占用多行/多列,使用colspan rowspan属性
  • form[target, method, enctype] target: 表单提交地址 method: 提交方式)post get) enctype: encode type 编码类型(对post而言) urlencode(提交文本) formdata(把数据进行编码后 进行提交。因此,可以上传文件)
  • input [type, value, name, id]
  • button[type]
  • select>option[value]
  • label[for] 与表单项 相关联。点击某个label时,相当于点击 该label对应的表单项。用于单选框 复选框
如何理解HTML
  • 描述网页内容各个部分之间的 结构关系
H5新增内容
  • 新区块标签
    • section
    • article
    • nav
    • aside
  • 表单增强
    • input新增类型:日期,时间,搜索
    • 表单验证: required, min, max, pattern
    • placeholder autofocus
H5新增语义
  • header/footer: 即可表示 网站的头部,也可表示 区块的头部(比如article中 可以包含header footer)
  • section/article: div是没有语义的 区块(当找不到合适的语义标签时,就使用div). section和article相比,section适用于更琐碎的信息
  • nav:navigate
  • aside: 侧边栏
  • em/strong: emphasis(斜体)/strong(加粗)
  • i: icon图标
HTML元素分类

可以按样式,按功能(区块,链接,表单元素)

  • 按默认样式分:
    • block块:呈方块形状,默认会占据整行(div section article aside)
    • inline行内元素/内联元素:没有 规则的形状,不会独占一行(跟文本相关的元素 span em strong)
    • inline-block: 可以像inline元素一样 和其它元素 在同一行。对外像inline元素,对内 像block元素(形状可能是块状,有自己的宽高尺寸等)。 (inline-block: 一些表单元素,下拉框 输入框)

div, p 都是块级元素 span, em, strong 都是inline元素 select 是inline-block元素

  • 按内容分(content model):
    • Flow: 在文档流中 有一些影响的元素(大部分可见的元素 都属于flow元素)
    • Metadata:表示信息的元素,有一些metadata不在flow中,html中head中的title,base,script等,这些标签是不占据文档流的。
    • Heading:h1-h6标题,hgroup
    • Sectioning: 主要是一些分区的元素,比如section article aside nav
    • Interactive:有交互/互动的元素(和用户有交互), 链接(点了链接就跳转了). 比如 a, audio, button等 和用户有交互的元素
    • Phrasing: 这部分的元素 大都属于inline类型的元素,被包含在一个段落中 是段落的一部分。phrasing本身并不是完整的(只是其他元素中的一部分),比如em(一句话中可能有两个需要强调的词组,就使用em包裹)。
    • Embeded: 可嵌入的元素(是嵌入别的元素中,还是被嵌入?)一些元素 可以在其中 嵌入其他元素。比如audio video img

Flow content

Phrasing content

Interactive content

Embeded content

Metadata content


HTML元素的嵌套关系

哪些元素 可以出现在 哪些地方,哪个元素 可以被另一个元素包含。

基本原则:

  • 块级元素(block) 可以包含 行内元素(inline). 比如div元素可以包含(a, span)
  • 块级元素 不一定 能包含块级元素 块级 包含 块级:div包div, section包div。 块级元素(段落p) 不能包含 块级元素(div)
  • 行内元素 一般不能包含 块级元素 span包div 是不行的。 行内元素(a元素) 可以包含 块级元素(div)。
HTML的嵌套关系 依赖于:
* 元素的分类
* content model
HTML元素默认样式
html不写样式时,会有 默认的样式

* 默认样式的意义:
    如果默认没有样式 需要对每个元素定义 各种基础的样式,增加了 开发人员的负担。
* 默认样式 会带来问题:
    有些默认样式 是我们不想要的,需要清除默认样式 再写一些自己需要的样式。
    比如下拉框是没办法清除 默认样式的,此时 需要的定制成本 是很高的。
    有些样式 不同浏览器的处理结果 是不同的
* css reset
    有些样式 是我们不想要的,统一去掉
    有些样式 不同浏览器的处理结果 不一样,显式地统一
css reset的简单粗暴方式:
    *{
        margin:0;
        padding:0;
    }
浏览器在查找元素时,使用的是什么策略?如果我用*,会不会一个一个的去匹配元素 会不会比较慢
HTML面试真题
* 1. doctype的意义是什么?
    对盒子模型 进行标准的处理(width看做content-width)
    让浏览器知道 元素书写方法的合法性(doctype: html4, xhtml)

* 2. html, xhtml, html5的关系
    html属于SGML的一个应用(SGML是一个通用的标记语言,xml也是SGML的一个应用)
    xhtml属于xml,是html进行xml严格化的结果
    html5是个独立的规范,不属于SGML或XML,书写方式上 html5比XHTML宽松
* 3.html5 有什么变化?
    变化是 相对于html4 和xhtml而言的
    * 增加 新的语义化元素,比如section article nav aside header footer, 便于书写 更富有语义的结构。把之前语义不强的i,b元素 都不推荐使用了。
    * 表单增强,包括新的元素 和 表单验证。
    * 新的API(离线application cache, 音视频,图形canvas,实时通信websocket,本地存储local storage,设备能力 包括定位 获取加速计 陀螺仪的状态)
    * 元素分类和嵌套的变更,html5对元素 重新进行了分类,嵌套规则也有一些变化,但是 推理的过程 完全变了,因为分类变化了。比较明显的就是a元素的变化,a能否包含 块级元素,取决于a外面的元素是什么 
* 4. em和i有什么区别
    主要是语义化上面的变化,em和i的默认样式 都是斜体的。
    * em是语义化的标签,表强调
    * i是纯样式的标签,表斜体 其没有强调的意思
    * html5中不推荐使用i,一般把i作为图标 表示icon的含义
* 5.语义化的意义是什么
    * html文档 按照语义化去编写 读起来就会 很容易,能够一眼看到它的大纲 开发者就容易理解
    * 也是机器容易理解的结构(比如 搜索引擎,读屏软件)
        如果大纲写的好,机器就容易理解你的页面 
    * 有助于SEO
    * 不要到处用div,需要section就用section 需要article就用article
    * semantic microdata,这是另外一个规范 会在html中添加一些新的标记,让后去标注 这个东西 是什么。对页面中的元素 做进一步的语义化标记 方便搜索。
* 6.哪些元素可以自闭合
    不是所有的元素里面 都可以放别的元素的,有些元素就是放在那儿 它里面就没有别的元素了。常见的有以下这些元素:
    * 表单元素input(input框内 不能有其他元素)
    * 图片img(不能在图片中嵌入 别的元素)
    * br hr(br换行  hr水平线)
    * meta link(元信息:meta link)
* 7.HTML和DOM的关系
    * HTML是写好的带结构的文本,是'死'的
    * DOM是 由HTML 经过浏览器解析 而来的,DOM是存在于浏览器内存中的 一个树状的结构, 是'活'的
    * JS维护DOM
* 8.property和attribute的区别
    一般都译作'属性',认为:property是'特性' attribute是'属性'. 
    * 写在html中的 被认为是 attribute
    * property一般被用在 (html经过解析之后的得到的dom)dom元素中
        调试技巧,在inspect查看器中选中的元素 在console中有个名称'$0'. 使用'$0',可以查看选中元素的一些属性。
* 9.form的作用有哪些
    使用form有很多好处,就算是用ajax提交数据 也应该加上form。
    * 直接提交表单(直接用get/post的方式 进行表单提交),必须有form
    * 表单和submit/reset配合,submit可以提交表单 reset可以重置表单
    * 使用form 可以使 浏览器记录下 表单中的数据
    * 第三方库 可以整体提取值
        jquery中的serialize 可以把表单中的值 
    * 第三方库 在有form时,才能进行表单验证

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券