CSS讲解(2) HTML

2019-02-05 前端 CSS CSS讲解阅读量31

css

前端三大件：

HTML 结构
CSS 样式
JavaScript 行为

常见元素和理解

常见元素

head

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

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 文档
描述文档的结构
有区块和大纲

<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. 森林象
  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 例子:

<!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 例子:

<!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
常见的方案：

CSS Tools: Reset CSS
雅虎YUL CSS Reset

比较有争议的一种:

<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>

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

HTML 真题

doctype的意义是什么
- 让浏览器以标准模式渲染
- 让浏览器知道元素的合法性
HTML XHTML HTML5的关系
- HTML属于SGML
- XHTML属于XML 是HTML进行XML严格化的结果
- HTML5不属于SGML或XML，比XHTML宽松
HTML5有什么变化
- 新的语义化元素
- 表单增强
- 新的API (离线，音频，图形，实时通信，本地存储，设备能力)
- 分类和嵌套变更
em 和 i 有什么区别
- em 是语义化的标签，表强调
- i 是纯样式的标签，表斜体
- i 一般不推荐使用，一般作图标icon使用
语义化的意义是什么
- 开发者容易理解
- 机器容易理解结构（搜索，读屏软件）
- 有助于SEO
- semantic microdata
哪些元素可以自闭合
- 表单元素 input
- 图片 img
- br hr
- meta link
HTML和DOM的关系
- HTML是死的
- DOM由HTML解析而来，是活的
- JS可以维护的是DOM
property和attribute的区别
- attribute 是死的
- property 是活的
form的作用有哪些
- 直接提交表单
- 使用submit/reset按钮
- 便于浏览器保存表单
- 第三方库可以整体提取值
- 第三方可以进行表单验证