初识HTML、CSS

最新推荐文章于 2024-09-16 22:10:57 发布

.慢慢亦漫漫

最新推荐文章于 2024-09-16 22:10:57 发布

阅读量766

点赞数 2

分类专栏： HTML 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_43183219/article/details/121907120

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

HTML

HTML基本知识

1.HTML中不区分大小写
2.浏览器在运行HTML时，会将所有标签转化为小写
3.HTML写网页框架；css美化网页

标签分类

单标签和双标签

1.单标签：由一个标签组成，例如：hr标签（写单标签时“/”不要遗忘）<hr/>
2.双标签：由开始标签和结束标签组成，例如：p标签

<p>
        作者：韦潇&nbsp; &nbsp; 2021年12月07日23:54&nbsp; &nbsp; 浏览：
        <a href="https://www.2345.com/?38264-0135">收藏</a>
    </p>

行内元素和块级元素

1.行内元素：只占据它对应标签的边框所包含的空间。例如：span标签；a标签（超链接）；img标签等。
2.块级元素：块级元素占据父元素的整个空间。通常在浏览器中块级元素前后另起一行。例如：h1>-h6（标题标签）；p标签; br（换行标签）；hr（水平线）等（只是目前学过的分类，后面学习会再补充）

HTML常见标签

1.h标签：h1–h6标题标签
2.span标签：行内元素不会换行
3.p标签：段落 &nbsp；表示一个空格
4.img标签：引入图片

<img src="./imges/1.PNG" alt="图片不存在">

相对路径：“./” 当前目录 “…/” 父目录

5.a标签：超链接

<a href="https://www.2345.com/?38264-0135">

6.br：换行标签
7.center：居中标签（目前不用了）
8.table 表格
（1）tr:行
（2）td/th:单元格（th中的字会加粗居中）


  <table>
        <tr>
            <td>
                1
                &nbsp;
                苍翠江南
                &nbsp;
                20
                &nbsp;
                <img src="./imges/4.png" alt="">
                &nbsp;
                (1次)
            </td>
    <table/>

CSS

CSS基本知识

CSS依赖于HTML存在
在HTML中引入css使用

CSS如何定义样式

标签选择器{
样式属性：值；
样式属性：值；
}

h1 {
        /* 诗人热力榜字体的粗细 */
        font-weight: 500;
        /* 诗人热力榜字体的大小是13px */
        font-size: 13px;
        /* 诗人热力榜字体的颜色 */
        color: #717171;
    }

CSS常用到的样式

1.字体
color： 16进制的数字 RGB色
font-weight：字体粗细
font-size：字体大小
2.边框
border：边框
border-color：边框颜色
border-style：边框样式
border-width：边框宽度
border-bottom-color：下边框颜色
border-top-color：上边框颜色
border-left-color：做边框颜色
border-right-color：右边框的颜色
3.尺寸
width：宽度
height：元素的高度
4.文本对齐方式
text-align： center left right
5.文本装饰
text-decroration：去除文本装饰

<style>
    table {
        /* 边框的宽度是2px */
        border-width: 2px;
        /* 边框的样式 */
        border-style: solid;
        /* 线条颜色 */
        border-color: rgb(91, 79, 102);
        /* 合并边框 */
        border-collapse: collapse;
        /* 表格的宽度 */
        width: 100%;
        /* 表格高度 */
        height: 500px;
        /* 表格文本居中 */
        text-align: center;
        /* 字体大小 */
        font-size: 18px;
        /* 字体粗细 */
        font-weight: 600;
    }

    td {
        /* 边框的宽度是2px */
        border-width: 1px;
        /* 边框的样式 */
        border-style: solid;
        /* 线条颜色 */
        border-color: rgb(128, 99, 129);
        /* 单元格内字体颜色 */
        color: rgb(45, 7, 134);
        /* 单元格宽度 */
        width: 25%;
        /* 单元格高度 */
        height: 100px;
    }

    body {
        /* body的边框宽度 */
        border-width: 0px;
        /* body的边框颜色 */
        border-color: rgb(5, 7, 10);
        /* body的边框样式是实线 */
        border-style: solid;
    }

    h1 {
        /* h1内的文本居中 */
        text-align: center;
        /* h1下边框的宽度 */
        border-bottom-width: 0px;
        /* h1下边框颜色 */
        border-bottom-color: rgb(5, 7, 10);
        /* h1下边框样式 */
        border-bottom-style: solid;
    }

    span {
        /* 下边框宽度 */
        border-bottom-width: 2px;
        /* 下边框颜色 */
        border-bottom-color: rgb(5, 7, 10);
        /* 下边框样式 */
        border-bottom-style: solid;
    }

    img {
        width: 35%;
        height: 100px;

    }
