Web标准
Web标准:制作网页要遵循的规范, W3C组织和其他标准化组织制定的一系列标准的集合。
网页的形成:前端开发人员利用HTML标签开发代码→浏览器显示代码(解析、渲染)→生成最后的web页面
分为三层:
- 结构标准(HTML):用于对网页元素进行整理和分类。
- 表现标准(CSS):用于设置网页元素的版式、颜色、大小等外观样式。
- 行为标准(JS):用于定义网页的交互和行为。
浏览器
组成:
- 渲染引擎(浏览器内核): 决定了浏览器如何显示网页的内容以及页面的格式信息, 是浏览器兼容性问题出现的根本原因。
- JS引擎: 用来解析网页中的JavaScript代码,对其处理后再运行, 浏览器本身并不会执行JS代码。
HTML
HTML 全称为 HyperText Markup Language,译为超文本标记语言
是一种描述性的标记语言。
<!DOCTYPE html> # 文档声明头
<html lang="en"> # 页面语言 lang
<head> # 头标签 head
<meta charset="UTF-8"> # 字符集 charset
<meta name="viewport" content="width=device-width, initial-scale=1.0"> # 视口 viewport
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> # 字符集 charset
<meta name="Author" content="">
# 定义“关键词”,提高搜索命中率
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
# 定义“页面描述”
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
# 3秒之后自动跳转到百度页面
<meta http-equiv="refresh" content="3;http://www.baidu.com">
<title>Document</title> # 设置网页标题
</head>
<body>
</body>
</html>
计算机编码
用meta标签
声明的当前这个html文档的字库,一定要和保存的文件编码类型一样,否则乱码(重点)
UTF-8
:字多,有各种国家的语言,但是保存尺寸大,文件臃肿;
gb2312
:字少,只用中文和少数外语和符号,但是尺寸小,文件小巧。
HTML5
HTML5是新一代开发 Web 富客户端应用程序整体解决方案。包括:HTML5,CSS3,Javascript API在内的一套技术组合。
HTML5新增的语义化标签:
<section>
表示区块<article>
表示文章。如文章、评论、帖子、博客<header>
表示页眉<footer>
表示页脚<nav>
表示导航<aside>
表示侧边栏。如文章的侧栏<figure>
表示媒介内容分组。<mark>
表示标记 (用得少)<progress>
表示进度 (用得少)<time>
表示日期
新语义标签的兼容性处理, IE8 及以下版本的浏览器不支持 H5 和 CSS3
- 检测IE浏览器的版本,来加载第三方的JS库来解决兼容问题, 引入html5shiv.js文件
- 将HTML5的新标签全部通过
document.createElement('tagName')
来创建一遍
H5中新增的表单类型:
- email 只能输入email格式。自动带有验证功能。
- tel 手机号码。
- url 只能输入url格式。
- number 只能输入数字。
- search 搜索框
- range 滑动条
- color 拾色器
- time 时间
- date 日期
- datetime 时间日期
- month 月份
- week 星期
HTML排版标签
<h1> - <h6>
标题标签
<!-- 我是 html 注释 -->
注释标签
<p>
段落标签
<hr />
水平线标签, 分隔文档
<br />
换行标签,强制换行
<div>
独占一行
<span>
不换行
div
在浏览器中,默认是不会增加任何的效果的,但是语义变了,div
中的所有元素是一个小区域。
div
标签是一个容器级标签,里面什么都能放,甚至可以放div自己。
span
也是表达“小区域、小跨度”的标签,但只是一个文本级的标签。 就是说,span
里面只能放置文字、图片、表单元素。
span
里面不能放p、h、ul、dl、ol、div
。
<center>
内容居中标签, 但推荐使用css实现
<pre>
预定义(预格式化)标签
HTML标签是分等级的,HTML将所有的标签分为两种:
- 文本级标签:p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。(a标签里不能放a和input)
- 容器级标签:div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
从学习p的第一天开始,就要牢牢记住:p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。
HTML字体标签
特殊字符(转义字符):
<font>
字体标签-弃用
<b>
粗体标签-弃用
<u>
或 <ins>
:下划线标记
<s>
或 <del>
:中划线标记(删除线)
<i>
或 <em>
:斜体标记
<sup>
上标
<sub>
下标
HTML超链接
-
属性
href
:目标URLtitle
:悬停文本name
:主要用于设置一个锚点的名称target
:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值:_self
:在同一个网页中显示(默认值)_blank
:在新的窗口中打开_parent
:在父窗口中显示_top
:在顶级窗口中显示
-
外部链接:链接到外部文件
<a href="http://www.baidu.com" target="_blank">点我点我</a>
- 内部链接:网站内部页面间的相互链接
<a href="02页面.html">点击进入另外一个文件</a>
- 空链接
<a href="#">空链接</a>
- 锚链接:给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就可以利用锚链接。
- 创建锚点: 使用
name属性
或者id属性
给那个特定的位置起个名字 - 在链接文本的
href 属性
中, 设置属性值为#名字
形式, 表示跳到名为xx的特定位置
- 创建锚点: 使用
<body>
<a name="name1">顶部</a>
<pre>
</pre>
<a href="#name1">回到顶部</a>
</body>
HTML图片标签
<img src="图片的URL" />
插入的图片类型
- 能够插入的图片类型是:jpg(jpeg)、gif、png、bmp等。
- 不能往网页中插入的图片格式是:psd、ai等。
src属性
:指图片的路径。英文名称 source
- 相对路径: 从自己出发,找到别人
- 绝对路径: 就是http://或者https://开头的路径
width、height 属性
: 如果要想保证图片等比例缩放,请只设置width和height中其中一个
alt 属性
: 当图片不可用(无法显示)的时候,代替图片显示的内容
title属性
: 提示性文本。鼠标悬停时出现的文本,不应该设置成要给用户看的重要信息
align 属性
: 图片和周围文字的相对位置, 属性取值可以是:bottom(默认)、center、top、left、right
属性之前没有先后顺序,使用空格分隔,采用键值对的格式