HTML知识点概述

最新推荐文章于 2022-03-14 20:33:36 发布
最新推荐文章于 2022-03-14 20:33:36 发布
阅读量305 收藏
点赞数
分类专栏： HTML
原文链接：https://www.runoob.com/html/html-tutorial.html
版权

目录

 

框架：

<标签>内容

HTML 元素&语法

HTML 属性

HTML 标题

HTML 段落

HTML 文本格式化

HTML 链接

HTML头部

HTML 样式- CSS

HTML 图像

 HTML 表格

HTML 列表

 HTML 区块

HTML 表单和输入

HTML 框架

HTML 颜色

HTML 脚本

HTML 字符实体

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

框架：

<标签>内容</标签>

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  1. HTML 标题（Heading）是通过<h1> - <h6> 字体从大到小标签来定义的
  • <p> 元素定义一个段落

 

  • <a href="http://www.runoob.com">这是一个链接</a>
  • <img src="/images/logo.png" width="258" height="39" />

 

HTML 元素&语法

  • <br> 没有结束标签（<br> 标签定义换行）
  1. 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

 

HTML 属性

  • 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

  • class为html元素定义一个或多个类名（classname）(类名从样式文件引入)
    id定义元素的唯一id
    style规定元素的行内样式（inline style）
    title描述了元素的额外信息 (作为工具条使用)

 

HTML 标题

  • 搜索引擎使用标题为您的网页的结构和内容编制索引，所以标签只用于标题，而不是为了生成粗体或者大号的文本。
  • <hr> 标签在 HTML 页面中创建水平线

 

HTML 段落

  • 浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
  • 拆行：在不产生一个新段落的情况下进行换行（新行），使用 <br> 标签
  • 输出：对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

    当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML 文本格式化

 

<b>定义粗体文本
<strong>定义加重语气
  
<i>定义斜体字
<em>定义着重文字
<small>定义小号字
  
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

 

  • HTML "计算机输出" 标签

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

 some examples:

1.

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

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

</body>
</html>

 

2.

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

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

 

3.

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

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

 

4.

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

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>
</html>

 

5.

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

<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  

</body>
</html>

6.

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

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

</body>
</html>

7.

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

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body>
</html>

 

 

HTML 链接

  • <a href="url">链接文本，图片或其他HTML元素</a>
  • target属性 
    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

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

<p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>

</body>
</html>

  •  id属性

some examples:

1.

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

<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

 

2.

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

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 8</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 9</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 10</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 11</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 12</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 13</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 14</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 15</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 16</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 17</h2>
<p>这边显示该章节的内容……</p>

</body>
</html>

3.

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

<p>跳出框架?</p> 
<a href="//www.runoob.com/" target="_top">点击这里!</a> 

</body>
</html>

4.

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

<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>

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

</body>
</html>

HTML头部

  • 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>
    <head>定义了文档的信息
    <title>定义了文档的标题
    <base>定义了页面链接标签的默认链接地址
    <link>定义了一个文档和外部资源之间的关系
    <meta>定义了HTML文档中的元数据
    <script>定义了客户端的脚本文件
    <style>定义了HTML文档的样式文件
  • <title> 元素
  1. <title> 标签定义了不同文档的标题。
  2. <title> 在 HTML/XHTML 文档中是必须的。
  3. <title> 元素:
  4. 定义了浏览器工具栏的标题
  5. 当网页添加到收藏夹时，显示在收藏夹中的标题
  6. 显示在搜索引擎结果页面的标题
  •  <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: 
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<base href="//www.runoob.com/images/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

     

  • <meta> 元素

    meta标签描述了一些基本的元数据。

    <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

    META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

    元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

    <meta> 一般放置于 <head> 区域

    <meta> 标签- 使用实例

  1. 为搜索引擎定义关键词:

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

     

  2.  为网页定义描述内容:

    <meta name="description" content="免费 Web & 编程 教程">

     

  3.  定义网页作者:

    <meta name="author" content="Runoob">

     

  4.  每30秒钟刷新当前页面:

    <meta http-equiv="refresh" content="30">

     

HTML 样式- CSS

  • CSS 可以通过以下方式添加到HTML中:

                 1.内联样式- 在HTML元素中使用"style" 属性

                             使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式：

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

                            使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

                           背景色属性（background-color）定义一个元素的背景颜色：

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

 

              2.内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS

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

             3.外部引用 - 使用外部 CSS 文件

HTML 图像

  • <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
  • alt 属性用来为图像定义一串预备的可替换的文本，当浏览器无法载入图像时，浏览器将显示这个替代性的文本代表失去的信息。
  • 图像标签：
    <img>定义图像
    <map>定义图像地图
    <area>定义图像地图中的可点击区域

 HTML 表格

  • 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
  • 表格的表头使用 <th> 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本
  • <table>定义表格
    <th>定义表格的表头
    <tr>定义表格的行
    <td>定义表格单元
    <caption>定义表格标题
    <colgroup>定义表格列的组
    <col>定义用于表格列的属性
    <thead>定义表格的页眉
    <tbody>定义表格的主体
    <tfoot>定义表格的页脚

 some examples:

