MG名冠Web前端之路我爱编程

Web学习之HTML基础（一）

2018-05-19  本文已影响321人  AR7_

前言

一、HTML简介

HTML标签

HTML文档 = 网页

实例

<html>
<body>

<h1>我的第一个标题。</h1>

<p>我的第一个段落。</p>

</body>
</html>

二、HTML编辑器

三、四个最常使用的标签

HTML标题

<html>
<body>

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

<h7>标题元素范围是h1到h6之间，所有h7不会显示加粗的标题效果</h7>

</body>
</html>


<html>
<body>

<h2>hr 标签定义水平线</h2>

<hr/>

<p>这是段落1</p>

<hr/>

<p>这是段落2</p>

<hr/>

</body>
</html>

<html>

<body>

<!--这是一段注释。注释不会在浏览器中显示。-->

<p>这是一段普通的段落。</p>

</body>
</html>

HTML段落

<html>
<body>

<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3</p>

<p>段落元素由 p 标签定义</p> 

</body>
</html>

<html>
<body>

<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.

<p>不要忘记关闭你的 HTML 标签！</p>

</body>
</html>


<html>

<body>

<p>
To break<br/>
lines<br/>
in a<br/>
paragraph,<br/>
use the br tag.
</p>

</body>
</html>


<html>

<body>

<h1>春晓</h1>

<p>
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
</p>

<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>

</body>

</html>

HTML链接

<html>
<body>

<a href="http://www.w3school.com.cn">w3school是一个非常好的学习Web技术的网站。</a>

</body>
</html>

HTML图像

<html>
<body>

<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=1da22b034936acaf59b59efa4ce9a128/279759ee3d6d55fb64b61e1c6f224f4a20a4dd9c.jpg" width="480" height="320" />

</body>
</html>

HTML元素

开始标签 元素内容 结束标签
<p> This is a paragraph </p>
<a href="default.html"> This is a link </a>
<br />

HTML元素语法

嵌套的HTML元素

不要忘记结束标签

空的HTML元素

HTML属性

<html>
<body>

<a href="http://www.w3school.com.cn">w3school是一个非常好的学习Web技术的网站。</a>

</body>
</html>

<html>
<body>

<h1 align="center">This is heading 1</h1>

<p>上面的标题在页面中进行了居中排列。</p>

</body>
</html>

<html>
<body bgcolor="green">

<h2>请看：改变了颜色的背景。</h2>

</body>
</html>

name='Bill "Helloworld" Gates'

HTML样式

<html>
<body style="background-color:PowderBlue;">

<h1>Look! Style and Colors</h1>
<p style="font-family:verdana;color:Blue">
This text is in Verdana and green
</p>
<p style="font-family:times;color:green">
This text is in Times and green
</p>
<p style="font-size:30px">
This text is 30 pixels high
</p>
</body>
</html>
标签 描述
<center> 定义居中的内容
<font>和<basefont> 定义HTML字体
<s><strike> 定义删除线文本
<u> 定义下划线文本
属性 描述
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色 
<html>

<body style="background-color:green">

<h2 style="background-color:red">
This is a heading
</h2>

<p style="background-color:yellow">
This is a paragraph
</p>

</body>
</html>

<html>
<body>

<h1 style="font-family:times">A heading</h1>

<p style="font-family:verdana;color:red;font-size:20px">
A paragraph
</p>

</body>
</html>

<html>
<body>
<h1 style="text-align:center">
This is a heading
</h1>

<p>上面的标题相对于页面居中对齐</p>
</body>
</html>

HTML格式化

标签 描述
<b> 定义粗体文字
<big> 定义大号字
<em> 定义着重文字
<i> 定义斜体文字
<small> 定义小号字
<strong> 定义加重语气
<sub > 定义下标字
<sup > 定义上标字
<ins> 定义插入字
<del> 定义删除字
<s> 使用<del>代替
<strike> 使用<del>代替
<u> 使用样式 （style）代替
标签 描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<tt> 定义打字机代码
<var> 定义变量
<pre> 定义预格式文本
<listing > 使用<pre>代替
<plaintext> 使用<pre>代替
<xmp> 使用<pre>代替
标签 描述
<abbr> 定义缩写
<acronym> 定义首字母缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用语
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目

