HTML代码教程

好了,啥也别说,我是Dr.Mark-Long,我在本页整理了我能收集到的html代码,这非常好玩!

注意!html代码的标签必须是成对出现的!<标签></与前相同的标签>

<!DOCTYPE html><!--html代码需要这一小段-->
<html>
<head>
<meta charset="utf-8">
</head>
<tittle>
by Dr.Mark-Long-----HTML
</tittle>
<body>
<h1><b>本HTML代码集为DR.MARK-LONG整理,请勿进行改动。内容可取用</b></h1>
</body>
</html>

<!DOCTYPE html>
<html lang="zh" dir="ltr" class="inited">
<head>
</head>
<body>
<p>恕我直言,这个段落真的,字比wiki里面大多了!</p>
-----------------------------

    <h1>1级标题</h1>
------------------------

    <h6>6级标题</h6><!--还有h2,h3,h4,h5-->
--------------------------

    <p>段落</p>
--------------------

   <p style="font-family:arial;color:white;font-size:20px;">白色</p><!--看到color了吗?冒号后的颜色用英文或编码替换-->
---------------------------------------------

    <a href="http://scp-wiki-cn.wikidot.com/">这是一个链接,前往SCP官网</a>
---------------------------------------------------------------------------------

    <img src="http://scpsandboxcn.wikidot.com/local--files/dr-mark-long/Cave.jpg" width="400" height="400"><p>图片插入</p>
------------------------------------

    <!--看不到的注释-->
--------------------------------------------

    <p> 定义水平线:</p>
    <hr>
    <p>这是一个段落。</p>
    <hr>
    <p>这是第二个段落。</p>
    <hr>
    <p>这是第三个段落。</p>
-----------------------------------------

    <p>这个<br>段落<br>演示了分行的效果</p>
-------------------------------------------

<b>这个文本是加粗的</b>

<br />

<strong>这个文本是加粗的</strong>

<br />

<big>这个文本字体放大</big>

<br />

<em>这个文本是斜体的</em>

<br />

<i>这个文本是斜体的</i>

<br />

<small>这个文本是缩小的</small>

<br />

这个文本包含
<sub>下标</sub>

<br />

这个文本包含
<sup>上标</sup>
---------------------

<pre>
这个空格     应该可以吧
</pre>
---------------

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />       
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<!--他们代表的文本字体其实是不一样的,用来区别你写的东西用的,这些标签常用于显示计算机/编程代码。-->
--------------------------------------------------------------------------------------------------

<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>
<!--举个例子,以上为写地址,里面的网址需替换为邮箱地址,记得每段后加br呀-->
------------------------------------------------------------------------------

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<!--在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。-->
<!--仅对于 IE 5 中的 acronym 元素有效。-->
<!--对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。-->
-----------------------------------------------------------------------

<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  
​<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<!--长短不一的引用语-->
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<!--删除线与下划线-->

-------------

以下是高级div
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>

<h3>Look! Styles and colors</h3>

<div style="letter-spacing:12px;">Manipulate Text</div>

<div style="color:#40B3DF;">颜色
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>

<div style="color:#000000;">HTML Style 元素。还可设置更多!里面的那些变量分别是长宽高这些的设定具体我还要研究,颜色可使用英文、编码</div>

</div>

-------------------

背景色!
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
<!--color后面的可以替换-->

--------------------

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<!--似乎颜色重复了,但所有冒号后的元素可以替换,family后是字体(1),size后是大小(见后2)-->

2.字体设置,元素可替换,需实验
<h1 style="font-family:verdana">verdana字体</h1>
<p style="font-family:courier">courier字体</p>

1.<p style="font-size:110%">This is a paragraph.</p><!--110%可替换-->
---------------------------

<h1 style="text-align:center;">居中对齐的标题</h1>
<!--align后的可以换成left、right-->
---------------------------
一个使用head修改颜色(较高级)的例子
<head>
<style type="text/css">
h1 {color:red;}<!--颜色可替换,并应用于所有字(如此处的h1)-->
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
------------------
不带下划线的连接
<a href="//www.runoob.com/" style="text-decoration:none;">我学习代码的网站!runoob.com!</a>
-----------------
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>

注释:

Dr.Mark-Long 20:35:20

这个CSS是。。

白岩(Whlie rock) 20:35:37
声明meta

