html基本标签

3187
前端开发
html

文章最后更新时间为：2018年08月14日 11:07:33

0. 前言

偶尔会用到html，但是长时间不写很多标签都忘了，简略总结一下方便以后查阅。

1. html格式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xiaogeng.top</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

2. 标题

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

3. 水平线

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

4. 注释

<!-- 这是一个注释 -->

5. 段落

<p>这是一个段落 </p>
<p>这是另一个段落</p>

6. 换行

<p>这个<br>段落<br>演示了分行的效果</p>

7. 文本格式化

<b>这个文本是加粗的</b>

<strong>这个文本是加粗的</strong>

<big>这个文本字体放大</big>

<em>这个文本是斜体的</em>

<i>这个文本是斜体的</i>

<small>这个文本是缩小的</small>

这个文本包含<sub>下标</sub>

这个文本包含<sup>上标</sup>

<code>计算机输出</code>

<kbd>键盘输入</kbd>

<tt>打字机文本</tt>

<samp>计算机代码样本</samp>

<var>计算机变量</var>

<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

8. 链接

<a href="https://www.xiaogeng.top/" target="_blank">saucerman</a>

调到当前页书签
<a href="#C4">查看章节 4</a>
....
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
....

跳出框架
<a href="..." target="_top">点击这里!</a> 

电子邮件
<a href="mailto:[email protected]?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">普通发送邮件</a>

<a href="mailto:[email protected][email protected]&[email protected]" rel="nofollow">带抄送密送发送邮件</a>

关于target：

值描述
_blank在新窗口中打开被链接文档。
_self默认。在相同的框架中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。
framename在指定的框架中打开被链接文档。

9. meta标签

meta标签位于head之间，主要用来描述网页。

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:
<meta name="author" content="Runoob">

每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

10.css链接方法

内联css
<body>  
    <p style="font-size:10px;font-color:#ff0000">内联定义</p>  
 
</body> 

内部css
<style type="text/css">  
    #myid  
    {  
        width:200px;  
        height:300px;  
        color:red;  
    }  
    .myclass  
    {  
        width:200px;  
        height:300px;  
        color:red;  
    }  
</style> 

外部css
<link type="text/css" rel="stylesheet" href="style.css"/>
..
..
#p1  
{  
    border:2px;  
    color:red;  
}

对于css选择dom，class用‘·’，id用‘#’。

11. 图像

<img src="url" alt="some_text">

12. 表格

<table border="1">
    <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>

13. 列表

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

14. 表单

文本域

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

密码字段

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

15. 框架

宽高
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

去除边框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

显示链接页面
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

16. 嵌入脚本

<script>
document.write("Hello World!");
</script>
1 + 2 =
快来做第一个评论的人吧~