</style>

table表格

1.按照功能区分：
头部：thead->tr->th
身体：tbody->tr->td
脚：tfoot->tr->td/th
2.合并单元格
跨行：rowspan
跨列：colspan
3.表格嵌套
表格嵌套单元格自带内边距padding 去掉单元格多余边框以及表格边框
4.ul表和ol表
（1）ul无序列表

 ul{
        font-size: 24px;
        font-weight: 600;
        color: blue;
    }

 <ul>
        <li>
            无序列表无序列表
        </li>
        <li>
            无序列表无序列表
        </li>
        <li>
            无序列表无序列表
        </li>
    </ul>

无序列表展示
（2）ol有序列表

ol{
        font-size: 20px;
        font-weight: 700;
        color: blueviolet;
    }

<ol>
        <li>
            有序列表有序列表
        </li>
        <li>
            有序列表有序列表
        </li>
        <li>
            有序列表有序列表
        </li>
    </ol>

有序列表展示

表格实践小练习

部分代码

<style>
    .bingtable {
        width: 90%;
        height: 300px;
    }

    td {
        border-style: solid;
        border-color: rgb(134, 120, 120);
        border-width: 2px;
    }

    .jiayou1 {
        width: 45%;
        height: 80px;
        border-top: none;
        border-left: none;
        border-right: none;
        font-size: 25px;
        font-weight: 600;
        color: rgb(75, 39, 39);
    }

    .jiayou2 {
        width: 45%;
        height: 150px;
    }

    .jiayou3 {
        border: none;
        position: relative;
        top: 15px;
    }

    .jiayou4 {
        height: 40px;
        width: 100%;
    }

    .jiayou5 {
        color: rgb(97, 79, 79);
    }

    .jiayou6 {
        color: rgb(175, 149, 149);
    }

    .jiayou7 {
        list-style: none;
    }

    li {
        color: rgb(85, 83, 83);
    }

    ul {
        margin: 0;

    }
</style>

<body>
    <table class="bingtable">
        <tr>
            <td class="jiayou1">&nbsp;&nbsp;&nbsp;&nbsp;中央政府报告</td>
            <td class="jiayou3"></td>
            <td class="jiayou1">&nbsp;&nbsp;&nbsp;&nbsp;省政府报告</td>
        </tr>
        <tr>
            <td class="jiayou2 jiayou3">
                <ul>
                    <li>
                        <table>
                            <tr>
                                <td class="jiayou4 jiayou3 jiayou5">2021年政府工作报告</td>
                                <td class="jiayou4 jiayou3 jiayou6">2021/02/03</td>
                            </tr>
                        </table>
                    </li>
                    <li>
                        <table>
                            <tr>
                                <td class="jiayou4 jiayou3 jiayou5">2020年政府工作报告</td>
                                <td class="jiayou4 jiayou3  jiayou6">2020/03/23</td>
                            </tr>
                        </table>
                    </li>
                    <li>
                        <table>
                            <tr>
                                <td class="jiayou4 jiayou3 jiayou5">2018年政府工作报告</td>
                                <td class="jiayou4 jiayou3  jiayou6">2018/02/02</td>
                            </tr>
                        </table>
                    </li>
                    <li>
                        <table>
                            <tr>
                                <td class="jiayou4 jiayou3 jiayou5 jiayou7">2017年政府工作报告</td>
                                <td class="jiayou4 jiayou3  jiayou6">2017/02/09</td>
                            </tr>
                        </table>
                    </li>
                </ul>