EdwardWong

2022/12/04阅读：40主题：姹紫

HTML

前端小白，目前在学html，所记录的知识只是为了以后更好的查看，所记录的知识来源于C语言中文网

什么是网页

网站就是由一个个网页构成，网页就是放在服务器上的一个文件，当我们浏览网页时，这个文件会被下载到本地电脑，然后由浏览器解析，渲染出各种漂亮的界面，比如表格、图片、标题、列表等。

网页文件的后缀有很多种，比如*.html、*.php、.jsp、.asp等，不管网页后缀是什么，其本质都是由html代码构成的纯文本文件。

什么是网站

一个网站由很多网页组成，可以把多个网页放在一个文件夹中，这个文件夹可以嵌套其他子文件夹，最终形成一个树状结构。

如果给顶级目录program绑定一个域名www.domain.com，那么用户就可以通过www.domain.com来访问program文件夹中所有的文件（包括子文件夹），例如：

www.domain.com/demo.html
www.domain.com/python/

可以认为网站就是一个绑定了域名的文件夹，该文件夹可以包含子文件夹以及各种各样的文件，这些文件都可以通过域名来访问。

除了给文件夹绑定域名以外，还可以通过在服务器上为其提供web服务，用户也可以通过ip地址来访问。

互联网上所有的服务器都是通过ip地址定位的，域名只是ip地址的一种助记符，帮助用户记住网站的链接以及品牌。使用域名访问网站时，浏览器会找到域名所对应的ip地址，然后再通过ip地址请求服务器上的文件，这个过程叫做域名解析，域名解析的过程是通过DNS服务器完成的。

网站的作用是把计算机上的数据（文章、博客、图片、视频等）分享出去，让别人也能获取到有用的信息；同时，别人也能发布自己的数据（发布文章、留言、上传视频等），让网站的内容更加丰富。

`html`简介

每一个网页都是一个html文档，使用浏览器访问一个链接url,实际上就是下载、解析和显示html文档的过程。将众多文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站。

标记语言

<img> 标签表示一张图片
<a>标签表示一个链接
<table>标签表示一个表格
<input> 标签表示一个输入框
<p>标签表示一个文本
<strong> 标签表示文本加粗效果
<div>标签表示块级布局

`html`版本

html 4适应了互联网时代，html 5适应了移动互联网时代。除了较低版本的IE浏览器，几乎所有的其他浏览器都能很好的支持html 5.如果用户很少使用IE浏览器，那么可以放心使用html 5.

`html`文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一段文本</p>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
    <a href="http://c.biancheng.net/">这个一个超链接</a>
    <a href="http://c.biancheng.net/" target="_blank">这是一个链接，指向C语言中文网首页</a>
    <ul>
        <li>条目1</li>
        <li>条目2</li>
        <li>条目3</li>
    </ul>
    <input type="text" placeholder="请输入内容" />

</body>
</html>

由<>包围的特殊标记就叫做html标签，浏览器通过识别这些标签来渲染出各种界面和效果。

<html>标签用来包围当前网页的所有html代码，可以把它看作一个外壳。所有的标签都需要在<html>和</html>
<head>标签表示网页的头部，用于设置一些网页的参数，在浏览器是看不到的。

<meta charset="UTF-8"> 用来指明当前网页的编码格式是 UTF-8；
<title> 用来设置当前网页的标题，相当于文件的名字，它会显示在浏览器的标题栏。

body标签表示网页的正文内容，也就是需要在浏览器主界面中显示的内容。

<p> 标签用来表示一个段落，能容纳一段文本；
<a> 标签用来表示一个超链接，用鼠标点击后可以跳转到其它网页；
<ul> 标签用来表示一个列表，其中的每个 <li> 都是子标签，用来表示一个列表项。
<h1> </h1>: 该标签用来定义标题
<input type="text"/>: 该标签用来定义一个输入框

<!DOCTYPE html>: 这是文档类型声明，用来将文档声明为html文档。

`html`标签的语法格式

一般情况下，一个html标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写。

自闭合标签

有一些html标签没有单独的结束标签，而是在开始标签中添加/来进行闭合，这种标签称为自闭合标签。

<img src="./logo.png" alt="C语言中文网Logo" />   <!--图形-->
<hr />   <!--分割线-->
<br />   <!--文本换行-->
<input type="text" placeholder="请输入内容" />   <!--文本输入框-->

表示`html`中的注释。

嵌套`html`标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML标签的嵌套</title>
</head>
<body>
    <h1>C语言中文网<font size="4" color="#666">简介</font></h1>
    <p>
        C语言中文网，一个在线学习<b>编程</b>的网站，目前已经发布了将近 <font color="red">50<sup>①</sup></font> 套教程，包括<i>C语言</i>、<i>C++</i>、<i>Java</i>、<i>Python</i> 等，请<a href="http://c.biancheng.net/sitemap/" target="_blank">猛击这里</a>查看所有教程。
        <hr />
        <small>注①：C语言中文网会持续更新优质教程，教程数量将远远超过 50 套。</small>
    </p>
</body>
</html>

<font>标签设置了color，size属性
<b></b>标签用来加粗文本
<sup> </sup> 标签用来设置上角标
<i></i>标签用来设置斜体文字
<a></a> 标签用来设置超链接，其中target属性用来指明打开方式，_blank表示从新标签中打开。
<hr />标签用来设置分隔线，是一个自闭合标签
<small> </small> 标签用来呈现小号字体

`html`属性

属性需要添加在开始标签中，语法格式为：

attr="value"

attr表示属性名，value表示属性值，属性值必须使用双引号""或者单引号"包围。

