1、HTML基础总结 part-1

1、基本标签属性

 1 <html>
 2 <!--属性和属性值对大小写不敏感。
 3 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
 4 而新版本的 (X)HTML 要求使用小写属性。
 5  -->
 6
 7 <body>
 8
 9 <!-- hello this is a comment-->
10
11 <h1 align="left">This is heading 1</h1>
12 <h2 align="center">This is heading 2</h2>
13 <h3 align="right">This is heading 3</h3>
14 <h4>This is heading 4</h4>
15 <h5>This is heading 5</h5>
16 <h6>This is heading 6</h6>
17
18 <hr><!--绘制水平线-->
19
20 <a href="http://www.baidu.com"> link_baidu </a>
21
22 <br>
23 <body bgcolor="#e6e6e6">
24
25
26 <p> this is paragraph 1 </p>
27 <p> this is paragraph 2 </p>
28 <p> this is paragraph 3 </p>
29
30 <img src="/i/eg_w3school.gif"/>
31 <img src="/i/eg_w3school.gif" width="400" height="150" />
32 <br/>
33 <br/>
34 <br/>
35
36
37 normal
38 <br/>
39 <b> bold </b>
40 <br/>
41 <strong> strong </strong>
42 <br/>
43 <big> big font </big>
44 <br/>
45 <small> small font </small>
46 <br/>
47 <i> italic font </i>
48 <br/>
49 what's the  <sub> fuck </sub>
50 <br/>
51 what's the  <sup> fuck </sup>
52 <br/>
53 <i> what's the  <sup> fuck </sup> </i>
54
55 <p>pre 标签很适合显示计算机代码：</p>
56
57 <pre>
58 for i = 1 to 10
59      print i
60 next i
61 </pre>
62
63 </body>
64 </html>

2、始终为属性值加引号

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

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

3、h标签只用于标题

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

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

4、HTML 折行

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

5、<br> 还是 <br />

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

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

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

6、计算机输出标签

 1 <br />
 2 <code>Computer code </code>
 3 <br />
 4 <kbd>Keyboard input </kbd>
 5 <br />
 6 <tt>Teletype text </tt>
 7 <br />
 8 <samp>Sample text</samp>
 9 <br />
10 <var>Computer variable</var>
11 <br />

7、地址输入

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

8、文字方向

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

9、块引用

 1 这是长的引用：
 2 <blockquote>
 3 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
 4 </blockquote>
 5
 6 这是短的引用：
 7 <q>
 8 这是短的引用。
 9 </q>
10
11 <p>
12 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
13 </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>

</head>

内部样式表

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

<head>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式

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

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>

<ul>

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

转载于:https://www.cnblogs.com/kunyashaw/p/5276646.html

1、HTML基础总结 part-1相关推荐

java入门慕路径,Java入门基础知识总结学习教程大全【必看经典】
类型的表达式,是循环条件,表达式3是党执行了一遍循环之后,修改控制循环的变量值. ??? for语句的执行过程是这样的:首先计算表达式1,完成必要的初始化工作:然后判断表达式2的值,如果表达式的值为t ...
提交表单自动刷新_Web自动化测试：元素的基础操作和浏览器基础操作
上一节,我们了解了如何定位元素,其实也有涉及对于元素的操作,这一节我们就详细的介绍一下对于元素的操作和对于浏览器的一些操作一.对于元素的基础操作: clear():清除输入框内的文本 send_ke ...
java mybatis基础
java mybatis基础 1.1 什么是mybatis? mybatis是一个优秀的持久层框架. 避免几乎所有的JDBC代码和手动设置参数以及获取结果集的过程. 可以使用简单的xml或者注解来配置 ...
【J2SE】学习基础
Java基础语法基础 OO Exception Array 基础类 I/O Stream Collection/Generic Thread TCP/UDP GUI Meta Data Regula ...
【Linux系统】基础总结
我不太清楚运维部门具体是做什么的,就接触过一点点运维部门! 也就是是知道他们负责管理服务器,管理网络,管理项目部署偶尔自己需要部署,不得不接触一些linux命令.简单总结一些基础 linux系统发展 ...
【Java 2 Platform Enterprise Edition】基础
问题1:为什么java是无关平台? 你之前用C或者C++写的源代码,编译好后,换一种操作系统,可能就执行不了了.因为新的操作系统不识别,你需要修改你的源码,并在新的操作系统上重新编译才能运行,比如Wi ...
SpringCloud Alibaba微服务实战(一) - 基础环境搭建
说在前面 Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,方便开发者通过 Spring Cloud 编程模型轻松使用这些组件来 ...
Redis概述和基础
Redis 1.NoSQL NoSQL = Not Only SQL(不仅仅是SQL) 泛指非关系型数据库的,随着web2.0互联网的诞生!传统的关系型数据库很难对付web2.0时代!尤其是超大规模的 ...
pass基础架构分析
pass基础架构分析 Relay 和 TVM IR,包含一系列优化passes,可提高模型的性能指标,如平均推理,内存占用,或特定设备的功耗.有一套标准优化,及特定机器学习的优化,包括常量折叠,死代码 ...
LLVM编译器基础架构与DragonEgg示例
LLVM编译器基础架构与DragonEgg示例 LLVM 概述 LLVM 项目是模块化和可重用的编译器和工具链技术的集合.LLVM 与传统的虚拟机几乎没有关系."LLVM"这个名字 ...

1、HTML基础总结 part-1

1、HTML基础总结 part-1相关推荐

最新文章

热门文章