html的基础知识
文档的基本结构
<!DOCTYPE html> <!-- 定义文本类型 -->
<html> <!-- html文件起始 -->
<head> <!-- html文件头部 -->
<meta /> <!-- meta中定义类型、编码、作者、时间、编辑器、重定向 -->
<title> 题目</title> <!--标题，在页面中不可见，显示在浏览器工具栏、添加收藏的标题、以及在浏览器搜索结果的显示 -->
<base href="" target="" /> <!-- 超链的默认地址href及打开方式target -->
<link rel="stylesheet" type="text/css" href="">
<!-- 定义文档与外部资源的关系，最常用来链接样式表-->
<script type="text/javascript"></script>
<!-- 动态脚本的定义 -->
<style>
</style> <!-- 定义元素的样式，可以采用不同类型的选择器 -->
</head>
<body> <!-- html页面可见部分 -->
<h1> 一级标题 </h1> <!-- h1 -> h6 标题 -->
<div> </div> <!-- 分节 -->
<p> </p> <!-- 分段 -->
</body>
</html> <!-- html文件结束 -->
脑图
html_基础的结构
常见元素
结构类
定义了文档的框架结构
-
<h1-6>块级元素，标题，1-6 字体逐渐减小 -
<p>块级元素，组织文本的段落 -
<div>块级元素其他元素的容器，常用来主旨章节；结合CSS设置样式；及文档布局 -
<span>内联元素，文本容器，结合CSS设置样式 -
<frameset> <frame> </frame> </frameset>将页面分栏显示不同的html文版 -
<iframe src=""></iframe>内连框架 -
<ul> <li>Coffee</li> <li>Milk</li> </ul>无序列表 -
<ol> <li>Coffee</li> <li>Milk</li> </ol>有序列表 -
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>自定义列表，dt为标题，dd为注释 其中
内容类
标签代表一类的特殊内容
-
<a href=""></a>超链接 -
<abbr>定义缩写，<abbr title="World Health Organization">WHO</abbr> -
<acronym>定义首字母缩写 -
<address>地址 -
<blockquote>块引用插入前后换行的外边距 -
<cite>定义引用和引证,<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p> -
图片 -
<q>短引用，内容加引号
计算机相关的内容类
-
<code>定义计算机代码。 -
<pre>适合定义计算机代码。 -
<kbd>定义键盘输入。 -
<samp>定义计算机代码样本。 -
<tt>定义打字机代码。 -
<var>元素定义数学变量： -
<pre>定义预格式文本。 -
<listing>不赞成使用。使用<pre>代替。 -
<plaintext>不赞成使用。使用<pre>代替。 -
<xmp>不赞成使用。使用<pre>代替。
修饰形容类
对内容或者格式起修饰和形容
-
<hr>横线 -
<del>删除线 -
<ins>下划线 -
<br>换行 -
<pre>预格式文本，保留格式，适合代码块
文本样式修饰类
-
<bdo>定义文字方向<bdo dir="rtl">This text will be written from right to left</bdo> -
<b>定义粗体文本。 -
<big>定义大号字。 -
<em>定义着重文字。 -
<i>定义斜体字。 -
<small>定义小号字。 -
<strong>定义加重语气。 -
<sub>定义下标字。 -
<sup>定义上标字。 -
<ins>定义插入字。 -
<del>定义删除字。 -
<s>不赞成使用。使用<del>代替。 -
<strike>不赞成使用。使用<del>代替。 -
<u>不赞成使用。使用样式（style）代替。
块级元素内联元素及嵌套
- 块级元素用来搭建网站架构、布局、承载内容，包括
div、ul、li、dl、dt、dd、h1~h6、p、address, etc- 内嵌元素 一般用在网站内容之中的某些细节或部位的定义与修饰，用以“强调、区分样式、上标、下标、锚点”等等，包括
a, sapn, strong, sub, sup, img, etc- 块元素和内嵌元素是可以相互转换的，如
display: block; /* 转成块元素 */,display: inline; /* 转成内嵌元素 */- 块级元素是盒子，不管里面有多少东西，外部可以设置其宽高; 内嵌元素是袋子其宽高由内部的东西撑起来。
- 嵌套规则
- 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
- 块级元素不能放在
<p>里面h1-6、p、dt只能包含只能包含内嵌元素，不能再包含块级元素- li 内可以包含 div 标签，li 和 div 标签都是装载内容的容器，地位平等，没有级别之分
- 块级元素与块级元素并列、内嵌元素与内嵌元素并列
<pre>标签不能包含<img>,<object>,<big>,<samll>,<sub>和<sup>标签
<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错
元素细节
超链
超链接可以文字或者图像，通过使用 href 属性 创建指向另一个文档的链接，通过使用 name 属性 创建文档内的书签
- 指向邮箱的链接，
<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> - 无下划线的超链，
<a href="/example/html/lastpage.html" style="text-decoration:none"> - 图片作为超链，
<a href="/example/html/lastpage.html">  </a> -
target = "_blank" or "showframe" or none指定打开文档的显示位置为 新窗口 或 框架 或 当前页面 -
target = "iframe_name"显示到指定的 iframe,<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> - 跳转当页面制定的锚点，制作目录 ,
<a name="tips">基本的注意事项 - 有用的提示 --创建锚点--</a> <a href="#tips">有用的提示，--本文档中跳转到书签--</a> <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示--UML中添加直接跳转--</a>
图片
- URL 可以是相对路径和绝对路径 ，
 -
