HTML

2018-07-29 本文已影响0人点点渔火

实例
 文本
 链接
 头部
 样式
 图像
 区块
 布局
 表单
 框架

参考： http://www.runoob.com/html/html-intro.html

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

说明：

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

实例：

标题（Heading）是通过<h1> - <h6> 标签来定义的.
段落是通过标签 <p> 来定义的.
链接是通过标签 <a> 来定义的.

   <a href="http://www.runoob.com">这是一个链接</a>

图像是通过标签 <img> 来定义的

<img src="/images/logo.png" width="258" height="39" />

元素：

<p>
<body>
<html>

就是没有关闭标签的空元素（
标签定义换行）

属性：
http://www.runoob.com/tags/html-reference.html

标签	描述
<a>	定义超文本链接
<audio>New	定义音频内容
<b>	定义文本粗体
<body>	定义文档的主体
<br>	定义换行
<button>	定义一个点击按钮
<canvas>New	定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption>	定义表格标题
<center>	HTML5不支持，不赞成使用。定义居中文本。
<code>	定义计算机代码文本
<col>	定义表格中一个或多个列的属性值
<colgroup>	定义表格中供格式化的列组
<figure>New	规定独立的流内容（图像、图表、照片、代码等等）。
<h1> to <h6>	定义 HTML 标题
<i>	定义斜体字
<html>	定义 HTML 文档
<p>	定义段落。
<span>	定义文档中的节。
<select>	定义选择列表（下拉列表）。
<section>New	<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<sub>	定义下标文本。
<title>	定义文档的标题。
	定义注释

文本内容：

注释：

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

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

标题：

<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

段落：

标签	描述
<p>	定义一个段落
<br>	插入单个折行（换行）
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字
<abbr>	定义缩写

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
<q>Build a future where people live in harmony with nature.</q>
<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>

链接

发送邮件：

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

mailto 发送人
subject 主题
在进行抄送时，需要使用关键字：cc
在进行密送时，需要使用关键字：bcc

参数说明：

参数	描述
mailto:name@email.com	邮件接收地址
cc=name@email.com	抄送地址
bcc=name@email.com	密件抄送地址
subject=subject text	邮件主题
body=body text	邮件内容
?	第一个参数分隔符
&	其他参数分隔符

注：多个邮件地址用 ; 隔开，空格用 %20 代替。

头部 head

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

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<style> 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

</html>

HTML <meta> 元素
meta标签描述了一些基本的元数据。

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

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

<!--为搜索引擎定义关键词-->
<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">

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

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

HTML 样式- CSS

CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
CSS 教程

内联样式
显示出如何改变段落的颜色和左外边距

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

背景颜色

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

字体, 字体颜色，字体大小

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

标签	描述
<style>	定义文本样式
<link>	定义资源引用地址

图像

alt 丢失图片显示文字
width, height 尺寸

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<img src="https://images2015.cnblogs.com/blog/1027162/201611/1027162-20161113162105295-307972897.png", width="80%">

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

标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

表格

<table border="1" cellpadding="10">
  <caption>Monthly savings</caption>
  <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框

跨行或跨列的表格单元格
 漂亮的表格

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

区块

HTML 可以通过 <div> 和 <span>将元素组合起来。
<div>组合HTML元素的容器， <span> 内联元素，可用作文本的容器

HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

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

</body>
</html>

标签	描述
<div>	定义文档区块，块级(block-level)
<span>	定义 span，用来组合文档中的行内元素。

布局

使用 <div> 元素的网页布局
如何使用 <div> 元素添加布局。通过坐标位置控制

使用 <table> 元素的网页布局
如何使用 <table> 元素添加布局。

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

表单

文本域/密码

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
Password: <input type="password" name="pwd"><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="提交"><br>
  <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>

表单发送邮件

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

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

</body>
</html>

框架

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

```

### 颜色：
<http://www.runoob.com/html/html-colornames.html>
<p style="background-color:rgb(255,255,0)">
颜色
<p>

HTML

实例：

文本内容：

链接

头部 head

HTML 样式- CSS

图像

表格

区块

布局

表单

框架

猜你喜欢

热点阅读