HTML5

发表于 | 更新于 | 评论数： | 阅读次数：
本文字数： 17k | 阅读时长 ≈ 15 分钟

HTML5

HTML5前言

  • 什么是HTML5

    • HTML的全称是HyperText Markup Language，超文本标记语言
    • HTML语法非常松散，目前的最新版是5.0，也就是HTML 5

  • 为什么要用HTML5

    • 跨平台: 利用HTML5编写的UI界面能运行在所有拥有浏览器的平台
    • HTML5的运行平台: 浏览器
    • 但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、访问相册….

  • 如何使用HTML5

    • 自己编写大量的HTML5代码
    • 使用现成的HTML5框架
      • sencha-touch
      • phoneGap
      • jQuery mobile
      • bootStrap

手机App的开发模式

  • 原生

    • 优势: 与系统无缝结合, 操作感强

    • 劣势: 开发成本高, 迭代周期长

  • 纯HTML5

    • 优势: 跨平台, 开发成本低

    • 劣势: 性能不如原生, 但是随着HTML5标准的制定, 效率在逐步提高

  • 原生+HTML5

    • 优势: 对于界面要求高的部分用原生代码开发, 其他界面用HTML5开发, 省时且跨平台性好, 开发成本低

    • 劣势: 可以忽略不计

Web3.0

  • 主流技术: HTML5 + CSS3

  • HTML5亮点: Canvas HTML5音视频 Web存储 Geolocation Workers多线程处理

  • CSS3亮点: Canvas HTML5音视频 Web存储 Geolocation Workers多线程处理

HTML5技术网站

HTML

网页组成:

一个功能完整的网页一般由3部分组成

  • HTML
    - 网页的具体内容和结构

  • CSS
    - 网页的样式

  • JavaScript
    - 网页的交互效果

HTML\CSS\JavaScript学习网站W3School

简介

  • HTML的全称是HyperText Markup Language，超文本标记语言

  • 其实它就是文本，由浏览器负责将它解析成具体的网页内容

  • HTML的组成:

    • 跟XML类似，HTML由N个标签（节点、元素、标记）组成

  • HTML语法非常松散，目前的最新版是5.0，也就是HTML 5

常见HTML标签

  • 标题：h1、h2、h3、h4、h5….
  • 段落：p
  • 换行：br
  • 容器：div、span（用来容纳其他标签）
  • 表格：table、tr、td
  • 列表：ul、ol、li
  • 图片：img
  • 表单：input
  • 链接：a
target值 描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

HTML5新增标签

HTML5新增了27个标签元素,废弃了16个标签元素,主要包括

  • 结构性标签
    • 负责Web上下文结构的定义，确保HTML文档，包括:
标签 描述
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
header 标记头部区域内容
footer 标记脚部区域内容
section 区域章节表述
nav 菜单导航,链接导航
  • 级块性标签
    • 完成Web页面区域的划分，确保内容的有效分隔，包括:
标签 描述
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
  • 行内语义性标签
    • 完成Web页面具体内容的引用和表述，丰富展示内容，包括：
标签 描述
meter 特定范围内的数值，如工资、数量、百分比
time 时间值
progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
  • 交互性标签
    • 功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：
标签 描述
details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
datagrid 控制客户端数据与显示，可用于动态脚本及时更新
menu 用于交互菜单
command 用来处理命令按钮

CSS

CSS基本概念

  • 什么是CSS

    • CSS的全称是Cascading Style Sheets，层叠样式表
    • 它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

  • CSS的编写格式是键值对形式的，比如

    • 左边的是属性名 : 右边的属性值
    color: red;
background-color: blue;
font-size: 20px;

CSS的两大重点:

  1. 属性

    • 通过属性的复杂叠加才能做出漂亮的网页

  2. 选择器

    • 通过选择器找到对应的标签设置样式

CSS的三种书写形式

CSS有3种书写形式

  • 行内样式：（内联样式）直接在标签的style属性中书写

    <body style="color: red;">

  • 页内样式：在本网页的style标签中书写

    <style>
    body {
        color: red;
    }
</style>

  • 外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

    <link rel="stylesheet" href="index.css">

CSS选择器

选择器 格式 描述
标签选择器 标签{ } 给对应标签添加样式
类选择器 .类名 { } 标签的class与之相对应
id选择器 #id { } 标签的id与之相对应
并列选择器 选择器1,选择器2 { } 两者的并集
复合选择器 选择器1选择器2{ } 两者的交集, 前者标签选择器,后者类或者id选择器
后代选择器 选择器1 选择器2 { } 子标签, 两个选择器空格隔开
直接后代选择器 选择器1 > 选择器2 { } 直接子标签
相邻兄弟选择器 选择器1 + 选择器2 { } () 相邻的选择器,顺序不能颠倒
属性选择器 选择器[属性] { } 有对应的属性才ok
选择器[属性=”属性值”] { } 有对应属性且值相符才ok
选择器[属性1][属性2] { } 有对应的多个属性才ok
伪类 选择器:focus {} 获取键盘属性焦点的选择器添加样式
选择器:hover {} 鼠标悬浮到元素上方的想润泽器添加样式
伪元素 选择器:first-letter {} 选择器的第一个字符
选择器:first-line 选择器第一行内容