一个标签可以没有属性，也可以有一个或者多个属性。

<p id="user-info" class="color-red">欢迎 <font color="red" size="3">Tom</font> 来到C语言中文网，您已经使用本站 3 年了，这是您第 12 次登录。<p>
<div class="clearfloat">
    <p class="left">这里显示 Tom 的账号信息</p>
    <p class="right">这里显示 Tom 的个性签名</p>
</div>

专有属性

<img>标签就有src和slt两个专用属性，<a>标签也有href和target两个专用属性。

<img>标签中的src属性用来定义图像的路径，alt属性用来定义图像的描述信息，当图像出现异常时，无法正常显示就会显示alt中的信息。
<a>标签中的href属性用来定义链接的地址，target属性用来定义新页面在浏览器中的打开方式。

<img src="./logo.png" alt="C语言中文网Logo" width="100" height="50">

<a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>

html属性也允许自定义属性，这些属性可以被浏览器识别，但不会添加什么特殊效果，需要借助CSS和JavaScript处理自定义属性，为html标签添加指定样式或行为。

通用属性

通用属性可以在大多数html标签中使用，例如id、class、title、style等。

id属性

id属性用来赋予某个标签唯一的名称，当使用css或JavaScript来操作这个标签时，就可以通过id属性来找到这个标签

<input type="text" id="username" />

<div id="content"> C语言中文网</div>

<p id="url"> http://c.biancheng.net/</p>

class属性

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。当使用 CSS 或者 JavaScript 来操作 HTML 标签时，同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的，所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中.

title属性

title属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出title属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <a href="http://c.biancheng.net/html/" title="HTML教程">HTML教程</a>
</body>
</html>

style属性

使用style属性可以在html标签内部为标签定义css样式，例如设置文本颜色、字体等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <p style="color:red;">http://c.biancheng.net/html/</p>
    <img src="./logo.png" style="height:50px;" alt="C语言中文网LOGO">
    <div style="padding:10px;border:2px solid #999;text-align:center;">C语言中文网</div>
</body>
</html>

标题标签`<h1>`到`<h2>`

html中提供了从<h1>到<h6>六个级别的标题标签，<h1>标签的级别最高，<h6>标签的级别最低。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML标题标签演示</title>
</head>
<body>
    <h1>h1 标题</h1>
    <h2>h2 标题</h2>
    <h3>h3 标题</h3>
    <h4>h4 标题</h4>
    <h5>h5 标题</h5>
    <h6>h6 标题</h6>
</body>
</html>

`段落标签`

<p> 段落中的内容</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML段落标签演示</title>
</head>
<body>
    <p>C语言中文网，一个在线学习编程的网站，网址：<a href="http://www.biancheng.net/" target="_blank">http://www.biancheng.net/</a></p>
    <p>C语言中文网目前已经发布了将近 <b>50</b> 套教程，包括 HTML、CSS、JavaScript 等，您可以<a href="http://c.biancheng.net/sitemap/" target="_blank">猛击这里</a>查看所有教程。</p>
    <p>我们的 Slogan：千锤百炼，只为大作；精益求精，句句斟酌；这种教程，看一眼就倾心。</p>
</body>
</html>

浏览器内置的样式会在段落的上下自动添加一定的空白区域（外边距），可以使用CSS margin属性来设置空白区域的大小。

段落中的空白符

默认情况下，段落标签会对文本中的空白符进行合并，将多个连续的空白符显示为一个空格的效果

如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个；
如果段落中出现多个连续的换行，浏览器会将这些换行转换成一个空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML段落中的空白符</title>
</head>
<body>
    <p>C语言中文网</p>
    <p>http:            //c.biancheng.net/html/</p>
    <p>


        HTML      教


    程</p>
</body>
</html>

如果想在段落中换行，需要使用专门的换行标签<br />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用&lt;br&gt;标签换行</title>
</head>
<body>
    <p>C语言中文网<br />http://c.biancheng.net/html/<br />HTML教程</p>
</body>
</html>

`html`文本格式化

`<strong>`和`<b>`标签之间的区别

默认情况下，<strong>和<b>标签都可以使文本以粗体以粗体展示标签中的文本，但是<strong>标签的语义是标签中的内容具有很高的重要性。而<b>标签的语义仅仅是加粗文本以引起读者的注意，并没有特殊的意思。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>&lt;strong&gt;和&lt;b&gt;标签演示</title>
</head>
<body>
    <p>当您决定使用C语言中文网，您已经超越了 <strong>90%</strong> 的程序员，请记住网址 <b>http://c.biancheng.net/</b>。</p>
</body>
</html>

`<em>`和`<i>`标记之间的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>&lt;em&gt;和&lt;i&gt;标签演示</title>
</head>
<body>
    <p>当您决定使用C语言中文网，您已经超越了 <em>90%</em> 的程序员，请记住网址 <i>http://c.biancheng.net/</i>。</p>
</body>
</html>

`html`超链接标签`<a>`

超链接是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是当前网页中的其他位置，还可以是图片、文件、应用程序等。

<a href="url" target="opentype"> 链接文本 </a>

其中href属性用来指明要跳转的url，target属性用来指明新页面的打开方式，链接文本要写在<a>和</a>之间。

`href`属性

href属性指定链接的目标，href可以有多种形式：

href可以指向一个网页（.html、.php、.jsp、.asp等格式），这也是最常见的形式。
href可以指向图片（.jpg、.gif、.png）、音频（.mp3、.wav）、视频（.mp4、.mkv）等多媒体文件，例如href="/uploads/allimg/181221/134132557-0.jpg"
href可以指向压缩文件（.zip、.rar）、可执行文件（.exe）等。 href="./../uploads/data_package/ComputerFoundation.zip"
href也可以指向本机的文件，只是很少这样使用。