1.本例演示如何显示表格表头

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

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

2. 本例演示一个带标题 (caption) 的表格

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

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

3. 本例演示如何定义跨行或跨列的表格单元格

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

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

4. 本例演示如何显示在不同的元素内显示元素

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

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

5. 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白

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

<h4>没有单元格边距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

6. 本例演示如何使用 Cell spacing 增加单元格之间的距离

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

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

HTML 列表

  • 标签列表
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述

 some examples:

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>菜鸟教程(runoob.com)</title> 
	</head>
	<body>
		<p>罗马数字列表</p>
		<ol type="I">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ol>

		<h4>一个自定义列表：</h4>
		<dl>
			<dt>Coffee</dt>
			<dd>- black hot drink</dd>
			<dt>Milk</dt>
			<dd>- white cold drink</dd>
		</dl>

		<ul style="list-style-type:disc">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ul>
	</body>
</html>

 

 HTML 区块

  • 区块元素：<h1>, <p>, <ul>, <table>, <div>块级元素在浏览器显示时，通常会以新行来开始（和结束）

  • 内联元素：<b>, <td>, <a>, <img>, <span>内联元素在显示时通常不会以新行开始

  • 分组标签：

    <div>定义了文档的区域，块级 (block-level)，与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性
    <span>用来组合文档中的行内元素， 内联元素(inline)，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 表单和输入

  • 标签
    <form>定义供用户输入的表单
    <input>定义输入域
    <textarea>定义文本域 (一个多行的输入控件)
    <label>定义了 <input> 元素的标签，一般为输入标题
    <fieldset>定义了一组相关的表单元素，并使用外框包含起来
    <legend>定义了 <fieldset> 元素的标题
    <select>定义了下拉选项列表
    <optgroup>定义选项组
    <option>定义下拉列表中的选项
    <button>定义一个点击按钮
    <datalist>指定一个预先定义的输入控件选项列表
    <keygen>定义了表单的密钥对生成器字段
    <output>定义一个计算结果

 1.文本域

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

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

<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>

</body>
</html>

2.密码字段

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

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>

</body>
</html>

3.单选按钮

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

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

<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>

</body>
</html>

4. 复选框

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

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

</body>
</html>

 5.简单的下拉列表

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

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

6. 预选下拉列表

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

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

 7.文本域（Textarea）

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

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>

 8.创建按钮

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

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

9.带边框的表单

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

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

</body>
</html>

10.带有输入框和确认框的表单

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

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

11.带有复选框/单选按钮的表单

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

<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

HTML 框架

  • <iframe>：定义一个内联的iframe
  • 使用iframe来显示目标链接页面
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<iframe src="demo_iframe.htm" name="iframe_a" width="400" height="400" frameborder="0" ></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

</body>
</html>

HTML 颜色

  • RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。
<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 脚本

  • <scipt>：定义了客户端脚本，既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
  • <noscript>：定义了不支持脚本浏览器输出的文本，可包含普通 HTML 页面的 body 元素中能够找到的所有元素
<!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>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>

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 统一资源定位器(Uniform Resource Locators)

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

    说明

  1. scheme - 定义因特网服务的类型。最常见的类型是 http
  2. host - 定义域主机（http 的默认主机是 www）
  3. domain - 定义因特网域名，比如 runoob.com
  4. :port - 定义主机上的端口号（http 的默认端口号是 80）
  5. path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  6. filename - 定义文档/资源的名称
  • 常见的 URL Scheme
  • URL只能使用ASCII字符集，URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符
  • URL 不能包含空格。URL 编码通常使用 + 来替换空格
Scheme访问用于...
http超文本传输协议以 http:// 开头的普通网页。不加密。
https安全超文本传输协议安全网页，加密所有信息交换。
ftp文件传输协议用于将文件下载或上传至网站。
file 您计算机上的文件。
莫泽Morze
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
入门HTML知识点概述
zhang1409399037的博客
09-11 271
                            入门HTML知识点概述 一、插入了一个表格的网页，代码如下：解释如下： &lt;html&gt; &lt;head&gt; &lt;title&gt;我是网页的标题&lt;/title&gt; &lt;/head&gt; &lt;body text="blue" background="20.jpg"&amp
