HTML的学习之路（一）-CSDN博客

本文链接：https://blog.csdn.net/xwx617/article/details/78445220

一、HTML初识元素/标签及其语法
这里写图片描述
开始标签里的属性代表标签内容的一些特性，如颜色、大小、链接等。<br>标签比较特殊，它是单独存在的，表示换行。

这里写图片描述
一个html文档的结构如上图所示，具体代码如下：

<!--文档版本声明-->
<!DOCTYPE html>
<!--html标签-->
<html>
    <!--head标签-->
    <head>
        <meta charset="utf-8"><!--编码方式-->
        <title>html document</title><!--标题-->
    </head>
    <!--body标签-->
    <body>
        aaaa
    </body>
</html>

在浏览器中打开文档，效果如下，其中浏览器标签内容没有截图出来，但其中显示的正是head标签里的title标签的内容html document，这样我们的第一个网页就完成了。
这里写图片描述
需要注意的是，其中head标签里的meta标签的开始标签里接了一个charset，这就是标签属性。

二、HTML语义化标签

标题化标签

标题化标签从h1到h6共有六级，类似于word文档的多级标题，不同级别的标题标签样式不同，如大小和粗细，需要注意的是标题标签和之前学到的title标签是不一样的，title标签内容是显示在浏览器的标签上的，表示整个html文档的标题，而<h1>到<h6>等标签是显示在页面上的，类似于Word的多级标题，下面放上实例代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Html 标题标签</title>
    </head>
    <body>
        <h1>这是标题1</h1>
        <h2>这是标题2</h2>
        <h3>这是标题3</h3>
        <h4>这是标题4</h4>
        <h5>这是标题5</h5>
        <h6>这是标题6</h6>
    </body>
</html>

文档在浏览器中打开的效果如下：
这里写图片描述

段落标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 段落标签</title>
        <!--定义p标签的样式让其在没有内容的时候不进行占位-->
        <style>
            p{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <p>段落内容1</p>
        <p></p><!--在默认的浏览器样式中空标签也占地方，可以自己定制p标签的样式，比如在head中在style标签中定义p标签的样式让其不占位-->
        <p>段落内容2</p>
    </body>
</html>

在浏览器中效果如下：
这里写图片描述

字体标签

下面是代码实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>font标签</title>
    </head>
    <body>
        <!--文字大小-->
        <font size="1">HTML</font>
        <!--字体风格-->
        <font size="1" face="Helvetica">HTML</font>
        <!--字体颜色-->
        <font color="red">多姿多彩html</font>
        <font color="#d8d8d8">多姿多彩html</font>
        <font color="rgb(168,178,188)">多姿多彩html</font>
    </body>
</html>

下面是浏览器打开效果：
这里写图片描述
但是我们在日常开发中实际上并用不到这个font标签，因为各种风格样式我们都是通过css来完成的，因此这里简单的了解一下即可。

链接标签

下面是代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 链接标签</title>
        <!--改变链接标签的样式：
        1、链接文本内容颜色和点击过的链接文本内容颜色
        2、取消链接文本下划线
        3、取消鼠标移动到链接文本的光标效果
        -->
        <style>
            .content{
                height: 800px;
            }

            a{
                color: 333333;
                text-decoration: none;
                cursor: none;
            }

            a:visited{
                color: #333333;
            }
        </style>
    </head>
    <body>
        <!--注意href属性一定要是完整的网址，http或者https是一定要加上的-->
        <a href="https://www.google.com.hk/" target="_blank">点击后在新页面打开链接</a>
        <br>

        <a href="https://www.google.com.hk/" target="_self">点击后在本页面打开链接</a>
        <br>

        <a href="#titleThird">页面内锚点</a>
        <br>

        <a href="javasript:void(0);">能跳走算我输</a>
        <br>

        <!--在head中改变了样式占用了空间，以便显示点击页面内锚点后的跳转效果-->
        <div class="content">一堆内容</div>
        <br>

        <!--id是所有标签的通用属性-->
        <h3 id="titleThird">第三章</h3>
    </body>
</html>

在浏览器中打开的效果如下
这里写图片描述

图像标签
图像标签<img />是单独的一个标签，不需要结束标签，在HTML中放置图像有两种方法，一种是通过图像标签，另一种则是通过设置style的background，具体如下代码所示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 图像</title>
        <!--"."是用来匹配文档中对应类名的-->
        <style>
            .logo
            {
                background: url(http://avatar.csdn.net/7/9/9/1_xwx617.jpg);
                width: 400px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <!--图片标签，不加大小属性的话默认为原图片大小-->
        <img  width="100px" height="50px" src="http://avatar.csdn.net/7/9/9/1_xwx617.jpg" />
        <br>

        <!--图片标签的alt属性是在src属性错误的情况下显示的内容-->
        <img alt="加载图片出错" src="ajfijsdifjos"/>
        <br>

        <!--通过非标签的方式实现图片效果
        class属性：用来指示标签的类名
        -->
        <p class="logo"></p>
    </body>
</html>

在浏览器中打开文档效果如图，第一行是正常img标签的效果，第二行是img标签图片源出错的效果，第三行则是利用style的background放置的图片效果，可以看出来第三种是一种填充效果。
这里写图片描述

列表标签
列表标签分为无序列表<ul> 有序列表<ol> 以及定义列表<dl> ，其中有序和无序列表标签的小项的标签都为<li>，定义列表的小项的标签为<dt> 和<dd> ，其中dt是定义标题，dd是定义内容，在实际项目中只建议使用无序列表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="tyf-8">
        <title>HTML 列表</title>
    </head>
    <body>
        <!--无序列表,li为项,type属性可以改变每一项前面的符号，赋值为none时取消符号，但是不能消去符号占的空间-->
        <ul type="disc">
            <li>苹果</li>
            <li>鸭梨</li>
            <li>水蜜桃</li>
        </ul>

        <!--有序列表-->
        <ol>
            <li>烤冷面</li>
            <li>煎饼果子</li>
            <li>麻辣烫</li>
        </ol>

        <!--定义列表 dt为概念的名字，dd为概念的解释-->
        <dl>
            <dt>正数</dt>
            <dd>大于0的数</dd>
            <dt>负数</dt>
            <dd>小于0的数</dd>
        </dl>
    </body>
</html>