HTML基础

醉挽清欢

已于 2022-01-21 19:44:56 修改

阅读量441

点赞数

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

于 2021-12-22 18:56:29 首次发布

本文链接：https://blog.csdn.net/weixin_51610980/article/details/121958879

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. HTML

2. 列表

3. 表格

HTML

HTML的作用

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签。HTML主要负责页面结构的搭建，一般主要运用在网站上面。

HTML的特点

1.不区分大小写，建议需要小写
2.由标签构成

标签的分类

1.单标签和双标签

常见的单标签有<br/> <hr/> <meta/> <img/>等等
常见的双标签有<a/> <span/> <div/> <html/>等等

2.块级元素和行内元素

块级元素简单来说就是独占一行的元素，其后的元素也只能另起一行，并不能两个元素共用一行。块级元素都是可以设置宽和高的。
行内元素则是无法独成一行，它们会在同一行从左至右水平排列。直到一行排不下，才会换行。大部分的行内远胜于是无法设置高和宽的。行内元素的宽和高是由内容决定的。

常见的块级元素有：
<h1>- <h6>:标题标签;
<hr>:水平线；
<p>：段落；
<table>:表格；           
<adress>:地址；
常见的行内元素有：
<span>:组合文档中的行内元素 
<strong>:加粗
<img>:插入图片
<input>:输入框
<a>:超链接

HTML中的结构

	<html>
		<head>
			<title></title>
		</head>
		<body>		
		</body>
	</html>

HTML中的快捷键

1.！+Enter 快速生成代码
2.alt+shift+f 格式化

列表

列表	解释
ol	有序列表
ul	无序列表

语法如下

    <ul >
        <li>眼儿媚.示儿</li>
        <li>寒冬无雪</li>
        <li>私人教练</li>
    </ul>

    <ol >
        <li>眼儿媚.示儿</li>
        <li>寒冬无雪</li>
        <li>私人教练</li>
    </ol>

ul-- type的属性值	含义
disc	实心（默认值）
circle	空心圆
square	实心正方形

语法如下

    <ul type="disc">
        <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>

表格

表格的组成

标签	含义
table	表格
tr	行
td	单元格（一行有多少单元格就有多少列）
th	表头单元格（默认内容加粗居中）

表格分类	含义
thead	表头
tbody	表身
tfood	表尾

表格的合并

代码	合并内容
colspan	合并列
rowspan	合并行

注意：在合并的时候跨几个行或列要加上自己本身的一行或是一列，同时删去多余的行或列。

实践

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .big-table {
        width: 1100px;
        text-align: center;
    }

    .small-table {
        width: 100%;
        border: none;
    }

    table {
        border-collapse: collapse;
        border-color: black;
        border-width: 1px;
        border-style: solid;
    }

    td {
        border-color: black;
        border-width: 2px;
        border-style: solid;
        width: 220px;

    }

    th {
        border-color: black;
        border-width: 2px;
        border-style: solid;
        width: 220px;
    }

    .endu-td {
        padding: 0;

    }

    tr {
        height: 75px;
    }

    caption {
        font-size: 50px;
        font-weight: 400;
    }

    .td-left {
        /* 无左边框 */
        border-left: none;
    }

    .td-top {
        /* 无上边框 */
        border-top: none;
    }

    .td-right {
        /* 无右边框 */
        border-right: none;
    }

    .td-bottom {
        /* 无下边框 */
        border-bottom: none;
    }
</style>

<body>
    <center>


        <table class="big-table">
            <caption>个人简历</caption>
            <tbody>
                <tr>
                    <th></th>
                    <td colspan="4"></td>

                </tr>
                <tr>
                    <th></th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td rowspan="4"></td>
                </tr>
                <tr>
                    <th></th>
                    <td></td>
                    <td></td>
                    <td></td>

                </tr>
                <tr>
                    <th></th>
                    <td></td>
                    <td></td>
                    <td></td>

                </tr>
                <tr>
                    <th></th>
                    <td></td>
                    <td></td>
                    <td></td>

                </tr>
                <tr>
                    <th></th>
                    <td colspan="4"></td>

                </tr>
                <tr>
                    <th></th>
                    <td colspan="4" class="endu-td">
                        <table class="small-table">
                            <tr>
                                <td class="td-left td-top"></td>
                                <td class="td-top"></td>
                                <td class="td-top td-right"></td>
                            </tr>
                            <tr>
                                <td class="td-left"></td>
                                <td></td>
                                <td class="td-right"></td>
                            </tr>
                            <tr>
                                <td class="td-left"></td>
                                <td></td>
                                <td class="td-right"></td>
                            </tr>
                            <tr>
                                <td class="td-left td-bottom"></td>
                                <td class="td-bottom"></td>
                                <td class="td-right td-bottom"></td>
                            </tr>
                        </table>
                    </td>

                </tr>
                <tr>
                    <th></th>
                    <td colspan="4"></td>

                </tr>

            </tbody>
        </table>
    </center>
</body>

</html>