前端HTML

前端HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="UTF-8" />
    <!-- 网页标题 -->
    <title>前端html</title>
    <!-- 引入样式:href目标地址,rel文档与链接文档关系,type链接文档类型 -->
    <link href="" rel="" type="" />
    <!-- 定义样式 -->
    <style></style>
    <!-- 定义脚本 -->
    <script></script>
  </head>
  <body>
    <!-- 标题 -->
    <h1>this is a h1</h1>
    <h2>this is a h2</h2>
    <h3>this is a h3</h3>
    <h4>this is a h4</h4>
    <h5>this is a h5</h5>
    <h6>this is a h6</h6>

    <!-- 水平线 -->
    <hr />

    <!-- 段落与换行,多个空格只会显示一个 -->
    <p>this is a p tag,this is a br:<br />:br is here.<br />this is a blank' 'blank is here.</p>
    <!-- 文本格式化 -->
    <p>this is a <b>bold</b> tag</p>
    <p>this is a <strong>strong</strong> tag</p>
    <p>this is a <i>i</i> tag</p>
    <p>this is a <em>em</em> tag</p>
    <p>this is a <big>big</big> tag</p>
    <p>this is a <small>samll</small> tag</p>

    <!-- 超链接:href网站或文件地址,target在本页面或新页面打开 -->
    <a href="html.md" target="_blank">this is a 'a' tag</a>
    <br />
    <!-- 跳转锚点(由其他标签的id属性或a标签的name属性构成) -->
    <a href="#anchor">this is a jump</a>
    <br />

    <!-- 图片:src图片地址,alt图片描述 -->
    <img src="asset/logo.svg" alt="this is a image" />
    <br />

    <!-- 表格 -->
    <table border="1">
      <!-- 表格标题 -->
      <caption>
        this is caption
      </caption>
      <tr>
        <!-- 表头 -->
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
      </tr>
      <tr>
        <td>(1,1)</td>
        <td>(1,2)</td>
        <td>(1,3)</td>
      </tr>
      <tr>
        <td>(2,1)</td>
        <td>(2,2)</td>
        <td>(2,3)</td>
      </tr>
    </table>

    <!-- 无序列表 -->
    <ul>
      <li>this is unordered list</li>
      <li>this is unordered list</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
      <li>this is ordered list</li>
      <li>this is ordered list</li>
    </ol>

    <!-- 普通块元素 -->
    <div>this is a div tag</div>
    <!-- 文本块元素 -->
    <span>this is a span tag</span>

    <!-- 表单:action提交地址,method提交方式,name数据名,value数据值 -->
    <form action="#" method="get">
      <!-- 文本输入 -->
      <input
        type="text"
        name="admin"
        placeholder="用户名"
        disabled
        autofocus
        readonly
        required
        autocomplete="on" />
      <br />
      <!-- 密码输入 -->
      <input type="password" name="password" placeholder="密码" />
      <br />
      <!-- 文本标签:绑定到表单元素 -->
      <label>
        <!-- 单选框:checked默认选择 -->
        <input type="radio" name="gender" value="male" checked /></label>
      <br />
      <label> <input type="radio" name="gender" value="female" /></label>
      <br />
      <label>
        <!-- 复选框:checked默认选择 -->
        <input type="checkbox" name="box" value="a" id="a" checked />a
      </label>
      <br />
      <label> <input type="checkbox" name="box" value="b" />b </label>
      <br />
      <!-- 文本框 -->
      <textarea placeholder="this is a textarea"></textarea>
      <br />
      <!-- 选择列表:selected默认选择 -->
      <select name="select">
        <option value="op1" selected>op1</option>
        <option value="op2">op2</option>
        <option value="op3">op3</option>
      </select>
      <br />
      <!-- 其他输入 -->
      <input type="color" />this is color<br />
      <input type="date" />this is date<br />
      <input type="time" />this is time<br />
      <input type="number" />this is number<br />
      <input type="range" />this is range<br />
      <input type="url" />this is url<br />
      <input type="email" />this is email<br />
      <input type="tel" />this is tel<br />
      <input type="search" />this is search<br />
      <input type="hidden" />this is hidden<br />
      <!-- 提交按钮 -->
      <input type="submit" value="this is submit input" /><br />
      <button>this is a submit button</button><br />
      <!-- 重置按钮 -->
      <input type="reset" value="this is reset input" /><br />
      <button type="reset">this is a reset button</button><br />
      <!-- 普通按钮 -->
      <input type="button" value="this is button input" /><br />
      <button type="button">this is a button</button><br />
    </form>

    <!-- 嵌入:src目标地址,frameborder是否显示边框 -->
    <iframe src="#" frameborder="0"></iframe>

    <!-- 特殊字符 -->
    <p>this is some blank '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'</p>
    <br />
    <p>this is a '&lt;'</p>
    <br />
    <p>this is a '&gt;'</p>
    <br />
    <p>this is a ampersand '&amp;'</p>
    <br />
    <p>this is a quotation &quot;</p>
    <br />
    <p>this is a apostrophe &apos;</p>
    <br id="anchor" />

    <!-- 新语义化标签 -->
    <header>this is a header</header>
    <footer>this is a footer</footer>
    <nav>this is a nav</nav>
    <aside>this is a aside</aside>
    <article>this is a article</article>
    <section>this is a section</section>

    <!-- 音视频:src目标地址,controls显示控件,autoplay自动播放,loop循环播放,poster视频封面地址 -->
    <audio src="" controls>this is a audio</audio>
    <br />
    <video src="">this is a video</video>
    <br />

    <!-- svg图像 -->
    <svg></svg>

    <!-- 图形 -->
    <canvas>this is a canvas</canvas>
    <br/>
    
    <!-- 模板 -->
    <templete>this is a templete</templete>
  </body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值