html+CSS学习-CSDN博客

本文链接：https://blog.csdn.net/liu49950/article/details/130799207

表格标签

<tr> 为行，<td>为单元格

<th>表格单元格标签居中加粗显示

在这里插入图片描述

table 标签
<tr>行标签
<th>表头单元格
<td>普通单元格
单元格里可以任何元素，文字链接图片都可以
align="center"使表格到页面中间

表格结构标签

<thead>定义表格头部
<tbody>定义表格主体

合并单元格

跨行合并：rowspan
跨列合并：colspan

目标单元格：

跨行：最上侧单元格为目标单元格，合并
跨列：最左侧单元格为目标单元格

<body>

    <table>
        <tr>
            <th>姓名 </th>
            <th>性别 </th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>刘嘉楠 </td>
            <td>女</td>
            <td> 18</td>
        </tr>

    </table>
    <table align="center" border="1" cellspacing="0" cellpadding="1" width="500" height="249">
        <thead>
        <tbody>
            <tr>
                <th colspan="5">个人简介</th>
            </tr>
            <tr>
                <th>姓名 </th>
                <th>性别 </th>
                <th>年龄</th>
                <th>职务</th>
                <th>偶像</th>
            </tr>
            </thead>
            <tr>
                <td>刘嘉楠 </td>
                <td>女</td>
                <td> 18</td>
                <td>团支书，班长</td>
                <td><a href="https://baike.baidu.com/item/%E6%B3%B0%E5%8B%92%C2%B7%E6%96%AF%E5%A8%81%E5%A4%AB%E7%89%B9/8472307"
                        target="_blank">taylor</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

在这里插入图片描述

列表标签

无序列表

<ul>无序列表（内部只能嵌套<li>)
<li>列表项
</li>
</ul>

各个选项无顺序之分

<body>
    <h4>我的兴趣爱好</h4>
    <ul>
        <li>唱歌</li>
        <li>看书</li>
        <li>追剧</li>
    </ul>
</body>

在这里插入图片描述

有序列表

<body>
    <h4>喜欢的明星排行榜</h4>
    <ol>
        <li>
            taylor swift
        </li>
        <li>
            Ariana
        </li>
        <li>justin biber</li>
    </ol>
</body>

用法与无序列表类似
在这里插入图片描述

自定义列表

<dl>
        <dt>名词1 </dt>
            <dd>名词一解释  </dd>
    </dl>

dl里面只能包含dt和dd

列表总结

在这里插入图片描述

表单标签


表单域<form>
表单控件
提示信息

表单元素中标签用于收集用户信息

<input type="属性值">

在这里插入图片描述

<body>
    <form>
        <!-- text文本框 用户可以里面输入任何文字 -->
        用户名：<input type="text"> <br />
        <!-- password 密码框 -->
        密码：<input type="password"><br>
        <!-- name是表单元素名字，性别单选按钮必须有相同名字name 才能实现多选一 -->
        <!-- radio 单选按钮 -->
        性别：男<input type="radio" name="sex"> 女 <input type="radio" name="sex">人妖 <input type="radio" name="sex"><br>
        <!-- checkbox 多选 -->
        爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 追剧<input type="checkbox"
            name="hobby">
    </form>
</body>

在这里插入图片描述

CSS

层叠样式表
主要用于设置文本内容，图片外形等，美化HTML

在这里插入图片描述

<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>
    <style>
        /* 选择器（样式） */
        /* 给谁改样式 {改什么样式} */
        p {
            color: red;
            /* 修改文字大小为12像素 */
            font-size: 12px;
        }
    </style>
</head>

<body>
    <p>今天是红色的</p>
</body>

CSS选择器

选择标签用的
选择器分为基础选择器和复合选择器
在这里插入图片描述

字体属性

在这里插入图片描述

<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>

    <style>
        body {
            font-size: 20px;
        }

        /* 标题标签比较特殊，需单独指定大小 */
        h2 {

            font-size: 40px;
        }
    </style>
</head>
<h2>
    这个是标题
</h2>
<div>
    红色的背景
</div>

<li>来生缘</li>
<li>冰雨</li>
<li>生僻字</li>
<div>我也想变蓝色</div>
<div>

    红色的背景和蓝色的字
</div>

</body>

</html>

文本属性

在这里插入图片描述

外部样式表

CSS背景

侧边栏

在这里插入图片描述

<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>侧边栏</title>
    <style>
        a {
            display: block;
            width: 200px;
            height: 100px;
            /* 使文字行高等于盒子高度，能使文字居中 */
            line-height: 100px;
            background-color: plum;
            font-size: 30px;
            color: chartreuse;
            /* 使链接下划线消失 */
            text-decoration: none;
            text-indent: 2em;

        }

        /* 鼠标经过链接时变色 */
        a:hover {
            background-color: brown;
        }
    </style>
</head>

<body>
    <a href="#">自我介绍</a>
    <a href="#">兴趣爱好</a>
    <a href="#">职业规划</a>
</body>