学习HTML | wanpiqiu123's Blog

学习HTML做的一些记录

以下所有内容均来自于 W3school

标题

1	<h1>This is a heading</h1>

段落

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

链接

1 2	<a href="http://wanpiqiu123.github.io">This is a link</a> <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> 这个会让链接在新窗口显示

图像

1	<img src="hello.jpg" width="233" height="233" />

水平线

<hr/>

换行

1 2	<br/> <p>This is a paragraph <br/> with a break </p>

注释

1	<!-- This is a comment -->

样式

1
2
3

<h2 style="background-color:red">This is a heading</h2>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<p>The heading above is aligned to the center of this page.</p>

格式化

<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
This text contains<sub>subscript</sub>
This text contains<sup>superscript</sup>

预格式文本

<pre>
for i = 1 to 10
     print i
next i
</pre>

缩写

1 2	<abbr title="etcetera">etc.</abbr> 缩写 <acronym title="World Wide Web">WWW</acronym> 首字母缩写

文字方向

1
2
3

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

这个可以让文字从右到左输出

邮件

Written by <a href="mailto:mailadress@example.com">Leo</a>.

<a href="mailto:someone@microsoft.com?subject=Hello%20again">这种形式包括主题的邮件</a> 这里%20用来代替空格

<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> 这里%20用来代替空格

删除线/下划线

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

引用

<blockquote>
    这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
<q>这是短的引用。</q>
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

1
2
3

<a name="tips">显示的文字</a>
<!-- 中间一些东西 -->
<a href="#tips">访问之前的位置</a>

图片位置相关

<p>图像 <img src="example.jpg" align="bottom"> 底部对齐文字底部</p>
<p>图像 <img src ="example.jpg" align="middle"> 中部对齐文字中部</p>
<p>图像 <img src ="example.jpg" align="top"> 顶部对齐文字顶部</p>

<p><img src ="example.jpg" align ="left"> 左对齐</p>

<img src="example.jpg" width="100" height="100"> 设置大小

<a href="/example/html/lastpage.html">
<img border="0" src="example.jpg" />
</a> 图片作为链接使用

<img src="example.jpg" alt="替代文字" />

表格

水平表头

<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Leo</td>
  <td>233233</td>
  <td>233233</td>
</tr>
</table>

垂直表头

<table border="1">
<tr>
  <th>姓名</th>
  <td>Leo</td>
</tr>
<tr>
  <th>电话</th>
  <td>233233</td>
</tr>
<tr>
  <th>电话</th>
  <td>233233</td>
</tr>
</table>

空表元素

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td> 这个作为空表元素
<td>row 2, cell 2</td>
</tr>
</table>

添加标题

1
2
3

<table>
<caption>标题</caption>
</table>

添加单元格边距

1
2
3

<table border="1" 
cellpadding="10">
</table>

添加单元格间距

1
2
3

<table border="1" 
cellspacing="10">
</table>

单元格背景图片

1
2
3

<table border="1" 
background="/i/eg_bg_07.gif">
</table>

单个单元格背景

<table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td 
  background="example.jpg">
  Second</td>
  <td>Row</td>
</tr>
</table>

表格内对齐

<table width="400" border="1">
 <tr>
  <th align="left">消费项目</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
</table>

表格边框

<table frame="box"> 方框
<table frame="above"> 上加线 
<table frame="below"> 下加线
<table frame="hsides"> 上下加线
<table frame="vsides"> 左右加线

列表

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

定义列表

<dl>
<dt>Coffee</dt> dt表示项目
<dd>Black hot drink</dd> dd表示说明项目
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

嵌套列表

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>