经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
html常用标签
来源:cnblogs  作者:Dallas98  时间:2021/2/18 15:00:25  对本文有异议

html页面基本结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" type="text/css" href="mystyle.css">
  7. <title>标题</title>
  8. </head>
  9. <body>
  10. ...
  11. </body>
  12. </html>

基本标签

  1. <h1>一级标题</h1>
  2. ...
  3. <h6>最小六级标题</h6>
  4. <p>这是段落</p>
  5. <br> (换行)
  6. <hr> (水平线)
  7. <!-- 这是注释 -->

文本格式化

  1. <b>粗体文本</b>
  2. <i>斜体文本</i>
  3. <strong>This text is strong</strong>
  4. <em>This text is emphasized</em>
  5. <code>计算机代码</code>
  6. <pre>预格式化文本,它会保留所有空格和换行</pre>

区块/样式

  1. <style type="text/css">
  2. h1 {color:red;}
  3. #tips {color:orange;}
  4. .app {color: green;}
  5. </style>
  6. <div class="app">文档中的块级元素</div>
  7. <span>文档中的内联元素</span>

链接

  1. <a href="https://cnblogs.com/dallas98" target="_blank">我的博客,target属性定义了新开一个标签页</a>
  2. <a href="www.example.com"><img src="URL" alt="这是图片替换文本"></a>
  3. <a href="mailto:email@email.com">发送email</a>
  4. 书签:
  5. <a id="tips">提示部分</a>
  6. <a href="#tips">跳到提示部分</a>

列表

  1. 无序列表
  2. <ul>
  3. <li>项目</li>
  4. <li>项目</li>
  5. </ul>
  6. 有序列表
  7. <ol>
  8. <li>第一项</li>
  9. <li>第二项</li>
  10. <ol>

表格

  1. <table border="1">
  2. <!-- tr:row td:data th:head表头-->
  3. <tr>
  4. <th>Header 1</th>
  5. <th>Header 2</th>
  6. </tr>
  7. <tr>
  8. <td>row 1, cell 1</td>
  9. <td>row 1, cell 2</td>
  10. </tr>
  11. <tr>
  12. <td>row 2, cell 1</td>
  13. <td>row 2, cell 2</td>
  14. </tr>
  15. </table>

表单

  1. <form action="action.php">
  2. First name: <input type="text" name="firstname"><br>
  3. Last name: <input type="password" name="lastname">
  4. </form>
  5. <form action="" method="get">
  6. <!-- name属性定义了是否为一组表单 -->
  7. <input type="radio" name="sex" value="male">Male<br>
  8. <input type="radio" name="sex" value="female">Female
  9. <input type="submit" value="提交">
  10. </form>

框架

  1. 内联框架
  2. <iframe src="demo.html" width="600" height="300">内联框架</iframe>
  3. frameset框架不能与body同时出现
  4. <frameset cols="25%,75%">
  5. <frame src="frame_a.html">
  6. <frame src="frame_b.html">
  7. </frameset>

媒体

  1. <img loading="lazy" src="URL" alt="替换文本" height="50px" width="30px">
  2. <video width="320" height="240" controls>
  3. <!-- 定义一个视频,并有不同的视频资源 -->
  4. <source src="movie.mp4" type="video/mp4">
  5. <source src="movie.ogg" type="video/ogg">
  6. 您的浏览器不支持Video标签。
  7. </video>
  8. <audio src="URL">音频资源</audio>

本文档html源码

原文链接:http://www.cnblogs.com/Dallas98/p/html_element.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号