href本质上就是指向一个文件，这个文件几乎可以是任意格式的。如果浏览器支持这种格式，那么它就会在浏览器上显示，如果浏览器不支持这种格式，就提示用户下载

href使用的路径可以是绝对路径，也可以是相对路径。

`target`属性

target属性是可选属性，用于指明新页面的打开方式，默认情况下，新页面在当前浏览器窗口中打开。

<a href="http://c.biancheng.net/html" target="_blank"> HTML教程（新窗口打开）</a>

<a href="http://c.biancheng.net" target="_self"> CSS教程</a>

`<a>`标签的默认样式

浏览器为<a>标签设置了一些默认样式。

鼠标样式

当鼠标移入链接区域时，会变成一只小手，当鼠标移出链接区域时，会变成箭头形状

颜色及下划线

超链接被点击之前为蓝色，点击之后为紫色。默认带下划线，下划线颜色和文本颜色保持一致。

浏览器根据历史记录来判断超链接是否被点击过，如果href属性和历史记录中的某条url重合，那么说明该链接被点击了。清空浏览器的历史记录会让超链接的颜色再次变回蓝色

`html`插入图片

html使用<img>标签插入图片，<img>是自闭的标签，只包含属性，没有结束标签。

<img src="url" alt="text">

src是必选属性，src可以使用相对路径，也可以使用绝对路径，可以支持多种图片格式
alt是可选属性，用来定义图片的文字信息，当由于某些原因（例如图片路径错误、网络连接失败）导致图片无法加载时，就会显示alt属性中的信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML插入图片</title>
</head>
<body>
    <!-- 使用绝对路径插入网络图片 -->
    <img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" alt="C语言中文网Logo"> <br>
    <!-- 在当前 HTML 文档的上层目录中有一个 images 文件夹，该文件夹下有一张图片 html5.png -->
    <img src="../images/html5.png" alt="HTML5 Logo">
</body>
</html>

设置图片的宽度和高度

在<img>标签中可以使用width和height属性来指定图片的宽度和高度，默认情况下，这些属性的值都是以像素为单位的。

<img src="./logo.gif" alt="C语言中文网" width="150" height="150">

除此之外，还可以使用style属性指定图片的高度和宽度。

<img src="./logo.gif" alt="C语言中文网" style="width:100px; height:100px;">

<img src="./html5.png" alt="html5 logo" style="width:150px; height:150px;">

width和height属性只是临时修改图片的尺寸，并不会改变图片原始文件的大小。

一般建议为图片设置width和height属性，以便浏览器可以在加载图片之前为其分配足够的空间，否则图片加载过程中可能会导致网站布局失真
如果您的页面使用响应式布局（自适应布局），建议在上传图片之前裁剪好尺寸，而不要设置 width 和 height 属性，这样图片能够跟随屏幕宽度自动改变尺寸，从而不会变形，或者超出屏幕宽度。

`html5`中的图片属性

有时候需要按照比例来放大或缩小图片的尺寸适应不同的设备，避免图片过大超出屏幕范围，为此html5中中增加了<picture>标签。该标签允许你针对不同类型的设备定义多个版本的图片。

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="C语言中文网默认Logo">
</picture>

在<picture>标签中包含零个或多个<source>标签，通过<source>标签中的media属性可以设定匹配条件（允许哪个版本的图片显示），通过srcset属性可以定义图片的路径，另外，在<picture>标签的最后还需要定义一个<img>标签。

浏览器将会评估<source>标签，并在其中选择选择合适的<source>标签，如果未找到匹配项，则使用<img>标签所定义的图片。

图片映射

图像映射允许您在一个图片中定义超链接，实现思想就是在图像中划分一些区域，并在这些区域中定义超链接。例如，我们可以按照地图的划分为每个国家或城市所在的区域定义超链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML图片映射</title>
</head>
<body>
    <img src="logo.png" usemap="#objects" alt="C语言中文网Logo">
    <map name="objects">
        <area shape="rect" coords="0,0,82,126" href="http://c.biancheng.net/html/" alt="HTML教程">
        <area shape="circle" coords="90,58,3" href="http://www.biancheng.net/css3/" alt="CSS教程">
        <area shape="circle" coords="124,58,8" href="http://www.biancheng.net/js/" alt="JavaScript教程">
    </map>
</body>
</html>

<map>标签的name属性对应的是<img>标签的usemap属性，<area>标签用于定义图片的可点击区域， 可以在图像中定义任意数量的可点击区域

shape和coords属性

在<area>标签中可以通过shape属性可定义可点击区域的形状，并通过coords属性来定义形状所对应的坐标，其中shape属性的可选值有三个，分别是rect(矩形)、circle(圆形)、poly（多边形），coords属性中坐标的值则取决于可点击区域的形状。

矩形的可点击区域

<area shape="rect" coords="x1, y1, x2, y2" href="http://c.biancheng.net/" alt="">

圆形的可点击区域

<area shape="circle" coords="x, y, radius" href="" alt="">

多边形的可点击区域

<area shape="poly" coords="x1, y1, x2, y2, x3, y3, ..., xn, yn" href="http://c.biancheng.net/" alt="">

其中每对x和y值都代表一个多边形的顶点坐标。

所有坐标都是相对于图片的左上角来计算的。

`<table>`标签

<table border="1">
   <tr>
     <th>名称</th>
     <th>官网</th>
     <th>性质</th>
   </tr>
   <tr>
     <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
   </tr>
    <tr>
     <td>百度</td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
     </tr>
   <tr>
      <td>当当</td>
     <td>http://www.dangdang.com/</td>
      <td>图书</td>
    </tr>
