目录
一、常用标签
1、文本标题(h1-h6)
<h1>一级标题</h1> ······ <h6>六级标题</h6>
有自己的文本大小,并且独占一行,有默认行距
2、段落文本(p)
<p>段落文本内容</p>
段落与段落之间有段间距
3、换行(br)
<br>或<br/>
强制换行
4、水平线(hr)
<hr>或<hr/>
属性:
color=====颜色(red,green·····)
width=====宽度(···px)
align=====对齐方式(left,center,right)
noshade===取消阴影(可以直接写)
5、字体加粗(推荐strong)
<strong>强调的内容</strong>
突出的文本
<b>加粗内容</b>
只是显示加粗
6、倾斜文本(推荐em)
<em>强调文本</em>
倾斜+强调
<i>倾斜文本</i>
7、带删除线的文本(推荐del)
<del>文本</del>
<s>文本</s>
8、<u>文本</u> 下划线
<sub>文本</sub> 下标
<sup>文本</sup> 上标
9、特殊符号
"<"===="<"(左尖角号)
">"====">"(右尖角号)
" "====" "该空格占据宽度受【字体】影响
" "占据的宽度正好是1个中文宽度,不受字体影响
"©"===="©"(版权)
"™"===="™"(商标)
10、div标签
<div>文本</div>
用来划分页面的区域,独占一行,无具体含义
11、span标签
<span>文本</span>
主要用于文本独立修饰的时候,内容有多宽就占用多宽的空间距离,无具体含义
12、列表
1)无序列表
<ul type="">
<li>文本</li>
<li>文本</li>
</ul>
属性:
type:disc(实心圆),circle(空心圆),square(方块),none(不显示)
2)有序列表
<ol type="" start="">
<li>文本</li>
<li>文本</li>
</ol>
属性:
type:1,a,A,i,I
start:只能是一个数字,表示从第几个开始
3)自定义列表
<dl>
<dt>可以是文字或者图片</dt>
<dd>相关文字</dd>
</dl>
13、图片标签
<img src="" title="" alt="" width="" height="">
属性:
src:图片路径(../返回上一级)
title:鼠标悬停图片上去的提示信息
alt:图片加载失败的提示信息
width:宽度(···px)
heigh:高度(···px)只有一个的话保持纵横比
14、超链接标签
<a href="" title="" target="">文本或图片</a>
属性:
href:跳转路径
title:鼠标悬停上去的提示信息
target:_self(不新建标签页,默认值),_blank(新窗口打开) 规定在何处打开文档
15、table表格
<table border="" width="" height="" align="">
<tr height="">
<td>文本1</td>
<td>文本2</td>
</tr>
<tr>
<td>文本3</td>
<td>文本4</td>
</tr>
</table>
tr表示行,td表示单元格
table属性:
border:外边框线宽度,只能为数字
width:表格宽度(···px,···%(相对于父元素的百分比))
height:表格高度(···px,···%(相对于父元素的百分比))
align:水平对齐方式(left,center,right)
bordercolor:外边框颜色
bgcolor:背景颜色
cellspacing:单元格与单元格之间的间距 (数字)
cellpadding:单元格与内容之间的空隙 (数字)
tr属性:
height:行高
bgcolor:行的背景颜色
align:整行文本水平对齐(left,center,right)
valign:整行文本垂直对齐(top,middle,bottom)
单元格td属性:
width:宽度(影响整列宽度)
height:高度(影响整行高度)
bgcolor:背景颜色
align:文本水平对齐(left,center,right)
valign:文本垂直对齐(top,middle,bottom)
colspan:横向占几格
rowspan:纵向占几格
16、表单标签
<form action="" method="">
用户信息:<input type="text" placeholder="请输入用户名" name="">
<br>
密码:<input type="password" placeholder="请输入密码" name="">
<br>
<input type="submit" value="登录">或<button type="submit">登录</button>
</form>
form属性:
action:提交地址
method:post(看不到提交信息),get(看的到)
input属性:
type:输入的文本属性(text:文本,password:密码,submit:提交按钮,reset:清空按钮,
button:校验输入内容是否符合标准,placeholder:提示框内容)
value:自定义内容的按钮
name:向后台提供信息,可以自己写
17、CSS—外部样式表
1)<link rel="stylesheet" type="text/css" href="路径" />
2)<style>
@import url(路径);
</style>
18、CSS—行内样式表
<h1 style="color:red; width:200px;">11111</h1>
二、选择器
1、class选择器
.class名{属性:属性值;}
如:<div class="a"></div>
.a{width:200px; background:green;}
2、id选择器
#id名{属性:属性值;}
如:<div id="box"></div>
#box{width:300px; height:300px;}
起名要起英文名,不能用关键字:(所有标签和属性都是关键字)
id只能有一个名字,一个名字也只能用一个id(唯一性)
3、通配符/通配选择器
*{属性:属性值;}
如:*{margin:0; padding:0;}表示清除所有元素的默认边距和默认值
“*”指所有元素
4、群组选择器
选择符1, 选择符2, 选择符3.....{属性:属性值;}
如:#top1, div, h1{width:960px;}
margin:0 auto;实现盒子的水平居中
5、包含/后代选择器
选择符1 选择符2{属性:属性值;}
如:结构:<ul class="list">
<li></li>
<li></li>
</ul>
.list li{background:red;}
6、伪类选择器
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停,即鼠标滑过超链接时的状态;
a:active{属性:属性值;}鼠标按下时超链接的状态;
顺序从上往下写
三、文本属性
1、字体大小
font-size
单位是px,浏览器默认是16px,设计图常用字号是12px
2、字体
font-family
多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推
当字体是中文字体、英文字体中有空格时,需加双引号
3、颜色
color
color:red;color:#ff0;color:rgb(255,0,0);
4、加粗
font-weight
bolder(更粗的)/bold(加粗)/normal(常规)
100-500不加粗 600-900加粗
5、倾斜
font-style
italic(倾斜)/oblique(倾斜,强调)/normal(正常)
6、文本水平对齐
text-align
left(水平靠左) right(水平靠右) center(水平居中)
justify(水平两端对齐,但只对多行起作用)
7、行高
line-height
line-height=height,可实现单行文本垂直居中
8、首行缩进
text-indent
可以取负值,属性只对第一行起作用
9、字间距和词间距
letter-spacing
控制文字和文字之间的间距
word-spacing
在英文中控制单词和单词之间的间距
10、文本修饰
text-decoration
none(没有) underline(下划线) overline(上划线) line-through(删除线)
11、文字简写
font
font是font-style font-weight font-size / line-height font-family的简写
font:italic 800 30px/80px "宋体";顺序不能改变,必须同时指定font-size和font-family
属性时才起作用
12、检索大小写
text-transform
capitalize(首字母大写) lowercase(全为小写) uppercase(全为大写) none(常规)