HTML常用总结

于 2020-02-10 15:09:02 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43405938/article/details/104249038
版权

目录

综述

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML链接

target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

在新窗口打开文档：

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

其中：

rel="noopener noreferrer"

意思是不会打开其他的网站，因为恶意病毒可能会修改你的浏览器空白页地址。

跳出框架:

<a href="//www.runoob.com/" target="_top">点击这里!</a>

注意: 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。

id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

HTML头部

title 标签

HTML元素不仅可以显示文本，也可以在左侧显示logo等图片。

显示时，要将标签放入里。

举例：

<!doctype HTML>
<html>
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
<body>
……
……
……
</body>
</html>

meta 标签

为搜索引擎定义关键词:

<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">

head 标签和 header 标签的不同

head 标签用于定义文档头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

如：

<html>
  <head>
     <title>文档标题</title>
  </head>
</html>

header 标签用于定义文档的页眉（介绍信息）。

如：

<html>
  <body>
    <header>
        <p>段落</p>
        <h1>一级标题</h1>
    </header>
  </body>
</html>

HTML CSS

Look! Styles and colors

Manipulate Text
Colors Boxes
and more...

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 部分通过 

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML图像

一个来自菜鸟教程的图像:

runoob.com

Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

Big Boat

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML表格

每个表格从一个 table 标签开始。 每个表格行从 tr 标签开始。 每个表格的数据从 td 标签开始。

一列:
100
一行三列:
100200300
两行三列:
100200300
400500600

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

实例

Header 1Header 2
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2
水平标题:
NameTelephoneTelephone
Bill Gates555 77 854555 77 855
垂直标题:
First Name:Bill Gates
Telephone:555 77 854
Telephone:555 77 855
单元格跨两列:
NameTelephone
Bill Gates555 77 854555 77 855
单元格跨两行:
First Name:Bill Gates
Telephone:555 77 854
555 77 855
表格内的标签：

这是一个段落

这是另一个段落

这个单元格包含一个表格:
AB
CD
这个单元格包含一个列表
  • apples
  • bananas
  • pineapples
HELLO
没有单元格边距:
FirstRow
SecondRow
有单元格边距:
FirstRow
SecondRow
没有单元格间距:
FirstRow
SecondRow
单元格间距="0":
FirstRow
SecondRow
单元格间距="10":
FirstRow
SecondRow

table 标签常用属性：

border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="5"   单元格之间的间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式    (参数有  left、center、right)
bgcolor="#fff"   表格整体的背景色

tr 标签的常用属性:

bgcolor="#fff"    行的颜色
align="right"    行内文字的水平对齐方式    (参数有left、center、right)
valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)

td、th 标签的常用属性:

width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff"  单元格的背景色
align="right"  单元格文字的水平对齐方式    (参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top)

引号里的数字和颜色代码均可以更改。

HTML列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

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

浏览器显示如下：

  • Coffee
  • Milk

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

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

浏览器中显示如下：

  1. Coffee
  2. Milk
嵌套列表：
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk
一个自定义列表：
Coffee
- black hot drink
Milk
- white cold drink

HTML区块

HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML div 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML span 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 布局 - 使用 div 元素

<div>元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 <div> 元素来创建多列布局：

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

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

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>
 
</body>
</html>
内容在这里

HTML 表单

表单是一个包含表单元素的区域。

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

表单使用表单标签 <form> 来设置。

文本域

通过<input type=“text”>标签来设定

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

密码字段

通过标签<input type=“password”> 来定义

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

单选框

<input type=“radio”> 标签定义了表单单选框选项（当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中）

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

复选框

<input type=“checkbox”> 定义了复选框

<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>
I have a bike
I have a car

提交按钮

<input type=“submit”> 定义了提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

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

带边框的表单

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
Personal information: Name:
E-mail:
Date of birth:

HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="http://www.runoob.com" width="300" height="400" frameborder="0">
 <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

您的浏览器不支持 iframe 标签。

HTML 颜色

RGB

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

Web安全色

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

RGBA

相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明。

通常我们为了省略一个 0:

<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.5)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.75)">
通过 rbg 值设置背景颜色
</p>

HTML颜色名

141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。

提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。

HTML脚本

JavaScript 使 HTML 页面具有更强的动态和交互性

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 &lt;noscript&gt; 元素中定义的内容（文本）来替代。</p>

抱歉，你的浏览器不支持 JavaScript!

不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h1>我的第一个 JavaScript </h1>

<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">点我</button>

</body>
</html>

HTML 字符实体

显示结果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
’撇号&apos; (IE不支持)&#39;
￠分&cent;&#162;
£镑&pound;&#163;
¥人民币/日元&yen;&#165;
€欧元&euro;&#8364;
§小节&sect;&#167;
©版权&copy;&#169;
®注册商标&reg;&#174;
™商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

HTML 实体参考手册。

HTML URL

语法规则:

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

说明:

  • scheme - 定义因特网服务的类型。最常见的类型是 http
  • host - 定义域主机（http 的默认主机是 www）
  • domain - 定义因特网域名，比如 runoob.com
  • :port - 定义主机上的端口号（http 的默认端口号是 80）
  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  • filename - 定义文档/资源的名称

常见的 URL Scheme

以下是一些URL scheme：

Scheme访问用于…
http超文本传输协议以 http:// 开头的普通网页。不加密。
https安全超文本传输协议安全网页，加密所有信息交换。
ftp文件传输协议用于将文件下载或上传至网站。
file您计算机上的文件。

URL 字符编码

URL 只能使用 ASCII 字符集.

来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

HTML 速查列表

HTML 基本文档

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

基本标签（Basic Tags）

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

文本格式化（Formatting）

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

链接（Links）

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

图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

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

<div>文档中的块级元素</div> 

<span>文档中的内联元素</span>

无序列表

<ul>    
    <li>项目</li>    
    <li>项目</li> 
</ul>

有序列表

<ol>    
    <li>第一项</li>    
    <li>第二项</li> 
</ol>

定义列表

<dl>  
    <dt>项目 1</dt>    
    <dd>描述项目 1</dd>  
    <dt>项目 2</dt>    
    <dd>描述项目 2</dd> 
</dl>

表格（Tables）

<table border="1">   
    <tr>     
        <th>表格标题</th>     
        <th>表格标题</th>   
    </tr>   
    <tr>     
        <td>表格数据</td>     
        <td>表格数据</td>   
    </tr> 
</table>

框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

表单（Forms）

<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>苹果</option> 
        <option selected="selected">香蕉</option> 
        <option>樱桃</option> 
    </select> 
    <textarea name="comment" rows="60" cols="20"></textarea>  
</form>

实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

HTML 参考手册

参考：菜鸟教程

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值