</table>

上述表格包含4个标签,<table>、<tr>、<td>、<th>

<table>表示表格，表格的所有内容需要写在<table>和</table>之间
<tr>是table row的简称，表示表格的行。表格中有多少个<tr>标签就表示有多少行数据
<td>是table datacell的简称，表示表格的单元格，是存放表格数据的标签，单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。
<th>是table heading的简称，表示表格的表头。 <th>一般位于第一行，大多数浏览器会把表头显示为粗体居中的文本，

默认情况下，表格是没有边框的。但是我们可以使用 <table> 标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。本例中我们将表格的边框宽度设置为 1px。注意，px 是默认的单位，不用显式指明。

表格的边框合并

网页中常见的表格样式大多为单层边框，为了实现单层边框，可以利用CSS中的border-collapse属性来设置表格的边框。border-collapse是边框塌陷的意思，当属性值为collapse时，可以使表格的双边框变为单边框。

<table border="1" style="border-collapse: collapse;">
   <tr>
      <th>名称</th>
      <th>官网</th>
      <th>性质</th>
    </tr>
    <tr>
       <td>C语言中文网</td>
      <td>http://c.biancheng.net/</td>
      <td>教育</td>
     </tr>
    <tr>
        <td>百度</td>
      <td>http://www.baidu.com/</td>
      <td>搜索</td>
   </tr>
   <tr>
       <td>当当</td>
      <td>http://www.dangdang.com/</td>
      <td>图书</td>
   </tr>
</table>

表格的标题

html允许使用<caption>标签来为表格设置标题，标题用来描述表格的内容。一个表格只能有一个<caption>标签

<table border="1" style="border-collapse: collapse;">
  <caption>这是表格的标题</caption>
  <tr>
     <th>名称</th>
     <th>官网</th>
     <th>性质</th>
  </tr>
   <tr>
     <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
  </tr>
  <tr>
     <td></td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
  </tr>
  <tr>
      <td>当当</td>
     <td>http://www.dangdang.com/</td>
      <td>图书</td>
  </tr>
</table>

单元格的合并

html中的表格支持跨行合并和跨列合并两种。

rowspan：表示跨行合并。使用rowspan特性来表明单元格要跨越的行数
colspan：表示跨列合并。使用colspan特性来表明单元格要跨越的列数。

<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>

不论是rowspan和colspan都是<td>标签的属性。

<table border="1" style="border-collapse: collapse;">
    <tr>
       <th>名称</th>
     <th>官网</th>
     <th>性质</th>
    </tr>
    <tr>
      <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
    </tr>
    <tr>
      <td rowspan="2">百度</td>
      <td>http://www.baidu.com/</td>
      <td>搜索</td>
    </tr>
    <tr>
      <td colspan="2">http://www.dangdang.com/</td>
    </tr>
</table>

即使一个单元格中没有任何内容，我们仍需使用 <td> 或 <th> 元素来表示一个空单元格的存在，建议在 <td> 或 <th> 中加入 &nbsp;（空格），否则低版本的 IE 可能无法显示出这个单元格的边框。

列表标签 `<ul>`、`<ol>`、`<dl>`

列表可以将若干条相关的内容整理起来，让内容看起来更加合理。在列表中可以放置文本、图像、链接等，也可以在列表中定义另一个列表（列表嵌套）。

html为我们提供了三种不同形式的列表：

有序列表，使用<ol>+<li>标签
无序列表，使用<ul>+<li>标签
定义列表，使用<dl>+<dt>+<dd>标签

有序列表

<ol>标签用来表示有序列表，有序列表之间的内容有先后顺序之分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML有序列表</title>
</head>
<body>
    <p>煮米饭的步骤：</p>
    <ol>
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>
</body>
</html>

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
</head>
<body>
    <p>早餐的种类：</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
</body>
</html>

定义列表

<dl>标签用于创建定义列表。定义列表由标题（术语）和描述两部分组成，描述是对标题的解释和说明，标题是对描述的总结和提炼。

<dl>是definition list的简称
<dt>是definition term的简称，也就是所说的标题
<dd>是definition description的简称，表示定义描述。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML定义列表</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>HTML 是一种专门用来开发网页的标记语言，您可以转到《<a href="http://c.biancheng.net/html/" target="_blank">HTML教程</a>》了解更多。</dd>
        <dt>CSS</dt>
        <dd>CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页，您可以转到《<a href="http://c.biancheng.net/css3/" target="_blank">CSS教程</a>》了解更多。</dd>
        <dt>JavaScript</dt>
        <dd>JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言，您可以转到《<a href="http://c.biancheng.net/js/" target="_blank">JS教程</a>》了解更多。</dd>
    </dl>
</body>
</html>

<dt> 和 <dd> 虽然是同级标签，但是它们的默认样式不同，<dd> 带有一段缩进，而 <dt> 顶格显示，这样层次更加分明。

列表的默认样式修改

浏览器会对列表设置一些默认样式，包括外边距、内边距和列表项标记。可以通过CSS样式表的margin、padding和list-style属性来修改它们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改HTML列表的默认样式</title>
</head>
<body>
    <p style="margin:0px auto;">煮米饭的步骤：</p>
    <ol style="margin:0px auto; padding-left:20px; list-style:upper-latin;">
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>

    <p style="margin-bottom:0px;">早餐的种类：</p>
    <ul style="margin:0px auto; padding-left:20px; list-style:square;">
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>

    <dl style="margin-bottom:0px;">
        <dt><b>HTML</b></dt>
        <dd style="margin:auto auto 10px 0px;">HTML 是一种专门用来开发网页的标记语言。</dd>
        <dt><b>CSS</b></dt>
        <dd style="margin:auto auto 10px 0px;">CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页。</dd>
        <dt><b>JavaScript</b></dt>
        <dd style="margin:auto auto 10px 0px;">JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言。</dd>
    </dl>