HTML文本格式化实例

<html>
<body>

<b>This text is bold</b>

<br/>

<strong>This text is strong</strong>

<br/>

<big>This text is big</big>
<br/>

<em>This text is emphasized</em>

<br/>

<i>This text is italic</i>

<br/>

<small>This text is small</small>

<br/>

This text contains
<sub>subscript</sub>

<br/>

This text contains
<sup>superscript</sup>

</body>
</html>


<html>
<body>
<pre>
这是预格式文本。
它保留了        空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
      print i

next i 
</pre>
</body>
</html>

<html>
<body>

<code>Computer code</code>
<br/>

<kbd>Keyboard input</kbd>
<br/>

<tt>Teletype text</tt>
<br/>

<samp>Sample text</samp>
<br/>

<var>Computer variable</var>
<br/>

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

<body>
</html>

<html>
<body>

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

</body>
</html>


<html>

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

<html>

<body>

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>


<html>

<body>

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>


<html>

<body>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>
</html>

HTML CSS

<html>

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>

<body>

<a href="/example/html/lastpage.html" style="text-decoration:none">
这是一个链接！
</a>

</body>
</html>


<html>

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

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>

</html>


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

<head>

<style type="text/css">

body {background-color:red}
p {margin-left:20px}

</style>

</head>

<p style="Color:red;margin-left:60px">
This is a paragraph
</p>
标签 描述
<style> 定义样式定义
<link> 定义资源引用
<div> 定义文档中的节或区域（块级）
<span> 定义文档中的行内的小块或区域
<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用，请使用样式。
<basefont> 定义基准字体，不赞成使用，请使用样式。
<center> 对文本进行水平居中，不赞成使用，请使用样式。

HTML链接

实例

<html>

<body>

<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

</body>
</html>


<html>

<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>


<html>

<body>

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

</body>

</html>


<html>
<body>

<p>
<a href="#C4">查看 chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla</p>

</body>
</html>

<html>

<body>

<p>被锁在框架中了吗？</p> 

<a href="/index.html"
target="_top">请点击这里！</a> 

</body>
</html>


<html>

<body>

<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

</body>
</html>


<html>

<body>

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

<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

</body>
</html>

HTML图像

<img src="url" />

<img src="boat.gif" alt="Big Boat">

图像标签

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

实例


<html>

<body>

<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>

<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>

<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>

</body>
</html>


<html>

<body>

<p>
来自另一个文件夹的图像：
<img src="/i/ct_netscape.jpg" />
</p>

<p>
来自 W3School.com.cn 的图像：
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</p>

</body>
</html>


<html>

<body background="/i/eg_background.jpg">

<h3>图像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面，图像会进行重复。</p>

</body>
</html>


<html>

<body>

<h2>未设置对齐方式的图像：</h2>

<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>

<h2>已设置对齐方式的图像：</h2>

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

</body>
</html>

<html>

<body>

<p>
<img src ="/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

<p>
<img src ="/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

</body>
</html>


<html>

<body>

<img src="/i/eg_mouse.jpg" width="50" height="50">

<br />

<img src="/i/eg_mouse.jpg" width="100" height="100">

<br />

<img src="/i/eg_mouse.jpg" width="200" height="200">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

</body>
</html>


<html>

<body>


<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>

<p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>

<img src="/i/eg_goleft.gif" alt="向左转" />

<p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>

<img src="/i/eg_goleft123.gif" alt="向左转" />

</body>
</html>

<html>

<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>


<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>



<html>

<body>

<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>

<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>

</body>
</html>

HTML表格

表格标签

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

实例

<html>

<body>

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="5">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="10">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>


<html>

<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="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>  
<table border="15">
<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> 定义定义的描述
<dir> 使用<ul>代替
<menu> 使用<ul>代替

实例

<html>

<body>

<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>


<html>
<body>

<h4>有序列表样式：</h4>

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 
</body>
</html>

HTML块

HTML分组标签

