HTML的基本常用标签

HTML的基本标签

1.  html的基本框架

<!--DOCTYPE文档描述标签:告诉浏览器我们使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--meat:描述形标签,用来描述网站的一些信息-->
    <meta charset="UTF-8">
    <!--title:网页标题-->
    <title>Title</title>
</head>
<body>

</body>
</html>

2.  标题标签

    <h1>一级</h1>
    <h2>二级</h2>
    <h3>三级</h3>
    <h4>四级</h4>
    <h5>五级</h5>
    <h6>六级</h6>
   
3.  段落标签

    <p>两只老虎</p>
    <p>跑得快</p>
   
4.  水平线标签

    <hr/>
   
5.  换行标签

    <br/>
   
6.  粗体标签

    <strong>文字变粗</strong>
   
7.  斜体标签

    <em>文字变斜</em>
   
8.  特殊符号

    空格:&nbsp ;
    大于号:&gt ;
    小于号:&lt ;
    版权符号:&copy ;
   
9.  图片标签

    <img src="" alt="找不到图片时代替消息" title="悬浮图片提示的文字消息" width="100" height="100">
   
10.  超链接标签

      <p><a href="https:www.baidu.com" target="_blank">点我跳转到新页面访问百度</a></p>
      <p><a href="https:www.baidu.com" target="_self">点我当前页面访问百度</a></p>
     超链接中放入图片,可以实现点击图片跳转超链接预目标路径
      <a href="https:www.xxx.com">
          <img src="../resources/imgs/1.jpg" alt="一条消息通知" title="点我可以跳转百度!!" width="50" height="50">
      </a>
     
     <!--锚链接
        1:定义一个锚<a name="top"></a>
        2:<a href="#top">回到顶部</a>
     -->
     
     <!--
        功能性链接
        1:邮箱 mailto:xxx.com
        2:QQ链接
     -->
     
11.  无序标签

     <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
     </ul>
     
12.  有序标签

     <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
     </ol>
     
13.  自定义列表

     <dl>
        <dt>标题</dt>
        <dd></dd>
        <dd>哈哈</dd>
        <dd>哈哈哈</dd>
        <dd>哈哈哈哈</dd>
        <dd>哈哈哈哈哈</dd>
     </dl>
     
14.  表格标签

     <!--表格标签  跨列:colspan,跨行:rowspan-->
     <table border="1px">
        <tr>
            <td colspan="3">1-1</td>
        </tr>
        <tr>
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
        </tr>
     </table>
     
15.  视频标签

     <!--视频标签  进度控制条:controls,自动播放:autoplay-->
     <video src="xxx" controls autoplay></video>
     
16.  音频标签

     <!--音频标签-->
     <audio src="../resources/audio/萤火虫和你.mp3" controls autoplay></audio>
     
17.  iframe嵌套

     <!--iframe嵌套框架-->
     <iframe src="https://www.bilibili.com" name="baidu"></iframe>
        
     <!--超链接定向访问iframe嵌套-->
     <a href="https://www.baidu.com/" target="baidu">点击会使target中目标name等于baidu的嵌套框架变成我超链接中href的路径</a>
     
18.  form表单
    
    <form action="www.baidu.com" method="get">
    
    <!--文本框-->
        <p>
            <!--点击label可跳转for绑定的框-->
            <label for="label">姓名:</label>
            <input type="text" name="username" id="label" placeholder="请输入姓名" value="admin " maxlength="4" readonly>
        </p>
    
    <!--密码框-->
        <p>密码:<input type="password" name="userpwd" placeholder="请输入密码" required></p>
    
    <!--单选框-->
        <p>性别:
            <input type="radio" name="sex" value="boy" checked><input type="radio" name="sex" value="girl"></p>
    
    <!--多选框-->
        <p>爱好:
            <input type="checkbox" name="hobby" value="1" checked>LOL
            <input type="checkbox" name="hobby" value="2">DTA
            <input type="checkbox" name="hobby" value="3">CF
        </p>
    
    <!--下拉框-->
        <p>
            所属国家:
            <select name="国家">
                <option value="1">中国</option>
                <option value="2">美国</option>
                <option value="3">法国</option>
                <option value="4" selected>北京</option>
            </select>
        </p>
    
    <!--文本域、多行文本 cols列宽、rows行高-->
        备注:
        <p>
            <textarea name="" id="" cols="50" rows="5" placeholder="我这里可以写200个字!" maxlength="200"></textarea>
        </p>
    
    <!--文件域-->
        <p>
            <input type="file" name="files">
        </p>
    
    <!--邮箱-->
        <p>邮箱:
            <input type="email" name = "email">
        </p>
    
    <!--URL-->
        <p>URL:
            <input type="url" name = "url">
        </p>
    
    <!--数字-->
        <p>数字:
            <input type="number" name = "number" max="10" min="1">
        </p>
    
    <!--滑块-->
        <p>滑块:
            <input type="range" name = "range">
        </p>
    
    <!--搜索框-->
        <p>搜索框:
            <input type="search" name = "search">
        </p>

    <br>
    <p>
        <input type="submit" value="点击确认跳转">
        <input type="reset" value="清空表单" disabled>
    </p>

    <!--按钮-->
        <p><input type="button" value="我是一个按钮" name="btn1" hidden=""><br/></p>
        
    <!--图片按钮-->
        <p>点击图片也可以跳转action页面<input type="image" src="../resources/imgs/1.jpg" style="width: 50px; height: 50px"></p>
</form>

  • 8
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值