首页 前端知识 【前端基础篇】HTML5 CSS3 入门知识

【前端基础篇】HTML5 CSS3 入门知识

2024-02-03 12:02:05 前端知识 前端哥 412 464 我要收藏

文章目录

    • 一、HTML5概述
    • 二、HTML5新增特性概况介绍
      • 2.1 HTML5 中新增一些有趣的特性:
      • 2.2 HTML新特性
      • 2.3 HTML5语法规则(更加人性化)
      • 2.4 HTML5 <!DOCTYPE>及基本结构
      • 2.5 新增结构化语义
      • 2.6 非结构化语义标签
      • 2.7 行内语义性标签
      • 2.8 新增表单相关内容(input元素)
      • 2.9 其它新增h5标签元素
    • 三、CSS3选择器
      • 3.1 基本选择器
      • 3.2 层次(关系)选择器
      • 3.3 动态伪类选择器
      • 3.4 UI 元素状态伪类选择器(跟form表单相关的伪类)
      • 3.5 结构伪类选择器
      • 3.6 否定伪类(了解)
      • 3.7 属性(attribute)选择器
      • 3.8 伪元素选择器:伪元素的效果是需要通过添加一个实际的元素才能达到的
      • 3.9 边框属性
      • 3.10 阴影
      • 3.11 背景属性
      • 3.12 渐变(Gradients)属性(IE9及之前的版本不支持渐变)
      • 3.13 文字阴影
      • 3.14 颜色属性(透明度)

一、HTML5概述

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation)

  • HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
  • HTML5的设计目的是为了在移动设备上支持多媒体。
  • HTML5 简单易学。

从2010年开始,HTML5和CSS3就一直是互联网技术中最受关注的两个话题。2010年,MIX10大会上微软的工程师在介绍ie9时,从前端技术的角度把互联网的发展分为三个阶段:

  • 第一阶段是以web 1.0为主的网络阶段,前端主流技术是HTML 和CSS。
  • 第二阶段是web 2.0 的ajax应用阶段,热门技术是javascript/DOM/异步数据请求。
  • 第三阶段是html5 + css3 阶段,这两者相辅相成,使互联网又进入一个崭新的时代。

小贴士:
HTML5是W3C与WHATWG合作的结果,WHATWG指Web Hypertext Application Technology [tek’nɒlədʒɪ] Working Group。WHATWG致力于web表单和应用程序,而W3C专注于XHTML2.0。在2006年,双方决定进行合作,来创建一个新版本的HTML。它以HTML4为基础,对HTML4进行了大量的修改。HTML5仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持

HTML5+CSS3系列课程
携程网首页-移动端
响应式布局实战之微加建站
校园官网考试实战项目

二、HTML5新增特性概况介绍

2.1 HTML5 中新增一些有趣的特性:

  1. 用于绘画的 canvas 元素
  2. 用于媒介回放的 video 和 audio 元素
  3. 对本地离线存储的更好的支持
  4. 新增了一些语义化标签,比如 article(文章,例如一篇博客)、footer、header、nav、section(区域划分)
  5. 新的表单控件,比如date、time、email、url、search等等
  6. 新的表单属性,比如placeholder requared等等
  7. 新增布尔值属性(简写),如:reversed autofocus multiple属性值可以省略

2.2 HTML新特性

HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念:

  1. 它是一个新的 HTML 语言版本包含了新的元素,属性和行为
  2. 同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术
    • 语义:能够让你更恰当地描述你的内容是什么。
    • 连通性:能够让你和服务器之间通过创新的新技术方法进行通信。
    • 离线 & 存储:能够让网页在客户端本地存储数据以及更高效地离线运行。
    • 多媒体:使 video 和 audio 成为了在所有 Web 中的一等公民。
    • 2D/3D 绘图 & 效果:提供了一个更加分化范围的呈现选择。
    • 性能 & 集成:提供了非常显著的性能优化和更有效的计算机硬件使用。
    • 设备访问 Device Access:能够处理各种输入和输出设备。
    • 样式设计: 让作者们来创作更加复杂的主题吧!

HTML5的改变,涵盖了CSS3和JS的一些新特性,这些东西统称HTML5技术。
我们之前学习的是HTML4.01(XHTML1.0)。2014年10月29日,万维网联盟泪流满面地宣布,经过几乎8年的艰辛努力,HTML5标准规范终于最终制定完成了,并已公开发布。

2.3 HTML5语法规则(更加人性化)

  • DOCTYPE及字符编码
  • 大小写都可以
  • 布尔值 checked reversed
  • 省略引号 align=center
  • 可以进行省略的标签
    • 不允许写结束符的标签(即单标签):
      hr、img、input、link、meta、area、basebr col command embed kegen param source track wbr
    • 可以省略结束符的标签:
      li dt dd p rt optgroup option colgroup thead tbody tr td th
    • 可以完全省略的标签:
      html head body colgroup tbody

2.4 HTML5 <!DOCTYPE>及基本结构