css的规律

  • 就近原则
  • 叠加原则

选择器的规律

  1. 相同级别遵循:
    a. 就近原则
    b. 叠加原则
  • id只能有一个
  • *通配符

选择器的针对性越强, 它的优先级就越高

选择器的权值加到一起, 大的优先; 如果权值相同, 后定义的优先

  • 选择器的权值
选择器 权值 常用
通配符 0
标签 1 √
类 10 √
属性 10
伪类 10 √
伪元素 10
id 100 √
important 1000 √
  • 行内样式的优先级别很高, 但是小于important

选择器的优先级:
important > 内联 > id > 类 > 标签|伪类|属性选择 > 伪元素 > 通配符 > 继承

HTML标签类型

根据显示的类型, 主要可分为3大类

  1. 块级标签
    • 独占一行的标签
    • 能够随时设置宽度和高度
    • 比如div, p, h1, ul, li
  2. 行内标签(内联标签)
    • 多个行内标签能同时显示在同一行
    • 宽度和高度取决于内容的尺寸, 不能自由设置
    • 如span, a, label
  3. 行内-块级标签(内联-块级标签)
    • 多个行内-块级标签可以显示在同一行
    • 能够随时设置宽度和高度

修改标签的显示类型

CSS属性: display, 能修改标签的显示类型

  • none: 隐藏标签
  • block: 让标签变成块级标签
  • inline: 让标签变成行内标签
  • inline-block: 让标签变成行内-块级标签(内联-块级标签)

CSS属性

根据继承性, 主要可以分为2大类

  • 可继承属性

    • 父标签的属性值会传递给子标签
    • 一般是文字控制属性

  • 不可继承属性

    • 父标签的属性值不能传递给子标签
    • 一般是区块控制的属性

CSS的可继承属性

属性 描述 补充
√ visibility 元素是否可见 内容隐藏, 但是还有占位效果, 与之对应的是display:none
√ cursor 规定光标的类型 常用类型 : pointer手指 / crosshair十字架 / 移动move

内联标签可继承

属性 描述 补充
line-height 行高 两行之间的距离(上一半, 下一半)
color 设置字体颜色
font 设置字体属性 复合属性, 已被遗弃, 不推荐使用
font-family 设置文字字体 如宋体,黑体等等
font-size 设置文字大小
font-weight 设置字体加粗 normal正常默认 / bold或者bolder加粗
text-decoration 规定添加到文本的修饰 none/underline/… 具体参见w3cschool, 场景:例如取消a标签的下划线

块级标签可继承

属性 描述 补充
text-indent 首行缩进 如果没设置宽度, 右边会突出来
text-align 居中

列表标签可继承

属性 描述 补充
list-style 列表前面的样式 常用属性:none, square, circle…

不可继承的属性

属性 描述 补充
background 设置背景 可以颜色, 可以图片 不平铺需要后面增加no-repeat
display 显示类型 none, block, inline, inline-block
margin 外边距
pading 外边距
border 设置边框 border-width, border-style, border-color
backgroud-size 背景大小 length, perectange, cover, contain
overflow 处理超出的内容
height
min-height
max-height
width
min-width
max-width
left
right
top
bottom
z-index

盒子模型

网页上的每一个标签都是一个盒子, 每个盒子都有四个属性

  • 内容(content)
  • 填充(padding, 内边距)
  • 边框(border)
  • 边界(margin, 外边距)

HTML中标签的居中

水平居中

  • 行内标签 行内-块级标签
    • text-align:center;
  • 块级标签
    • margin: 0px auto;

垂直居中

  • line-height

CSS布局

默认情况下, 所有的网页标签都在标准流布局中

  • 从上到下, 从左到右

脱离标准流的方法有

  • float属性

    • left：脱离标准流，浮动在父标签的最左边
    • right：脱离标准流，浮动在父标签的最右边
    • 脱离标准流之后, 标签会变成行内块级标签

  • position属性 和 left、right、top、bottom属性

值 描述
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

补充

box-sizing, 以特定的方式匹配某个区域的特定元素,默认值为content-box

将 box-sizing 设置为 “border-box”,可以把边框和内边距放入框中(内边距和边框占据内容的尺寸)