目录---便于查找(话不多说直接撸码)
1.第一个html页面
2.html标签_标题标签
3.浏览器的内核
4.html标签_水平线标签
5.html标签_字体标签
6.html标签_格式化标签
7.html标签_段落标签
8.html标签_图片标签
9.html标签_列表标签
10.html标签_超链接标签
11.html标签_表格标签
12.html标签_表单相关标签
13.html标签_from表单的属性
14.html标签_表单的提交方式
15.html标签_div&span标签
16.CSS样式规则
17.引入css样式三种方式
18.CSS的选择器
19.CSS样式_边框和尺寸
20.CSS样式_转换属性
21.CSS样式_字体属性
22.CSS样式_背景色&背景图片属性
23.CSS样式_浮动属性
24.CSS样式_盒子模型
1.第一个HTML页面
<html>
<head>
<meta charset="UTF-8">
<title>这是页面的标题</title>
</head>
<body>
这是正文,页面中显示的内容
</body>
</html>
2.html标签_标题标签
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--
标题标签:在页面中显示一个标题,标题中的文字会自动加粗,标题会独自占用一行
格式:
<h1>标题文字</h1>
<h2>标题文字</h2>
<h3>标题文字</h3>
<h4>标题文字</h4>
<h5>标题文字</h5>
<h6>标题文字</h6>
特点:
数字越小,标题越大
常用的快捷键:
复制一行:ctrl+shift+r
删除一行:ctrl+d
上下移动行:ctrl+↑↓
保存:ctrl+s
-->
我是普通的文字
<h1>你好h1</h1>
<h3>你好h3</h3>
<h6>你好h6</h6>
</body>
</html>
3.浏览器的内核
<html>
<head>
<meta charset="UTF-8">
<title>浏览器的内核</title>
</head>
<body>
<!--
浏览器的内核:浏览器的解析引擎
作用:当我们使用浏览器打开html文件的时候,浏览器就会使用自带的内核自上到下
解析页面中的标签,把标签解析成我们能看懂的内容
IE内核(壳子浏览器:360,遨游,世纪之窗,QQ...):不建议使用,IE9以下版本不支持html5
火狐内核:建议使用
谷歌内核/苹果内核:建议使用
-->
</body>
</html>
4.html标签_水平线标签
<html>
<head>
<meta charset="UTF-8">
<title>水平线标签</title>
</head>
<body>
<!--
水平线标签:在页面中绘制一条横线,可以把页面分成上下两部分
格式:
<hr/>:自闭和标签,没有标签体和结束标签
属性:
- size属性：水平线的高度，单位像素px
- noshade属性：没有阴影，取值：noshade，表示显示纯色
-->
你好
<hr/>
我好
<hr size="10px"/>
大家好
<hr size="10px" noshade="noshade"/>
</body>
</html>
5.html标签_字体标签
<html>
<head>
<meta charset="UTF-8">
<title>字体标签</title>
</head>
<body>
<!--
字体标签:用于设置字体的大小,颜色和字体
格式:
<font>要设置的字体</font>
属性:
size:用于设置字体的大小,浏览器默认字体是3号,设置的范围1-7号,数字越大字体越大
color:用于设置字体的颜色
属性值:
1.字体的英文单词: 红色red,绿色green,蓝色blue
2.三色通道:红绿蓝RGB,以#开头,使用十六进制表示
红的:#FF0000 #F00
绿色:#00FF00
蓝色:#0000FF
任意:#123456
face:用于设置字体,火狐默认字体:微软雅黑,IE默认字体:宋体
-->
我是默认字体
<font size="7">我是最大的字体</font>
<font color="red">我是红色的字体</font>
<font color="#0000FF" size="6">我是蓝色的6号字体</font>
<font face="楷体">我是楷体</font>
</body>
</html>
6.html标签_格式化标签
<html>
<head>
<meta charset="UTF-8">
<title>格式化标签</title>
</head>
<body>
<!--
格式化标签:给文字进行格式化
加粗:使用b标签
格式:
<b>被加粗的文字</b>
斜体:使用i标签
格式:
<i>被斜体的文字</i>
注意:
同级标签是可以相互嵌套使用的
<b><i>被加粗和斜体的文字</i></b>
<font><b><i>被加粗和斜体的文字</i></b></font>
-->
普通文字
<b>加粗的文字</b>
<i>斜体文字</i>
<b><i>即加粗又斜体的文字</i></b>
<font color="red"><b><i>即加粗又斜体的红色文字</i></b></font>
</body>
</html>
7.html标签_段落标签
<html>
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<!--
段落标签:可以把文字分段显示,会在每段的前后增加一些空白
格式:
<p>一段文字</p>
换行标签:把文字进行换行
格式:
<br/>
快捷键:
shift+回车
空格:浏览器不识别,使用转义字符
1/3个空格 3个字符是一个中文
-->
<p>
致力于服务各大软件企业，解决当前软件开发技术飞速发展<br/>
致力于服务各大软件企业，解决当前软件开发技术飞速发展
</p>
<p>
致力于服务各大软件企业，解决当前软件开发技术飞速发展<br />
致力于服务各大软件企业，解决当前软件开发技术飞速发展
</p>
</body>
</html>
8.html标签_图片标签
<html>
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
图片标签:在页面中显示一张图片
格式:
<img/> 自闭和标签
属性:
src:图片的路径,一般都使用相对路径,图片一般都放在项目的img文件夹下
alt:图片丢失,显示的文字
height:设置图片的高度,单位的是像素px
width:设置图片的宽度,单位的是像素px
title:设置图片的标题,鼠标移动到图片上,会显示
-->
<img src="img/1.jpg" height="200px" width="130px" alt="美女走丢了" title="我是大美女"/>
<img src="img/2.jpg" height="200px" width="130px" alt="美女走丢了" title="我是大美女"/>
<img src="图片" height="200px" width="130px" alt="美女走丢了" title="我是大美女"/>
</body>
</html>
9.html标签_列表标签
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--
列表标签:在页面中显示一个列表
有序列表:使用ol
格式:
<ol></ol>
属性:
type:设置列表显示的文字,1(默认),I,a,A...
无序列表:使用ul
格式:
<ul></ul>
属性:
type:设置列表显示的形状
取值：disc 实心圆(默认)、square 方块 、circle 空心圆
列表项:使用li,是ul和ol的子标签
格式:
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
注意:
1.列表标签ol和ul必须和他们的子标签li一起使用,否则没有意义
2.列表标签也会占用一行,一个li占用一行
-->
<!--有序列表:使用ol-->
<ol>
<li>百度</li>
<li>新浪</li>
<li>传智</li>
</ol>
<ol type="a">
<li>百度</li>
<li>新浪</li>
<li>传智</li>
</ol>
<ol type="A">
<li>百度</li>
<li>新浪</li>
<li>传智</li>
</ol>
<ol type="I">
<li>百度</li>
<li>新浪</li>
<li>传智</li>
</ol>
<!--
ol的属性start,设置阿拉伯数字的开始显示的数字
-->
<ol start="100">
<li>百度</li>
<li>新浪</li>
<li>传智</li>
</ol>
<!--无序列表:使用ul-->
<ul>
<li>百度</li>
<li>新浪</li>
<li>传智</li>
</ul>
<ul type="circle">
<li>百度</li>
<li>新浪</li>
<li>传智</li>
</ul>
<ul type="square">
<li>百度</li>
<li>新浪</li>
<li>传智</li>
</ul>
</body>
</html>
10.html标签_超链接标签
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<!--
超链接标签:让页面进行跳转,可以由一个页面跳转到另外一个页面
格式:
<a>链接的文字|图片</a>
属性:
href:设置跳转的路径
属性值:可以是其他的html页面或者jsp页面
07_html标签_段落标签.html
也可以是网址,必须写全了
http://www.baidu.com
http://www.itcast.cn
target:设置跳转方式
属性值:
_self:在当前页面打开新的链接,不写默认
_blank:在新的页面打开新的连接
-->
<!--文字超链接-->
<a href="07_html标签_段落标签.html">跳转到段落标签页面</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--图片超链接-->
<a href="http://www.baidu.com" target="_blank">
<img src="img/logo2.png"/>
</a>
</body>
</html>
11.html标签_表格标签
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
表格标签:在页面中绘制一个表格,一般用于页面的排版(可以让页面中的内容对齐)
格式:
<table></table>:创建一个表格,单独书写没有意义,配合子标签一起使用
table子标签tr:行标签
<tr></tr>
tr标签的子标签td|th:列标签
<td></td>:列标签
<th></th>:表头标签,表头中的文字会自动的加粗居中显示
表格的属性:
- border 表格边框的宽度,单位是像素px
- width 表格的宽度,单位是像素px
- cellpadding 单元边沿与其内容之间的空白,单位是像素px 。
- cellspacing 单元格之间的空白,单位是像素px 。
- bgcolor 表格的背景颜色。
- align 单元格内容的水平对齐方式, 取值：left 左 、right 右、center 居中。
- nowrap 单元格中的内容是否折行。(td的属性)
-->
<!--
练习1：编写3(行)*3(列)表格，使用<th>修饰表头
-->
<table border="1px" cellspacing="0px" cellpadding="0px" width="200px" bgcolor="pink">
<!--定义第一行-->
<tr>
<!--定义第一行第一列-->
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<!--定义第二行-->
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<!--定义第三行-->
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
<br />
<br />
<!--
实例2：编写3*3表格，将第一行3列全部合并为1列
-->
<table border="1px" width="200px" cellpadding="0px" cellspacing="0px">
<tr bgcolor="darkgray">
<!--
把1-1,1-2,1-3合并为一列,使用列合并,colspan="合并的列数"
合并的一列1-1就会占用3列的位置
删除多余1-2和1-3
-->
<td colspan="3">1-1</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
<br />
<br />
<!--
实例3：编写3*3表格,将第一列3行全部合并1行
-->
<table border="1px" width="200px" cellpadding="0px" cellspacing="0px">
<tr>
<!--
把1-1,2-1,3-1这3行合并为1行
使用rowspan="合并的行数"
合并完1-1就会占用3行的位置
删除多余2-1和3-1
-->
<td rowspan="3" bgcolor="yellow">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td align="right">2-2</td>
<td align="center">2-3</td>
</tr>
<tr align="center">
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
<br />
<br />
<table border="1px" width="100px" cellspacing="0px" cellpadding="0px">
<tr>
<!--
- nowrap 单元格中的内容是否折行。(td的属性)
不换行
-->
<td>11111111 222222222222 333333333333 444444444444</td>
<td nowrap="nowrap">11111111 222222222222 333333333333 444444444444</td>
</tr>
</table>
</body>
</html>
12.html标签_表单相关标签
<html>
<head>
<meta charset="UTF-8">
<title>表单相关标签</title>
</head>
<body>
<!--
表单相关标签(重点):可以让用户在表单中输入一些数据,获取到用户输入的数据
把数据传递到后台的服务器中,在服务器中把数据保存到数据库中
form标签:在页面中绘制一个表单,单独书写没有意义,配合子标签一起使用
属性:
action:设置表单提交的路径,一般都是java中的一个类,没有路径写#
method:设置表单的提交方式,GET,POST
form的子标签input标签:让用户在标签中输入属性
属性type
type的属性值:
- text:普通文本
- password:密码输入框,里边的密码以黑色的小圆点显示
- radio:单选框
- checkbox:多选框
- file:上传文件
- image:上传图片使用
- hidden:隐藏域,存储数据使用,不会在浏览器页面显示
- button:普通按钮,配合js使用
- reset:重置按钮,把表单的恢复到默认状态(清空表单)
- submit:提交按钮,把表单的数据,提交到服务器。
form的子标签select标签(下拉选):让用户在多个值中选择一个
from的子标签textarea标签:多行文本域,可以让用户输入多行数据
-->
<!--在页面中绘制一个表单,使用form标签-->
<form action="#" method="get">
<!--使用input标签让用户输入数据-->
<!--
- text:普通文本
-->
用户名:<input type="text"/><br />
<!--
- password:密码输入框,里边的密码以黑色的小圆点显示
-->
密码:<input type="password" /><br />
<!--
- radio:单选框
表单标签的属性name,可以给标签起一个名字
同名的radio标签互斥,只能选择一个
表单标签的属性checked,设置单选/复选框默认选中
-->
请选择您的性别:
男<input type="radio" name="sex" checked="checked" />
女<input type="radio" name="sex" /><br />
<!--
- checkbox:多选框
-->
请选择您的爱好:
吃饭<input type="checkbox" checked="checked" />
睡觉<input type="checkbox" />
打豆豆<input type="checkbox" /><br />
<!--
- file:上传文件
-->
<input type="file" /><br />
<!--
- image:上传图片使用
src:设置图片的路径
height:设置图片的高度,单位像素px
width:设置图片的宽度,单位像素px
-->
<input type="image" src="img/middle01.jpg" height="100px" width="150px" />
<br />
<!--
- hidden:隐藏域,存储数据使用,不会在浏览器页面显示
表单标签的属性value,给标签设置默认值
-->
<input type="hidden" value="苹果"/>
<!--
- button:普通按钮,配合js使用
value属性:
标签是按钮标签(button,reset,submit),value属性是设置标签显示的文字
其他标签:设置标签的默认值
-->
<input type="button" value="我是一个按钮" />
<!--
- reset:重置按钮,把表单的恢复到默认状态(清空表单)
-->
<input type="reset" />
<!--
- submit:提交按钮,把表单的数据,提交到服务器。
-->
<input type="submit" />
<br />
<br />
<!--
form的子标签select标签(下拉选):让用户在多个值中选择一个
单独写一个select标签没有意义,配合子标签option一起使用
option标签:下拉选的列表项,有几项就写几个option
-->
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<br />
<br />
<!--
from的子标签textarea标签:多行文本域,可以让用户输入多行数据
属性:
rows:设置显示的行数
cols:设置显示的列数
-->
<textarea rows="10" cols="20"></textarea>
</form>
</body>
</html>
13.html标签_from表单的属性
<html>
<head>
<meta charset="UTF-8">
<title>from表单的属性</title>
</head>
<body>
<!--
from表单的属性
- name：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据。
表单标签必须有一个name的属性
- value属性：设置input标签的默认值。button,submit和reset为按钮显示数据
除了文本输入框(text,password,textarea),其他标签必须有vlaue属性值
- checked属性：单选框或复选框被选中。
- readonly：是否只读
- disabled：是否可用
- html5有一个属性叫placeholder,设置标签的默认值,标签中输入数据默认值会隐藏,删除数据默认值会显示
-->
<form action="#" method="get">
用户名:<input type="text" name="username" value="张三"/>
用户名:<input type="text" name="username" placeholder="请输入用户名"/>
用户名:<input type="text" name="username" readonly="readonly"/>
用户名:<input type="text" name="username" disabled="disabled"/>
密码:<input type="password" name="password" placeholder="请输入密码"/><br />
请选择您的性别:
男:<input type="radio" name="sex" checked="checked" value="男" />
女:<input type="radio" name="sex" /><br />
请选择您的爱好:
吃饭<input type="checkbox" checked="checked" name="hobbies" value="eat"/>
睡觉<input type="checkbox" name="hobbies" value="sleep"/>
打豆豆<input type="checkbox" name="hobbies" value="hitbeanbean"/><br />
<!--
select标签的属性值
<select> 下拉列表。可以进行单选或多选。需要使用子标签<option>指定列表项
- name属性：发送给服务器的名称
- multiple属性：不写默认单选，取值为“multiple”表示多选。
- size属性：多选时，可见选项的数目。
- <option> 子标签：下拉列表中的一个选项（一个条目）。
- selected ：勾选当前列表项
- value ：发送给服务器的选项值。不写默认把标签中的文本发送到服务器
-->
<select name="citys">
<option value="bj">北京</option>
<option>上海</option>
<option>广州</option>
<option selected="selected">深圳</option>
<option>杭州</option>
</select>
<select multiple="multiple" size="2">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
</select>
</form>
</body>
</html>
14.html标签_表单的提交方式
<html>
<head>
<meta charset="UTF-8">
<title>表单的提交方式</title>
</head>
<body>
<!--
表单的提交方式:使用form的属性method设置
1.get:会把表单中的数据追加到浏览器的地址栏中提交到服务器
格式:
xxx.html?k=v&k=v...
会在浏览器的地址栏地址后边添加一个?,?后边就是提交的数据
数据会以键值对的形式提交key=value,多个数据使用&符号连接
key:标签name的属性值 name="username" key:username
value:标签的value的属性值 value="男" value:男
文本输入框,value是在页面中输入的内容
除了文本输入框(text,password,textarea),其他标签必须有vlaue属性值
xxxx.html?username=jack&password=1234&sex=男&hobbies=eat&hobbies=sleep&citys=bj#
xxxx.html?username=jack&sex=男&hobbies=eat&hobbies=on&hobbies=hitbeanbean&citys=上海#
问题:
a.暴漏了敏感信息(密码)
b.浏览器的地址栏长度是限制的,不能传递大的数据(最大2048kb)
2.post:会把表单中的数据隐藏在表单中提交到服务器
好处:
a.安全
b.可以提交比较大的数据
-->
<form action="#" method="post">
用户名:<input type="text" name="username" placeholder="请输入用户名"/>
密码:<input type="password" name="password" placeholder="请输入密码"/><br />
请选择您的性别:
男:<input type="radio" name="sex" checked="checked" value="男" />
女:<input type="radio" name="sex" /><br />
请选择您的爱好:
吃饭<input type="checkbox" checked="checked" name="hobbies" value="eat"/>
睡觉<input type="checkbox" name="hobbies" value="sleep"/>
打豆豆<input type="checkbox" name="hobbies" value="hitbeanbean"/><br />
<select name="citys">
<option value="bj">北京</option>
<option>上海</option>
<option>广州</option>
<option selected="selected">深圳</option>
<option>杭州</option>
</select>
<input type="submit" />
</form>
</body>
</html>
15.html标签_div&span标签
<html>
<head>
<meta charset="UTF-8">
<title>div&span标签</title>
</head>
<body>
<!--
div&span标签:页面的流行布局方式div|span+css
可以把页面分成很多块,浏览器的内核解析页面的时候,读取完一块,就会显示一块,速度快
div标签:块标签,是一个行级标签,会独自霸占一行
span:块标签,是一个行内标签,只占一行中的一部分
注意:
div|span标签单独书写没有意义,配合css一起使用
-->
<div>div中的内容</div>div外边的内容
<span>span中的内容</span>span外边的内容
</body>
</html>
16.CSS样式规则
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式规则</title>
<!--
CSS样式规则:在html页面中如何使用css
格式:
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
...
属性名:属性值;
}
选择器:可以使用选择器选择到要添加样式的html标签,标签(元素)选择器,id选择器,class选择器
属性:给标签添加的样式,显示效果(字体大小,字体颜色,边框,尺寸...)
CSS的样式规则的写在一个style标签中
格式:
<style type="text/css">
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
...
属性名:属性值;
}
</style>
-->
<style type="text/css">
/*使用标签选择器,选择到h1标签*/
h1{
/*给h1标签添加字体大小*/
font-size: 50px;
/*给h1标签添加颜色*/
color: red;
/*给h1标签添加字体*/
font-family: "copperplate gothic bold";
}
/*h1{font-size: 50px;color: red;font-family: "copperplate gothic bold";}*/
</style>
</head>
<body>
<h1>我是一个h1标题</h1>
<h1>我是一个h1标题</h1>
<h1>我是一个h1标题</h1>
</body>
</html>
17.引入css样式三种方式
<html>
<head>
<meta charset="UTF-8">
<title>引入css样式三种方式</title>
<!--
引入css样式三种方式
1.行内样式:在标签上直接写一个style属性,属性的值就是要设置的css样式
格式:
<标签 style="属性名:属性值;...属性名:属性值;"></标签>
举例:
<div style="font-size:20px"></div>
作用域:
只在当前的标签有效
2.内部(内联)样式:在html页面中写一个style标签,在标签中写css的样式
格式:
<style>
选择器{
属性名:属性值;
属性名:属性值;
...
属性名:属性值;
}
</style>
作用域:
选择器选择到的所有的标签都有效
3.外部(外联)样式:新建一个以.css结尾的文件,在文件中写css样式
在html页面中需要使用link标签引入外部的css文件,可以被多个页面引入
格式:
<link href="外部css文件的路径" type="text/css" rel="stylesheet"/>
href="外部css文件的路径":一把都使用相对路径
type="text/css":可以省略不写,说明标签引入的是css
rel="stylesheet":说明引入的css文件和html文件的关系,css文件是html文件的样式表
优先级:
行内样式>内部样式|外部样式(谁写在后边,使用谁;后边的会覆盖前边的)
-->
<!--2.内部(内联)样式-->
<style>
h2{
color: blue;
}
div{
font-size: 100px;
color: green;
}
</style>
<!--3.外部(外联)样式-->
<link rel="stylesheet" href="css/1.css" />
</head>
<body>
<!--1.行内样式-->
<div style="font-size: 50px;">我是一个div</div>
<div>我是一个div</div>
<!--2.内部(内联)样式-->
<h2>我是h2标签</h2>
<h2>我是h2标签</h2>
<h2>我是h2标签</h2>
<h2>我是h2标签</h2>
<!--3.外部(外联)样式-->
<h2>我是h2标签</h2>
</body>
</html>
18.CSS的选择器
<html>
<head>
<meta charset="UTF-8">
<title>CSS的选择器</title>
<!--
CSS的选择器:使用选择器可以选择到要添加样式的html标签
分类:
1.标签选择器(元素选择器,标记选择器):根据标签名称,选项到标签
格式:
标签名称{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
举例:
<div></div>
div{...}
<span></span>
span{...}
2.id选择器:给html标签添加一个id属性,通过id的属性值选择到标签
格式:
<标签 id="d001"></标签>
<标签 id="d001"></标签>
<标签 id="d001"></标签>
#id的属性值{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
举例:
<div id="d001"></div>
<h1 id="d001"></h1>
#d001{...}
弊端:
id属性在页面中具有唯一性,之后会使用js获取标签
同id的标签,只能获取第一个
3.class(类)选择器:给html标签添加一个class属性,通过class的属性值选择到标签
格式:
<标签 class="c001"></标签>
<标签 class="c001"></标签>
<标签 class="c001"></标签>
.class的属性值{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
举例:
<div class="c001"></div>
<h1 class="c001"></h1>
.c001{...}
-->
<!--内部样式-->
<style>
/*1.标签选择器(元素选择器,标记选择器)*/
/*div{
color: orange;
}
h1{
color: orange;
}*/
div,h1{
color: orange;
}
/*2.id选择器*/
#d001{
color: greenyellow;
}
/*3.class(类)选择器*/
.c001{
color: #123456;
}
</style>
</head>
<body>
<!--1.标签选择器(元素选择器,标记选择器)-->
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<h1>我是一个h1标签</h1>
<h1>我是一个h1标签</h1>
<!--2.id选择器-->
<div id="d001">我是一个div</div>
<h1 id="d001">我是一个h1标签</h1>
<span id="d001">我是一个span</span>
<!--3.class(类)选择器-->
<div class="c001">我是一个div</div>
<h1 class="c001">我是一个h1标签</h1>
<span class="c001">我是一个span</span>
</body>
</html>
19.CSS样式_边框和尺寸
<html>
<head>
<meta charset="UTF-8">
<title>边框和尺寸</title>
<!--
边框和尺寸:
边框:使用border属性可以同时设置4个边框
属性值:可以同时设置3个值
边框的样式:solid 实线，none 无边，double 双线 等
边框的宽度:单位像素
边框的颜色:red,#FF0000
注意:这三个属性值可以一起书写,没有先后顺序,使用空格分割开
扩展:
border-left:左
border-right:右
border-top:上
border-bottom:下
尺寸:
高度:height,单位像素px
宽度:width,单位像素px
-->
<!--内部样式-->
<style>
div{
/*设置边框属性*/
border: solid 1px red;
border-bottom: double 10px blue;
/*设置尺寸属性*/
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<div>我是一个div</div>
</body>
</html>
20.CSS样式_转换属性
<html>
<head>
<meta charset="UTF-8">
<title>转换属性</title>
<!--
转换属性:可以把行内标签和行级标签相互转换,还可以隐藏标签
行内标签:只占一行中的一部分
a,span,img...
行级标签:霸占一行
ul,ol,div,h1-h6...
选择器{display:属性值}
常用的属性值：
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。
-->
<style>
div{
border: solid 1px red;
}
span{
border: solid 1px green;
}
</style>
</head>
<body>
<div>我是一个div我会霸占一行</div>
<!--使用display属性,把div改变为行内元素-->
<div style="display: inline;">我是一个div,我被转换为行内标签</div>
<span>我是一个span,我只占一行的一部分</span>
<!--使用display属性,把span改变为行级元素-->
<span style="display: block;">我是一个span,我会霸占一行</span>
<!--使用display属性,隐藏标签-->
<div style="display: none;">我是一个div,我被藏起来了</div>
</body>
</html>
21.CSS样式_字体属性
<html>
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<!--
字体属性:
color：颜色，字体颜色
font-size:字体的大小,像素px
扩展:了解
font-family:字体,幼圆,宋体,楷体...
text-decoration: none 取消文字上的下划线
-->
</head>
<body>
<a href="#" style="color: red;">我是红色超链接</a>
<a href="#" style="font-size: 50px;">我是50px字体的超链接</a>
<a href="#" style="font-family: 楷体;">我是楷体超链接</a>
<a href="http://www.baidu.cn" style="text-decoration: none;">我是没有下划线的超链接</a>
</body>
</html>
22.CSS样式_背景色&背景图片属性
<html>
<head>
<meta charset="UTF-8">
<title>背景色&背景图片属性</title>
<!--
背景色&背景图片属性
background-color:设置背景色
扩展:了解
background-image:url(背景图片的连接)
-->
</head>
<body style="background-image: url(img/bg.jpg);">
<div style="height: 100px;width: 50px;background-color: pink;">1111</div>
<input type="submit" value="提交" style="background-color: red;"/>
</body>
</html>
23.CSS样式_浮动属性
<html>
<head>
<meta charset="UTF-8">
<title>浮动属性</title>
<!--
浮动属性
float:让元素浮动起来,不在占用一行,多个元素放在一行显示
常用属性值：
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
clear:取消浮动
常用属性值：
left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右两侧浮动的影响
-->
<style>
div{
border: solid 1px red;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<!--div默认是上下布局-->
<div>1-1</div>
<div>2-1</div>
<!--
使用float属性,让div漂浮起来,不在占用1行
-->
<div style="float: left;">3-1</div>
<div style="float: left;">3-2</div>
<div style="float: right;">3-3</div>
<div style="float: right;">3-4</div>
<!--
使用clear属性,取消之前的浮动,让元素重新浮动
-->
<div style="clear:both;float: left;">4-1</div>
</body>
</html>
24.CSS样式_盒子模型
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<!--
盒子模型:所有html标签,都被一个盒子给装起来了
外边距:设置盒子的边框到其他盒子之间的距离或者盒子边框到body的距离
使用css的属性:margin,设置外边距
- margin:同时设置4个外边距
- margin-top:上外边距
- margin-bottom:下外边距
- margin-left:左外边距
- margin-rigt:右外边距
内边距:设置盒子的边框到盒子中元素的距离
- padding:同时设置4个内边距
- padding-top:上内边距
- padding-bottom:下内边距
- padding-left:左内边距
- padding-rigt:右内边距
-->
<style type="text/css">
div{
/*设置div的边框*/
border: 1px solid red;
/*设置div的尺寸*/
height: 200px;
width: 300px;
/*设置div的外边距*/
/*margin: 50px;*//*同时设置4个外边距为50px*/
/*margin-left: 100px;*//*设置左外边距为100px*/
/*margin: 50px 100px;*//*上下50px 左右100px*/
/*margin: 50px 100px 150px;*//*顺时针上50px 右100px 下150px 左100px*/
/*margin: 50px 100px 150px 200px;*//*顺时针上50px 右100px 下150px 左200px*/
margin: 50px auto;/*上下50px 左右:自动居中*/
/*设置div的内边距*/
padding: 20px;
}
</style>
</head>
<body>
<div>我是一个div</div>
</body>
</html>
(**************************************************完毕**********************************************************)
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
