跳至主要內容

HTML速查列表

AI悦创原创HTMLHTML大约 6 分钟...约 1902 字

速查列表

目录

标题

<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 属性：图像映射。
  • width 和 height 属性：设置图片的宽高。
  • <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

上次编辑于:
贡献者: AndersonHJB,AI悦创
你认为这篇文章怎么样？
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
0  字
评论
  • 按正序
  • 按倒序
  • 按热度