2019-08-04

                                    最基础的的HTML

基本标签

< h1> 与 <

/h1> 之间的文本被显示为标题 < p> 与 < /p> 之间的文本被显示为段落

HTML标题 Heading 是通过 < h1> - < h6> 等标签进行定义的。

HTML段落 paragraph 是通过 < p> 标签进行定义的。 

HTML链接 链接 是通过 标签进行定义的。

HTML图像 image是通过 标签进行定义的。 示例：

----------------------设置位置为中间

--------------设置body背景颜色

Style 可以用来设置格式

，。

Eg:

hhhhhhh

-------设置颜色

    ----------------------------设置位置

HTML标题 Heading 是通过 < h1> - < h6> 等标签进行定义的。 示例：

This is first heading

This is second heading

This is third heading

HTML段落 paragraph 是通过 < p> 标签进行定义的。 示例：

This is a paragraph.

This is another paragraph.

HTML链接 链接 是通过 < a> 标签进行定义的。 示例：

This is a link

HTML图像 image是通过 标签进行定义的。 示例：

用图片添加链接

打开连接之后是否新建窗口

打开方式分为在本页打开和在新的浏览器窗口打开，默认情况下，超级链接打开新页面的方式是自我覆盖（就是在本页打开）。根据浏览者的不同需要，读者可以指定超级链接的其他打开新窗口的方式。超级链接标签提供了target属性进行设置，取值分别为_self（自我覆盖，默认）、_blank（创建新窗口打开新页面）。下面我们就来动手区分下这两个属性的区别（由于我们已近写过默认的情况，这里我们就只添加_blank属性）

在前面的基础上我们在< a>标签加入target属性：target="_blank"

超链接添加提示文字

有些时候超链接文字不足以说明点击以后所要链接的内容，所以这个时候我们就需要给超链接添加提示文字，加以描述下一个链接的内容，当光标停留在超链接上时，提示语言就会显现，会让页面显现的很简介。设计到的属性就是title，下面我们再来动手实验一把 下面就是实验内容和效果

HTML表格

每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。< th>标签用来定义表头。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

border="1"定义的是最外面边框粗细，为1，你也可以设置为0，就是不显示边框（默认就是没有边框）

标签：< th>表头<

/th>：设置表头

标签：< caption>标题< /caption>：设置表的标题

属性：cellpadding="..."设置单元格边距

属性：bgcolor="..."设置表格背景颜色

属性：background="..." 以某张图片作为表格背景

    定义表格   

    定义表格标题。   

    定义表格的表头。   

    定义表格的行。   

    定义表格单元。   

    定义表格的页眉。   

    定义表格的主体。   

    定义表格的页脚。   

    定义用于表格列的属性。   

    定义表格列的组。   

HTML图片

下面是设置图片的对齐方式：

   image test

   

let's have an example

   

   

   

align left

下面是创建图片超链接范围

涉及到的标签就是< map>标签，用来指定图片,< area>用来指定超链接区域

这里以一张图片作为地图， 在< area>标签中我们会涉及到shape ，coords， href属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地。

这是具体实现内容

image test

tap the li zi 

然后，当我们点击小松鼠举起的栗子，你就会看见跟多栗子

[if !vml]

[endif]

shape属性的取值可以是：rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。

coords属性对于矩形而言，coords有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标，这里获取坐标的方式，就用截图工具帮忙就好。

Html布局

这里是具体实现内容：

div#container{width:1000px}

div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}

div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}

div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}

div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}

        

php中文网

list of book

hadoop

linux

c

the summary of the book

i will lead you to travel in the season of linux

good good study day day up

只要将上面的style里的div定义和下面的div块对应就很好理解，这里的逻辑表达的很清晰，就不再赘述。直接来看看效果截图吧

CSS背景

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。