</body>
</html>

`<form>`标签

当您想要通过网页来收集一些用户的信息（例如用户名、电话、邮箱地址等）时，就需要用到 HTML 表单。表单可以接收用户输入的信息，然后将其发送到后端应用程序，例如 PHP、Java、Python 等，后端应用程序将根据定义好的业务逻辑对表单传递来的数据进行处理。

表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。

<form>标签的基本语法如下：

<form action="URL" method="GET|POST" name="表单域名称">
    表单中的其它标签
</form>

action属性用来指明将表单提交到哪个页面
method属性表示使用哪种方式提交数据，包括GET和POST两种方式，区别如下：

GET: 用户点击提交按钮后，提交的信息会被显示在页面的地址蓝中。一般情况下，GET提交方式中不建议包含莫玛，因为密码被提交到地址栏中，不安全
POST：如果表单包含密码这种敏感信息，建议使用POST方式提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

表单控件

html控件可以通过标签来实现。

`input`控件

button不会向后台提交数据，只是会点击按钮后执行一定的操作，例如点击按钮请求发送验证码
file可以上传文件

name和value是每个表单元素都有的属性值，供后台人员使用
name表单元素的名字，要求单选按钮和复选按钮都有相同的name值
单选按钮和复选框可以设置为checked属性，当页面打开的时候会默认选中这个按钮checked="checked"。

`label`标签

<label>标签为input元素定义标注，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到对应的表单元素上，增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

`select`标签

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>

在<option>中定义selected="selected"时，当前项即为默认选中项。

`textarea`标签

可以输入多行文字，不能使用input表单空间了，此时需要使用<textarea>

<textarea cols="50",rows="5"> 默认内容<textarea>

cols表示一行可以写多少字符
rows表示可以写多少列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML form表单演示</title>
</head>
<body>
    <form action="./userinfo.php" method="POST">
        <!-- 文本输入框控件 -->
        <label>用户名： </label><input name="username" type="text"><br>

        <!-- 密码框控件 -->
        <label>密&emsp;码： </label><input name="password" type="password"><br>

        <!-- 下拉菜单控件 -->
        <label>性&emsp;别：</label>
        <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
            <option value="3">未知</option>
        </select>
        <br>

        <!-- 复选框控件 -->
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">听音乐
        <input type="checkbox" name="hobby" value="2">看电影
        <input type="checkbox" name="hobby" value="3">打游戏
        <br>

        <!-- 单选按钮控件 -->
        <label>学&emsp;历：</label>
        <input type="radio" name="education" value="1">小学
        <input type="radio" name="education" value="2">中学
        <input type="radio" name="education" value="3">本科
        <input type="radio" name="education" value="4">硕士
        <input type="radio" name="education" value="5">博士
        <br>

        <!-- 按钮 -->
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>
</body>
</html>

上述代码点击提交按钮后，即可使用POST方式将数据提交到当前目录下的userinfo.php页面，在服务器端通过PHP代码可以接受提交的数据。

`html`注释

`单行注释`

在html中可以通过在代码中添加注释

`多行注释`

将多行内容放在中间即可。

`IE`条件注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE浏览器条件注释</title>
</head>
<body>
<h4>根据不同的 IE 版本显示不同的内容</h4>
<!-- 如果使用 IE，则显示 -->
    <!--[if IE]>
        <p>您正在使用IE浏览器</p>
    <![endif]-->

    <!-- 如果使用 IE8，则显示 -->
    <!--[if IE 8]>
        <p>您正在使用 IE8</p>
    <![endif]-->

    <!-- 如果不是使用 IE7，则显示 -->
    <!--[if !IE 7]>
        <p>您使用的不是 IE7</p>
    <![endif]-->

    <!-- 如果版本小于 IE10，则显示 -->
    <!--[if lt IE 10]>
        <p>您正在使用 IE10 以下的版本</p>
    <![endif]-->

    <!-- 如果版本大于等于 IE6，则显示 -->
    <!--[if gte IE 6]>
        <p>您正在使用 IE6 及其以上的版本</p>
    <![endif]-->
</body>
</html>

上述代码只适用于IE浏览器，对于chrome浏览器并不适用。

`html`嵌入`css`样式

css样式既可以作为单独的文件(css类型的文件)引入到html文档中，也可以直接写入html文档中：

行内样式：使用html标签的style属性定义css样式
内嵌样式：使用<style>标签在html文档头部（head和<head>之间）定义css样式
链接式：使用<link>标签引入外部的css样式表文件
导入式：使用@import命令导入外部css样式表文件

行内样式（内联样式）

行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
    <p style="background-color: #999900">行内元素，控制段落-1</p>
    <h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>
    <p style="background-color: #999900">行内元素，控制段落-2</p>
    <strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>
    <div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>
    <em style="font-size:2em;">行内元素，em 强调</em>
</body>
</html>

内嵌样式

