1、基本标签属性

 <html>

 <!--属性和属性值对大小写不敏感。

 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

 而新版本的 (X)HTML 要求使用小写属性。

  -->

 <body>

 <!-- hello this is a comment-->

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

 <h2 align="center">This is heading 2</h2>

 <h3 align="right">This is heading 3</h3>

 <h4>This is heading 4</h4>

 <h5>This is heading 5</h5>

 <h6>This is heading 6</h6>

 <hr><!--绘制水平线-->

 <a href="http://www.baidu.com"> link_baidu </a>

 <br>

 <body bgcolor="#e6e6e6">

 <p> this is paragraph 1 </p>

 <p> this is paragraph 2 </p>

 <p> this is paragraph 3 </p>

 <img src="/i/eg_w3school.gif"/>

 <img src="/i/eg_w3school.gif" width="400" height="150" />

 <br/>

 <br/>

 <br/>

 normal

 <br/>

 <b> bold </b>

 <br/>

 <strong> strong </strong>

 <br/>

 <big> big font </big>

 <br/>

 <small> small font </small>

 <br/>

 <i> italic font </i>

 <br/>

 what's the  <sub> fuck </sub>

 <br/>

 what's the  <sup> fuck </sup>

 <br/>

 <i> what's the  <sup> fuck </sup> </i>

 <p>pre 标签很适合显示计算机代码：</p>

 <pre>

 for i = 1 to 10

      print i

 next i

 </pre>

 </body>

 </html>

2、始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

3、h标签只用于标题

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

4、HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签

5、<br> 还是 <br />

您也许发现 <br> 与 <br /> 很相似。

在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

6、计算机输出标签

 <br />

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

7、地址输入

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

8、文字方向

<p>

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

</p>

<bdo dir="rtl">

Here is some Hebrew text

</bdo>

9、块引用

 这是长的引用：

 <blockquote>

 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

 </blockquote>

 这是短的引用：

 <q>

 这是短的引用。

 </q>

 <p>

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

 </p>

10、格式化总结

文本格式化标签

标签

描述

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

定义一个定义项目。

11、如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

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

</head>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

12、在新标签打开一个连接

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

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

13、页面跳转

<p>

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

</p>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>

<p>This chapter explains ba bla bla</p>

14、邮件链接

<p>

这是邮件链接：

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

</p>

<p>

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

</p>
<a href="mailto:kunyashaw@gmail.com

?cc=chaosong@163.com

&bcc=misong@126.com

&subject=testTheme

&body=welcomeToBeijing">发送</a>

15、图像排列

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

<p>图像 <img align="bottom" src ="/i/eg_cute.gif">下边（也是默认） 在文本中</p>

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

<p>图像 <img align="left" src ="/i/eg_cute.gif"> 文字左边</p>

<p>图像 <img align="right" src ="/i/eg_cute.gif"> 文字右边</p>

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

16、表格-1



<html>




<body>




<h4>这个表格有一个标题，以及粗边框：</h4>




<html>




<body>




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




<h4>一列：</h4>
<table border="1">
<caption>我的标题</caption>




<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">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
</tr>




<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
<td>




<ul>




<li> test1 </li>
<li> test2 </li>
<li> test3 </li>




</ul>




</td>




</tr>




</table>




</body>
</html>


 




17、表格-2




<html>

<body>

<h4>横跨两列的单元格：</h4>

<table border="1">

<tr>

  <th>姓名</th>

  <th colspan="2">电话</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>姓名</th>

  <td>Bill Gates</td>

</tr>

<tr>

  <th rowspan="3">电话</th>

  <td>555 77 854</td>

</tr>

<tr>

  <td>555 77 855</td>

</tr>

<tr>

  <td>555 77 856</td>

</tr>

</table>

</body>

</html>






18、表格-3




<html>

<body>

<table width="400" border="1">

 <tr>

  <th align="left">消费项目....</th>

  <th align="right">一月</th>

  <th align="right">二月</th>

 </tr>

 <tr>

  <td align="left">衣服</td>

  <td align="right">$241.10</td>

  <td align="right">$50.20</td>

 </tr>

 <tr>

  <td align="left">化妆品</td>

  <td align="right">$30.00</td>

  <td align="right">$44.45</td>

 </tr>

 <tr>

  <td align="left">食物</td>

  <td align="right">$730.40</td>

  <td align="right">$650.00</td>

 </tr>

 <tr>

  <th align="left">总计</th>

  <th align="right">$1001.50</th>

  <th align="right">$744.65</th>

 </tr>

</table>

<h4>没有 cellpadding：</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">

<tr>

  <td bgcolor="red">First</td>

  <td>Row</td>

</tr>

<tr>

  <td

  background="/i/eg_bg_07.gif">

  Second</td>

  <td>Row</td>

</tr>

</table>

<h4>带有 cellpadding：</h4>

<table border="1" cellpadding="20" cellspacing="10">

<tr>

  <td>First</td>

  <td>Row</td>

</tr>

<tr>

  <td>Second</td>

  <td>Row</td>

</tr>

</table>

<h4>背景颜色：</h4>

<table border="1"

bgcolor="red">

<tr>

  <td>First</td>

  <td>Row</td>

</tr>

<tr>

  <td>Second</td>

  <td>Row</td>

</tr>

</table>

<h4>背景图像：</h4>

<table border="1"

background="/i/eg_bg_07.gif">

<tr>

  <td>First</td>

  <td>Row</td>

</tr>

<tr>

  <td>Second</td>

  <td>Row</td>

