html的一些基本标签

1.文本标签 span

举例子： 

       <span style="color: red;">hello world</span>

 

2.标题标签 h1~h6 

举例子：   

     <h1>标题标签</h1>

     <h2>标题标签</h2>

     <h3>标题标签</h3>

     <h4>标题标签</h4>

     <h5>标题标签</h5>

     <h6>标题标签</h6>

 

3.竖着布局的标签 div

举例子：

     <div>竖着布局的标签</div>

     <div>竖着布局的标签</div>

     <div>竖着布局的标签</div>

     <div>竖着布局的标签</div>

 4.段落标签 p

举例子：

    <p>段落标签</p>

    <p>段落标签</p>

    <p>段落标签</p>

5.超链接标签 a  

举例子：

 <a href="https://www.baidu.com/" target="_self">点击跳转</a>

其中 

href 代表设置资源路径，这里跳转到百度

target 是设置打开窗口的方式，_self表示默认的（在本窗口打开），_blank表示在新窗口中打开

6.锚点标签  name锚点值

 举例子：

 <a name="aaaa"></a>

 <h1>标题标签</h1>

 <a name="bbbb"></a>

<div>竖着布局的标签</div>

 <a name="cccc"></a>

<p>段落标签</p>

      <a href="#aaaa" style="position: fixed;right: 200px;bottom: 200px;">跳转到h1</a>

      <a href="#bbbb" style="position: fixed;right: 200px;bottom: 150px;">跳转到div</a>

      <a href="#cccc" style="position: fixed;right: 200px;bottom: 100px;">跳转到p</a>

7.图片标签 

举例子：

<img src="1.jpg" alt="这是一张图片" width="100px" height="200px" style="object-fit: cover;">

其中

src表示引用的图片资源

图片路径分为一下几种情况：

                相对路径：访问资源与被访问资源的关系

                                  兄弟关系 src="1.jpg"

                                  叔侄关系 src="img/1.jpg"

                                  表兄弟关系 src="../img/1.jpg"

                绝对路径：资源的绝对位置

   alt 当图片资源不能正常显示时，显示alt里面的内容

8.列表标签

举例子：

      <ul>

        <li>列表标签</li>

        <li>列表标签</li>

        <li>列表标签</li>

        <li>列表标签</li>

      </ul>

      <ol>

        <li>列表标签</li>

        <li>列表标签</li>

        <li>列表标签</li>

        <li>列表标签</li>

      </ol>

9.表格标签 

举例子：

       <table border="1">

            <tr>

                <th>id</th>

                <th>name</th>

                <th>age</th>

            </tr>

            <tr>

                <td>1</td>

                <td>张三</td>

                <td>18</td>

            </tr>

            <tr>

                <td>2</td>

                <td>王五</td>

                <td>19</td>

            </tr>

       </table>

其中 

            <table>放表格的容器

            <tr>行     <td>单元格    <th>加粗居中

         

            border表格有边框

            width="500px" 宽

            height="400px" 高

            cellpadding="10px" 单元格填充度

            cellspacing="0" 单元格之间的间距,0表示挨在一起

            rowspan 行合并

            colspan 列合并

 

10.框架标签 

举例子：

        <a href="https://www.bilibili.com/" target="aaa">跳转到bilibili</a>

        <a href="https://www.baidu.com/" target="aaa">跳转到baidu</a>

        <a href="https://www.processon.com/login" target="aaa">跳转到processon</a>

        <br><br>

        <iframe src="https://www.processon.com/login"  width="800px" height="400px" frameborder='0' name="aaa"></iframe>

其中

            iframe 嵌套其他页面

            src 嵌套的资源

            frameborder='0' 去掉边框 把任意页嵌入的更真实

11.音频 audio

举例子：

<audio src="img/1.mp3" autoplay loop></audio>

其中

            controls 手动播放，让播放器显示出来

            autoplay 自动播放

            loop 循环播放

12.视频 video

举例子：

<video src="img/1.mp4" width="800px" height="400px" controls></video>

其中用法同音频

13.一些常见用于收集用户信息的标签

举例子：

单行文本框： <input type="text"> 

密码框：<input type="password"> 

单选框：<input type="radio" name="sex"> 男生  <input type="radio" name="sex"> 女生 

复选框：<input type="checkbox"> 篮球  <input type="checkbox"> 足球  

文件选择器 ： <input type="file"> 

颜色选择器：<input type="color"> 

日期：<input type="data"> 

日期时间： <input type="datetime-local"> 

周选择器：<input type="week">    

滑块：<input type="range" min="0" max="100" value="90"> 

数字：<input type="number" min="0" max="100" value="10" step="5"> 

 step表示步长，点一次跳5 

下拉框：            <select>

                          <option value="">数学</option>

                         <option value="">语文</option>

                         <option value="">英语</option>

                         </select>

多行文本框： <textarea rows="10" cols="50"></textarea> 

按钮：            <input type="button" value="普通按钮">

                      <input type="reset" value="重置按钮">

                      <input type="submit" value="提交按钮">