HTML里面常用标签及其示例

HTML简介

​ HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

常用的标签

• 标题标签 h

  • <h1>--<h6>,数字越大，对应的标题的字体大小越小
    

  • <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
    

  • 

• 超链接 a

  • 超链接a
    属性：
      1.href：需要被访问的地址
      2.target：打开方式。默认在当前页打开,设置属性值：_blank,在新的一页打开。
    锚点：跳向指定id的元素
    

  • <a href="https://www.baidu.com" target="_blank">点我去百度</a>
       <p id="head">这是文章的头部</p>
       <!--中间有十分多的内容-->
       <a href="#head">回到头部</a>
    

  • 

• 图片及文件路径 img

  • 图片及路径
        路径：路径可以分为绝对路径和相对路径
        * 绝对路径：从磁盘开始去找某个文件的路径，或者是互联网上的URL
        * 相对路径：相对路径是其他文件较于当前目录的路径
            * ./表示在当前目录下
            * ../表示在当前目录的上一级文件
        图片：使用img标签
        * src：图片所在的位置。
        * height：图片的高度
        * width：图片的宽度
    

  • <p>这是两张图片</p>
    <img src="./mm4.jpg">
    <img src="./images/mm7.jpg">
    

  • 

• 表格 table

  • 表格：
    * <tr>：表示表格中的一行
    * <th>：表示表头单元，会加粗
    * <td>：行中的单元
    

  • <table>
        <tr>
            <th>书名</th>
            <th>作者</th>
        </tr>
        <tr>
            <td>《西游记》</td>
            <td>吴承恩</td>
        </tr>
        <tr>
            <td>《红楼梦》</td>
            <td>曹雪芹</td>
        </tr>
        <tr>
            <td>《三国演义》</td>
            <td>罗贯中</td>
        </tr>
        <tr>
            <td>《水浒传》</td>
            <td>施耐庵</td>
        </tr>
    </table>
    

  • 

• 列表 l

  • 列表：列表可以分为有序列表和无序列表
    * 有序列表：<ol>
    * 无序列表：<ul>
    * 列表项：<li>
    

  • <p>这是一个有序列表</p>
    <ol>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
    </ol>
    <hr>
    <p>这是一个无序列表</p>
    <ul>
        <li>PHP</li>
        <li>C#</li>
        <li>.Net</li>
    </ul>
    

  • 

• 表单 form

  • 表单：用来获取信息
    * <input> 标签 它的type属性，有以下属性值。
        * 默认text：文本输入框
        * password：密码输入框
        * number：数字输入框
        * radio：单选框
        * checkbox：复选框
        * date：日期选择框
        * file：文件上传框
        * maile：邮箱输入框
        * submit：提交按钮
        * reset：重置按钮
    *<select>:下拉列表
    *<textarea>:文本输入域
    

  • <form>
        用户名：<input type="text" name="count" placeholder="请输入用户名"><br>
        密码：<input type="password" name="password" placeholder="请输入密码"><br>
        年龄：<input type="number" name="age" placeholder="请输入年龄"><br>
        性别：<br><input type="radio" name="gender" value="male" checked>男<br>
             <input type="radio" name="gender" value="female" >女<br>
        城市：<select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="chongqing" selected>重庆</option>
            <option value="tianjin">天津</option>
        </select><br>
        爱好：<br>
        <input type="checkbox" value="game">打游戏<br>
        <input type="checkbox" value="run">跑步<br>
        <input type="checkbox" value="swim">游泳<br>
        <input type="checkbox" value="shop">购物<br>
        出生日期：
        <input type="date" name="date"><br>
        你的照片：<br>
        <input type="file" name="photo"><br>
        个人简介：<textarea name="introduction"></textarea><br>
        <input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="重置">
    </form>
    

  *

• 换行和画线标签

  • 换行标签：<br>
    画线标签：<hr>
    

  • <p>我换了一行</p>
    <br>
    <p>我画了一条线</p>
    <hr>
    

  • 

• 其他

  • 区块标签

    • 区块标签：区块元素在浏览器显示时，通常会以新的行开始和结束。如：<h1>,<pre>,<ul>,<table>,<div>等
      

    • <h3>区块元素</h3>
      <div>hello</div>
      <div>html</div>
      <p>单独一行</p>
      

    • 

  • 内联标签

    • 内联标签：内联元素一个接着一个显示，不会新起一行。如：<span>,<input>,<td>,<a>,<img>等
      

    • <h3>下面元素会在一行显示</h3>
      <span>name:</span>
      <input name="count">
      <span>hahahaha..</span>
      <a href="https://www.baidu.com">Baidu</a>
      <img src="mm4.jpg " width="80px" height="150px">
      

    • 
      这只是本人所学之后的总结，里面有很多细节地方没有提到，如果想详细学习，请参考官方文档。