HTML5学习笔记_个人学习随笔 html备案-CSDN博客

本文链接：https://blog.csdn.net/hcmdghv587/article/details/108058060

文章目录

1. HTML基本框架
1. 文本格式化标签
2. div和span标签
3. 图像标签
4. 链接标签
5. 特殊符号
6. 表格标签
- 6.1 表格结构标签
- 6.2 合并单元格
7. 列表标签
8. 表单
- 8.1 表单的组成

1. HTML基本框架

<!DOCTYPE html>  <!-- 文档类型声明标签，告诉浏览器这个页面采用HTML5版本 -->
<html lang="zh-CN">  <!-- 定义语言为简体中文 -->
<head>
    <meta charset="UTF-8">  <!-- 不写会乱码 -->
    <title>Title</title>
</head>
<body>

</body>
</html>

1. 文本格式化标签

1.1 加粗

1.2 倾斜

1.3 删除线

1.4 下划线

更推荐使用strong、em、del、ins标签，因为语义更强烈。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字

    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字

    我是<del>删除线</del>的文字
    我是<s>删除线</s>的文字

    我是<ins>下划线</ins>
    我是<u>下划线</u>
</p>
</body>
</html>

在这里插入图片描述

2. div和span标签

div和span标签是没有语义的，它们只是盒子，用来装内容。

特点：

div标签一行只能放一个，是大盒子。
span标签一行能放多个，紧挨在一起，是小盒子。

例如，

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>我是一个div</div>123
    <div>我是一个div</div>123
</body>
</html>

效果为：
在这里插入图片描述
再比如，

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span>百度</span>
    <span>谷歌</span>
    <span>耿耿</span>
</body>
</html>

效果为：
在这里插入图片描述

3. 图像标签

img标签的属性值：

src：图片路径。
alt：当图像不能显示时显示的替换文本。
title：鼠标放到图像上显示的提示文本。
width：图像的宽度。
height：图像的高度。
border：图像的边框粗细。

演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>演示img标签的使用：</div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597663128022&di=339e1e1430b635c7065defdda7ebbcd2&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201508%2F14%2F20150814074658_xRSe5.jpeg"
         alt="猫猫" title="我是猫猫" width="200px">
</body>
</html>

在这里插入图片描述

4. 链接标签

语法格式：

<a href="跳转目标" target="目标窗口的打开方式">文本或图像</a>

target属性：

_self：默认值，在当前窗口打开。
_blank：在新窗口打开。

空链接：
href="#"，表示链接到当前页面。

图片链接：

<a href="xx"><img src="xx"></a>

锚点链接：
点击链接，可以快速定位到页面中的某个位置。

给要跳转到的标签设置 id 属性。
在a标签的href属性中设置 # + id 。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#u1">第一章</a>
    <a href="#u2">第二章</a>
    <a href="#u3">第三章</a>
    <a href="#u4">第四章</a>

    <div id="u1" style="height: 200px">第一章</div>
    <div id="u2" style="height: 200px">第二章</div>
    <div id="u3" style="height: 200px">第三章</div>
    <div id="u4" style="height: 200px">第四章</div>
</body>
</html>

5. 特殊符号

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>空格：&nbsp;</div>
    <div>大于号：&gt;</div>
    <div>小于号：&lt;</div>
    <div>and符号：&amp;</div>
    <div>乘号：&times;</div>
</body>
</html>

在这里插入图片描述

6. 表格标签

tr标签：表格的一行。
td标签：一行中的一个单元格。
th标签：同td，表示表头，文本会加粗+居中显示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <tr> <th>姓名</th> <th>年龄</th> <th>学校</th> </tr>
        <tr> <td>鸣人</td> <td>20</td> <td>木叶</td> </tr>
        <tr> <td>佐助</td> <td>20</td> <td>木叶</td> </tr>
    </table>
</body>
</html>

6.1 表格结构标签

thead标签：表格的头部区域。
tbody标签：表格的主体区域。

6.2 合并单元格

跨行和跨列分别设置rowspan、colspan属性即可。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <tr> <th>姓名</th>             <th>年龄</th> <th>学校</th> </tr>
        <tr> <td rowspan="2">鸣人</td> <td>20</td>   <td>木叶</td> </tr>
        <tr>                           <td>21</td>   <td>木叶</td> </tr>
    </table>
</body>
</html>

在这里插入图片描述

7. 列表标签

7.1 无序列表（重点）

无序列表的特点：

各个列表项没有顺序级别之分，是并列的。
ul 中只能直接嵌套 li 。
li 相当于一个容器，可以容纳所有元素。
无序列表会带有自己的样式属性，但在实际使用时，会通过CSS进行设置。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h4>你喜欢的书？</h4>
    <ul>
        <li>哈利波特</li>
        <li>三体</li>
        <li>围城</li>
    </ul>
</body>
</html>

在这里插入图片描述

7.2 有序列表

与无序列表相同，把 ul 换成 ol。

7.3 自定义列表（重点）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>腾讯球球</dd>
    </dl>
</body>
</html>