HTML速查列表

AI悦创原创2022年7月13日
大约 6 分钟

速查列表

目录

标题

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

段落

<p>段落</p>

链接

<a href="https://lcfu1.github.io/Note/" target="_blank">链接</a>

<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

注:

  • target 属性:
    • _blank:在新窗口打开。
    • _self:在同一个窗口打开。
    • _parent:在父窗口打开。

图片

<img border="1" src="https://bornforthis.cn/img_home/logo_min.png" width="32" height="32" alt="favicon.ico" usemap="#faviconmap">
<map name="faviconmap">
	<area shape="circle" coords="16,16,16" alt="favicon" href="https://lcfu1.github.io/Note/">
</map>

注:

  • border 属性:边框。
  • src 属性:图像的地址。
  • alt 属性:在浏览器无法载入图像时,为图像定义一串预备的可替换的文本。
  • align 属性:默认对齐的图像,可设置为 top、middle、bottom。align 属性在 HTML4 中已废弃,HTML5 已不支持该属性。
  • usemap 属性:图像映射。
  • widthheight 属性:设置图片的宽高。
  • <map>标签:定义图像地图。
  • <area>标签:定义图像地图中的可点击区域。
    • shape 属性:定义形状,可设置为 rect、circle、poly 等。
    • coords 属性:链接区域在图片中的坐标,如上面 coords="16,16,16" 是指圆心坐标为 (16,16) ,半径为 16。

水平线

<hr/>

注释

<!--注释-->

折行

<p>段落<br>段落</p>

注:

  • <br/> 是一个空的 HTML 元素,关闭标签没有任何意义,所以它没有结束标签。

文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<q>块引用</q>
<abbr title="我是缩写的">缩写</abbr>
<acronym title="首字母缩写">缩写</acronym>
<address><a href="mailto:lcfu1@qq.com">lcfu1</a>.<br> </address>
<bdo dir="rtl">从右到左显示</bdo>
<blockquote>从另一个源引用的部分</blockquote>
<cite>工作的名称</cite>
<del>删除的文本</del>
<ins>插入的文本</ins>
<sub>下标文本</sub>
<sup>上标文本</sup>
<pre>
    预格式
文本
</pre>

表格

<table border="1" cellpadding="10" cellspacing="0">
<colgroup>
	<col style="background-color:blue">
    <col span="3" style="background-color:red">
</colgroup>
<caption>标题</caption>
<thead>
	<tr>
    	<th>Head</th>
    	<th>Header1</th>
		<th>Header2</th>
		<th>Header3</th>
	</tr>
</thead>
<tbody>
	<tr>
		<th>body</th>
  		<td rowspan="2">2</td>
  		<td colspan="2">2</td>
	</tr>
	<tr>
		<th>body</th>
  		<td>2</td>
  		<td>2</td>
	</tr>
</tbody>
<tfoot>
	<tr>
      	<th>foot</th>
      	<td>3</td>
		<td>3</td>
		<td>3</td>
    </tr>
</tfoot>
</table>

注:

  • <table>标签来定义。
  • border 属性用于设置边框。
  • cellpadding 属性用于设置单元格边距。
  • cellspacing 属性用于设置单元格间距。
  • <colgroup> <col> 标签为表格中的列设置背景色。
  • <caption> 标签定义表格的标题。
  • <thead> 标签用于组合表头内容。
  • <tbody> 标签用于组合主体内容。
  • <tfoot> 标签用于组合页脚内容。
  • <tr> 标签定义行。
  • <th> 标签定义表头。
  • <td> 标签定义单元格 。
  • rowspan 属性用于跨列。
  • colspan 属性用于跨单元格。

有序列表

<ol start="2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<ol type="A">
    <li>A</li>
    <li>B</li>
</ol> 

注:

  • start 属性可用于设置列表项目从哪个数字开始。
  • type 属性可用于设置不同类型的有序列表:
    • A:大写字母列表。
    • a:小写字母列表。
    • I:罗马数字列表。
    • i:小写罗马数字列表。

无序列表

<ul style="list-style-type:circle">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

注:

  • style 属性:使用 CSS 定义不同类型的无序列表:
    • list-style-type:circle:圆点列表。
    • list-style-type:circle:圆圈列表。
    • list-style-type:square:正方形列表。

自定义列表

<dl>
	<dt>AA</dt>
    <dd>1</dd>
    <dt>BB</dt>
    <dd>2</dd>
</dl>

注:

  • <dl>:定义列表。
  • <dt>:自定义列表项目。
  • <dd>:自定义列表项的描述。

区块

<p>段落</p>
<div style="color:blue">
	<p>段落</p>
	<p>段落</p>
</div>
<p>A <span style="color:red;font-weight:bold">B</span> C</p>

注:

  • <div>块级元素,浏览器会在其前后显示折行。

  • <span>内联元素,用来组合文档中的行内元素。

样式

<style type="text/css">
h1 {color:red;}
</style>
<h1>A</h1>

使用<table>元素的网页布局

<table width="600" border="0">
<tr>
	<td colspan="2" style="background-color:red;text-align:center;">header</td>
</tr>

<tr>
	<td style="background-color:blue;vertical-align:top;">menu</td>
	<td style="background-color:grey;height:300px;width:500px;vertical-align:top;">body</td>
</tr>

<tr>
	<td colspan="2" style="background-color:red;text-align:center;">footer</td>
</tr>
</table>

使用<div>元素的网页布局

<div id="container" style="width:600px">

<div id="header" style="background-color:red;text-align:center;">header</div>

<div id="menu" style="background-color:blue;height:300px;width:100px;float:left;">menu</div>

<div id="content" style="background-color:grey;height:300px;width:500px;float:left;">body</div>

<div id="footer" style="background-color:red;clear:both;text-align:center;">footer</div>

</div>

表单

用于收集不同类型的用户输入,包含表单元素。

表单元素是允许用户在表单中输入内容,如:文本域(textarea)、下拉列表、单选按钮(radio-buttons)、复选框(checkboxes)等等。

<form name="input" action="" method="get">
username: <input type="text" name="user"><br>
password: <input type="password" name="password"><br>
<input type="submit" value="submit">
</form>

框架

使用框架可在同一个浏览器窗口中显示多个页面。

<iframe style="background-color:grey;" name="iframe" width="400" height="200" frameborder="0"></iframe></br>
<a href="https://lcfu1.github.io/Note/" target="iframe">点击</a>

注:

  • frameborder 属性表示是否显示边框。

字符实体

是html中的预留字符,对大小写敏感 。

&nbsp;	指空格
&quot;	引号
...

更多open in new window

URL

统一资源定位器(Uniform Resource Locators)

scheme://host.domain:port/path/filename

注:

  • scheme:定义因特网服务的类型。最常见的类型是http(超文本传输协议)、https(安全超文本传输协议)、ftp(文件传输协议)。
  • host:定义域主机(http的默认主机是www)。
  • domain:定义因特网域名,比如 runoob.comopen in new window
  • :port:定义主机上的端口号(http 的默认端口号是 80)。
  • path:定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
  • filename:定义文档/资源的名称。

ASCII字符集

参考open in new window

URL编码

参考open in new window

公众号:AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh

C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh

方法一:QQopen in new window

方法二:微信:Jiabcdefh