</tr>

</table>

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>

<table frame="box">

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

</table>

<p>Table with frame="above":</p>

<table frame="above">

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

</table>

<p>Table with frame="below":</p>

<table frame="below">

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

</table>

<p>Table with frame="hsides":</p>

<table frame="hsides">

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

</table>

<p>Table with frame="vsides":</p>

<table frame="vsides">

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

</table>

</body>

</html>




19、列表




<html>

<body>

<h4>Disc 项目符号列表：</h4>

<ul type="disc">

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ul>  

<h4>Circle 项目符号列表：</h4>

<ul type="circle">

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ul>  

<h4>Square 项目符号列表：</h4>

<ul type="square">

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ul>  

<h4>数字列表：</h4>

<ol>

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol>  

<h4>字母列表：</h4>

<ol type="A">

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol>  

<h4>小写字母列表：</h4>

<ol type="a">

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol>  

<h4>罗马字母列表：</h4>

<ol type="I">

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol>  

<h4>小写罗马字母列表：</h4>

<ol type="i">

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol>  

<h4>一个嵌套列表：</h4>

<ul>

  <li>咖啡</li>

  <li>茶

    <ul>

    <li>红茶</li>

    <li>绿茶</li>

    </ul>

  </li>

  <li>牛奶</li>

</ul>

<h2>一个定义列表：</h2>

<dl>

   <dt>计算机</dt>

   <dd>用来计算的仪器 ... ...</dd>

   <dt>显示器</dt>

   <dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

</body>

</html>


												


											
1、HTML基础总结 part-1的更多相关文章
	

    
						
  1. java基础集合经典训练题
		
    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
    
		
    2. 
						
  2. node-webkit 环境搭建与基础demo
		
    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...
    
		
    3. 
						
  3. js学习笔记：webpack基础入门（一）
		
    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
    
		
    4. 
						
  4. Golang， 以17个简短代码片段，切底弄懂 channel 基础
		
    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
    
		
    5. 
						
  5. [C#] C# 基础回顾 - 匿名方法
		
    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在  ...
    
		
    6. 
						
  6. HTTPS 互联网世界的安全基础
		
    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
    
		
    7. 
						
  7. Swift与C#的基础语法比较
		
    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
    
		
    8. 
						
  8. .NetCore MVC中的路由（1）路由配置基础
		
    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
    
		
    9. 
						
  9. .NET基础拾遗（5）多线程开发基础
		
    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
    
		
    10. 
						
  10. .NET 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]
		
    方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. js学习的一些想法（有一些来自网络）
			
    javascript开发最佳实践学习 1.给变量和函数命名--变量名和函数名尽量简短 好的变量命名应该是简短易懂的,还有需要避免的陷阱就是在命名中将数值与功能结合. 匈牙利命名法就是一个不错的选择,也 ...
    
			
    2. 
						
  2. 【迷你微信】基于MINA、Hibernate、Spring、Protobuf的即时聊天系统：10.项目介绍之架构（2）
			
    欢迎阅读我的开源项目<迷你微信>服务器与<迷你微信>客户端 前言 前面我们讲到<迷你微信>服务器端的主架构,现在我们来描述一下它的模块详细信息. 网络模块 从上图我 ...
    
			
    3. 
						
  3. MvvmCross框架在XamarinForms中的使用入门
			
    做XamarinForms快一年了,最近趁着项目不是很紧,有点空闲的时间,研究了一下MvvmCross这个框架,感觉挺高大上的.一边研究一下写点入门的东西吧,大部分的东西github都有. 1添加Pa ...
    
			
    4. 
						
  4. centos7.3.1611安装及初始配置
			
    安装前规划: 主机名称 网络配置 分区配置 分区配置 自定义分区,标准分区 /boot 200M (可选) swap 内存1.5倍到2倍(不大于8G) / 根分区(100G到200G) 其余的备用(数 ...
    
			
    5. 
						
  5. 修复SQL中的孤立账户
			
    EXEC sys.sp_change_users_login 'AUTO_FIX','登录名',NULL,'登录密码'
    
			
    6. 
						
  6. 安装percona工具包
			
    1.安装percona源 sudo yum install http://www.percona.com/downloads/percona-release/redhat/0.1-4/percona- ...
    
			
    7. 
						
  7. IOS 自定义Layer(图层)
			
    方式1: @interface NJViewController () @end @implementation NJViewController - (void)viewDidLoad { [sup ...
    
			
    8. 
						
  8. ActiveX插件的Z-Index属性无效问题解决
			
    在Web开发中我们经常通过z-index设置多个元素之间的层叠关系,这种方式在多数情况下很有效,但是如果遇到有窗体元素时这种方式常常显得无能为力,今天我们就一块看一下如何有效的解决这个问题. 在Web ...
    
			
    9. 
						
  9. POJ 2229 Sumsets（递推，找规律）
			
    构造,递推,因为划分是合并的逆过程,考虑怎么合并. 先把N展开成全部为N个1然后合并,因为和顺序无关,所以只和出现次数有关情况有点多并且为了避免重复,分类,C[i]表示序列中最大的数为2^i时的方案数 ...
    
			
    10. 
						
  10. ZOJ-1654 Place the Robots---二分图最小点覆盖+构图
			
    题目链接: https://vjudge.net/problem/ZOJ-1654 题目大意: 有一个N*M(N,M<=50)的棋盘,棋盘的每一格是三种类型之一:空地.草地.墙.机器人只能放在空 ...
    
			
    11.