CSS讲解(2) HTML

前端CSSCSS讲解 阅读量

css

前端三大件：

  • HTML 结构
  • CSS 样式
  • JavaScript 行为

常见元素和理解

常见元素

不直接出现在页面上,描述或引用资源

  • meta
  • title
  • style
  • link
  • script
  • base
1
<meta charset="utf-8">

字符集 utf-8

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

视口

  • width=device-width 视口宽度等于设备宽度
  • initial-scale=1.0 初始化的缩放 1倍
  • maximum-scale=1.0 最大缩放 1倍
  • user-scalable=no 用户不能缩放
1
<base href="/">

指定基础路径，所有链接都是以这个路径为基础

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

HTML重要属性

  • a[href,target]
    • href 链接地址
    • target
      • _blank 新窗口中打开链接
      • _self 相同的框架中打开链接
      • _parent 父框架集中打开链接
      • _top 在整个窗口中打开链接
      • framename 指定的框架中打开链接
  • img[src,alt]
    • src 图片地址
    • alt 替换字符，当图片不可用时显示
  • table td[colspan,rowspan]
    • colspan 单元格可横跨的列数
    • rowspan 单元格可横跨的行数
  • form[target,method,enctype]
    • target 规定在何处打开 action URL
      • _blank
      • _self
      • _parent
      • _top
      • framename
    • method 规定如何发送表单数据
      • POST 方法
      • GET 方法
    • enctype 规定如何对表单数据进行编码
      • application/x-www-form-urlencoded: urlencoded编码所有字符
      • multipart/form-data: 不对字符编码,使用包含文件上传
      • text/plain: 空格转换为 “+” 加号
  • input[type,value]
    • type 规定 input 元素的类型
      • button 可点击按钮
      • checkbox 复选框
      • file 文件上传
      • hidden 隐藏的输入字段
      • image 图像形式的提交按钮
      • password 密码
      • radio 单选按钮
        • name 单选框name一样表示一组
      • reset 重置按钮,清除表单中的所有数据
      • submit 提交按钮,把表单数据发送到服务器
      • text 输入字段
  • button[type]
    • type 规定按钮的类型
      • submit
      • button
      • reset
  • select>option[value]
  • label[for]
    • for 和表单项关联

事例

如果理解HTML

  • HTML 文档
  • 描述文档的结构
  • 有区块和大纲
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<section>
  <h1>森林象</h1>

  <section>
    <h1>介绍</h1>
    <p>在本节中，我们将讨论鲜为人知的森林象.</p>
  </section>

  <section>
    <h1>栖息地</h1>
    <p>森林象不生活在树上，而是生活在树上.</p>
  </section>

  <aside>
    <p>广告块</p>
  </aside>
</section>

<footer>
    <p>(c) 2010 公司例子</p>
</footer>

文档的大纲：

1
2
3
4
1. 森林象
  1.1 介绍
  1.2 栖息地
  1.3 Section (aside)

语义化的标签

W3C大纲工具： http://h5o.github.io/

腾讯首页的大纲:

腾讯首页的大纲

HTML版本

HTML5 推荐版本

  • HTML4 / 4.01(SGML)
    • SGML 标准通用标记语言
  • XHTML (XML)
  • HTML5
HTML4 XHTML HTML5
标签允许不结束 标签必须结束 标签允许不结束
属性不用带引号 属性必须带引号 属性不用带引号
标签属性可大写 标签属性必须小写 标签属性可大写
Boolean属性可省略值 Boolean属性必须写值 Boolean属性可省略值

XHTML 例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
    <div class="test">合法</div>
    <DIV class="test">标签名大写</DIV>
    <div ID="test">属性名大写</div>
    <input type="checkbox" checked />
    <p>标签不结束1
    <p>标签不结束2
    <div style=color:red>属性不带引号</div>
</body>
</html>

DOCTYPE 不一样

xmlns 命名空间

HTML5 例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
    <DIV class="test">标签名大写</DIV>
    <div ID="test">属性名大写</div>
    <input type="checkbox" checked />
    <p>标签不结束1
    <p>标签不结束2
    <div style=color:red>属性不带引号</div>
</body>
</html>

