HTML初学的那些事（一）

这是我写的第一篇博客！刚刚从学校踏入工作岗位，以前学习的是java，到公司之后才知道在web开发之中还包括了前端，UI，美工，后台，数据库抽取，项目经理等职位。前端工程师应用HTML，CSS，AJAX等前端开发技术进行web前端的开发，直接编写向客户进行展示的部分的职位。想要做前端开发首要的学习的就是HTML的编写，通过它才能编写出展示的页面。

HTML语言的定义：超文本标记语言。我自己的理解就是一些可以控制页面元素的标签的集合。

一，HTML标签

这是一个综述，<p></p>这既是一个标签一个最简单的段落标签，前面的是开始标签，后面的结束标签。在html4中如果没有结束标签也可以进行完整的显示的，但是在XHTML中以及以后的HTML5中结束标签是必须存在的，所以在以后的书写过程中结束标签是必不可少，即使是像换行的标签<br/>。

二，HTML基础

1，HTML的标题和段落

<h2>-<h7>都是是用来定义标题的文本标签，他们的大小粗细是顺序是<h2> > <h3> > <h4>的顺序来排列的。

段落标签是<p></p>,浏览器会在段落的前后自动的加上空格。使用<p></p>插入一个空行是一个不好的习惯，要是想插入一个空行可以使用<br/>。如果想在不产生新的段落的情况下进行换行也可以使用<br/>。

2，HTML的样式

用style属性来改变HTML元素的样式。

style属性的作用是提供了一种改变所有HTML样式的通用方法。

例子：<body style="background-color:#609">

<h3 style="background-color:#0C0">this is title</h3>

<p style="background-color:#FF0"> this is a paragraph</p>

</body>

上边的例子就是用来改变背景颜色。

第二个例子是设置文本的对齐方式

例子：<body style="background-color:#609">

<h3 style="text-align:center">this is title</h3>

<p style="background-color:#FF0"> this is a paragraph</p>

</body>

默认的对齐方式是左对齐。

3，HTML的超链接和锚标签

HTML的超链接用<a>标签实现，href属性定义的所要连接的位置或者文档。

例子：<a href="http://www.baidu.com/" target="_blank">连接到百度</a>

上述例子中的target属性的作用是规定链接打开的位置，上面的例子就是新打开一个页面在其中显示百度的主页面。

<a>的除了可以连接到其他网页外还可以连接到本网页的其他位置也就是锚标记。定位标记：

<a name="标记名">，跳到标签处的写法：<a href="#定位标记名">这样就可以调到当前页面的指定位置。

例子：<p>

<a href="#C4">查看 Chapter 4。</a>

</p>

<p>This chapter explains ba bla bla</p>

<h3>Chapter 3</h3>

<p>This chapter explains ba bla bla</p>

<h3><a name="C4">Chapter 4</a></h3>

<p>This chapter explains ba bla bla</p>

<h3>Chapter 5</h3>

<p>This chapter explains ba bla bla</p>

当想要直接连接到跳转后的页面想要的位置是也可以通过起来实现：

<a href="http://www.smalluv.com/somepage.html#tips">Jump to the Useful Tips Section</a>在跳转的页面中会有：<a name="tips">Jump to the Useful Tips Section</a>

4，HTML表格

HTML中的表格由<table>来定义。<tr>用来定义每个表格的行，<td>用来定义每个单元格。

例子：

<table width="200" border="1">

<tr>

<td>first</td>

<td>last</td>

</tr>

<tr>

<td>第一个</td>

<td>第二个</td>

</tr>

</table>

如何设置表格的表头？，我们可以使用<th>标签进行表头的设置。

例子：

<tableborder="1">

<tr>

<th>时间</th>

<th>事件</th>

</tr>

<tr>

<td>1990-09-11</td>

<td>金门事件</td>

</tr>

</table>

有的时候空的单元格的边框不会被显示出来（在fireFox浏览器中可以）；为了避免这种事件的发生，通常在空的单元格中使用占用符来使它的边框显示出来。

<td></td>

其他小方法：

1，如何使表格带标题?

在<table>的标签下使用<caption>标签

<caption> 表格的标题</caption>

2,如何合并单元格？在需要合并的位置加上colspan（和并列）或者rowspan（合并行）

<th rowspan="2">合并</th>

3,如何设置单元格边距和单元格间距？

边距：<table cellpadding="10">

间距：<table cellspacing="10">

5，HTML的列表

HTML中的列表可以分为有序列表和无序列表。

（1）无序列表：

起始于<ul> 标签。每个列表项始于 <li>。

例子：

<ul>

<li>Coffee</li> <li>Milk</li> </ul>

无序列表的样式：实心点：<ul type="disc">,空心点：<ul type="circle">,实心方框：<ul type="square"> (2)有序列表：有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li> <li>Milk</li> </ol>有序列表的排序方式：type="a/1/A/I、i"列表可以进行嵌套