内嵌样式通过将 CSS 写在网页源文件的头部，即在 <head> 和 <head> 之间，通过使用 HTML 标签中的**<style>** 标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
<style type="text/css">
p{
    text-align: left;  /*文本左对齐*/
    font-size: 18px;  /*字体大小 18 像素*/
    line-height: 25px;  /*行高 25 像素*/
    text-indent: 2em;  /*首行缩进2个文字大小空间*/
    width: 500px;  /*段落宽度 500 像素*/
    margin: 0 auto;  /*浏览器下居中*/
    margin-bottom: 20px;  /*段落下边距 20 像素*/
}
</style>
</head>
<body>
    <p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。在这之后，由于在搜索引擎中，大都有动物形象来形象，如 SOHU 的狐，如 GOOGLE 的狗，而百度也便顺理成章称作了熊。百度熊也便成了百度公司的形象物。</p>
    <p>在百度那次更换 LOGO 的计划中，百度给出的 3 个新 LOGO 设计方案在网民的投票下，全部被否决，更多的网民将选票投给了原有的熊掌标志。</p>
    <p>此次更换 LOGO 的行动共进行了 3 轮投票，直到第 2 轮投票结束，新的笑脸 LOGO 都占据了绝对优势。但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了最多的网民选票，从而把 3 个新 LOGO 方案彻底否决。</p>
</body>
</html>

行内样式带来了样式修改的不方便，例如上个示例中两个段落都使用同样的样式，但需要编写两遍；而使用内嵌式样式后，就可以将所有的段落样式放在一起。

style标签不仅可以定义CSS样式，还可以定义JavaScript脚本，故使用style时需要注意，当style的type值为text/css时，内部编写CSS样式；若style的type值为text/javascript时，内部编写JavaScript脚本。

style中有个比较特殊的属性title, 使用title可以为不同的样式设置一个标题，浏览者就可以根据标题选择不同的样式达到浏览器中切换的效果，但IE不支持，Firefox浏览器支持此效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" title="字体14号">
p{
    text-align: left;  /*文本左对齐*/
    font-size: 14px;  /*字体大小 14 像素*/
    line-height: 25px;  /*行高 25 像素*/
    text-indent: 2em;  /*首行缩进两个文字大小空间*/
    width: 500px;  /*段落宽度 500 像素*/
    margin: 0 auto;  /*浏览器下居中*/
}
</style>
<style type="text/css" title="字体 18 号">
p{
    text-align: left;  /*文本左对齐*/
    font-size: 18px;  /*字体大小 18 像素*/
    line-height: 25px;  /*行高 25 像素*/
    text-indent: 2em;  /*首行缩进两个文字大小空间*/
    width: 500px;  /*段落宽度 500 像素*/
    margin: 0 auto;  /*浏览器下居中*/
    color: #6699FF;  /*字体颜色的改变*/
}
</style>
</head>
<body>
    <p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。</p>
</body>
</html>

链接式

链接式通过html的<link>标签，将外部样式表文件链接到html文档中，这也是网络上网站应用最多的方式，也是最实用的方式。这样可以将html和css完全分离开。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
    <h3>楼上的，<span>lianjie.css</span> 文件给我穿的花衣服。</h3>
</body>
</html>

lianjie.css文件代码：

h3{
    font-weight: normal;  /*取消标题默认加粗效果*/
    background-color: #66CC99;  /* 设置背景色 */
    height: 50px;  /*设置标签的高度*/
    line-height:50px;  /* 设置标签的行高 */
}
span{
    color: #FFOOOO;  /* 字体颜色 */
    font-weight:bold;  /* 字体加粗 */
}

lianjie-2.css文件代码：

p{
    color: #FF3333;  /*字体颜色设置*/
    font-weight: bold;  /* 字体加粗 */
    border-bottom: 3px dashed #009933;  /* 设置下边框线 */
    line-height: 30px;  /* 设置行高 */
}

导入样式

导入样式有6种书写方式：

@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");

`块级元素`和`内联元素`（行内元素）

块级元素

块级元素最主要的特点是它们自己独占一行，块级元素最具代表性的就是<div>,此外还有<p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<h1>~<h6>

块级元素的特点：

不管是否使用换行标签<br>，块级元素总是在新行上开始；
块级元素的宽度、高度以及外边距和内边距等都可以控制；
如果省略块级元素的宽度，那么它的宽度默认为当前浏览器窗口的宽度
块级元素中可以包含其它的内联元素和块级元素。

`<div>`标签

<div> 是非常重要的块级标记，在网页布局（Layout）方面发挥着重要的作用，使用<div>我们可以定义页面的各个部分，通过与 CSS 相结合可以实现各种各样的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>&lt;div&gt;标签演示</title>
</head>
<body>
    <p>C语言中文网的《<a href="http://c.biancheng.net/html/" target="_blank">HTML教程</a>》是我们花费了数月时间倾力打造的，它通俗易懂，并且贴近实用。</p>

    <div style="padding:0px 20px;border:1px solid #ccc; background-color:#eee;">
        <h4>HTML教程目录（部分）</h4>
        <ul>
            <li><a href="/view/7410.html" target="_blank">网站到底是什么</a></li>
            <li><a href="/view/9381.html" target="_blank">HTML是什么</a></li>
            <li><a href="/view/9382.html" target="_blank">HTML标签的语法格式</a></li>
            <li><a href="/view/9383.html" target="_blank">HTML属性的概念和使用</a></li>
        </ul>
    </div>
</body>
</html>

内联元素（行内元素）

内联元素也成为行内元素，行内元素最常用的是<span>,此外还有<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd>和<var>等。

行内元素的主要特点：

行内元素和其他元素会在同一行上显示；
行内元素的宽、高以及外边距和内边距都不可以改变；
行内元素的宽度就是其中内容的宽度，且不可以改变；
内联元素中只能容纳文本或者其他内联元素。

使用内联元素时需要注意：