HTML5新增内容

  • 新区块标签
    • section
    • article
    • nav
    • aside
  • 表单增强
    • 日期,时间,搜索
    • 表单验证
    • Placeholder 自动聚焦
  • 语义的改变
    • header / footer 头尾
    • section / article 区域
    • nav 导航
    • aside 不重要内容
    • em / strong 强调
    • i icon

HTML元素分类

  • 按默认样式分类
    • 块级 block 独占一行
    • 行内 inline 不一定有规则形状，设置尺寸无效
    • inline-block 对外inline对内block，是规则的方块，有尺寸

  • 按内容分类 （内容模型）

    内容模型

    • 流（Flow）内容：包含在文档正常流中的大多数HTML5元素
    • 元数据（Metadata）：通常出现在页面的head中，设置页面其他部分的表现和行为
      • 元素：<base>，<link>，<meta>，<noscript>，<script>，<style>，<title>
    • 内联（Embedded）：在文档中添加其他类型的内容
      • 元素：<audio>，<video>，<canvas>，<iframe>，<img>，<math>，<object>，<svg>
    • 交互（Interactive）：与用户交互的内容
      • 元素：<a> , <audio> , <video> , <button> , <details> , <embed> , <iframe> , <img> , <input> , <label> , <object> , <select> , <textarea>
    • 标题（Heading）：定义段落标题
      • 元素：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<hgroup>
    • 短语（Phrasing）：文本和文本标记元素
      • 元素：<img>，<span>，<strong>，<label>，<br />，<small>，<sub>等
    • 区段（sectioning）内容：定义标题，内容，导航和页脚的范围
      • 元素：<article>，<aside>，<nav>，<section>

内容分类动态图https://www.w3.org/TR/html51/dom.html#kinds-of-content

HTML元素嵌套关系

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素
  • 行内元素一般不能包含块级元素
  • 但是…..什么叫一般 (比如a元素可以包含块元素)

HTML 4.01过渡的嵌套规则

  • 为什么a > div是合法的？
    • 透明内容模型，在计算内容模型时此元素本身不参与计算,相当于a时不存在的
    • 是否合法取决外面的元素
1
2
3
<div><a href="#">DIV &gt; A</a></div>
<a href="#"><div>A &gt; DIV</div></a>
<p><a href="#"><div>P &gt; A &gt; DIV</div></a></p>
  • DIV > A 合法
  • A > DIV 合法（相当于DIV）
  • P > A > DIV (相当于去掉A，P > DIV, P不能包含DIV，浏览器会去容错变换)

HTML元素默认样式和定制化

HTML元素默认样式

不加任何样式的时候，元素本来的样式

  • 默认样式的意义
  • 模式样式带来的问题

  • CSS Reset
    常见的方案：

  • Normalize.css

    • 保护有用的浏览器样式而不是去掉他们
    • 一般化的样式：为大部分HTML元素提供
    • 修复浏览器自身的bug并保证各浏览器的一致性
    • 优化css可用性：用一些小技巧
    • 解释代码：注释和详细的文档

HTML 真题

  1. doctype的意义是什么

    • 让浏览器以标准模式渲染
    • 让浏览器知道元素的合法性

  2. HTML XHTML HTML5的关系

    • HTML属于SGML
    • XHTML属于XML 是HTML进行XML严格化的结果
    • HTML5不属于SGML或XML，比XHTML宽松

  3. HTML5有什么变化

    • 新的语义化元素
    • 表单增强
    • 新的API (离线，音频，图形，实时通信，本地存储，设备能力)
    • 分类和嵌套变更

  4. em 和 i 有什么区别

    • em 是语义化的标签，表强调
    • i 是纯样式的标签，表斜体
    • i 一般不推荐使用，一般作图标icon使用

  5. 语义化的意义是什么

    • 开发者容易理解
    • 机器容易理解结构（搜索，读屏软件）
    • 有助于SEO
    • semantic microdata

  6. 哪些元素可以自闭合

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

  7. HTML和DOM的关系

    • HTML是死的
    • DOM由HTML解析而来，是活的
    • JS可以维护的是DOM

  8. property和attribute的区别

    • attribute 是死的
    • property 是活的

  9. form的作用有哪些

    • 直接提交表单
    • 使用submit/reset按钮
    • 便于浏览器保存表单
    • 第三方库可以整体提取值
    • 第三方可以进行表单验证

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2021 朝着牛逼的道路一路狂奔 All Rights Reserved.

访客数 : | 访问量 :