HTML速查列表

2023-11-07 54

HTML速查列表是一种用于提供HTML标签的快速参考的工具,这些标签可以用于创建网页。这个列表可以被打印出来,以便在日常生活中方便记忆和使用。它包括HTML的基本文档结构,例如`<DOCTYPE html>`, `<html>`, `<head>`, `<title>`等,以及各种基本标签,如标题标签`<h1>`到`<h6>`,段落标签`<p>`,换行标签`<br>`和水平线标签`<hr>`等。此外,它可能还包含文本格式化和注释的相关信息。

一、HTML基本文档

<html>
<head>
<title>文档标题</title>
</head>
<body> 可见文本... </body>
</html>

二、基本标签

<p>这是一个段落。</p>
<br> (换行)
<hr> (水平线)
<!-- 这是注释 -->
<h#>标题</h#>
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>

三、链接

  • a:普通链接;
  • img:图像链接;
  • mailto:邮件链接;
  • abbr:缩写;
  • address:联系信息;
  • bdo:文字方向;
  • blockquote:从另一个源引用的部分;
  • cite:工作的名称;
  • del:删除的文本;
  • ins:插入的文本;
  • sub:下标文本;
  • sup:上标文本。

例如:

普通的链接:<a href="链接地址" rel="external nofollow" >链接文本</a>
图像链接: <a href="http://www.example.com/" rel="external nofollow"  rel="external nofollow" target="_blank" ><img src="URL" alt="替换文本"></a>
邮件链接: <a href="mailto:webmaster@example.com" rel="external nofollow" >发送e-mail</a>
书签: <a id="tips">
提示部分</a> <a href="#tips" rel="external nofollow" >跳到提示部分</a>

四、文本格式化

  • b:粗体文本
  • code:计算机代码;
  • em:强调文本;
  • i:斜体文本;
  • kbd:键盘输入;
  • pre:预格式化文本;
  • small:更小的文本;
  • strong:重要的文本;
  • abbr:缩写;
  • address:联系信息;
  • bdo:文字方向;
  • blockquote:从另一个源引用的部分;
  • cite:工作的名称;
  • del:删除的文本;
  • ins :插入的文本;
  • sub:下标文本;
  • sup:上标文本。

五、样式/区块

  • style:内联样式元素,用于定义CSS样式;
  • div:文档中的块级元素;
  • span:文档中的内联元素。
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>

六、图片

  • img:图片元素,需要指定alt属性作为替换文本,height和width属性设置图片高度和宽度。
<img src="URL" alt="替换文本" height="42" width="42">

七、表格

  • table:表格元素,border属性设置边框宽度;
  • tr:表格行元素;
  • th:表格标题单元格元素;
  • td:表格数据单元格元素。
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>

八、框架

  • iframe:内嵌框架元素,可以嵌入其他网页或文档。
<iframe src="demo_iframe.htm"></iframe>

九、表单

  • form:表单元素,action属性指定提交表单时的目标URL,method属性指定提交方式(post或get);
  • input:输入框元素,type属性指定输入类型(text、password、checkbox、radio、submit、reset、hidden、select等);
  • select:选择框元素,option子元素表示选项;
  • textarea:文本区域元素,rows和cols属性设置行数和列数。
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50"> 
<input type="password"> 
<input type="checkbox" checked="checked"> 
<input type="radio" checked="checked"> 
<input type="submit" value="Send"> 
<input type="reset"> 
<input type="hidden"> 
<select> 
<option>123</option> 
<option selected="selected">456</option> 
<option>789桃</option> 
</select>
<textarea name="comment" rows="60" cols="20">
</textarea> 
</form>

十、定义列表

  • dl:定义列表元素,包含dt和dd子元素.
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>

十一、有序列表

  • li:列表项元素;
  • ol:有序列表元素。
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

十二、无序列表

  • ul:无序列表元素。
<ul>
<li>项目</li>
<li>项目</li>
</ul>

十三、实体

  • < 等同于 &lt;
  • > 等同于 &gt;
  • © 等同于 &copy;
  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。