HTML使用教程

注意：对于中文网页需要使用声明编码

HTML 速查列表

一、语法

大体

<!DOCTYPE html>               #命名
<html>                        #heml文件的例
<head>                      #定义头部
<meta charset="utf-8">        #声明编码
<title>首页标题</title>
</head>
<body>                        #正文内容
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

注释

<!--  注释  -->

二、元素

1.常用语法

<h>标题</h>
<p>段落</P>
<body>正文</body>
<a href="网页链接">文本输出</a>
<font size="5">5号字体（文本输出）</font>
<p>段落 <br>换行</br> </p>
换行的使用：
<b>粗体</b>
<br>
<i>斜体</i>

2.文本格式化标签

<b>粗体</b>
<i>斜体</i>
<q>双引号</q>
<sub>上标字</sub>
<sup>下标字</sup>
<strong>粗体 加重语气</strong>
<em>斜体 着重文字</em>
<din>斜体 定义项目</din>

3.文档标签

<head>定义文档的信息</head>
<title>定义了文档的标题</ttile>
<base>定义了链接标签的默认连接地址</base>
<meta>定义了文档中的元数据<meta>
<scipl>定义了客户端的脚本文件</scipl>
<style>定义了文档的样式文件</style>

三、图像

1.图片

<img src="planets-2120004 (3).jpg" width="5600" height="2822" alt="替代文本"/>

src=名字 源属性 width=宽度 height=高度 alt=在图像显示不出来的时候以文本信息显示出来

2.内容对齐

align 属性规定 div 元素中的内容的水平对齐方式。
left = #左对齐
right= #右对齐
center=#居中对齐
justfy=#对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）

align的使用:

<div align="value">

3.图片上放链接

<a href="网页链接">
    <img src="名字" width="宽度" height="高度" alt="替代文本"/>
</a>

边框的图片链接

border=边界 输入0就不会出现边框 输入其他数字就会出现边框

<a href="网页链接">
<img border="0" src="名字" alt="HTML 教程" width="32" height="32"></a>

4.图像映射

coords(区域)

coords 属性规定区域的 x 和 y 坐标。
coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。 
coords指的应该是链接区域在图片中的坐标（像素为单位）
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
</map>

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

shape（形状）

该段代码中的shape指的是点击区域的形状，
rect =矩形
矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2)) 、

<area shape="rect" coords="x1,y1,x2,y2" href=url>

circle=圆形
圆形：(圆心坐标为(X1,y1)，半径为r) 

<area shape="circle" coords="x1,y1,r" href=url>

poly =多边形
多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ……)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

四、表格与边框

table= 表格

border=边框

1.无边框的表格

<table>
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

2.有边框的表格

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

3.表格标签

<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

五、列表、区块与布局

列表

1.无序列表

使用

    标签

    <ul>
<li>列表一</li>
<li>列表二</li>
</ul>

    2.有序列表

    有序列表始于

      标签。每个列表项始于
    1. 标签

      <ol>
<li>列表一</li>
<li>列表二</li>
</ol>

      3.自定义列表

      自定义列表以

      标签开始。每个自定义列表项以
      开始。每个自定义列表项的定义以
      开始。

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

      4.列表标签

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

      区块

      1.区块元素与内联元素

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

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

      <h1>, <p>, <ul>, <table>

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

      <b>, <td>, <a>, <img>

      2. div(块级)、span(内联)

      HTML

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

      div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
      如果与 CSS 一同使用，

      元素可用于对大的内容块设置样式属性。div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

      div 可定义文档中的分区或节（division/section）。div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。

       <div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
  ...
</div>

      使用 table 元素进行文档布局不是表格的正确用法table 元素的作用是显示表格化的数据。

      <p><span>some text.</span>some other text.</p>
      （标签都支持的属性）

      一、[全局属性](HTML 全局属性 (w3school.com.cn))

      二、[事件属性](HTML 事件参考手册 (w3school.com.cn))

      3.分组标签

      <div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素， 内联元素(inline)

      布局

      1.网站布局说明

      • 大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
      • 大多数网站可以使用 div或者 table元素来创建多列。
      • CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

      2. div布局

      前言：div 元素是用于分组 HTML 元素的块级元素

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

      3.表格布局

      前言：使用table标签是创建布局的一种简单的方式。

      <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
 
</body>
</html>

      提示：

      Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程。

      Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

      六、表单（输入）

      1. HTML 表单

      • HTML 表单用于收集用户的输入信息。
      • HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

      2.输入元素

      多数情况下被用到的表单标签是输入标签 input。
      输入类型是由 type 属性定义。

      普通输入：

      文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

      <form action="">
	输入一：<input type="text" name="cheng"<br>
</form>

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

      密码输入：

      密码字段通过标签 来定义

      <form action="">
     Password: <input type="password" name="password">
</form>
      • 密码字段中的字符是隐藏的(显示为星号或圆圈)。

      单选按钮：

      单选按钮**** 标签定义了表单的单选框选项:

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

      复选框：

      复选框**** 定义了复选框。
      复选框可以选取一个或多个选项：

      <form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

      提交按钮：

      提交按钮 定义了提交按钮。
      当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
      action 属性会对接收到的用户输入数据进行相关的处理

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

      重置按钮：

      重置按钮定义重置按钮
      点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值

      <form action="demo-form.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="重置">
  <input type="submit" value="提交">
</form>

      3.表单标签

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

      七、框架

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

      <iframe> 定义一个内联的iframe

      iframe语法

      <iframe src="URL"></iframe>

      该URL指向不同的网页。

      iframe - 设置高度与宽度

      height 和 width 属性用来定义iframe标签的高度与宽度。
      属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)。

      <iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

      iframe - 移除边框

      frameborder 属性用于定义iframe表示是否显示边框。
      设置属性值为 “0” 移除iframe的边框:

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

      使用 iframe 来显示目标链接页面

      iframe 可以显示一个目标链接的页面
      目标链接的属性必须使用 iframe 的属性：

      <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

      八、颜色

      • HTML 颜色由红色、绿色、蓝色混合而成
      • HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
      • 每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

      RGBA

      RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

      div {

background:rgba(255,0,0,0.5);

}

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

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

      div {
    background:rgba(255,0,0,.5);
}

      实例：

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

      1.十六进制

      <p style="background-color:#FFFF00">
通过十六进制设置背景颜色

      2.RGB

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

      3.颜色名

      <p style="background-color:yellow">
通过颜色名设置背景颜色

      [颜色库](HTML 颜色值 | 菜鸟教程 (runoob.com))

      4.字体颜色

      font是一对常规标签，将字体文本内容放入标签内，font标签内设置color颜色+对应颜色值即可设置font标签对象内字体颜色。

      <font color="red" size="2">HTML怎么设置字体颜色</font>

      作者： Azitide

      文章链接： http://azitide.github.io/post/HTML.html

      版权声明：本博客所有文章除特别声明外，均采用CC BY-NC-SA 4.0 协议。转载请注明出处！