文章目录
HTML(Hyper Text Markup Language)
超文本标记语言
“超文本”指页面可以包含图片,链接,音乐,程序等非文本元素。
标签
表格标签
< table>:表格容器
属性:
border:表格边框的宽度。
width:表格的宽度。
cellpadding:单元格边与内容之间的空白。
cellspacing:单元格之间的空白。
< tr>:定义行
< td>:定义单元格
属性:
colspan:单元格可以横跨的列数。
rowspan:单元格可以横跨的行数。
align:单元格内容水平对齐的方式。
nowrap:单元格中的内容是否折行。
< th>:定义表头
超链接标签
< a>:超链接标签
图片标签
< img />:图片标签
属性:
src:url。
alt:图片无法显示时的替代文本。
框架标签
< frame>:
用于设置 < framset>框架集中的一个页面(框架)。
属性:
src:url。
noresize:框架分隔先不能移动。
target:确定需要显示的页面在何处显示。
< frameset>:
框架集,由多个单独< frame>组成。
注意:
- < framset>和< body>不能共存
- < framset> 可以嵌套使用。
排版标签
< hn>:标题标签
< p>:段落标签
< br />:插入单个换行
< hr />:水平分割线
< b>:粗体
< i>:斜体
列表标签
< ul>:无序列表
属性type:取值A,a,I,i,1等
< li>:定义列表项
< ol>:有序列表
属性type:desc实心圆,square方块,circle空心圆
表单
表单标签< form>
< form>表单标签,在浏览器上没有任何显示。
如果数据需要提交到服务器,负责搜集数据的标签必须存放在表单标签体内容。
属性:
action:表单提交到服务器路径
method:请求方式。
get:默认值,提交数据追加在路径上。
post:
输入域标签< input>
属性:
name:服务器通过属性值获得提交的数据。
value:input标签默认值
size:大小
checked:单选框或者复选框被选中
readonly:是否只读
disabled:是否可用
maxlength:允许输入最大长度
type:
text:文本框,默认宽度20字符
password:密码框
radio:单选框
submit:提交按钮
checkbox:复选框
file:文件上传组件
hidden:隐藏字段,数据会发送服务器,但浏览器不显示
reset:重置按钮,将表单恢复到默认值
image:图形提交按钮
button:普通按钮
下拉列表标签:< select>
< select>:可进行单选或者多选。需要使用子标签< option>指定列表项
属性:
name:发送给服务器的名称
multiple:不写默认单选,取值为multiple表示多选。
size:多选时,可选择数
< option>子标签:下拉列表中的一个选项。
selected:勾选当前列表项
value:发送给服务器的选项值。
文本域标签:< textarea>
多行文本输入控件。
CSS
CSS(Cascading Style Sheets):层叠样式表
具体格式:
选择器{
属性1:属性值;
属性2:属性值;
...
}
注意:
- 选择器区分大小写,属性和属性值不区分大小写。
- 如果属性值由包含空格的多个单词组成,则为其加上引号
- 在css代码中空格不被解析
引入css样式
1)行内样式
通过标签的style属性来设置元素样式
2)内部样式
对其所在的HTML页面有效,可以对多处标签统一设置样式。
3)外部样式
可以被多个页面使用
<!--方式三:外部样式
rel="stylesheet",固定值,表示样式表
type="text/css",固定值,表示css类型
href,css文件位置
font_family ,使用字体,多个字体使用逗号分隔
-->
<link rel="stylesheet" type="text/css" href="css/xxx.css" />
选择器
用于找到要使用css样式的目标元素
1)元素选择器
为页面中同类型标签统一样式
具体格式:
标签名{
属性1:属性值;
属性2:属性值;
...
}
2)ID选择器
id名为html元素的id属性值
具体格式:
#id名{
属性1:属性值;
属性2:属性值;
...
}
3)类选择器
类名为html元素的class属性值
具体格式:
.类名{
属性1:属性值;
属性2:属性值;
...
}
可以为元素对象定义单独或者相同的样式。
高级用法:给指定标签设定class样式
具体格式:
标签.类名{
属性1:属性值;
属性2:属性值;
...
}
4)属性选择器
元素选择器的扩展,对标签进一步过滤。
标签名[标签属性='标签属性值']{
属性1:属性值;
属性2:属性值;
...
}
5)包含选择器
给指定父标签的后代标签设置样式
父标签 后代标签{
属性1:属性值;
属性2:属性值;
...
}
css样式
- border:设置边框的样式
- width,heigth:宽高
布局float
默认排版方式:将页面中的元素从上到下排列
实际开发中,需要左右方式进行排版,就需要使用浮动
选择器{float:value;}
常用属性值:
left:左浮动
right:右浮动
none:不浮动(默认值)
由于浮动元素不在占用原来该占有的位置,所有会对其它元素排版产生影响。为了避免影响,可以使用clear来清除浮动。
选择器{clear:value;}
常用属性值:
left:清除左边浮动影响
right:清除右边浮动影响
both:同时清除左右浮动影响
display块元素与行内元素转换
- 块元素
每个块元素独占一行或多行,如div,hn,ul等 - 行内元素
不独占也不强迫其它元素独占一行如a,span等
转换:
选择器{display:属性值}
常用属性值:
inline:行内元素(行内元素默认的display属性值)
block:块元素(块元素默认的display属性值)
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。
none:隐藏元素,不显示,也不占用页面空间。
盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):