<!DOCTYPE html>
	<html lang="zh-CH">
	<html>
		<head>
			<meta charset="utf-8">
			<title>文档标题</title>
		</head>
			 
		<body>
			文档内容......
		</body>
</html>

小贴士:
1. <!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
2. 对于中文网页需要使用 声明编码,否则会出现乱码。
3. 给文档指定语言

2.5 新增结构化语义

语义就是有意义的标签(结构标签(块状元素)— 可以理解为有意义的div):主要负责web上下文结构的定义,确保html文档的完整性

  • <header> 定义一个页面或者一个区域的头部
  • <nav> 定义导航链接部分
  • <section> 定义文档中的节(section、区段)
  • <footer> 定义一个页面或者一个区域的底部
  • <article> 定义页面独立的内容区域
  • 可能的 article 实例:论坛帖子、报纸文章、博客条目、用户评论

2.6 非结构化语义标签

主要完成web页面区域的划分,确保内容的有效分隔

  • <aside> 定义页面的侧边栏内容
  • <hgroup> 用于对网页或区段(section)的标题进行组合
  • <figure> 规定独立的流内容(图像、图表、照片、代码等等)
  • <figcaption> 定义
    元素的标题

2.7 行内语义性标签

主要完成web页面具体内容的引用和表述,是丰富内容展示的基础

  • progress 用于表示进度条,可以用来显示下载的进度,属性有max(定义需要完成的值)和value(定义进程的当前值)。举例:<progress max="100" value="50">调整</progress>
  • audio 定义音频,比如音乐或其他音频流
  • video 定义视频,比如电影片段或其他视频流(考虑浏览器兼容性)

    注意:当前video元素支持三种视频格式:
    MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件(.mp4) --> type = video/mp4
    WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件(.mkv) --> type = video/webm
    Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件(.ogg) --> type = video/ogg

2.8 新增表单相关内容(input元素)

email
tel
search
number
range
date
month
time
datetime-local
color
url

2.9 其它新增h5标签元素

  • 新增绘图:canvas
  • 新增本地存储(离线存储、web存储、localstorage、sessionstroge)
  • 新增拖拽功能API
  • 支持实现响应式布局

三、CSS3选择器

3.1 基本选择器

  • * 通配(全局)选择器
  • E 元素(标签)选择器
  • #id ID选择器
  • class 类选择器
  • selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并

3.2 层次(关系)选择器

  • E F
  • E>F
  • E+F
  • E~F

3.3 动态伪类选择器

  • E:link 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
  • E:visited 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
  • E:hover 用户行为选择器 选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
  • E:active 用户行为选择器 选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上

3.4 UI 元素状态伪类选择器(跟form表单相关的伪类)

  • E:checked 选中状态伪类选择器 匹配选中的复选按钮或者单选按钮表单元素
  • E:enabled 启用状态伪类选择器 匹配所有启用的表单元素
  • E:disabled 不可用状态伪类选择器 匹配所有禁用的表单元素(配合disabled使用)

3.5 结构伪类选择器

  • E:fisrt-child
  • E:last-child
  • E F:nth-child(n)
  • E F:nth-last-child(n)

3.6 否定伪类(了解)

  • E:not(F) 匹配所有除元素F外的E元素

3.7 属性(attribute)选择器

  • E[att]{att:value;} 匹配含有att属性的E元素
  • E[att=value] 匹配属性att值为value的E元素
  • E[att~=value] 匹配属性att值包含value的E元素
  • E[att|=value] 匹配属性att值以value开头的E元素
  • E[att^=value] 匹配属性att值以value开头的E元素
  • E[att$=value] 匹配属性att值以value结尾的E元素

3.8 伪元素选择器:伪元素的效果是需要通过添加一个实际的元素才能达到的

  • :first-line
  • :first-letter
  • :before
  • :after

3.9 边框属性

  • border-color:设置边框的颜色
  • border-radius:设置边框圆角

3.10 阴影

box-shadow:向框添加一个或多个阴影
语法:box-shadow: h-shadow v-shadow blur spread color inset;

小贴士:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、

3.11 背景属性

  • background-size:规定背景图片的尺寸

3.12 渐变(Gradients)属性(IE9及之前的版本不支持渐变)

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡;以前,你必须使用图像来实现这些效果。但是,通过使用CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

CSS3 定义了两种类型的渐变(gradients):

  • 线性渐变(Linear Gradients)
    语法:background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • 径向渐变(Radial Gradients)- 由它们的中心定义
    语法:background: radial-gradient(center, shape size, start-color, ..., last-color);

3.13 文字阴影

text-shadow 规定添加到文本的阴影效果
语法:text-shadow: h-shadow v-shadow blur color;

3.14 颜色属性(透明度)

  • opacity [ə(ʊ)'pæsɪtɪ]属性:规定元素的不透明级别;属性值value规定不透明度,从 0.0 (完全透明)到 1.0(完全不透明)
  • rgba:设置颜色的透明度
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1165.html
标签
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!