HTML 超文本标记语言(HyperText Markup Language )
即使HTML对标签大小写不敏感，但是对于长远的保障，还是都有小写比较好
在HTML中要始终为属性值加引号，当属性值本身含有双引号的时候必须要使用单引号，如name=‘Bill "Helloworld" Cates'
常用属性：
width，height：规定标签的大小值
align：拥有关于对齐方式的附加信息 , "center" 居中排列 , "left"靠左,"right"靠右
bgcolor：拥有关于背景颜色的附加信息，
font-family，color以及font-size：定义字体、颜色和尺寸，如
<p style="font-family:verdana;color:red;font-size:20px;">A paragraph</p>
text_align：规定了元素中文本的水平对齐方式，如style=“text-align:center；”
border：拥有关于表格边框的附加信息，如
<h1 style="font-family:verdana">A heading</h1>
background：为页面添加背景图片，gif 和 jpg 文件均可用作 HTML 背景。如果图像小于页面，图像会进行重复。
background-color：为元素定义了背景颜色，如
<h2 style="background-color:green">它的背景色是绿色的</h2>
注释：<！-- 注释内容 -->，合理的使用注释可以为未来的代码编辑工作带来帮助
常用标签：
html：表述网页，定义了整个HTML文档
body：可见的网页内容，HTML文档主体
title：元素可定义文档的标题。
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
HTML标题： h1，h2，h3，h4，h5，h6
link：外链样式，
<link rel="stylesheet" type="text/css" href="mystyle.css">
style：规定元素的行内样式
<style type="text/css">body { background-color : red }</style>
div： 定义文档中的节或区域（块级），起分割作用，占用一行
span： 定义文档中的行内的小块或区域，高度自适应内容，内容多少，就会占据多少距离空间（紧贴内容）
a： 定义连接
1. href属性，创建指向另一个文档的连接，<a href="网址、链接地址" target="目标" title="说明">被连接的内容</a>；target定义被链接的文档在何处显示，如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。如果把链接的 target 属性设置为 "_top"，当点击该链接会使被固定在框架之内的事物跳出框架。
2. name属性，创建文档内的标签，
<a name="tips">会被调到的地方</a>
然后在定义另一个a标签
<a href="#tips">点击这个标签，会调到属性name值相同的地方</a>
邮件链接：
<a href="mailto:xxx@xxx.com?subject=Hello%20again">发送邮件</a>
img：定义图像
<img src="图片的位置或者连接地址" alt=”用户自定义“/>alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<a href="#"><img src="###.gif" alt="万花筒" ismap/></a> 其中 ismap 可以把一幅普通的图像设置为图像影射
如何创建带有可供点击区域的图像地图，且其中每个区域都是超链接。创建方式
图像地图
br：换行<br/>
hr：创建水平线，可用来分割内容<hr/>
p：定义段落<p>段落内容</p>
blockquote：用于长引用，浏览器通常会对该元素缩进处理
计算机代码元素
pre：原样输出写入的代码，保留空格和拆行<pre>你好 很好</pre>
code：定义计算机代码文本
kbd：定义键盘文本
samp：定义计算机代码示例
var：定义变量
创建表格
表格由<table>标签来定义。每个表格的表头由<th>定义标签，若干行由 <tr>标签定义，每行被分割为若干单元格由td标签定义。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1" cellspacing="5" cellpadding="10" background="xxx.gif" bgcolor="red">/*cellpadding创建单元格内容与其边框之间的空白。cellspacing增加单元格之间的距离*/
<caption>我的标题</caption>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>A</td>
<td>男</td>
</tr>
</table>
列表：
无序列表：使用粗体原点（典型的小黑圆圈）进行标记
<ul><li>Coffee</li><li>Milk</li></ul>
有序列表：使用数字进行标记
<ol><li>Coffee</li><li>Milk</li></ol>
定义列表：自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始
<dl><dt>Coffee</dt><dd><Black hot drink</dd></dt></dl>
空格：
由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。
链接样式
1. 外部链接样式，也是写在head里
<link rel="stylesheet" type="text/css" href="css地址">先建一个css样式，保存在同一个目录下
2.内部链接样式表，写在html页面里面的head里
<style type=text/css>可以用点.或者#来设置body里面被用class或者id选择器设置的一些标记。</style>
3. 行间链接样式表，写在里body标签里，如：
<div style="float:left"><img src="#"/></div>
常用的选择器
1. 元素(标签名)选择器 : 就是HTML文档中的元素就是一个选择器，如：
p {line-height:1.5em; margin:auto; }
2. 类选择器 : 最常用的选择器 , 可以给不同的标签设置同一个类，从而用一条CSS命令控制几个标签，减少大量代码，是页面修改简单，易维护，易改版；其次，后台工作人员机会不会用到有关class的相关设置，不需要跟后台人员之间进行交互；再者，可以通过js等动态改变标签的Classname，从而改变整个标签的样式，使前端动态效果实现起来更为容易
<div class="test">测试代码</div>
.test {color:red;border:1px blue solid;}
3. ID选择器 : ID选择器不能复用 , 一个ID选择器只能把其CSS样式指定给一个标签。
<div id="test">测试代码</div>
#test {color:red;border:1px blue solid;}
4. 通配符(全局)选择器 : 全局选择器是一个星号。它能作用于XHTML文档中的所有元素。
*{margin:0; padding:0;}
四个选取器优先权 : Id选择器> class选择器> html选择器> 通配符选则器
网友评论