网页的组成
结构 表现 行为
html css js
html/xhtml/html5
html 超文本标记语言
xhtml 扩展超文本标记语言
html5 html的第五次重大修改
html的基本结构
<!DOCTYPE html>
<html>
<head> 描述区
<mate charset="utf-8"> 国际性编码格式
<title></title> 网页的标题
</head>
<body></body> 内容区
</html>
html的常用标签
加粗 <b></b> <strong></strong>
倾斜 <i></i> <em></em>
下划线 <u></u>
水平线 <hr>
强制换行 <br>
段落 <p></p>
div span
标题 h1-h6
上标和下标 sup
sub
a 超链接 <a></a>
href="路径"
target blank 新页面打开
self 当前页面跳转
title 文字提示
img 插入图片
src="路径"
alt 文本代替图片 当图片加载不出来的时候
title 鼠标放到图片上的文字提示
相对路径
../ 返回上一级 ./同级
有序列表 ol li
无序列表 ul li
自定义列表 dl
dt dd
表格 table
tr
td
border 边框
bordercolor 边框颜色
border-width 边框宽度
cellspacing 单元格与单元格直接的间距
cellpadding 单元格与内容之间的间距
rowspan 合并行
colspan 合并列
跨行合并行 不跨行合并列
表单 form
action="路径"
method="方法" get post
name="表单名称"
input
type="类型"
value 什么类型对应什么作用
name 当前表单名称
maxlength 输入的最大长度
size 字符
get post区别 1 post比get安全
2 get获取资源 一个更新服务器资源
3 get 不会改变服务器的资源
4 get 允许发送的数据小
<input type="text" name="" id="" placeholder="">文本框
<input type="password" name="" id="" >密码框
<input type="submit" name="" value="">提交框
<input type="reset" name="" value="">重置框
<input type="button" name="" > 按钮
-->
CSS基础
语法 选择符{属性:属性值}
css样式
外部样式 内部样式 内联样式
外部样式有两种
<link ref="stylesheet" type="text/css" href="路径">
@import url()
1 link是html标签的一种
@import 是css提供的一种方法
2 link导入的CSS样式可以跟html结构同时加载
@import 先加载html 再加载导入的样式
3 link的兼容性较好
4 link 可以通过js 控制DOM样式 来改变动画效果
内部样式
<style>
选择符{属性:属性值}
</style>
内联样式
<标签 style="属性:属性值;"></标签>
css属性 文本属性
1 font-size 文本大小
系统默认的文本大小是16px
还有 em pt(磅)等单位
1em=16px 16px=12pt medium=16px
2 color 文本颜色
16进制
color:#000000
六位数 前两位红 中间两位绿 后两位 蓝
当两两相同时 可以省略
rgb(255,255,255)
rgba(255,255,255,0-1)透明度
3 font-weight 文本粗细
bold
bolder
normal 取消加粗
数值 100-900
100-500 正常
600-900 加粗
4 font-style 文本样式
italic 倾斜
oblique 倾斜
normal 取消倾斜
5 font-family 字体
font-family:字体1,字体2,字体3;
使用中文字体时 字体要加双引号
使用多个英文单词字体时 字体要加双引号
使用单个英文单词字体时 不用加双引号
6 text-align 文本水平对齐方式
center 居中
left
right
justify 两端对齐
7 line-height 行高
单行文本时 当行高等于容器的高度是 文本垂直居中
当行高小于容器的高度时 文本靠上
当行高大于容器的高度时 文本靠下
多行文本 量取行高 要从 第一行字体的上端量到第二行字体的上端
8 text-decoration 修饰文本
none 取消修饰
underline 下划线
overline 上划线
line-through 删除线
9 text-indent 首行缩进
2em 相对大小 系统默认16px
可以取负值
10 letter-spacing 文字间距
word-spacing 单词间距
11 float
left
right
none
添加浮动的容器 不会占据位置
能使不在一排的容器横向排列
可以做图文环绕效果
CSS选择符
1 类型选择器(标签选择器) 权重0001
标签{属性:属性值}
2 id选择器 权重 0100
<div id="名称"></名称>
#名称{属性:属性值}
3 类选择器 (class选择器) 权重 0010
<div class="名称"></名称>
.名称{属性:属性值}
4 伪类选择器 权重 0010
a link 未点击是的样式
a visited 点击过的样式
a hover 鼠标滑过的样式
a active 鼠标点击时的样式
5 通配符
*{
margin:0;
padding:0;
}
6 群组选择器
选择符,选择符{属性:属性值} 权重等于选择符本身
7 包含选择器
父元素 子元素{属性:属性值;} 权重之和
css 层叠性
产生权重关系 必然体现层叠性
内联样式> 外部/内部
外部内部同时作用于一个对象 后写的样式覆盖前面的样式
id选择器>class选择器/伪类选择器>类型选择器
!importan 权重最高 作用于某一样式
开发者样式>读者样式>浏览器样式
权重相同时 后面的样式会把前面写的样式覆盖掉