导图社区 网页设计超详细手册
网页设计超详细手册，包括HTML文本控制笔记、HTML图像标记、CSS样式规则、样式表、基础选择器、控制文本样式等内容。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
网页设计
HTML
HTML一门标记性语言
认识HTML
HTML文档基本格式
<!DOCTYPE>标记
文档最前面
向浏览器说明当前文档使用那种HTML或XHTML标准规范
<html></html>
标志着文档的开始/结束
<html>之后
xmlns=“http：//www.w3.org/1999/xhtml”
声明XHTML统一的默认命名空间
<head></head>
定义HTML文档的头部信息，也称头部标记
一个文档只含有一个头部标记
<body</body>
定义HTML显示内容，主体标记
一个文档只含有一个主体标记
HTML标记
单标记
<标记名 />
双标记
<标记名> 内容 </标记名>
注释标记
<!--注释语句-->
标记属性
<标记名 属性1=“属性值1” 属性2=“属性值2”...>内容</标记名>
嵌套结构
就近原则
头部相关标记
<title>页面标题
给网页取一个名字
<meta />
定义页面元信息标记
<meta name="名称"> content="值"
name
设置网页作者
content
设置网页关键字
设置网页描述
<meta http-equiv="名称" content="值">
提供参数
提供参数值
设置字符集
设置页面自动刷新与跳转
<link>
引用外部文件标记
<style>
内嵌式标记
HTML文本控制标记
标题和段落
<h1>~<h6>
标题标记
align
left
center
right
<p>
段落标记
<hr />
水平线标记
size
color
width
<br />
换行标记
文本样式标记
<font>
face
设置文字字体
设置文字大小，1-7
文本格式化标记
<b><strong>
粗体
<i><em>
斜体
<s><del>
删除线
<u><ins>
下划线
特殊字符
插入即可，不用记。CSS也会涉及
&nbsp；
空格
<div>
区块容器标记
可嵌套多层
HTML图像标记
图像格式
JPG
PNG
GIF
图像标记
<img />
src
URL
图像的路径
alt
文本
图像不能显示时的替换文本
title
鼠标悬停时显示的内容
像素
设置图像宽度
height
设置图像高度
border
数字
设置图像边框的宽度
vspace
设置图像左侧和右侧的空白（垂直边距）
hspace
设置图像左侧和右侧的空白（水平边距）
左对齐
右对齐
top
图像顶端和文本第一行文字对齐，其它文字居图像下方
middle
图像中线与文本第一行文字对齐，其它文字居图像下方
bottom
图像底部和文本第一行文字对齐，其它文字居图像下方
相对路径与绝对路径
相对路径
相对于当前文件的路径
相对路径不带盘符通常是以HTML网页文件为起始点通过层级关系描述目标图像的位置
位于html文件的下一级文件夹
文件/文件名
位于html文件的上一级文件夹
../../
绝对路径
在硬盘的真正路径（网页文件）
D:\
CSS核心基础
CSS样式规则
选择器 {属性1：属性值1；属性2：属性值2}
h2{font—size：14px；color：red ； }
选择器区分大小，属性和值不区分大小，一般将选择器属性和值都采用小写的方式
提高代码可读性，在代码中加入/* */
属性和值之间不可以出现空格
h1{ font-size：14 px}
CSS样式表
行内式
通过标记style属性设置元素样式
<标记名 style=“属性1：属性值1； 属性2：属性值2”>
没有做到结构与表现分离，一般很少使用
内嵌式
将CSS代码集中在HTML文档<head>头部标签中，并且用<style>标记定义
只对当前所在HTML页面生效，设计一个网页可以，设计一个网站不建议，不能发挥CSS重用优势
一般在title之后
<head>
<style type="text/css>
</style>
</head>
链入式
使用频率最高，最实用的css样式表
<linke href="css文件的路径 type=“text/css” rel="stylesheet />
herf:定义所链接外部样式表文件的URL
type：定义所链接的文档类型，这里需要指定类型为text/css
rel:定义当前文档与被链接文档的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
CSS基础选择器
标记选择器
标记名 {属性1：属性值1； 属性2：属性值2}
用标记选择器定义的样式对页面中该类型所有的标记都有效
类选择器
用.进行标识，后面紧跟类名
.类名{属性1：属性值1；属性2：属性值2}
多个标记可以使用一个类名，一个标记也可以使用多个class类
id选择器
#id名 {属性1：属性值1；属性2：属性值2}
同一个id不可以应用多个标记
通配符选择器
用*表示，作用范围最广，能匹配页面中所有的元素
*{属性1：属性值1；属性2，属性值2；}
清除HTML默认样式
margin：0；
外边距
padding：0；
内边距
CSS控制文本样式
CSS字体样式属性
font-size 字号
相对长度单位
em
相对于当前对象内文本的字体尺寸
px
像素，最常用，推荐使用
绝对长度单位
in
英寸
cm
厘米
mm
毫米
pt
点
font-family 字体
可以指定多个字体，中间用逗号隔开，浏览器不支持第一个字体，会一直找到合适的字体
各种字体之间必须要用逗号隔开，英文状态下的
中文字体需要加英文状态下的双引号，英文字体一般不用加引号，需要设置英文字体时，英文字体必须在中文字体前
font-weight 字体粗细
normal 默认值 定义标准字符
bold 粗体字符
bolder 更粗字符
lighter 更细字符
100~900（100的整数倍） 定义由细到粗的字符，400=normal，700=bold
font-variant 变体
设置字体变化，定义小型大写字母，仅对英文字符有效
normal 默认值
small-caps 浏览器会显示小型大写字体，所有的小写字母均会转换成大写字母，所有使用小型大写字体的字母与其余文本相比，字体尺寸会更小
font-style 字体风格
italic 倾斜 居多使用
oblique 倾斜
font 对字体样式综合设置
选择器{font：font-style font-variant font-weight font-size/line-height font-family;}
不需要的可以省略，必须保留font-size属性和font-family属性
CSS文本外观属性
color 文本颜色
预定义颜色值 red
十六进制 #FF0000
RGB代码 red（255,0,0） red（100%，0%，0%）
letter-spacing 字间距
Word-spacing 单词间距
对中文字符无效
line-height 行间距
常用
%
text-transform 文本转换
none 不转换
capitalize 首字母大写
uppercase 全部字符大写
lowercase 全部字符小写
text-decoration 文本装饰
none
underline 下划线
overline上划线
line-through 删除线
可叠加
text-align 文本对齐方式
text-indent 首行缩进
允许使用负值
white-spacing 空白符处理
normal
pre 预格式化
nowrap 空格空行无效
CSS定义背景颜色
transparent 默认值
CSS高级属性
CSS复合选择器
标签指定选择器（交集选择器 第一个标记选择器 第二个为class选择器或id选择器）
两个选择器之间不能有空格，h3.special p#one
后代选择器
选择元素或元素组的后代，中间用空格分隔，标记嵌套，内层成为外层标记的嵌套
p strong { }
子元素选择器
元素1>元素2 {属性1：属性值1}
并集选择器
某些选择器定义的样式完全相同或部分相同，利用并集选择器为他们定义相同的CSS样式
元素1，元素2，元素3 {属性1：属性值1；属性2：属性值2}
CSS层叠性与继承性
看书上P75
其他相关
建立站点
定义一个存放网站中零散文件的文件夹
创建网站根目录
在根目录下新建文件夹
新建站点
主题