设置宽度 width 无效；
设置高度 height 无效，但可以通过 line-height 来设置行高；
可以设置 margin 外边距，但只对左右外边距有效，上下无效；
可以设置 margin 外边距，但只对左右外边距有效，上下无效；
可以通过 display 属性将元素在行内元素和块级元素之间进行切换。

`<span>`标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
    #profile span{
        display: inline-block;
        padding: 2px 4px;
        border: 1px solid #ddd;
        background-color: #f6f6f6;
        border-radius: 3px;
    }
</style>
<title>&lt;span&gt;标签演示</title>
</head>
<body>
    <h1>C语言中文网<span style="font-size:18px; color:#666;">简介</span></h1>
    <p id="profile">
        C语言中文网，一个在线学习<b>编程</b>的网站，目前已经发布了将近 50<sup>①</sup> 套教程，包括 <span>C语言</span>、<span>C++</span>、<span>Java</span>、<span>Python</span> 等，请<a href="http://c.biancheng.net/sitemap/" target="_blank">猛击这里</a>查看所有教程。
        <hr />
        <span style="font-size:14px;">注①：C语言中文网会持续更新优质教程，教程数量将远远超过 50 套。</span>
    </p>
</body>
</html>

那些不被推荐的 HTML 内联标签，比如 <font>、<small>、<big> 等，建议使用 <span> + CSS 样式来代替；但是那么具有明确语义的内联标签，比如 <strong>、<b>、<code>、<em>、<i>、<s> 等，还是应该坚持使用，这些标签比 <span> 更加具有语义，更有助于搜索引擎理解页面内容。

元素的嵌套

块级元素可以嵌套块级元素
块级元素可以嵌套内联元素；
内联元素可以嵌套内联元素；
内联元素可以嵌套块级元素。

`html`布局

