03 html基础详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_53297256/article/details/128554491

02html基础详解

文章目录

02html基础详解

1、HTML编辑器

html编辑器推荐：

VS Code：https://code.visualstudio.com/
在线编辑器：https://c.runoob.com/front-end/61/

Notepad3：Download Notepad3 - Notepad replacement with syntax highlighting.
SublimeText3汉化版：http://www.php.cn/xiazai/gongju/93

我用的是Notepad3，它是一款轻便快捷的基于 Scintilla 的文本编辑器，具有语法高亮、代码折叠、括号匹配、自动缩进、编码转换、换行格式转换、多次撤销或重做、书签、基于正则表达式的查找和替换等实用功能。它占用的内存很小，但功能强大，足以处理大多数编程工作。

请添加图片描述

2、标签

由于html文档主要由标签组成，数不胜数，这里先列举一些常用标签。

html常用标签

`<!DOCTYPE>`	定义文档类型。
`<html>`	定义一个 html文档
`<title>`	为文档定义一个标题
`<body>`	定义文档的主体
`<h1>-<h6>`	定义 html标题
`<p>`	定义一个段落
`<br>`	定义简单的折行。
`<hr>`	定义水平线。
`<!--xxx-->`	定义一个注释xxx

3、元素

HTML元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。
- <p>这是一个段落。</p>
- <br>换行。
某些HTML元素具有空内容(empty content)，称为空元素，以开始标签终止。通过在开始标签中添加斜杠（如<br />, <input type="text" id="qwq"/>），在开始标签中进行关闭。HTML中，空标签可以没有结束标签；在XHTML中，空标签必须被正确关闭。

大多数HTML元素可拥有属性。
大多数HTML元素可嵌套。HTML文档由相互嵌套的 HTML元素构成。
HTML标签大小写不敏感，但应使用小写。
一些元素的属性（布尔属性），取值只有取或不取。如：<option>的selected属性，会被记为：当selected="selected"时，执行...，事实上只需在定义元素时写出该属性selected该属性存在（不需设定值），或为该属性定义任意值，都会执行对应操作（但注意，在XHTML中不允许使用这样的属性简写）。在JS中将其设为空（如selected=""）会取消该选项。使用ture/false也可表示开启/关闭该选项。
许多属性会以像素或百分比作为单位，默认会以像素（只需填写数字，可省略px）为单位。属性值必须有引号。

4、属性

属性是html元素提供的附加信息。由于每个标签都有不同的属性，本节内容先列举一些常用属性，其他常用属性会在介绍该属性常出现的标签时做介绍。

属性一般描述于开始标签。
属性总是以名称/值对的形式出现，比如：name=“value”。

属性实例：

html链接由<a>标签定义。链接的地址在 href 属性中指定：
```
<a href="https://blog.youkuaiyun.com/m0_53297256">这是我的博客链接</a>
```
属性和属性值对大小写不敏感。不过，新版本的 (X)html要求使用小写属性。

常用属性

value
title
title属性定义关于元素的额外信息。其定义的文本，会在鼠标移动到元素内容上时显示。许多元素都有title属性。
- abbr,acronym元素必须含title属性，两个元素分别用于表示缩略语、首字母缩写，title用于表示完整的表达。
align
设置对齐。取值为left, right, center。
不推荐使用，应使用CSS的float属性，如：style="float:right;"（但这似乎无法居中）。
tagName
tagName定义了元素的标签类型。如：<tr>元素的tagName为"TR"。
自定义属性
标签在声明时，可以绑定任意它不拥有的属性。但该属性不能直接通过elem.attr获取（会返回undefined），需使用elem.getAttribute("attr")获取（DOM），或$(this).attr("attr")（jQuery）。例：
div标签没有name, value属性，但可自定义绑定该属性：<div class="A" value="123"></div>，并通过document.getElementsByClassName("A")[0].getAttribute("value")或$(".A").attr("value")获取。
属性名可任取。
注意getElementsByName()和getElementsByClassName()返回的是一个list，getElementsById()返回的是拥有指定id的第一个对象。

5、标题

HTML段落标题通过<h1> - <h6> 标签来定义。例如：

源代码：

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

显示效果：

这是1级标题

这是2级标题

这是3级标题

这是4级标题

这是5级标题

这是6级标题

标题相关标签：水平线、注释。

水平线

<hr>标签在 html页面中创建水平线。hr 元素可用于分隔内容。

注释

可以将注释插入 html代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

<!-- 这是一个注释 -->

6、段落

html段落是通过标签 <p> 来定义的。例如：

源代码：

