正文

HTML 初识 HTML【 整体结构 文字 图片 表格 超链接】

IP云
IP云V管理员/4 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
HTML
超文本标记语言，页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
网页的本质就是超级文本标记语言，万维网是建立在超文本基础之上的。TML 通过标记符号来标记要显示的网页中的各个部分,对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果
HTML /HTM 作为文件后缀名
一 整体结构
超文本标记语言的结构包括 “ 头”部分（Head 部提供关于网页的信息)、和“主体”部分（Body 提供网页的具体内容)

<html>     --开始标签

<head>

-- 页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果

-- <title>页面标题</title>      内容显示在网页窗口的标题栏中

</head>

<body>

-- 页面显示的内容

</body>

</html>      --结束标签

附  HTML head 元素
二 文字设置
< u > __ __  文字___ __ </u> 下划线（英文全称：Underline）                      -- 注释  <!--注释内容-->
< b > __ __  文字___ __ </b> 黑体字 （英文全称：Bold）
< i > __ __  文字___ __  </i> 斜体字 （英文全称：Italics）
< font size=""    color=""    face=" 微软雅黑"   >  __ __  文字___ __    </font>
字号           颜色          字体
-- 设置字体大小从1到7，
-- 颜色使用名字或RGB（中文全称：红绿蓝）的十六进制值
&nbsp;       --  空格
< br />      --  回车
< p >     < /p > --锻炼标签 （所夹内容为独立的段落）
图 片标签
< img / > 单身狗一只

<img  src="图片地址" alt="文字" width="" height="" title="" />                 -- 高跟宽设置一个即可，显示图片会按比例缩放。可设置具体像素也可设置百分比

-- alt在图片无法加载时，显示文字，还可帮助搜索引擎搜索。

-- tetle  图片的标题 鼠标移到图片显示

-- 图片地址为 相对路径  “ . . \xxxx    " 向上返回一层路径

-- 常用的图像文件的扩展名为 gif 和 jpg。

三 超链接

< a href = "http://www.baidu.com"  target=" _ blank " >

< font color="red" >  百度 </ font >                             -- 将指向字体设置为红色

百度图片

< /a >

-- href =" 超链接地址"

-- target=" _ blank "    在新页面打开链接地址

-- 对指向文字格式设置 放在<a>标签里边

第一步：做锚点的标签。<a name=""></a>

第二步：做锚点链接。<a href="目标链接的name的值"></a>

-- 去掉指向文字下的下划线

|   < style  type = " text/ess"              |

|    a  {                                              |       -- 写在 head 里

|              text - decoration : none       |

|        }                                              |

——  -  ——  -  ——   -  ——  -   ——  —
四 表格
< table >
< tr >
< td >
< /td >
< /tr >
< /table >

表格 < table   border="1"  width="100%" height="100"  cellspacing ="0" > </table>

border ：          边框，常用值0,只用在 <table >

width :            宽度，可以用像素或百分比表示。常用960像素。

height ：         行高,页面会随内容的增多而增长，无法用百分比表示

cellpadding ：  内容跟单元格边框的边距。常用值0。

cellspacing ：   单元格之间的间距。常用值0。

align :              对齐方式 ，表格在页面的位置，通常为 左 中 右           -- center 据中     right 右     left 左边

bgcolor :          背景色。

background :   背景图片。

行   <tr   height=”100%“ align=”center“   >  </tr>

height ：       行高

align ：          一行的内容的水平对齐方式

valign ：        一行的内容的垂直对齐方式                    -- bottom   底      toop  顶       默认居中

bgcolo r:         背景色

background :  背景图片

单元格  <td>   </td>

<th></th> 表头，单元格的内容自动居中、加粗

width ：          单元格宽度

height ：         单元格高度

align :             单元格的内容的对齐方式

valign ：          单元格的内容的垂直对齐方式

bgcolor :         背景色

background :  背景图片

内容必须放在单元格里，单元格必须放在行里，行必须放在表格里。设置单元格行高、列高时，会同时影响对应的行或列

去掉表格最外边留白

< style  type = " text/ess"

|    *  {                                             |       -- 写在 head 里

|             padding : 0px ;                   |

|             margin : 0px  ;                    |

|        }                                             |

—— - —— - —— - —— - —— - —— - -

相关阅读

目录[+]