HTML5知识点总结汇总
最新发布
01-02
内容概述：文章包含了最基础的HTML5的知识点。 适用人群：适用于初级选手，可用作复习资料。 能学到什么：最开始的入门学习以及初识HTML。 阅读建议：先看视频在看本文章。
【基础html5 基础知识点】(全)
热门推荐
kongjiea笔记
08-16 2万+
新增的结构标签 section元素  表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中……;HTML4中 ……。article元素  表示页面中一块与上下文不相关的独立内容。比如一篇文章。aside元素  表示article元素内容之外的、与article元素内容相关的辅助信息。header元素
【html5基础】HTML5 知识点
kongjiea笔记
08-16 1806
HTML5 知识点   (1)语义化标记       ,,,,,,,,,,   (2)表单增强       ①新的INPUT类型: color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, url     ②新属性:
Html及CSS知识点概括
乐我所乐的博客
11-17 227
html4.0 web 标准 结构（html）,行为（js）,表现（css） html概念 超文本标记语言 h5文档声明及其作用 <!doctype html> 告知浏览器使用哪种html或xhtml规范 html元素 块元素 h1-h6,p,div,ul,ol,li,dl,dt,dd,form,table,tr,td,th,hr,fieldset 内联元素 ...
html5知识点（一）
thaiilk的博客
05-21 294
http://www.w3school.com.cn/html5/att_input_required.asp 1.HTML 5 <input> required 定义和用法 required 属性规定必需在提交之前填写输入字段。 如果使用该属性，则字段是必填（或必选）的。 注释：required 属性适用于以下 <input> 类型：text, search...
计算机网络知识点全面总结
03-25
计算机网络是信息技术的基础，它将分布在世界各地的计算机设备通过通信...以上是对计算机网络基础知识点的全面总结，涵盖了从网络概述到各层协议的详细讲解，是理解网络工作原理和进行网络设计、优化的重要参考资料。
PHP基础知识点汇总（代码+知识点）
08-21
本文将基于"PHP基础知识点...以上只是PHP基础部分的简要概述，实际学习中还需要结合具体示例和代码实践，理解并熟练运用这些知识点。提供的xmind框图和附带代码将有助于同步学习，通过运行和调试，加深对PHP的理解。
HTML知识点总结（二）共2页.pdf.zip
10-30
在本“HTML知识点总结（二）共2页.pdf.zip”中，我们预计将深入探讨HTML的一些核心概念和特性，尽管压缩包内的“赚钱项目”文件名称可能与主题不直接相关，但我们将专注于HTML的相关知识点。 1. **HTML元素与结构**...
HTML知识点总结（一）共2页.pdf.zip
10-30
这个压缩包文件"HTML知识点总结（一）共2页.pdf.zip"显然包含了对HTML基础知识的精炼概述，可能是针对初学者的一个快速教程。虽然具体的文件内容无法在此直接展示，但我们可以根据常见的HTML学习路径来深入探讨这一...
html5和CSS知识点分享
04-21
CSS3和html5的知识点总结，适合入门的朋友预览。是学习CSS3之前，预习的好知识点。
HTML5知识点
qq_18974353的博客
06-10 147
HTML5中应用缓存是什么？ cache manifest 用户的离线浏览，也就是说网络连接不可用时，离线状态下也能看到web应用。（除了 Internet Explorer） 应用缓存可以帮你指定哪些文件需要缓存哪些不需要 1）CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 2）NETWORK（网络） - 在此标题下列出的文件需要与服务器的连接，且不会被缓存 3...
html5知识点
yookooi
03-14 1058
一、html5是什么 HTML5 是最新的 HTML 标准。 HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 HTML5 拥有新的语义、图形以及多媒体元素。 HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。 二、新增语义化标签 html5中新增的语义化标签可以分为两大类：块元素标签和内联元素标签。 1.块元素标签 （1）<header&gt
HTML/HTML5知识点
那朵花的博客
01-07 185
01.浏览器内核 02.Web标准的构成 03.html基本结构含义 04.锚点链接：快速定位到页面中的某个位置 05.常用特殊字符：空格/大于号/小于号 06.自定义列表的应用场景 07.lable标签的for属性
关于HTML5的一些知识点。
QWEQAZSDCX的博客
01-15 196
什么是 HTML5？ 1.HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 2.HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 3.HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 HTML5有哪些标签？ &lt;article&gt; &lt;header&gt; &lt;footer...
HTML5知识点1
王文萱的博客
12-03 195
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;demo5&lt;/title&gt; &lt;!--链接美化CSS--&gt;  &lt;!--a 链接未被访问  a:visited 链接滑被访问  a:hover 划过链接   tex
HTML5的一些知识点
RenOuQ的博客
08-19 204
Html5 H5新增类名操作、自定义属性操作 html5 新增一个非常简单的操作类样式的api:classList; html5新增一个操作属性样式的api:dataset; classList：四个操作样式类的方法, 很简单 添加类: dom.classList.add 移除类: dom.classList.remove 判断类: dom.classList.contains 切换类: dom.classList.toggle dataset：自定义属性添加、修改、获取 存的时候, 在属性名前面加上 da
HTML 5的一些知识点
02-15 102
frame and iframe标签在HTML 5中，由于对网页支持的负面影响，没有得到支持。
HTML5知识点-1
vision_seven7的博客
05-16 275
这里写目录标题页面结构H5新增的结构标签自定义属性新增的表单元素type属性值本地存储临时存储 页面结构 网页结构： 头部 logo 搜索框 导航栏 主体部分 商品展示 左右结构 左中右结构 尾部 赞助商信息 友情链接 版权信息 合作商 全部使用div布局的缺点 不利于SEO（搜索引擎优化） 布局没有一个统一的标准 都是直接使用类名来控制的（语义不明确） H5新增的结构标签 头部：header 导航栏 ：nav 主体部分 ：main 小模块
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值