【HTML学习】Day-12 form标签、table标签、div标签、css基础

ChenAi140

已于 2022-07-15 17:50:24 修改

阅读量713

点赞数 1

分类专栏：前端学习文章标签： html css 学习

于 2022-07-06 20:06:22 首次发布

本文链接：https://blog.csdn.net/ChenAi_140/article/details/125646837

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1. form标签

<form></form>：表单标签，主要应用在登录、注册页面。能够使input转为按钮之后的功能生效

<form action="">
    <input type="password" placeholder="请输入密码" name="" id=""><br>
    <input type="submit" name="" id="" value="登录">
    <input type="reset" name="" id="" value="重置">
</form>

2. table标签

<table></table>：表格标签

2.1 表格中的标签

table：表格标签，声明表格
tr：行标签，表格的每一行，（table row）
th：表头标签，（table head）
td：单元格标签，（table data cell）

2.2 表格的属性

table标签：
- border -> 设置表格的外边界(外边框)的宽度
- cellspacing -> 设置单元格的单元格以及单元格和边框的间距
- width -> 设置整体表格的宽度(每一列的宽度会自动调整比例)
- height -> 设置整体表格的高度(每一列的高度会自动调整比例)
- bordercolor -> 设置边框的颜色
- bgcolor -> 设置背景颜色
- align -> 调整表格的水平位置(left、center、right)
tr标签：
- bgcolor -> 设置背景颜色
- align -> 调整文字的水平位置(left、center、right)
- valign -> 调整文字的垂直位置(top、middle、bottom)
- height -> 修改一行的高度
td标签：
- width -> 修改单元格的宽度(本行其它单元格宽度自动缩小或增大、本列单元格宽度也随之缩小或增大)
- height -> 修改单元格的高度(本行单元格都将变化)
- align -> 调整文字的水平位置(left、center、right)
- valign -> 调整文字的垂直位置(top、middle、bottom)
colspan -> 行合并；rowspan -> 列合并

2.3 示例

<table bordercolor="black" cellspacing="0" border="1">
    <tr><td colspan="8" align="center">简历</td></tr>
    <!-- 第一行 -->
    <tr align="center">
        <td rowspan="8" width="15">个人信息</td>
        <td>姓名</td>
        <td width="100"></td>
        <td>性别</td>
        <td width="100"></td>
        <td>出生日期</td>
        <td width="100"></td>
        <td rowspan="4"><img src="./img/管理员.jpeg" alt="60" width="60" height=""></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>

3. div标签

div标签：无语意标签(盒子标签)
一般把一个范围中涉及到的所有的标签放到一起。
div是调整页面布局前的最后一个标签.

4. CSS

css：层叠样式表

css代码编写位置：

内部样式表：将style标签放到head标签或body标签内
内联样式表：可以把样式直接作为一个标签属性写到标签中，使用style属性
外部样式：有一个后缀名为.css的文件用来存放css代码，只需要用link标签将css文件引入即可

<link rel="" type="" href="">：link标签

rel：icon
type：格式
href：连接、路径

如果rel为icon，表示给页面标签页设置图标，type为图片格式，表示引入什么格式的图片
rel=“icon” type=“img/图片格式(png…)” href=“图片的链接或路径”
如果rel为stylesheet，表示引入样式表，type固定为text/css
rel=“stylesheet” type=“text/css” href=“链接/路径”

css代码注释
/* css代码注释 */

4.1 内部样式

<!-- 内部样式 -->
<style>
    h1 {
        color: purple;
    }
</style>

4.2 内联样式

<!--内联样式-->
<body style="background-color: greenyellow;">
    <h1>h1标签</h1>
</body>

4.2 外部样式

/* css代码注释 */
h1{
    text-align: center;
}

4.3 css边框样式

CSS边框常用属性

border：边框粗细边框样式(solid单实线、double双实线、dashed虚线、dotted点) 边框颜色
可以拆分为以下四个标签
- border-top：
- border-bottom：
- border-left：
- border-right：
border-radius：num1 num2 num3 num4(2~3可写可不写)
- num1：表示将图形的四个角统一改为一个弧度
- num1 num2：num1表示左上角和右下角；num2表示右上角和左下角
- num1 num2 num3：num1左上角；num2右上角和左下角；num3右下角
- num1 num2 num3 num4：左上；右上；左下；右下

html代码：

<div></div>
<div id="one"></div>
<div class="one">
    <div id="one"></div>
</div>
<div></div>

<p><b>今日安排</b></p>
<ul>
    <li>上课</li>
    <li>上课</li>
    <li>上课</li>
    <li>上课</li>
</ul>

父子选择器、nth-child选择器：

/* 将body标签的子标签中第一个div标签改为某样式 */
body>div:nth-child(1) {
    /* border: 1px dashed red; */
    border-top: 1px dotted red;
    border-bottom: 1px dashed blue;
    border-left: 1px solid pink;
    border-right: 10px double green;
    width: 100px;
    height: 100px;
    border-radius: 100% 100% 50% 50%;
}

id选择器：

#one {
    border-top: 5px solid greenyellow;
    width: 200px;
    height: 100px;
    background-color: aqua;
}

class选择器：

.one {
    border: 3px double blue;
    width: 150px;
    height: 150px;
    border-radius: 100%;
}

4.4 css文字样式

CSS文字常用属性

color：文字的颜色
font-size：字体尺寸
font-family：字体
text-align：文字位置(left、center、right)
text-decoration：在文字的上方、中间、下方添加一条线(overline、line-through、underline)

标签选择器：

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: line-through;/* underline、overline、line-through */
}

4.5 通配符选择器

HTML标签存在内边距和外边距
通配符选择器一般用来去除标签边距

* {
    /* 外边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
}

div {
    width: 500px;
    height: 500px;
    background-color: greenyellow;

}

5. HTML中的颜色

三原色：红、绿、蓝(0-255，一共256个等级)

可以使用英语单词的英语单词表示
可以使用三原色的数字等级表示：rgb(0,0,0)或rgba(0,0,0,透明度)
可以使用颜色的 #+十六进制符号表示