Day12 html基础和CSS基础
1. form表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--form页面标签,主要应用在登录、注册页面
能够使input转为按钮之后的功能生效
-->
<form>
<input type="password" placeholder="请输入密码"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
</html>
运行结果
2. 表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!---->
<!--table标签:声明表格
tr标签:表格的行 table row
th标签:表头(列) table head
td标签:单元格 table date cell
-->
<table>
<!--第一行-->
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<!--第二行-->
<tr>
<td>张三</td>
<td>男</td>
</tr>
<!--第三行-->
<tr>
<td>李四</td>
<td>未知</td>
</tr>
</table>
<!--表格涉及到的属性
table标签:border - 设置表格的外边界(边框)的宽度
cellspacing - 设置单元格和边框的间距。
width - 设置整体表格的宽度(每一列的宽度会自动调整比列)
height - 设置整体表格的高度(每一行的高度会自动调整比列)
bordercolor - 设置比边框的颜色
bgcolor - 设置背景颜色
align - 调整表格的水平位置(左对齐:left、右对齐:right、居中对齐:center)
tr标签:bgcolor - 设置背景颜色
align - 调整文字的水平位置(左对齐:left、右对齐:right、居中对齐:center)
valign - 调整文字垂直位置(顶部:top、中间:middle、底部:bottom)
height - 修改一行的高度
tb标签:width - 修改单元格的宽度(本行其他单元格自动缩小或增大,本列的单元格也随之增加或缩小)
height - 修改单元格的高度(本行其他单元格高度随之增加或缩小)
align - 修改单元格的对齐方式(左对齐:left、右对齐:right、居中对齐:center)
valign - 修改单元格垂直对齐方式(顶部:top、中间:middle、底部:bottom)
colspan - 列合并
rowspan - 行合并
-->
<!--五行八列-->
<table bordercolor="pink" cellspacing="0" border="1">
<tr>
<td colspan="8" align="center">简历</td>
</tr>
<tr align="center">
<td rowspan="5" width="15">个人信息</td>
<td>姓名</td>
<td width="60"></td>
<td>性别</td>
<td width="60"></td>
<td>出生日期</td>
<td width="60"></td>
<td rowspan="4">
<img src="./img/程序猿.jpg" alt="" width="60px" height="60px">
</td>
</tr>
<tr align="center">
<td>民族</td>
<td></td>
<td>籍贯</td>
<td></td>
<td>政治面貌</td>
<td></td>
</tr>
<tr align="center">
<td>身高</td>
<td></td>
<td>体重</td>
<td></td>
<td>身体状况</td>
<td></td>
</tr>
<tr align="center">
<td>联系电话</td>
<td></td>
<td>邮箱</td>
<td></td>
<td>现所在地</td>
<td></td>
</tr>
<tr align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
运行结果
3.div标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!---->
<!--div标签:无语意标签(盒子标签)-->
<!--div:用这个标签来存放其他的标签-->
<!--div是调整页面布局前的最后一个-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
4. CSS样式
<!--CSS:层叠样式表-->
<!--CSS代码写到哪:
1.内部样式表:将style标签放到head标签或者body标签内。
2.内联样式表:可以把样式直接作为一个标签的属性,写入到标签中,使用style属性
3.外部样式表:有一个后缀名为.css的文件,用来专门存放CSS代码,
只需要在HTML代码中使用link标签将CSS文件引入即可
link标签的语法:
<link rel="" type="" href=""></link>
1.如果rel为icon,表示给页面标签页设置图标,type为image/图片格式,表示引入xxx格式的图片
rel="icon" type="image/图片格式(png、jpg" href="图片的链接和路径"
2.rel为icon的时候表示给页面引入样式表,type固定为text/css
若rel="stylesheet" type="text/css" href="css文件的链接或者路径"
/*这是CSS的注释*/
CSS样式如何写?
语法:
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
}
说明:
1.选择器:通过标签来选择被修改的内容或者通过属性(id属性)选择被修改的内容
2.{}:固定语法(内部样式、外部样式)
3.内部样式、外部样式、内联样式:修改内容的样式使用 属性:属性值;
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式嘿嘿</title>
<!--内部样式-->
<style>
h1{
color: white;
}
</style>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="css/html_style.css"/>
</head>
<!--内联样式(不建议用)-->
<body style="background-color: purple;">
<h1>这是一个H1标签</h1>
<!---->
</body>
</html>
5. CSS选择器
<!--
所有选择器可以组合使用
CSS选择器(选择哪个元素添加样式):
1.通配符选择器: * ->能改变所有标签的样式
2.标签选择器: 标签名 ->不加限定条件是能够修改页面中所有某标签(写的是谁改的就是谁)
3.id选择器
4.class选择器
一般在页面标签中会添加id属性和class属性,其对应的属性值一般都是独一无二的,
或者同一类的属性使用一类属性值;通过调用id属性值和class属性值变相的等于调用对应的标签。
id选择器:#id属性值;
class选择器:.class属性值
5.父子选择器:父标签 > 子标签 :被修改样式的为子标签
6.后代选择器:祖先标签 后代标签 :被修改样式的为后代标签
7.兄弟选择器:长兄 ~ 弟弟
8.相邻兄弟选择器:刘关张:刘 + 关 关 + 张
9.nth-child选择器:a:nth-chid(3) -> 找每一级下的第三个标签,并且这个标签是a标签(html下标从1开始,为3)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="one">
<div>
<a href=""></a>
<img src="" alt="">
</a>
<div></div>
<a href=""></a>
<p></p>
</div>
</body>
</html>
6. CSS边框样式和文字样式
<!--CSS边框常用属性:
boeder:边框的粗细 边框的样式(soild单实线 double双实线 deshed虚线 dotted点 边框的颜色)
border-radius:num1(num2 num3 num4)表示这三个参数可写可不写
num1 - 表示将图形(存在四个角)的四个角统一改为一个弧度。
num1 num2 - num1:表示图形的左上角和右下角,num2表示图形的右上角和左下角。
num1 num2 num3 - num1:左上角,num2:右上角和左下角,num3:右下角
num1 num2 num3 num4 - 左上、右上、右下、左下
border-top
border-bottom
border-left
border-right
等价于一个border
-->
<!--CSS文字常用属性:
color:修改文字的颜色
font-size:字体尺寸
font- family:字体
text-align:位置(left、right、center)
text-decoration:在文字的上方或下方或中间添加一条线(overline、underline、line-through)
-->
<!--颜色:三原色:红、绿、蓝;每种颜色有0-255,一共有256个等级
1.颜色可以用英语单词表示
2.可以使用三原色的数字等级表示 rgb(0,0,0) 或者 rgb(0,0,0,透明度)
3.可以使用颜色的 # + 十六进制符号表示
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*标签选择器*/
/* 所有标签可以组合使用 */
/* 将页面所有的div改为某样式 */
/* div{
border:1px dotted blue;
width:100px;
height:100px;
}
*/
/* 将body标签的子标签中第一个div标签改为某样式 */
body > div:nth-child(1){
border-top:1px dotted indianred;
border-bottom:1px dashed blue;
border-left:53px solid purple;
border-right:8px double green;
width:100px;
height:100px;
border-radius: 100% 50%;
}
/* id调用 */
#one{
border-top: 1px solid yellowgreen;
width: 100px;
height:200px;
background-color: aqua;
}
/* class调用 */
.one{
width: 150px;
height: 150px;
border:3px double blue;
border-radius: 100%;
}
p{
/* color: red; */
/* color: #FF0000; */
/* color: RGB(255,0,0); */
color:RGBA(255,0,0,0.5);
text-align: center;
font-size: 50px;
/* text-decoration: underline cornflowerblue; */
/* text-decoration: line-through; */
text-decoration: overline deeppink;
}
</style>
</head>
<body>
<div></div>
<div id="one"></div>
<div class="one">
<div id="one"></div>
</div>
<p><b>今日安排</b></p>
<ul>
<li>学习</li>
<li>吃饭</li>
<li>学习</li>
<li>吃饭</li>
</ul>
</body>
</html>
运行结果
7. 通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* html标签存在一个叫做外边距和内边距的两个边距 */
/* 通配符选择器一般就是用来去除标签边距 */
*{
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
}
div{
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<hr>
<div></div>
<hr>
<div></div>
</body>
</html>
运行结果
Day 12 over!