1. HTML
HTML的全称为超文本标记语言,是一种标记语言
1.2 语法
标签:由开始标签和结束标签组成 自闭标签
属性:每个标签都可以设置属性
注释:< !-- 注释 – >
空格:   ;
回车: < br/ >
1.2常用标签
标题标签:
< h1 >< /h1 > h1(大)~h6(小)
列表标签:
有序:< ol >+< li >
无序:< ul >+< li >
type属性可以设置列表前符号
图片标签:
< img >< /img >
属性:src 用来指定图片位置,width 设置图片宽度,height 设置图片高度,单位是像素px
超链接标签:
< a href="…" >< /a >
属性:href 用来跳转到指定网址,target 用来指定打开方式(默认_self,新窗口_blank)锚定:使用a标签回到顶部
< a name=“top” >顶部< / >
< a href="#top" >回到顶部< /a >
input标签:
实现输入各种类型的数据
- < input type=“text”/ > < !-- 普通文本-- >
- < input type=“password”/ > < !-- 密码-- >
- < input type=“number”/ > < !–纯数字-- >
- < input type=“button” value=“点我”/ > < !-- 按钮-- >
- < input type=“radio” name=“sex” value=“1”/ >男 < !-- 单选-- >
- < input type=“radio” name=“sex” value=“0”/ >女 < !-- 单选-- >
- < input type=“checkbox”/ name=“city” value=“1” > 选项1 < !-- 多选-- >
- < input type=“checkbox”/ name=“city” value=“2” > 选项2 < !-- 多选-- >
- < input type=“submit”/ > < !-- 提交按钮-- >
- < input type=“reset”/ > < !-- 重置按钮-- >
- < input type=“email” / > < !-- 邮箱-- >
- < input type=“date” / > < !-- 日期 年月日-- >
表格标签:
在页面插入表格
< table >
< tr > < !-- 行 – >
< td >< /td > < !-- 列 – >
< /tr >
< /table >
属性:< table > border=“1px” 表格边框 cellspacing=“1px” 单元格间距
bgcolor 背景色
< td rowspan=“2”> 合并2行
< td colspan=“2” > 合并2列
表单标签:
用来向服务器提交数据,想要提交数据必须给form内需收集数据标签配置name属性
< form method=“get” action="#">
< table >
< tr > < !-- 行 – >
< td >< /td > < !-- 列 – >
< /tr >
< table >
< /form >
属性:
method=“get” 提交的数据都在地址栏显示,不安全,有大小限制
method=“post” 看不到提交的数据,安全,没有大小限制
action="#" 提交到指定位置,#未指定
下拉框标签:
< select name=“city” >
< option value=“1” >北京< /option >
< option value=“2” >上海< /option >
< /select >
其他标签:
音频标签:
< audio controls=“controls” > < !-- 属性controls为使用默认控件 – >
< source src="…" >
< /audio >
视频标签:
< video >
< source src="…" >
< /video >
属性:controls使用默认控件,src文件路径
段落标签:可以输入大量文字
< div >< /div >
< p >< /p >
< span >< /span >< div >,< p >,< h1~h6 >属于块元素(默认自动换行),
< span >,< input >,< a >,< img > 属于行内元素(默认不换行)
2. CSS
层叠样式表,用来修饰网页效果的语言
2.1 语法
选择器{ 修饰的效果 }
body{ width : 500 ; bgcolor : red ; }
2.2 用法
1)在 HTML 标签中使用style属性
< div style=" color:red ; font-size : 30px ; "> 测试 < /div >
2)在 head 标签内部使用style标签
< head >
< style >
div{
color : blue ;
font-size : 30px ;
}
< /style >
< /head >
3)在 head 标签中使用 link 标签引入 css 文件
创建css文件,在css文件中设置选择器和属性
在html文件中通过< link >引入css文件
< link rel = " stylesheet " href = " css文件路径 " / >
2.3 选择器
标签名选择器:通过标签名修饰标签效果
div { 属性1:值 ;属性2:值 ; }
class选择器:给标签添加class属性,通过点操作符 " . " 调用class属性的标签来修饰标签效果
. class值 { 属性1:值 ;属性2:值 ; }
id选择器:给标签添加id属性,通过 " # " 调用id属性的标签来修饰标签效果
#id值 { 属性1:值 ;属性2:值 ; }
分组选择器:用不同的选择器选中多个标签来修饰标签效果
.class值 , #id值 , div { 属性1:值 ;属性2:值 ; }
属性选择器:按照标签属性的值选中标签来修饰标签效果
input [ type = " text " ] { 属性1:值 ;属性2:值 ; }
2.4 盒子模型
将HTML中所有元素都看成一个盒子,盒子与盒子之间的距离、边框以及盒子边框和盒子内容的距离都可以设置。
border :盒子的边框,可以设置粗细 颜色 实线/虚线 border:2px dashed red;
padding::容和边框的距离 padding:20px;
width、height:设置内容的宽度高度 width:10px;height:10px;
margin:盒子和盒子的距离 margin:10px;