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选择器> 通配符选则器