标签 描述
<div> 定义文档中的分区或节（division/section）
<span> 定义span，用来组合文档中的行内元素

HTML类


<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}   
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

</body>
</html>


<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}   
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

<div class="cities">
<h2>Paris</h2>

<p>Paris is the capital and most populous city of France.</p>

<p>Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.</p>

<p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>

<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>

</body>
</html>



<html>
<head>
<style>
span.red {
    color:red;
}
</style>
</head>

<body>

<h1>我的<span class="red">重要的</span>标题</h1>

</body>
</html>

HTML布局

<!DOCTYPE html>
<html>

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;          
}
#section {
    width:350px;
    float:left;
    padding:10px;        
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;      
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright ? W3Schools.com
</div>

</body>
</html>
语义元素 描述
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义details元素的标题 

<html>
<head>
<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td { 
    padding:10px;
}
table.lamp th {
    width:40px;
}

</style>
</head>

<body>
 
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>

</body>
</html>

HTML 响应式Web设计

<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>

<body>

<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

HTML框架

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

实例

<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>


<html>

<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

HTML内联框架（Iframe）

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

<html>
<body>

<iframe src="/example/html/demo_iframe.html" width="200" height="200"></iframe>

<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>

</body>
</html>


<html>
<body>

<iframe src="/example/html/demo_iframe.html" frameborder="0"></iframe>

<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>

</body>
</html>

<html>
<body>

<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>

</body>
</html>

HTML iframe 标签

标签 描述
<iframe> 定义内联的子窗口（框架）

HTML背景

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

实例

<html>

<body bgcolor="#d0d0d0">

<p>
这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。
</p>

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

</body>
</html>


html>

<body bgcolor="#ffffff" text="yellow">

<p>
这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。
</p>

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

</body>
</html>

HTML脚本

<script type="text/javascript">
document.write("Hello World!")
</script>

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
标签 描述
<script> 定义客户端脚本
<noscript> 为不支持客户端脚本的浏览器定义替代内容

HTML头部元素

<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

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

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

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

<meta name="keywords" content="HTML, CSS, XML" />
标签 描述
<head> 定义关于文档的信息
<title> 定义文档标题
<base> 定义页面上所有链接的默认地址或默认目标
<link> 定义文档与外部资源之间的关系
<meta> 定义关于HTML文档的元数据
<script> 定义客户端脚本
<style> 定义文档的样式信息

HTML字符实体

&entity_name;

或者

&#entity_number;

HTML 中有用的字符实体（实体名称对大小写敏感！）

HTML统一资源定位器

scheme://host.domain:port/path/filename
Scheme 访问 用于...
http 超文本传输协议 以http://开头的普通网页，不加密
https 安全超文本传输协议 安全网页，加密所有信息交换
ftp 文件传输协议 用于将文件下载或上传至网站
file 你计算机上的文件

HTML URL 字符编码

URL编码示例

字符 URL编码
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5

HTML Web Server

HTML颜色

HTML颜色名

HTML<!DOCTYPE>

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01快速参考

<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

<b>This text is bold</b>
<i>This text is italic</i>


<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

border="1">
<tr>
  <th>someheader</th>
  <th>someheader</th>
</tr>
<tr>
  <td>sometext</td>
  <td>sometext</td>
</tr>
</table>


<frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
</frameset>

<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>

 the same as <
&gt; is the same as >
&#169; is the same as ©

<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>

HTML表单

<form>
 .
form elements
 .
</form>
字符 URL编码
text 定义常规文本输入
radio 定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单） 
<!DOCTYPE html>
<html>
<body>

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

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

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

</body>
</html>



<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>
</html>



<form action="action_page.php">

<form action="action_page.php" method="GET">

或

<form action="action_page.php" method="POST">

action_page.php?firstname=Mickey&lastname=Mouse

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>


<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>
属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

HTML 表单元素

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<p>您可以通过 selected 属性预选择某些选项。</p>

<form action="/demo/demo_form.asp">
<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>
<br><br>
<input type="submit">
</form>

</body>
</html>


<html>

<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="alert('Hello World!')">点击我！</button>

</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读