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!
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
