web前端学习日记——DAY01(HTML基本标签)

今天我正式步入web开发中的html的学习了，今天主要针对HTML的基本标签展开了学习：

1.HTML初始的一个标签组成：

html 复制代码

<!--声明当前文档的类型是html-->
<!DOCTYPE html>
<!--设置网页语言-->
<html lang="en">
<!--网页头元素标签-->>
<head>
    <!--设置html编码是UTF-8-->
    <meta charset="UTF-8">

    <!--设置移动端缩放比例-->>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--网页的标题-->
    <title>day01</title>
</head>
<body>
</body>
</html>

2.n级标题的标签

语法：<hn> 内容 </hn>

html 复制代码

 <!--标题只有六级，过了之后就是普通文本了-->
    <h1>测试几级标题</h1>
    <h2>测试几级标题</h2>
    <h3>测试几级标题</h3>
    <h4>测试几级标题</h4>
    <h5>测试几级标题</h5>
    <h6>测试几级标题</h6>
    <h7>测试几级标题</h7>

3.HTML中的注释：

语法

4.换行标签

语法：

html 复制代码

<!--测试换行-->
    <br>测试换行<br>
    第1行<br>
    第2行<br>
    第3行<br>

5.段落标签

语法：段落中的内容

html 复制代码

<!--测试段落-->
    <p>段落1,这是段落1</p>
    <p>段落2,这是段落2</p>
    <p>段落3,这是段落3</p>

6.水平线标签

语法：<hr size="高度" noshade color="水平线的颜色" width="占一行的多少">

html 复制代码

    <!--水平线标签-->
    下面是水平线<br>
    <hr size =10,noshade color="red",width ="80%">

7.文字样式操作标签

加粗标签：

斜体标签：

中划线标签：<del></del>

字体样式标签：

html 复制代码

    <!--文字样式测试-->
    <!--测试加粗-->
    <strong>测试加粗</strong><br>
    <!--测试斜体-->
    <i>测试斜体</i><br>
    <!--测试下划线-->
    <u>测试下划线</u><br>
    <!--测试中划线-->
    <del>测试中划线</del><br>
    <!--字体标签用于更改字体-->
    <font color="red" size ="7" face ="华文彩云">测试字体</font><br>

8.标签是可以重复使用的：只需要对应好关系就好

html 复制代码

<!--标签可以叠加使用-->
    <del><i><font color="blue" size ="7" face ="华文彩云">测试标签叠加</font></i></del><br>

9.图片标签

语法：<img src="图片链接" width ="宽度" height="高度" title="图片名" alt="如果加载失败会显示的">

html 复制代码

<!--测试图片-->
    <img src = "https://ts1.tc.mm.bing.net/th/id/R-C.c1bf9b1414e92190f2ff58dcbcc63fe5?rik=SMCsXze34Dqcyw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50085%2f2259.jpg_wh1200.jpg&ehk=OIinHBFGcM0%2bxJ0W4ho8psSYzT30Fz1CU1RMOw1%2fJgA%3d&risl=&pid=ImgRaw&r=0",width ="60",height ="50",title = "我的图片",alt="图片"><br>

10.超级连接

语法<a href="连接的网址"></a>

html 复制代码

<!--测试超级连接-->
    <a href="http://baidu.com" target="_blank" title="百度一下">百度</a>

11.中心位置标签

12.制表标签

(1)无序号图案表

语法<ul type="图案名"></ul>

(2)有序号表

语法：<ol type="序号类型"></ol> 类型：1 A a I i

（3）自定义表

语法：

<dl>

<dt> 组名

<dd>组内信息名

</dl>

html 复制代码

<ul type="disc"><!--disc实心圆 circle空心圆 square实心方框-->
        <li>第一列</li>
        <li>第二列</li>
        <li>第三列</li>
    </ul><br>
    <!--有序号列表-->
    <ol type="I"><!--1 A a I i-->
       <li>第一行</li>
       <li>第二行</li>
       <li>第三行</li> 
    </ol>
    <!--定义性列表-->
    <dl>
        <dt>第一组</dt>
        <dd>第一组第一行</dd>
        <dd>第一组第二行</dd>
        <dt>第二组</dt>
        <dd>第二组第一行</dd>
        <dd>第三组第二行</dd>
    </dl>