自学html-four(css初始化及html语义标签 -> h标签 p标签 img标签 有序列表 无序列表 表格 超连接)

1、css初始化

如今咱们来作一个简单的测试，测试步骤以下：

1.编写代码以下：

2.把改程序用不一样的浏览器打开咱们会发现同一份代码在不一样的浏览器中的显示会有略微的差异：

360浏览器下显示效果图：

火狐浏览器下显示的效果图：

 

同一份代码在不一样浏览器显示的效果存在差别的缘由是：各浏览器对各元素的margin,border,font-size等的初始设置略有不一样

解决方法：经过css强制让全部元素的属性值都同样

 

这里提供一段雅虎工程师css初始化代码，直接拷贝到css位置就能够了，body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;} 

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

添加代码位置如图：

 

最终无论在什么浏览器下打开的效果都会同样了。

 

2、html学习思惟导图

 

3、html有语义标签

1.html的h标签及p标签

说明:h1-h6标签表示文本的标题，由大到小；p标签表示段落，在新闻网站中，h与p标签常常成对出现

代码以下：

运行效果以下：

 

2.img标签

说明：在自学html--three中咱们有提到过img布局

<img src="car.jpg" alt="车" title="汉兰达"/>

src="这里填写图片地址:能够是本地地址，能够是网络地址，当是本地地址时，在当前目录的图片直接填写图片名，若是是上一级目录的图片在图片名字前加../"

alt="搜索引擎能够经过这里填写的字符串搜索到改图片，而且当网络不畅，加载图片失败是会显示该字符串"

title="这里填的字符串当鼠标放到图片上会显示"

示例代码:

效果图片:

 

3.img究竟是块状仍是内联

说明：咱们在以前的学习中，知道块状元素会独占一行，内联元素不换行，内联元素不能设置width和height。

通过咱们的测试发现，当你设置两个img时，他们是并排显示的，这属于内联元素的特性；可是当你设置他们的width和height时发现图片会随着咱们设置的width和height而改变，这是内联元素没有的特性。咱们在图片下加一个div，而且给他蓝色的边框发现div与上面的img存在一点小间隙，这就像咱们以前学习的magrin值，而内联元素是没有magrin值得，咱们能够设置img的marin会发现没有效果，由于img的本质就是内联元素，是特殊的内联元素（内联替换元素，替换元素是能设置宽和高的），因此不能设置magrin值。

 

示例代码：

效果图：

 

4.有序列表【<ol><li>有序1</li></ol>】与无序列表【<ul><li>无序</li></ul>】

直接上示例代码：

 

 

直接运行的效果是无序列表（实心圆默认）：

 

查看css手册能够看到由如下这几种风格：

 

咱们经过css控制列表风格：

代码以下：

 

效果以下：

 

有序列表代码：

 

有序列表效果图：

 

注意：这里值得提的是，咱们通常在开发时无论有序仍是无序列表咱们都会把他设置为nil，改有图片代替，这样作的缘由是为了不用不一样浏览器打开程序时致使的差别。

 

 5.整齐表格（table标签）

在html中咱们用<table>标签表示表格，<tr>标签表示行，<td>标签表示列。在曾经表格时咱们先书写行数，再在相应的行数里添加对于列数，而且标签中须要有内容才能显示。

以下图代码：

 

运行以上代码时，咱们发现效果是这样的，明显咱们所理解的表格不一样。其实表格咱们是画好的了，只是没有显示出来而已，咱们须要用css来控制就可显示出表格了，就像咱们以前用div布局时，必需要css设置颜色才能显示出来。

 

咱们用css来控制表格的边为1px 的蓝色实线，会出现如下效果，看到下图咱们发现这个表格是分开的一个个小方块。这时咱们能够查看css手册，发现表格有个属性border-collapse，它的默认值是separate(边框独立)就是咱们看到下图的那种效果，咱们设置它的border-collapse属性值为collapse（相邻边合并）就可获得咱们一般所须要的表格了，亦能够给它添加一个实际的像素。

 

最终设置为咱们一般理解的表格：

 

若是咱们要合并某项单元格要怎么操做呢？

以上图为例，咱们须要把第一行合并为1列，则需把第一行的2,3,4列去掉，而且在第1列加上属性colspan="4"，其中的4表明跨越的列数。

<tr>
<td colspan="4">1</td>
</tr>

效果图以下：

假如咱们又须要把2四、28两个格子合并该怎么办呢？

首先把28删掉，咱们知道24跨到28加上自己是跨越了2行，因此咱们在24列里加入属性rowspan="2"，其中的2就是跨越的行数。

<td rowspan="2">24</td>

效果图以下：

 

最终代码以下：

 

 

6.超连接标签<a>标签

若是没有超连接，咱们的网页都是一个个独立的数据，超连接把各个独立的网页连接起来，实现了数据资源的工享。

<a href="12.padding优化首页布局.html">首页布局</a>

href填入相应连接的地址便可，默认状况下是从当前网页进去一个新的网页，若是咱们须要点击该连接新建一个网页再进去所连接的网页则须要添加一个target="_blank"属性。

程序运行效果以下：

若是不添加target="_blank"点击首页布局时效果是：

 

若是添加了target="_blank"效果以下：

 

 

以上都事连接本地的网页，其实连接网络网页也是同理，例如这里连接到github开源网站：

 

代码为：

 

超连接标签里还有一个title属性，设置以后，当鼠标放到改连接是会显示title内容。

最终代码：