－－－－－－－－html基本标签／Tags－－－－－－－
基本布局元素
<html></html> html文档的根标签
<head></head> 装meta元素的容器，meta元素是不被显示的
<body></body> 文档的主要内容
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 标题们／headings
<hr> 空标签，段落分割线
<br> 空标签，换行
`` 评论
<>
文本
<p></p> 段落（不必要的空格会被去除）
<pre></pre> 预格式化文本，显示空格和回车
特殊文本
<q></q> 用双引号引用一句话
<blockquote></blockquote> 引用一段话，缩进
<abbr title="World Health Organization">WHO</abbr> 为缩写WHO写提示，鼠标移动到上面的时候会显示
<address></address> 用于注明作者以及地址，通常会在地址之前画一条横线
<cite></cite> 作品名称，显示时与斜体相同
<bdo>File | Open...</bdo> 文字从右到左／bi-directional
代码格式
<kbd></kbd> 键盘输入
<samp>demo.example.com login: Apr 12 09:10:17Linux</samp> 代码输出
<code></code> 程序
<var></var> 在数学公式或者代码中，表达变量，显示时与斜体相同
<iframe></iframe> 在网页中展示网页，内联元素，
举例一： <iframe src="URL"></iframe>
CSS：height，width，border:（none / 2px solid grey）
举例二：iframe可以作为target属性的内容。
<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe>
<p> <a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a> </p>
文字
<b></b> 文字风格：粗体／Bold text
<strong></strong> 文字风格：重要，显示时与粗体相同／Important text
<i></i> 文字风格：斜体／Italic text
<em></em> 文字风格：强调，显示时与斜体相同／Emphasized text
<mark></mark> 文字风格：标记，黄色高亮／Marked text
<small></small> 文字风格：小／Small text
<del></del> 文字风格：已删除／Deleted text
<ins></ins> 文字风格：插入，显示下划线／Inserted text
<sub></sub> 文字风格：下标／Subscript text
<sup></sup> 文字风格：上标／Superscript text
添加CSS属性
style="..." inline：不需要标签，以属性的形式存在
<style></style> internal CSS
<link></link> external CSS file
－－－－－－－－ HTML · 列表 · List －－－－－－－
－ 无序列表：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
⚠️ 注意： < ul style=" list-style-type: ..." > 列表前面的标记，可选的有默认的disc（实心圆），circle（空心圆），square（实心正方体），none（无标记）
－ 有序列表：
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
⚠️ 注意：<ol type="..."> 有序列表排序方式：1（数字排序），A（大写字母排序），a（小写字母排序），I（大写罗马数字排序），i（小写罗马数字排序），
－－－－－－－－ HTML · 描述性列表 · Description List －－－－－－－
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
描述性列表
首先，语法格式： <tagname style="Attribute:Value;">，以下属性都省略style=";"格式
－－－－－－－－ HTML · 颜色 －－－－－－－
background-color:#FFF; 背景颜色 #FFF, red, #8C8C8C
color:#FFF; 文字颜色 #FFF, red, #8C8C8C
表达方式：颜色
HTML标准颜色: Standard color
RGB-Vaule: color:rgb(255,0,0)
HEX-Vaule: color:#808080;
－－－－－－－－ HTML · 文字 －－－－－－－
color:#FFF; 文字颜色 #FFF, red, #8C8C8C
font-family:courier; 字体 courier
font-size:300%; 文字大小 300%, 20dp
text-align:center; 布局方式 center, left, right
－－－－－－－－ HTML · 链接 －－－－－－－
href:
1）HTML链接：<a href="*url*">*link text*</a>
2）本地链接<a href="html_images.asp">HTML Images</a>
3）用链接制作书签：
首先，新建书签：
<h2 id="tips">Useful Tips Section</h2>
然后，在该标签中添加书签：
<a href="#tips">Visit the Useful Tips Section</a>
被添加的书签，可以是从其它网页的：
<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
-> 链接的颜色和样式是可修改的：
<style>
a:link {
color:green;
background-color:transparent;
text-decoration:none}
a:visited {
color:pink;
background-color:transparent;
text-decoration:none}
a:hover {
color:red;
background-color:transparent;
text-decoration:underline}
a:active {
color:yellow;
background-color:transparent;
text-decoration:underline}
</style>
修改链接目标／target
该属性决定，链接打开的方式！
_blank Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
例子： <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
－－－－－－－－ HTML · 图片 －－－－－－－
语法：<img src="url" alt="some_text" style="width:XXX px;height:XXX px;">
（1）alt=" " 图片不显示的时候
（2）src=" " 图片来源
－ 图片在另一个文件夹：/images/html5.gif
－ 图片在另一个服务器: http://www.w3schools.com/images/w3schools_green.jpg
－ 动态图片: programming.gif
（3）style="float:left/right;" 图片位置，用属性 浮动/float来决定
（4）图片部分区域可点击：
<map name="houses">
<area shape="rect" coords="0,0,100,100" href="1.header.html">
<area shape="rect" coords="100,0,200,100" href="web_button.html">
</map>
注意：area 定义图片的可点击区域
（5）图片本身作为超链接：
<a href="default.asp">
<img src="smiley.gif"
alt="HTML tutorial"
style="width:42px;height:42px;border:0;"></a>
－－－－－－－－－－－－－－－－－－－－－－－－－－－
# 在html中，后面接的是位置标识符 ！
网友评论