HTML基础标签

## 思维导图在开始学习前端时,先搞清楚网页结构,HTML结构,css表现,以及js行为HTML基础标签
然后开始学习创建项目,尽量可以根据格式简历项目
HTML基础标签
了解html的基本结构,主要是头部和主体

最后是 一些基础的标签。

1.文本相关的标签

效果图
HTML基础标签
代码片段

    <body>
        <!-- 标题标签 h-->
        <h1>一级标签</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>

        <!--  段落标签 -->
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。<i>这是一个段落。</i>这是一个段落。<b>这是一个段落。</b>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
        </p>
        <hr>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;这是一个<i><b>段落</b></i>。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
        </p>

        <!-- 倾斜标签 -->
        <i>倾斜1</i>
        <em>倾斜2</em>

        <!-- 加粗标签 -->
        <b>加粗1</b>
        <strong>加粗2</strong>
        <i><b>加粗倾斜</b></i>
                <!-- 
            上标<sup></sup>
            下标<sub></sub>
            下划线<u></u>
            删除线<s></s> <del></del>
        -->
        <p>这是一个人<u>段落</u>。<sup>[1]</sup>这是一个人段落。[2]这是一个人段落。<sub>[3]</sub>这是一个人段落。[4]这是一个人段落。<s>这是一个人段落</s>。这是一个人段落。这是一个人段落。这是一个人段落。这是一个人段落。这是一个人段落。这是一个人段落。</p>
        
    </body>

2.特殊标签特殊符号

效果图HTML基础标签
代码片段`

<body>
    <!-- 
        特殊标签:
            强制换行<br>
            分割线<hr>也可自动换行
        特殊符号:
            &nbsp;空格
            &copy;版权符号
            &reg;商标符号


            &gt;大于号
            &lt;小于号
     -->
    <p>这是一个段落。aaaaaa
        <br>aaaaa。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。<hr>这是一个段落。这是一个段落。这是一个段落。</p>
        <hr>
 
        &copy;版权符号
        &reg;商标符号

        &gt;大于号
        &lt;小于号
</body>

3.列表
列表分为 有序列表、无序列表、自定义列表
自定义列表 dl-dt(一般放图片)-dd(对dt的解释说明)
dt下面是可以跟很多dd的,可以有多条解释说明语句
列表符号:
无序列表符号可通过type属性更改:circle是空心圆 square是实心方块 disc是实心圆

效果图
HTML基础标签
代码片段

<body>
    <!-- 有序列表 ol-li(列表项)  -->
    <ol>
        <li>草莓</li>
        <li>芒果</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
    </ol>
    <!-- 无序列表 ul-li(列表项) -->
    <ul>
        <li>草莓</li>
        <li>芒果</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
    </ul>
    <!-- 自定义列表 dl-dt(一般放图片)-dd(对dt的解释说明)
        dt下面是可以跟很多dd的,可以有多条解释说明语句
        列表符号:
	    无序列表符号可通过type属性更改:circle是空心圆 square是实心方块 disc是实心圆

    -->
    <dl>
        <dt>11</dt>
        <dd>草莓</dd>
        <dt>22</dt>
        <dd>芒果</dd>
        <dt>33</dt>
        <dd>苹果</dd>
    </dl>
    <!-- 扩展 -->
    <ol type="A" start="3">
        <li>草莓</li>
        <li>芒果</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
    </ol>
</body>

4.图片
图片标签img
src:图片路径
alt:当图片加载不出来的时会显示提示信息
title:当鼠标滑过的时候显示的提示信息

效果图
HTML基础标签
代码片段

<body>
    <!-- 
        图片标签img 
        src:图片路径
        alt:当图片加载不出来的时会显示提示信息
        title:当鼠标滑过的时候显示的提示信息
    -->
    <img src="images/1.png" alt="图片显示失败" title="标签">
</body>

5.超链接
超链接 a
href:你要跳转的地址
target:
_self:在当前窗口页打开(默认值)
_blank:在新窗口打开

效果图
HTML基础标签
代码片段

<body>
    <!--
         超链接 a
         href:你要跳转的地址
         target:
            _self:在当前窗口页打开(默认值)
            _blank:在新窗口打开
        -->
    <a href="http://www.baidu.com" target="_blank">index</a>
</body>

6.表单

效果图
HTML基础标签
代码片段

<body>
    <!-- 
        表单
        作用:用来收集用户信息
        表单标签:form
            属性:action写你的提交地址的(服务器的地址)
     -->
     <form action="">
         
         <!-- 文本输入框 -->
         用户名:<input type="text" >
         <br><br>
         <!-- 密码输入框 -->
         密码:<input type="password">
         <br><br>
         <!-- 提交 -->
         <input type="submit">
         <br><br>
         <!-- 重置 -->
         <input type="reset">

     </form>
</body>
以上都是一些基础的html标签,比较简单,像一些<h></h>标签 或者<p></p>标签以后会常用,
再比如<i></i>标签与<em></em>标签都是对文字的加粗,但是**<em>标签加重语气,表示强调,
搜索引擎优化时会被作为重点。** **<strong> 标签和 <em> 标签一样,用于强调文本,
但它强调的程度更强一些。**
上一篇:CSS入门


下一篇:02 HTML标签