白岩(Whlie rock) 20:35:40
也就是基础

白岩(Whlie rock) 20:35:42
基于什么

白岩(Whlie rock) 20:35:47
这是基于中文声明

白岩(Whlie rock) 20:35:58
第二个是链接

Dr.Mark-Long 20:36:12
额,连接到哪

白岩(Whlie rock) 20:36:31
链接CSS文本

白岩(Whlie rock) 20:36:39
type表示类型

白岩(Whlie rock) 20:36:51
href是链接到的文本

Dr.Mark-Long 20:36:52
哦,所以不用自己弄?雾

白岩(Whlie rock) 20:36:59
需要的

白岩(Whlie rock) 20:37:03
需要自己声明

白岩(Whlie rock) 20:37:13
只是这个是基于站内的服务器的东西

Dr.Mark-Long 20:37:15
啊,好的,所以是引用对把

白岩(Whlie rock) 20:37:18
所以没有写出声明

白岩(Whlie rock) 20:37:25
和SCP基金会的引用一个道理

Dr.Mark-Long 20:37:27
引用网站内自带的

Dr.Mark-Long 20:37:32
明白

白岩(Whlie rock) 20:37:34
对
--------------------------------------
连接部分
<p>
<a href="/index.html">本文本</a> 是一个指向菜鸟网站中的一个页面的链接。</p>

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

<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
                          ↑
                      可换成网址
<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

<p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 8</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 9</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 10</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 11</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 12</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 13</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 14</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 15</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 16</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 17</h2>
<p>这边显示该章节的内容……</p>
<!-- <a href="#C*"></a> <a id="C*"></a>-->

<p>跳出框架?</p>
<a href="//www.runoob.com/" target="_top">点击这里!</a>

<p>
这是一个电子邮件链接:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

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

<p>
<b>注意:</b> 单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。
</p>
--------------------------------------------
图片插入src后面是地址!alt是引用图的名字!

插入图像
从不同的位置插入图片
排列图片
本例演示如何使图片浮动至段落的左边或右边。
制作图像链接
创建图像映射

<p>
一个图像:
<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>

<p>
一个动图:
<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>

<p>
注意插入动图的语法和静态图的语法是一样的。
</p>

<p>一个来自文件夹中的图像:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p>
<img src="//www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边。
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS float 属性,在HTML 4 中 float 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p>

<p>点击太阳或其他行星,注意变化:</p>

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

<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">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
-----------------------------------------
HTML 表格

简单的表格
没有边框的表格
表格中的表头
带有标题的表格
跨行或跨列的表格单元格
表格内的标签
单元格边距(Cell padding)
单元格间距(Cell spacing)

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

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

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

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

<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

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

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

--------------------
HTML 列表

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h4>有序列表</h4>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<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>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<p><b>注意:</b> 在 HTML 4中 ul 属性已废弃,HTML5 已不支持该属性,因此我们使用 CSS 代替来定义不同类型的无序列表如下:</p>
​
<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</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

<h4>嵌套列表:2</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>

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

<p><b>注意:</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
​
<p><b>注意:</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>

<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
<p>多选<p>

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
​
<p><b>注意:</b>当点击一个单选按钮时,它就会被选中,其他同名的单选按钮就不会被选中。</p>

​
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<!--下拉列表-->

<form action="">
<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>
</form>
<!--预选下拉列表,预选的项后加selected-->

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

<form action="">
<input type="button" value="这是按钮">
</form>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
<!--本例演示如何在数据周围绘制一个带标题的框。-->

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
​
<p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>

<form action="demo-form.php" method="get">
  <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>
​<!--带有复选框与提交按钮的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="提交">
</form>

发送邮件表单:
<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>

--------------------------------

内联框架:
<iframe src="//www.runoob.com">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

​------------------------------

<head>
<meta charset="utf-8">
<title>吧啦啦啦</title>
<base href="//www.runoob.com/images/" target="_blank">
</head>
​
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
</head>
<body>

<p>所有 meta 标签显示在 head 部分...</p>

------------------
<script>
document.write("Hello World!")
</script>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
​
<p>不支持 JavaScript 的浏览器会使用 &lt;noscript&gt; 元素中定义的内容(文本)来替代。</p>

​
​
</body></html>




感谢观看,如果运行后存在bug,请自行联系Dr-Mark longDr-Mark long
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License