alt替换文本，指定图片显示失败时的替换文本， - 嵌入图片与文字的竖直方向的对齐方式，
 middle top;水平方向的位置，<img src ="/i/eg_cute.gif" align ="left"> - 指定图片的大小
 - 图片的边框
border="0" - 带有可点击区域的图像映射
-
area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域 -
<img>中的usemap属性可引用<map>中的 id 或 name 属性（取决于浏览器），所以我们应同时向<map>添加 id 和 name 属性。
-
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
列表
无序列表
- 基本用例
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- 项目符号
<ul type="disc"> </ul>, 或 “circle” 或 “square”
有序列表
- 基本用例
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- 项目编号
<ol type="A"> </ol>, 或 “a”, “I”, “i”
自定义列表
- 基本用例
<dl>
<dt>Coffee</dt> <!-- 项目 -->
<dd>Black hot drink</dd> <!-- 注释-->
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
通用属性
元素的通用属性 - accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone
- accesskey 定义快捷键
<body>
<!--
accesskey - 用于定义快捷键。快捷键为：alt + accesskey，参考第一个示例
第二个示例描述为：有全键盘的设备快捷键为：ctrl + alt + q（目前 IE 为：ctrl + shift + q），仅有小键盘的设备快捷键为：“数字 0 键”
-->
<a accesskey="w" href="http://webabcd.cnblogs.com/">webabcd blog</a>
<a accesskey="q 0" href="http://webabcd.cnblogs.com/">webabcd blog</a>
</body>
style 定义样式
<span style="font-size:36px; color:Blue">webabcd</span>class 指定需要应用的 css 类选择器
<html>
<head>
<title>class</title>
<style>
.myClass { font-size:36px; }
.myClass2 { color:Blue; }
</style>
</head>
<body>
<!--
class - 指定需要应用的 css 类选择器
-->
<span class="myClass myClass2">webabcd</span>
</body>
</html>
- title 描述文档信息
<body>
<!--
title - 用于描述元素信息，相当于 ToolTip
-->
<a title="webabcd" href="http://webabcd.cnblogs.com/">webabcd blog</a>
</body>
- id 用于定义元素的唯一标识，主要给 DOM 用，
id与name的区别
W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
<body>
<!--
id - 用于定义元素的唯一标识，主要给 DOM 用
-->
<a id="myId" href="http://webabcd.cnblogs.com/">webabcd blog</a>
<script type="text/javascript"> alert(document.getElementById('myId').innerHTML); </script>
</body>
- dir 文本排列方向，可能的值有：auto|ltr|rtl
<body>
<!--
bdo - 定义文本排列的方向（bdo 是 bi-directional override 的缩写）
dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的缩写）
-->
<bdo dir="rtl">123</bdo>
</body>
- spellcheck - 是否使用浏览器的拼写检查功能对元素内的内容做拼写检查
- hidden - 用于隐藏元素
- contenteditable - 用于定义内容是否可编辑
- ontextmenu - 指定上下文菜单的数据源
- draggable - 元素是否可拖拽；dropzone - 拖放的目标元素
脚本
-
<script>标签用于定义客户端脚本，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script>-
<noscript>标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。 - 如果浏览器压根没法识别
<script>标签，那么<script>标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别<script>标签的浏览器）将忽略这些注释，而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
- 待深入
附录
meta 中定义类型、编码、作者、时间、编辑器、重定向
- 类型和编码格式
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> - 作者
<meta name="author" content="w3school.com.cn"> - 审核
<meta name="revised" content="David Yang,8/1/07"> - 编辑软件
<meta name="generator" content="Dreamweaver 8.0en"> - 重定向
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> </head> - 针对搜索引擎的，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面
- 关键字
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> - 描述
<meta name="description" content="HTML examples">
- 关键字
URL统一资源定位符
- 统一资源定位器（URL）用于定位万维网上的文档（或其他数据）,样式为
scheme://host.domain:port/path/filenamescheme包含http(超文本传输协议), 以 http:// 开头的普通网页。不加密; https(安全超文本传输协议) 安全网页。加密所有信息交换; ftp(文件传输协议)用于将文件下载或上传至网站; file 浏览本地计算机上的文件。- 编码; URL 只能使用 ASCII 字符集来通过因特网进行发送, 使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符,
+来替换空格
字符实体
某些符号是预留的，如果需要显示采用字符实体，
&entity_name;或&#entity_name;
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分（cent） ¢ ¢
£ 镑（pound） £ £
¥ 元（yen） ¥ ¥
€ 欧元（euro） € €
§ 小节 § §
© 版权（copyright）© ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