<p>这是一个段落</p>
<p>这是另一个段落</p>

显示效果：

这是一个段落

这是另一个段落

折行

为了避免忘掉写结束标签的情况，可以在段落中插入<br>标签换行。

7、格式化标签

html使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。这些HTML标签被称为格式化标签。

`<b>`	这个文本是加粗的
`<strong>`	这个文本是加粗的
`<big>`	这个文本字体放大
`<em>`	这个文本是斜体的
`<i>`	这个文本是斜体的
`<small>`	这个文本是缩小的
`<sub>`	这个文本包含_下标
`<sup>`	这个文本包含^上标
`<pre>`	被包围在pre标签中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
`<code>`	`定义计算机输出。用于表示计算机源代码或者其他机器可以阅读的文本内容。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。`
`<kbd>`	`定义键盘文本。以浏览器的默认monospace字体显示。该标签已废弃，不推荐使用，但是可以通过CSS实现丰富的效果。`
`<tt>`	`定义打字机文本`
`<samp>`	`定义样本文本`
`<var>`	`定义变量。`
`<address>`	定义地址文本
`<abbr>`	表示一个缩写词或者首字母缩略词。
`<acronym>`	标签允许明确地声明一个字符序列，它们构成一个单词的首字母缩写或简略语。标签已从 HTML5 中移除，不应再被使用，Web 开发者应使用标签。
`<bdo>`	指定文本方向。
`<q>`	定义短的引用语,对内容文字自动加引号
`<del>`	~~删除效果~~
`<ins>`	下划线效果
`<u>`	下划线效果
`<cite>`	定义作品的标题
`<blockquote>`	定义一个摘自另一个源的块引用
`<dfn>`	定义项目

<pre>

<pre> 标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签（例如标题、<p>和<address>）绝不能包含在 <pre> 所定义的块里。

<abbr>

在某些浏览器中，当您把鼠标移至缩略词语上时，title属性可用于展示表达的完整版本。例如：

源代码：

<abbr title="etcetera">etc.</abbr>

显示效果：

etc.

属性dir

dir

规定元素内的文本方向。dir = "ltr"从左到右；dir = "rtl"从右到左。例如：

源码：

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

显示效果：

该段落文字从右到左显示。

8、链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
html链接是通过标签 <a> 来定义的。例如：

源代码：
```
<a href="https://blog.youkuaiyun.com/m0_53297256">这是我的博客链接</a>
```
显示效果：

这是我的博客链接

属性target

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

target=“_blank”, 链接将在新窗口打开
target=“_top”，在整个窗口中打开。
target=“_self”，在同一框架中打开。（默认）
target=“_parent”，在副框架中打开。

属性id

id 属性可用于创建一个HTML文档书签。书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

可以通过设置书签的名字快速找到对应的标签。

9、头部

标签head

<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: ,

标签title

<title>标签定义了不同文档的标题。

<title>在 HTML/XHTML文档中是必需的。

标签base

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。

<head>
<base href="https://blog.youkuaiyun.com/m0_53297256" target="_blank">
</head>

标签link

<link> 标签定义了文档与外部资源之间的关系。<link>标签通常用于链接到样式表。

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

标签style

<style> 标签定义了HTML文档的样式文件引用地址。在

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

标签meta

<meta>标签描述了一些基本的元数据。<meta>标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

meta示例：

为搜索引擎定义关键词:

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

为网页定义描述内容:

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

定义网页作者:

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

每30秒钟刷新当前页面:

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

script元素

<script>标签用于加载脚本文件，如： JavaScript。

10、CSS

CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式。

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

内联样式-在HTML元素中使用"style" 属性。
内部样式表-在HTML文档头部<head>区域使用<style>元素来包含CSS。
外部引用-使用外部CSS文件。

最好的方式是通过外部引用CSS文件。

背景色属性background-color

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

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

字体相关属性

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

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

属性text-align

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

内部样式表

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

外部样式表

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

11、图像

标签image

html图像是通过标签 <img> 来定义的。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

源属性src

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。URL 指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

属性alt

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

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

属性height和width

height高度）与width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素。
如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

属性float

float属性使图片浮动至元素的左边或右边。

float=“left”——浮动在元素左边。
float=“right”——浮动在元素右边。

示例：

源代码：

<!DOCTYPE html>
<html>
  
  <title>Gbosh的博客</title>
  
  <body>
     <img src="https://i-blog.csdnimg.cn/blog_migrate/53fd54156ffef77c5f1cb738af09058e.png"/ alt="Gbosh的博客" height="100" width="50" style="float:left">左边是我的博客截图。
  </body>
  
