HTML5+CSS3整理
一、HTML5基础
1.1基本格式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
</body>
</html>
1.<!doctype>
声明HTML标准规范,可无【单标签】
2.<html>
根标记,说明HTML代码范围,必须有,【双标签】
3.<head>
头部标记,封装其他位于文档头部的标记,必须有,【双标签】
例如:<title>
、<meat>
、<link>
、<style>
4.<body>
主体标记,显示内容,必须有,【双标签】
1.2标记属性
<标记名 属性="属性值" 属性="属性值">内容</标记名>
1.3头部标记
1.<title>
设置页面标题【单标签】
<title>网页标题名称</title>
2.<meta />
定义页面元信息标记
(1)name/content
为搜索引擎提供信息,多个值之间可以用,
分割
注意:一般默认三个有效
<meta name="名称" content="值" />
- 设置网页关键词
<meta name="keywords" content="值" />
- 设置网页关描述
<meta name="description" content="值" />
- 设置网页作者
<meta name="author" content="值" />
(2)http-equiv/content
设置服务器发送给浏览器的HTTP头部信息,提供相关参数
<meta http-equiv="名称" content="值" />
- 设置字符集
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- 设置页面自动刷新与跳转
<meta http-equiv="refresh" content="时间; url=URL" />
3.<link>
引用外部文件【单标签】
<link 属性="属性值" />
属性名 | 常用属性值 | 描述 |
---|---|---|
href | URL | 引用外部文档地址 |
rel | stylesheet | 指定当前文档和引用外部文档的关系 |
type | text/css | 引用外部文档类型为CSS样式表 |
type | text/javascript | 引用外部文档类型为JavaScript样式表 |
例如:
<link href="style.css" type="text/css" rel="stylesheet" />
4.<style>
内嵌样式标记
<style 属性="属性值">
样式内容
</style>
属性常用type
,属性值为text/css
1.4文本控制标记
1.<hn>
标题标记【双标签】
共6个等级,即<h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>
<hn align="对齐方式">
标题文本
</hn>
align属性取值:
- left:左对齐(默认)
- center:居中对齐
- right:右对齐
注意:一个页面只能有一个<h1>
2.<p>
段落标记
<p align="对齐方式">
段落文本
</p>
3.<hr />
水平线标记
<hr 属性="属性值" />
属性名 | 含义 | 属性值 |
---|---|---|
align | 设置对齐方式 | left、right、center(默认) |
size | 设置粗细 | 单位:像素(px);默认2px |
color | 设置颜色 | 常用颜色名称;十六进制#RGB;rgb(r,g,b) |
width | 设置宽度 | 单位:像素(px)、百分比(%);默认100% |
4.<br />
换行标记
<br />
5.文本格式化标记
效果 | 方式一 | 说明 | 方式二 | 说明 |
---|---|---|---|---|
加粗 | <b>...</b> | 以粗体显示 | <strong>...</strong> | 强调文本 |
倾斜 | <i>...</i> | 以斜体显示 | <em>...</em> | 强调文本 |
删除线 | <s>...</s> | <del>...</del> | 加删除线 | |
下划线 | <u>...</u> | <ins>...</ins> | 加下划线 |
6.特殊字符标记
特殊字符 | 描述 | 代码 |
---|---|---|
| 空格 | |
< | 小于 | < |
> | 大于 | > |
© | 版权 | © |
® | 注册商标 | ® |
7.<img />
图像标记
<img src="URL" />
图片格式
格式 | 动画 | 压缩 | 透明 | 体积 |
---|---|---|---|---|
GIF | 是 | 无损压缩 | 支持 | 大 |
PNG | 否 | 无损压缩 | 支持 | 小 |
JPG | 否 | 有损压缩 | 不支持 | 大 |
属性
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像的路径 |
alt | 文本 | 图片显示异常时的文本 |
title | 文本 | 鼠标悬停时显示的文本 |
width | 像素/比例 | 设置图像宽度 |
height | 像素/比例 | 设置图像高度 |
注:删除线表示HTML不赞成使用
8.<a>
(1)超链接
<a href-"跳转目标" target="弹出方式">内容(文本或图像)</a>
href
:指定链接目标的URL地址(http://…)target
:_self
:在原窗口打开(默认)_blank
:在新窗口打开
(2)锚点链接
<a href="#id1">ID1</a>
<p id='id1'>...</p>