导图社区 Web程序设计基础
Web程序设计基础：css和HTML的一些知识。
软件工程专业课，数据结构思维导图笔记。
这是一篇关于马克思主义政治经济学的思维导图
社区模板帮助中心，点此进入>>
英语词性
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
法理
刑法总则
【华政插班生】文学常识-先秦
【华政插班生】文学常识-秦汉
文学常识：魏晋南北朝
【华政插班生】文学常识-隋唐五代
民法分论
web程序设计基础
1. 概述
1.1. 注释
不咋用
重点
1.2. 道理
敢于吃螃蟹，不管行不行先上再说
不要被环境的变化所击倒
1.3. 简介
32+8学时
网页设与制作项目教程 作者 黑马程序员
1.4. 比赛
大创
多学科融合
软件控制理念
小程序
1.5. 目标
DW 记事本
前端
浏览器
1.6. 组成
页面设计
布局
特效
交互
后端
服务器
程序编写
程序
数据库
通信协议
1.7. UI
按W3C做成html，用CSS布局，用JS实现功能
W3C标准
结构
XML
XHTML
HTML5
新建文本文档 ↓
代码 ↓
<html> <head> </head> <body> </body> </html>
文件→另存为→htm / html 编码格式设定
表现
CSS
显示效果
动画
CSS3
行为
ECMAS
JS
DOM
2. htmI5
2.1. 语法结构
＜标签></标签＞
标签不能交叉出现
三大标签
htmI
head
文档头部
body
文档主体
2.2. 标签
数量
双
有作用内容
有头有尾，无尾可能不报错，但排版会混乱
单
<标签/>
属性
属性名=取值’
可以单引，双引，也可以没有
当有多个值时必须加引号
中文属性不建议加引号
容易被改成中文引号
浏览器不报错
可以有多个属性
空格是分割属性和属性的标志
注释
<！-- --＞
比较灵活，可换行
<comment></comment>
想去掉某段代码时
并行
嵌套
先开始后结束
主要标签
头部类
只能在窗口外 不会在body里
title
标题
唯一
不能太长
不能嵌套其他标签
meta
定义元信息
页面属性
http-equiv =类别
子主题
多参数用；分隔
搜索引擎的属性
多参数用，分隔
charset
单标签
link
链接
路径
内部
外部
锚点
两者皆可
跳到锚点处，不从头开始
使用对象（链源）
文本
图像
热区
多媒体
热点
一个播放点
设置开播位置
空
利用单击操作触发一种行为
Email
构成
链源
链宿
外链式
style
样式
可以设置选择器
整个网页统一设置样式
内嵌式
scrip
可以放body
文本控制标签
标题段落
hi
标题级数
一共6级
默认4级
p
用于划分段落
不能首行缩进
段落中间会有空行
文本格式
br
换行
hr
产生一条水平线
分隔线
Size
宽度
Width
长度
采用相对长度
常用px（像素）默认值
也有%
Align
Noshade
Color
取值
单词
颜色代码
#红绿蓝的16进制表示一个2位一共6位
可以将两个完全一样的缩写为1个，共3位
修饰标签
dw
大块显示区
特殊字符标签
对齐align
left
center
right
两端对齐justify
大段文字
文本格式化标签
都是双标签
语义标签
b与strong
同
显示效果相同
异
b无语义，strong有
可以让搜索引擎发现
可以让朗读语音变化
mark
高亮显示
font
size
不是设置字号大小
与标题类似
只有7个等级
字体face
图象标签
常用图片格式
GIF
支持动画
256色
相近颜色代替
无损
支持透明
全
不全
PNG
类型
PNG8
PNG24
PNG32
比GIF体积更小
支持atpha透明
颜色过渡更平滑
不支持动画
JPG
所表示的颜色很多
有损
保真效果好
体积大
小体积
透明
应用
<body background =
背景
<img>
嵌入
单标签 行内
src
来源位置
aIt
未载入前的文字提示
丢失
未下载
border
边框，功能太少不建议
可以占个位
width heigth
vspace hspace
左右和上下边距
鼠标悬停时的提示文字
align
对齐
left right
其他
绝对路径
相对路径
可避免站点移位造成找不到文件
三种情况
与html在一起
直接写名称加后缀
下级关系
同目录的下级文件夹内
上级关系
用../返回
表格标签
不仅仅是表格，早期用来设计网页格式
格式
可以嵌套
定义表格table
表格标题catpion
定义一行tr
标题th（表头）
img标签 要设置大小
表单控件
音视频播放器
数据td
与上相同
table
border外框粗细
cellspacing单元格与单元格的间距 =2
cellpadding内容与格的边距
frame外框
rules内框
groups将表格分组，显示组间的
是否显示
行列式的竖线
竖式的横线
caption
tr
height
valign
top
middle
bottom
bgcolor
background
没有简单方法设置一列的样式
th
td
多了width
colspan行合并
rowspan列合并
标签（元素）的类型
行内元素
行内与行内横排
常见标签
文本控制/修饰类
超链接
a导航热字
用display = back转化
＜img>
可用div转化为块状
div可多级嵌套
不可嵌套块元素
不报错
块状元素
块与块纵向排列
h
可用盒模型设置样式
可以嵌套行元素和块元素
3. 页面元素和属性
3.1. 新的标准
浏览器兼容
文档结构不明确
web应用程序功能受限
3.2. 结构元素（块，双）
header
导航
普通
article
主体
aside
附属
footer
figure
图片，统计图，代码示例
figcaption
定义figure标题
3.3. 页面结点
3.4. 交互元素（双 块）
progress
进程状态（进度条）
value
max
meter
占比图，指示表
当前值
details
展开与折叠
summary
设置项目标题
command
3.5. 文本层次语义元素（双 块）
cite
作品（书籍 歌曲 绘画 雕朔）
高亮
time
pubdate
发布时间
em
强调
strong
更强
dfn
定义项目
code
代码
samp
样本 例子
kbd
表示从键盘输入的字符
var
变量
文献引用
span ？？？
3.6. 分组元素（块 双）
div
没有任何语义
blockquote
表示摘自他人
pre
表示格示应被保留
与p对应
p不保留格式只保留字符
ul
无序列表
默认样式为小圆点
type
disk
circle
square
黑色小方块
ol
有序列表
start
reversed
1 a A i I
li
列表项
仅此项
有序中不改变序号 只改变样式
dl
自定义列表
dt
名称
dd
内容
无语义
3.7. 全局属性
class
id
name
hidden
付费内容
spellchack
拼写检查
contenteditable
可编辑
4. 构建web表单
4.1. 程序编程题
4.2. 表单的结构
表单域
form
提示文字
input
textarea
select
botton
action
给后台
method
提交方式
get
post
保护性好
无数据量限制
4.3. 表单的控件
type必须
text
单行文本框
password
radio
单选
多个单选项name必须相同
checkbox
多选
自己计定
submit
提交
reset
重置
考试要考
file
选择文件
image
新增
search
搜索框
校验
urI
tel
number
Range
滑动条
color
颜色选择
日期
date
month
week
datetime-local
datetime
包含时区
控件名称
按此分组
不同type意义不同
文本框
默认文本
按纽
readonly
disable
不可用
maxlength
限定字符长度
新增属性
placeholder
用户输入提示
required
设置为必填
pattern
验证输入字段
autofocus
自动焦点到当前的输入框
文本域
下拉列表
可见项数
multiple
option
放在select
selected
4.4. 表单的处理
表单分组
表单验证
URL
pattern 属性
添加说明
lable
将选项与文字绑定
for
一个
from
多个
5. 音视频
5.1. 格式
Wav
MP3
ogg
5.2. 音频
audio
autoplay
control
Loop
5.3. 视频
video
6. css概述
6.1. 优点 结构与外观分离
载入更快
代码少
降低流量费用
修改设计时效率高
更容易被搜索引擎收录
6.2. 功能
文本控制更灵活
设置背景图片颜色
精准控制位置
产生动态效果
7. CSS3
7.1. CSS语法规则
构造CSS样式
选择符
选择符{属性：值}
选择符组
选，选，选{属性：值}
声明
属性：值
用分号分隔多个属性
对空格大小写不敏感
除非是用户起的类名，对象名等
/* */
位置 选择符{/* */}
7.2. 选择器
基础选择器
通用选择器
*
*{属性：值}
优先级低，初始化
body及其内的所有标签
标签选择器
标签{}
类选择器
.类名{}
优先于标签选择器
ID选择器
#ID名{}
优先级最高
伪类选择器
选择符：伪类{}
：link
：active
7.3. 常用样式属性
文本样式属性
字符间距letter-spacing
字符字母
字间距word-spacing
字或单词
text-decoration
缩进text-indent
字母大小写text-transform
text-shadow阴影
水平*
垂直*
顺序一定
阴影模糊
过渡类型
阴影颜色
文本溢出text-overflow
文本描边text-stroke
背景样式属性background
repeat重复（纹理）
repeat
repeat-x
repeat-y
position（大图）
具体值 百分比
top bottom left right center
背景关联attachment
随页面滚动
值 百分比
cover
保持横纵比缩小到可放入的最小大小
contain
放大到填满最大大小
origin填充区
规定背景图的相对定位位置
cⅠip绘制区
规定裁剪的相对位置
列表样式list
style-type
图形符号样式
style-image
图形符号为图片
style-position
inside
outside
8. CSS3页面布局
8.1. 类型
固定式
流式
响应式
8.2. DIV+CSS
DIV
ID
content内容区
width
overflow
border边框
顺序上右下左
radius
水平半径/垂直半径
顺序↖↗↘↙