</html>

显示效果：

Gbosh的博客左边是我的博客截图。

属性usemap

可以理解为通过该标签，获取映射的“函数”。该标签的值取自<map>标签的id属性或name属性。而<map>标签内容包含了映射关系。

<img>中的usemap属性可引用<map>中的id或name属性（取决于浏览器），所以我们应同时向<map>添加id和name属性。

属性title(image)

鼠标悬停时显示的内容。

属性border

设置图像边框的宽度。

12、标签map

定义图像地图。

13、标签area

定义图像地图中的可点击区域。

area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。

属性coords

规定区域的 x 和 y 坐标。

coords属性与shape属性配合使用，来规定区域的尺寸、形状和位置。

x1,y1,x2,y2	如果 shape 属性设置为 “rect”，则该值规定矩形左上角和右下角的坐标。
x,y,radius	如果 shape 属性设置为 “circ”，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,…,xn,yn	如果 shape 属性设置为 “poly”，则该值规定多边形各顶点的值。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

属性shape

规定区域的形状。

rect——矩形
circle——圆形
poly——多边形

属性name（map）

图像映射的名称。

示例：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

14、表格

请添加图片描述

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格单元
caption	定义表格标题
colgroup	定义表格列的组
col	定义用于表格列的属性
thead	定义表格的页眉
tbody	定义表格的主体
tfoot	定义表格的页脚
border	边框宽度
cellspacing	表格间距
cellpadding	表格填充

示例：

源代码:

<head>
  <style>
  thead {color:green;}
	tbody {color:blue;}
	tfoot {color:red;}
	</style>
</head>
  <table border="1" cellspacing="5px" cellpadding="10px">
  	<caption>表格标题</caption>
  <tr><th colspan="3">该行表头演示列合并</th></tr>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>页脚第1列</td>
      <td>页脚第2列</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>主体1行1列</td>
      <td>主体1行2列</td>
      <td rowspan="3">该区域显示行合并3行效果，不包括页脚</td>
    </tr>
    <tr>
      <td>主体2行1列</td>
      <td>主体2行2列</td>
    </tr>
  </tbody>
</table>

显示效果：

表格标题
该行表头演示列合并
表头1 表头2 表头3
页脚第1列页脚第2列
主体1行1列主体1行2列该区域显示行合并3行效果，不包括页脚。
主体2行1列主体2行2列

表格标题
该行表头演示列合并
页脚第1列	页脚第2列
主体1行1列	主体1行2列	该区域显示行合并3行效果，不包括页脚。
主体2行1列	主体2行2列

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如果不定义边框属性，表格将不显示边框。

15、列表

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

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。

示例：

源代码：

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol> 

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

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

显示效果：

编号列表：

Apples
Bananas
Lemons
Oranges

大写字母列表：

Apples
Bananas
Lemons
Oranges

小写字母列表：

Apples
Bananas
Lemons
Oranges

圆点列表：

Apples
Bananas
Lemons
Oranges

圆圈列表：

Apples
Bananas
Lemons
Oranges

正方形列表：

Apples
Bananas
Lemons
Oranges

嵌套列表：

Coffee
Tea
Black tea
Green tea
China
Africa

Milk

一个自定义列表：

Coffee
- black hot drink
Milk
- white cold drink

16、区块

标签div

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

它属于块级元素，浏览器会在其前后显示折行。
它可用于组合其他 HTML 元素的容器。
如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

举例：

源代码：

<p>这是一些文本。</p>

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

显示效果：

这是一些文本。

这是一个在 div 元素中的标题。

这是一个在 div 元素中的文本。

标签span

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

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

示例：

源代码：

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

显示效果：

我的母亲有蓝色的眼睛，我的父亲有碧绿色的眼睛。

17、布局

大多数网站可以使用<div>或者<table>元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

使用div:

源代码：

<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;">
版权 © https://blog.youkuaiyun.com/m0_53297256</div>

</div>

显示效果：

主要的网页标题

菜单
HTML
CSS
JavaScript

内容在这里

版权 © https://blog.youkuaiyun.com/m0_53297256

使用table:

源代码：

<table width="500" border="0">
<tr>
<td colspan="1" style="background-color:red">
<h1>主要的网页标题</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:center;">
内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © https://blog.youkuaiyun.com/m0_53297256</td>
</tr>
</table>

显示效果：

主要的网页标题

菜单
HTML
CSS
JavaScript 内容在这里
版权 © https://blog.youkuaiyun.com/m0_53297256

18、表单

表单用于收集用户的输入信息。表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

