首页 > Web开发 > 详细

html常用标签

时间:2021-02-05 15:11:42      阅读:23      评论:0      收藏:0      [点我收藏+]

html页面基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>标题</title>
</head>
<body>
    ...
</body>
</html>

基本标签

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

文本格式化

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

区块/样式

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

链接

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

列表

无序列表
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

有序列表
<ol>
    <li>第一项</li>
    <li>第二项</li>
<ol>

表格

<table border="1">
    <!-- tr:row td:data th:head表头-->
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

表单

<form action="action.php">
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="password" name="lastname">
</form>

<form action="" method="get">
    <!-- name属性定义了是否为一组表单 -->
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
    <input type="submit" value="提交">
</form>

框架

内联框架
<iframe src="demo.html" width="600" height="300">内联框架</iframe>

frameset框架不能与body同时出现
<frameset cols="25%,75%">
    <frame src="frame_a.html">
    <frame src="frame_b.html">
</frameset>

媒体

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

<audio src="URL">音频资源</audio>

本文档html源码

html常用标签

原文:https://www.cnblogs.com/Dallas98/p/html_element.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!