03_第一天（HTML扫盲）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45816803/article/details/123700521

这篇博客详细介绍了HTML的基础知识，包括DOCTYPE声明、文本格式化、链接、图像、表格、列表和自定义列表等元素的使用。强调了手写代码的重要性，以及对每个标签的理解和记忆。同时，提到了meta标签、base标签和版权符号的表示方法，为初学者提供了全面的学习指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习方法：w3cschool HTML教程，网址如下：

https://www.w3school.com.cn/html/index.asp

HTML（英语：Hyper Text Markup Language，简称：HTML ）也叫作超文本标记语言，是一种使用结构化 Web 网页及其内容的标记语言。

推荐刚开始学习使用记事本编写代码，为以后打好基础。
初学者有以下一些注意点：
1.不要直接使用一些编辑器直接生成html文件架构，请务必自己跟着教程手敲几遍。
2.不要忽略每一个标签，除非已告诉你，该标签废弃。
3.尽量记住所有的全局属性，以及常用标签的专属属性。
4.不要学过一遍就不再回头看，要经常写，才能记得牢固。
5.如后续想到更多，会进行补充…

以下是我记录的我学习过程中所遗漏或忽视过的标签。如不感兴趣可直接跳过。

doctype 规定了文档类型。

<-- 声明是html5的文档类型 -->
<!doctype html>

文本格式化

<body>
        <!-- **************************  文档格式  ************************** -->
        <!-- 普通文本 -->
        太吾村领头人
        <br>
        <!-- 着重文字 -->
        <em>着重文字</em>
        <br>
        <!-- 小号文字 -->
        <small>小号</small>
        <br>
        <!-- 斜体文字 -->
        <i>斜体</i>
        <br>
        <!-- 加重文字 -->
        <strong>加重文字</strong>
        <br>
        <!-- 上标、下标文字 -->
        <sup>上标</sup>
        <sub>下标</sub>
        <br>
        <!-- 插入文字 -->
        <ins>插入文字</ins>
        <br>
        <!-- 删除文字 -->
        <del>删除文字</del>
        <br>
        <!-- **************************  文档格式  ************************** -->

        <!-- **************************  计算机输出格式  ************************** -->
        <!-- (如只是想达到某种视觉效果，则以下标签皆不推荐使用，除了pre标签) -->

        <!-- 计算机代码(不推荐使用，会将文本转换为等线字体，如想达到代码效果，采用css更好) -->
        <code>
            int i=0;<br>
            int j=1;<br>
            print(i+j);<br>
        </code>
        <br>
        <!-- 键盘码(已废弃，不推荐使用) -->
        <kbd>键盘输入</kbd>
        <br>
        <!-- 预格式文本，不会影响文本换行或空格，与code一起使用效果更佳，通常用于代码 -->
        <pre>
            代码   空格
            啊啊啊
        </pre>
        <br>
        <!-- **************************  计算机输出格式  ************************** -->

        <!-- **************************  引文、引用格式  ************************** -->
        <!-- 缩写标签 -->
        <abbr title="United State America">USA</abbr>
        <br>
        <!-- 定义文档作者/所有者的联系信息 -->
        <address>
            Written by TaiWuCun 2022/3/23
        </address>
        <!-- 定义文本方向 -->
        <bdo dir="ltr">从左到右</bdo>
        <br>
        <bdo dir="rtl">从右到左</bdo>
        <!-- 短引用，浏览器会在该标签内容前后加引号 -->
        <p>
            TaiWuCun say:
            <q>Hello World!</q>
        </p>
        <!-- **************************  引文、引用格式  ************************** -->
    </body>

运行结果

a标签，链接

<body>
    <!-- href属性定义链接地址，填写路径时要在结尾加上/，否则浏览器会请求两次 -->
    <a href="https://www.baidu.com/">百度</a>
    <!-- target属性定义打开方式 -->
    <br>
    当前页: <a href="https://www.baidu.com/" target="">当前页打开</a>
    <br>
    新建标签页: <a href="https://www.baidu.com/" target="_blank">新建标签页</a>
    <br>
    <!-- href可绑定到其他定义了id属性的标签,可实现书签效果 -->
    <a href="#here">点击跳转到id为here的元素</a>
    <div style="width:1px;height:800px"></div>
    <div style="width:500px;height:800px" id="here">我的id是here</div>
</body>

要注意的一点是，a标签可做锚点来作为本文档的书签，跳转至对应的元素处。

id分大小写，并且具有唯一性，给元素定义“身份证”
head标签

1.HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。
2.可以添加在头部区域的元素标签为: title, style, meta, link, script, noscript 和 base。

base标签的作用是，描述文档默认地址或默认目标(target)
<base href="//www.w3cschool.cn/images/" target="_blank">

meta标签的作用是，规定页面描述，关键词，文档作者、最后修改时间以及其他信息
文档描述
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
关键词
<meta name="keywords" content="HTML, CSS, XML" />

img图像标签

设置图像对齐方式
<img src="xxx/xxx" align="right/center/left">
提示：在实际项目中，应较少的加载图片资源，比如icon图标可放置在一张图片上，通过定位来使用，减少资源请求

table表格标签

要注意，不管是td 或是 th标签，其外部都应有tr标签包裹

<table border="1">
<tr>
<th>row 1, cell 1</th>
<th>row 1, cell 2</th>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

ul和ol列表标签

注意点：
1.ul和ol标签都有默认的padding和margin属性初始值，因此在使用过程中，如果发现样式有些不合你意，记得想到这一点。
2.ul显示的项是·
3.ol显示的项是1(阿拉伯数字)

dl，dt，dd自定义列表

这里我直接拿官方示例来演示
这个标签我其实不太常用，近乎于没用过

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

运行结果：

版权符号写法

html Copyright/© + [dates] + [author/owner]