网页布局是创建一个网站时一个必不可少的过程，通过布局可以改变网页中内容的排列方式，让网页看起来更加合理、美观。在布局的过程中您还可以使用 CSS 来修改 HTML 标签的样式或者使用 JavaScript 来为网页添加一些特殊效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML网页布局</title>
<style>
    body {
        font: 14px Arial,sans-serif;
        margin: 0px;
    }
    header {
        padding: 10px 20px;
        background: #acb3b9;
    }
    header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2;
    }
    nav, section {
        float: left;
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    section {
        width: 80%;
    }
    nav {
        width: 20%;           
        background: #d4d7dc;
    }  
    nav ul {
        list-style: none;
        line-height: 24px;
        padding: 0px;
    }
    nav ul li a {
        color: #333;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    footer {
        background: #acb3b9;          
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <header>
            <h1>C语言中文网</h1>
        </header>
        <div class="wrapper clearfix">
            <nav>
                <ul>
                    <li><a href="http://c.biancheng.net/">首页</a></li>
                    <li><a href="http://c.biancheng.net/html/">HTML教程</a></li>
                    <li><a href="http://c.biancheng.net/css3/">CSS教程</a></li>
                    <li><a href="http://c.biancheng.net/js/">JS教程</a></li>
                    <li><a href="http://c.biancheng.net/java/">Java教程</a></li>
                    <li><a href="http://c.biancheng.net/python/">Python教程</a></li>
                </ul>
            </nav>
            <section>
                <h2>网站简介</h2>
                <p>C语言中文网创办于 2012 年初，是一个在线学习<b>编程</b>的网站。C语言中文网已经发布了众多优质编程教程，包括C语言、C++、Java、Python 等，它们都通俗易懂，深入浅出。</p>
                <p>C语言中文网将会持续更新，并且不忘初心，坚持创作优质教程。</p>
            </section>
        </div>
        <footer>
            <p>www.biancheng.net</p>
        </footer>
    </div>
</body>
</html>

内联框架`<iframe>`标签

html``iframe标签用来定义一个内联框架，使用它可以将另一个网页嵌入到当前网页中，<iframe>标签会在网页中定义一个矩形区域，浏览器可以在这个区域内显示另一个页面的内容。

<iframe>标签的语法格式如下：

<iframe src ="url" width="m" height="n"></iframe>

src属性用来指定要嵌入的网页地址，width和height属性用来指定框架的宽度和高度，默认单位是像素，当然也可以使用百分比。

示例一

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &lt;iframe&gt; 标签演示</title>
</head>
<body>
    <p>下面的内联框架将嵌入C语言中文网首页，宽度设置为 330 像素，高度设置为 580 像素，用以模拟手机端的显示效果。</p>
    <iframe src="http://c.biancheng.net/" width="330" height="580"></iframe>
</body>
</html>

示例二

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &lt;iframe&gt; 标签演示</title>
<style type="text/css">
    #myframe{
        border: 1px solid #ddd;
        background-color: #f6f6f6;
    }
</style>
</head>
<body>
    <p><a href="http://c.biancheng.net/" target="myframe">猛击这里查看C语言中文网在手机端的显示效果</a></p>
    <iframe id="myframe" name="myframe" width="330" height="580"></iframe>
</body>
</html>

点击链接，即可在灰色板块中打开C语言中文网首页。

注意，要想实现上述效果，需要为 <iframe> 标签设置 name 属性，并将 <a> 标签中 target 属性的值设置为 name 属性的值。

示例三

<iframe> 标签除了可以嵌入网页，还可以嵌入图片、视频等其它资源，嵌入的图片可以直接在当前页面上显示，嵌入的视频可以直接在当前页面上播放

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &lt;iframe&gt; 标签演示</title>
</head>
<body>
    <p>在 HTML 内联框架中嵌入C语言中文网 Logo。</p>
    <iframe src="./logo.png" width="300" height="73" scrolling="no" style="border:1px solid #ddd;"></iframe>
</body>
</html>

`html`标签头部

HTML 中的 <head> 标签是所有头部标签的容器，这些头部标签用来定义有关 HTML 文档的元数据（描述数据的数据）以及所需资源的引用（例如 CSS 样式文件、JavaScript 脚本文件），对文档能够在浏览器中正确显示起到了非常重要的作用。根据我们的需求，可以在 HTML 头部定义大量的元数据，也可以定义很少或者根本就不定义。虽然头部标签是 HTML 文档的一部分，但其中的内容并不会显示在浏览器中。

`<title>`标签

<title>标签的主要作用如下：

在浏览器标题栏或者任务栏中显示标题
将该页面添加到收藏夹时提供标题
在搜索结果中显示页面标题

`<base>`标签

<base> 标签用于为页面中所有链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>&lt;base&gt;标签演示</title>
    <base href="http://c.biancheng.net/">
</head>
<body>
    <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="html/index.html">HTML教程</a></li>
    </ul>
</body>
</html>

上面的示例中第一个 <li> 标签中的超链接会被解析为“http://c.biancheng.net/index.html”，第二个 <li> 中的超链接会被解析为“http://c.biancheng.net/html/index.html”。

`<link>`标签

<link> 标签经常用于引用外部 CSS 样式表，<link> 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。

<head>
    <title>此处书写标题</title>
    <link rel="stylesheet" href="common.css">
</head>

`<style>`标签

使用style标签可以在html文档中嵌入css样式，在style标签中定义的样式仅对当前html文档有效

<head>
    <title>此处书写标题</title>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
        p { color: green; }
    </style>
</head>

`<meta>`标签

<meta> 标签用于提供有关 HTML 文档的元数据，例如页面有效期、页面作者、关键字列表、页面描述等信息。<meta> 标签定义的数据并不会显示在页面上，但却会被浏览器解析。

定义字符集

<meta charset="UTF-8">

定义页面描述

<meta name="description" content="HTML是一种超文本标记语言">

<title> 标签定义文档标题，name="description" 定义文档描述，描述的长度通常大于标题。

定义关键字

<meta name="keywords" content="HTML, HTML教程, HTML入门">

定义页面作者

<meta name="author" content="严长生">

刷新页面

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

上例中的代码用于向浏览器发送一个指令，使浏览器在经过指定的时间间隔（30 秒）后自动刷新页面。在 content 属性中除了可以指定时间间隔外，还可以再指定一个链接，这时页面将在指定的时间后重定向到链接所指向的页面.

<meta http-equiv="refresh" content="10; url=https://c.biancheng.net/">

<script>标签

<script>标签用于定义JavaScript脚本。

<head>
    <title>C语言中文网</title>
    <script>
        document.write("C语言中文网")
    </script>
</head>

<noscript>标签

当用户的浏览器不支持JavaScript脚本或者禁用JavaScript脚本时，可以在<noscript>标签中定义一些内容来替代不能运行的JavaScript脚本或者给用户一些提示，除了<script>标签外，在<noscript>标签中可以包含任何html元素。

<head>
    <title>C语言中文网</title>
    <noscript>
        <p>您的浏览器不支持 JavaScript 或者您禁用了 JavaScript，请<a href="http://c.biancheng.net/">点击这里</a>了解如何启用 JavaScript。</p>
    </noscript>
</head>

分类：

前端

标签：

HTML

作者介绍

HTML

什么是网页

什么是网站

html简介

标记语言

html版本

html文档结构

html标签的语法格式

自闭合标签

嵌套html标签

html属性

专有属性

通用属性

标题标签<h1>到<h2>

段落标签

段落中的空白符

html文本格式化

<strong>和<b>标签之间的区别

<em>和<i>标记之间的区别

html超链接标签<a>

href属性

target属性

<a>标签的默认样式

html插入图片

设置图片的宽度和高度

html5中的图片属性

图片映射

<table>标签

表格的边框合并

表格的标题

单元格的合并

列表标签 <ul>、<ol>、<dl>

有序列表

无序列表

定义列表

列表的默认样式修改

<form>标签

表单控件

input控件

label标签

select标签

textarea标签

html注释

单行注释

多行注释

IE条件注释

html嵌入css样式

行内样式（内联样式）

内嵌样式

链接式

导入样式

块级元素和内联元素（行内元素）

块级元素

<div>标签

内联元素（行内元素）

<span>标签

元素的嵌套

html布局

内联框架<iframe>标签

示例一

示例二

示例三

html标签头部

<title>标签

<base>标签

<link>标签

<style>标签

<meta>标签

EdwardWong

`html`简介

`html`版本

`html`文档结构

`html`标签的语法格式

嵌套`html`标签

`html`属性

标题标签`<h1>`到`<h2>`

`段落标签`

`html`文本格式化

`<strong>`和`<b>`标签之间的区别

`<em>`和`<i>`标记之间的区别

`html`超链接标签`<a>`

`href`属性

`target`属性

`<a>`标签的默认样式

`html`插入图片

`html5`中的图片属性

`<table>`标签

列表标签 `<ul>`、`<ol>`、`<dl>`

`<form>`标签

`input`控件

`label`标签

`select`标签

`textarea`标签

`html`注释

`单行注释`

`多行注释`

`IE`条件注释

`html`嵌入`css`样式

`块级元素`和`内联元素`（行内元素）

`<div>`标签

`<span>`标签

`html`布局

内联框架`<iframe>`标签

`html`标签头部

`<title>`标签

`<base>`标签

`<link>`标签

`<style>`标签

`<meta>`标签