标签	描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
label	定义了input元素的标签，一般为输入标题
fieldset	定义了一组相关的表单元素，并使用外框包含起来
legend	定义了fieldset元素的标题
select	定义了下拉选项列表
optgroup	定义选项组
option	定义下拉列表中的选项
button	定义一个点击按钮
datalist	指定一个预先定义的输入控件选项列表
keygen	用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。效果是保存输入框中输入过的信息，再次点击该输入框会显示上一次输入过的信息。
output	定义一个计算结果

请添加图片描述

示例：

属性	描述
action	规定当提交表单时，向何处发送表单数据。值为URL
method	规定用于发送 form-data 的 HTTP 方法。
for	规定 label 与哪个表单元素绑定。
reset	重置
placeholder	输入框灰色字体输入提示
radio	单选类型（name值相同为一组）
checkbook	多选框

示例：

源代码：

<form action="http://112.74.72.107:3333/try" method="post" target="_blank">
  <label for="name"></label>
	<fieldset>
		<legend>账户:</legend>
		Username: <input type="text" name="Username" value="" placeholder="Username" id="name"><br>
		password: <input type="text" name="password" value="" placeholder="password" id="name"><br>
	</fieldset>
<button type="button" onclick="alert('你好，世界!')">点我弹出信息提示!</button>
<br>
<textarea rows="10" cols="30" placeholder="在这里输入..." id="name">
</textarea><br>
班级<select>
 <option value="c301">三年级1班</option>
 <option value="c302">三年级2班</option>
 <option value="c303">三年级3班</option>
 <option value="c304">三年级4班</option>
</select><br>
 <label for="male">Male</label>
 <input type="radio" name="sex" id="male" value="male"><br>
 <label for="female">Female</label>
 <input type="radio" name="sex" id="female" value="female"><br>
  <button type="submit">提交</button><button type="reset">重置</button><br>
<input list="browsers" name="browser">
	<datalist id="browsers">
	  <option value="第一个输入选项">
	  <option value="第二个输入选项">
	  <option value="第三个输入选项">
	  <option value="第四个输入选项">
	  <option value="第五个输入选项">
	</datalist>
<input type="submit" value="input标签type值为'submit'，value默认值'提交'"><br>
用户名: <input type="text" name="usr_name" id="name">
<keygen name="security">
  <button type="submit">提交</button>
<p>点击"提交"按钮，表单数据将被发送到http://112.74.72.107:3333/try”。</p>
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

显示结果：

（功能标签把上述源码放在html中测试，这里仅展示效果。）

账户: Username:
password:
点我弹出信息提示!

班级三年级1班三年级2班三年级3班三年级4班
Male
Female
提交重置

用户名: 提交
点击"提交"按钮，表单数据将被发送到http://112.74.72.107:3333/try”。
0 100 + =

19、框架

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

标签iframe

属性height

属性width

属性src

属性frameborder

设置属性值为 “0” 移除iframe的边框。

示例：

源代码：

<iframe src="https://blog.youkuaiyun.com/m0_53297256" width="200" height="200"  name="iframe" frameborder="5"></iframe>
<p><a href="https://blog.youkuaiyun.com/m0_53297256?type=download" target="iframe">点击这里查看我的资源</a></p>

显示效果：

点击这里查看我的资源

20、颜色

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

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

属性rgba

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明。

21、脚本

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

标签script

用于定义客户端脚本，比如 JavaScript。script元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

标签noscript

提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。noscript元素可包含普通HTML页面的body元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示元素中的内容。

示例：

源代码：

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

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

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

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

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

显示效果：

JavaScript 可以触发事件，就像按钮点击。
抱歉，你的浏览器不支持 JavaScript!
不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。

点我

22、字符实体

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

如需显示小于号，我们必须这样写：&Lt; 或 < 或 <

使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
实体名称对大小写敏感。

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
`&	和号	`&`	`&`
"	引号	`quot;`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

23、URL

统一资源定位器(Uniform Resource Locators)URL。URL 是一个网页地址。

URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

文章目录

02html基础详解

该行表头演示列合并
表头1	表头2	表头3
页脚第1列	页脚第2列
主体1行1列	主体1行2列	该区域显示行合并3行效果，不包括页脚。
主体2行1列	主体2行2列

主要的网页标题
菜单 HTML CSS JavaScript	内容在这里
版权 © https://blog.youkuaiyun.com/m0_53297256

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
`&	和号	`&`	`&`
"	引号	`quot;`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
`&	和号	`&`	`&`
"	引号	`quot;`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
`&	和号	`&`	`&`
"	引号	`quot;`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`