html 超文本标记语言
一.文本修饰
<font> (行内标签，不会换行)属性
size： 字体大小 最大值是7
color： 颜色值[red green blue] 颜色:RGB rgb(0,0,255) 十六进制： #0000ff
face： 字体[黑体 楷体 宋体 华文彩云]<b></b>加粗
<i></i>斜体
<u></u>下划线字符实体
把一些特殊字符在页面中展示
空格    
换行 <br>二、段落标签
<p> (块标签,独立成行,有行间距,无color)属性
align 对齐方式[centet left right]三、标题
<h1> ~ <h6> (块标签,独立成行,无color)属性
align 对齐方式[centet left right]四、分割线
<hr>属性
size 线厚度大小
color 颜色
width 线长
align 对齐方式 [centet left right]五、序列
有序
<ol> (块元素,有缩进有行间距)
<li>... ...</li>
<ol>属性
type 样式[1 a A i罗马 I大罗马]
start[n] 从第n个数开始计数无序
<ul>(块元素,有缩进有行间距)
<li>... ...</li>
</ul>属性
type 样式[disc实心圆 circle空心圆 square 方块]六、图片
<img>属性
src 路径
border 边框宽度
height width 宽高
alt 图片不存在时提示信息七、音频
<bgsound> (只对IE有效)属性
src 路径<embed> (通用,音视频均可)属性
src 路径
height width 大小可以为0隐藏八、超级文本
<a> (超链接)属性
href 资源地址
target [_blank]重新打开一个页 [_self _top]在本页打开调用本地邮件客户端发送邮件
<a href="mailto:[email protected]">点击发送邮件</a>调用javascript脚本
<a href="javascript:alert('???')">弹出</a>书签锚点
<a name="跳转位置"> 第一章... ...</a>
<a href="#跳转位置">第一章</a>九、表格
<table>
<tr> 行
<td> 列(单元格)属性
caption 表头
border 边框线宽度
cellspacing 单元格之间距离
cellpadding 内容与单元格左边框距离，总宽度会增加
width 表格总宽度(列平分)
height 表格总高度(行平分)
align 水平对齐方式 [centet left right]在<table>中用是表格居中
valign 垂直对齐方式 [top maddle bottom]
background 背景图片
bgcolor 背景颜色合并单元格
rowspan="n" n行合并
colspan="n" n列合并十、部分快捷键
alt+↑ 向上移动行
alt+↓ 向下移动行
shift+alt+↑ 向上复制行
shift+alt+↓ 向下复制行
ctrl+shift+k 删除行
十一、表单
<form>属性
action 处理路径html
method 提交类型[get,post] <input> 输入框 属性
type [text,file,password,radio(设置相同name值，checked),checkbox,button,submit,reset,image(图片按钮),hidden]
name 名字(用于分组)
value 值(数据提交)<select>选择框
<option>1995</option>
<option>1996</option>
</select>年css 级联样式表
引入方法
内嵌式 <font style font-size:"100px"></font>
内部式 <head>
<style type="text/css">
u{
font-size: 100px;
color:red
}
</style>
</head>
外部式 xxx.css
<head>
<link rel="stylesheet" href="xxx.css">
</head>一、选择器定义：
1.标签元素选择器
定义 每个元素或者标签均可作为选择器存在[body,font...]
使用 页面中所有此标签均使用该样式
2.id选择器
定义 使用#加标识符定义(#f1)
使用 在标签中使用id="f1"属性引用(特有样式使用,一般不重复)
3.class类选择器
定义 使用 . 加标识符定义(.c1)
使用 在标签中使用class="c1"属性引用(同一类型使用,一般重复)
4.组合选择器
定义 用逗号隔开,将上述三种选择器统一样式。
使用 font,f1,c1{ }
5.后代选择器
定义 按照选择器嵌套顺序进行定义(优先级最高)
使用 div p a{ }
font f1 c1{ }
6.通用选择器
定义 所有的共有样式(优先级最低)
使用 *{ }
7.伪类选择器
定义 选择器名称：伪类属性
使用 ：
#a1:LINK{ }鼠标点击后
#a1:VISITED{ }访问完毕时
#a1:HOVER{ }鼠标浮动时
#a1:ACTIVE{ }被激活时
p:HOVER{ color : yellow; background-color : pink }
p:FIRST-CHILD{ }p的父元素下的第一个p元素
ul li:FIRST-CHILD{ }ul下li的父元素下第一个li二、css样式属性
1.css中对Html元素的分类
样式属性通过display设置。
- 块元素 独立成行 div , p , h1-h6 , table
- 行内元素 font a b u i span
- 行内成块元素 多个元素成一行，并拥有自己的宽度高度 input,select
2.盒子模型
border: 1px solid red;线宽、样式、颜色，可乱序
border-bottom: 5px yellow solid;
border-radius: 10px;边框圆角
padding (内边距)
padding:上 右 下 左
margin (外边距)
margin：上 右 下 左3.层关系
静态关系：块与块之间，默认 position : static
动态关系：
z-index:5[大者在上]
left,top...(position为动态关系时,距离前后左右设置)
相对关系：position:relative 相对位置关系
绝对关系：position:absolute 相对于0，0点 4.文本
1. font
font-size: 80px; 文字大小
font-weight: bold; 文字加粗
font-style: italic;文字斜体
font-family:"楷体"; 文字字体 2. text
text-align: center; 对齐方式(块元素)
text-decoration: underline; 下划线
text-indent: 2em; 缩进2字符(块元素)
text-transform: uppercase; 转大写 3. letter
letter-spacing: 10px; 字间距10像素
line-hight:5px; 行高
word-spacing: 20px; 单词间距20像素
overflow:hidden[scroll] 内容超出部分处理方式[隐藏，滚动] 4 .background
background-color: turquoise; 颜色
background-image: url(/bg/2.jpg); 图片地址
background-repeat: no-repeat; 重复方式
background-position: left center; 摆放位置
background-position: 100px 300px; 绝对摆放方式
background-position: -1000px -300px;
float: left; 左悬浮，取消独立成行性