HTML+CSS 核心笔记 (一）

一些常见标签：

<br>:换行

<hr>:水平线

强调语义：

<strong>:加粗

<em>:倾斜

<ins>:下划线

<del>:删除线

强调样式：

<b>:加粗

<i>：倾斜

<u>:下划线

<s>:删除线

添加或删除注释的快捷键: Ctrl + /

h1 标签在一个网页中只能用一个，用来放新闻标题或网页的logo

h2～h6 没有次数限制

图像标签：

<img src="./cat.jpg" alt="可爱猫" title="猫猫" width="100" height="100">

超链接：

<a href="https://www.baidu.com" target="_blank"

音频标签：

<audio src="./1.mp3" controls loop autoplay></audio>

视频标签：

<video src="./video.mp4" controls loop muted autoplay></video>

列表 

无序列表：

有序列表:

定义列表：

表格：

<table >

        <tr>

            <th>头部1</th>

            <th>头部2</th>

        </tr>

        <tr>

            <td>内容1</td>

            <td>内容2</td>

        </tr>

    </table>

表格结构标签 – 了解

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线

<table border="1">
       <thead>
        <tr>
            <th >姓名</th>
            <th>分数</th>
        </tr>
       </thead>
       <tbody>
        <tr>
            <td rowspan="2">天才</td>
            <td>66</td>
        </tr>
        <tr>
            <!-- <td>天爸</td> -->    被占掉格子了,只能注释掉，或删掉
            <td>67</td>
        </tr>
       </tbody>
       <tfoot>
        <tr>
            <td colspan="2">总结</td>
            <!-- <td>全校倒数第一</td> --> 你也一样
        </tr>
       </tfoot>
    </table>

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰

提示：

• 表格结构标签可以省略

记得要 删除其他单元格

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）

表单：

<input type=" ">

input 标签占位文本

<input type="text" placeholder="我好帅">

文本框和密码框都可以使用

单选框 radio

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

上传文件 - file

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现 文件多选 功能

<input type="file" multiple>

多选框-checkbox

默认选中：checked 

<span>我想要:</span>
<input type="checkbox" checked> 月入过万
<input type="checkbox" >找到工作
<input type="checkbox" > 天天开心

下拉菜单：

标签： select 嵌套 option ， select 是下拉菜单整体， option 是下拉菜单的每一项

默认显示第一项 ， selected 属性实现 默认选中 功能

<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>

文本域：

标签： textarea ，双标签

<textarea placeholder="请输入文字"></textarea>

注意点：

• 实际开发中，使用 CSS 设置 文本域的尺寸

• 实际开发中，一般禁用右下角的拖拽功能

label 标签：

用 label 标签绑定文字和表单控件的关系， 增大表单控件的点击范围

按钮-button:

<button type="">按钮</button>

type属性值：

注意：按钮需配合 form 标签 （表单区域）才能实现对应的功能