HTML
超文本标记语言,页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
网页的本质就是超级文本标记语言,万维网是建立在超文本基础之上的。TML 通过标记符号来标记要显示的网页中的各个部分,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。
对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果
HTML /HTM 作为文件后缀名
一 HTML结构
1、超文本标记语言的结构包括“头”部分(Head 部提供关于网页的信息)、和“主体”部分(Body 提供网页的具体内容)
<html> //开始标签 <head> //页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果 //<title>页面标题</title> 内容显示在网页窗口的标题栏中 </head> <body> //页面显示的内容 </body> </html> //结束标签
2、HTML head 元素
二 文字设置
1、< font > </font> 设置字体
< font size="" color="" face=" 微软雅黑" > __ __ 文字___ __ </font>
字号 颜色 字体
-- 设置字体大小从1到7,
-- 颜色使用名字或RGB(中文全称:红绿蓝)的十六进制值
1、<u > </u > 下划线(英文全称:Underline)
2、< b > </ b > 黑体字 (英文全称:Bold)
3、< i > < /i > 斜体字 (英文全称:Italics)
4、< p > < /p > 段落标签 (所夹内容为独立的段落)
5、< br /> 回车
6、 空格
三 图片标签
< img / > (单身狗一只)
<img src="图片地址" alt="文字" width="" height="" title="" />
//高跟宽设置一个即可,显示图片会按比例缩放。可设置具体像素也可设置百分比 //alt在图片无法加载时,显示文字,还可帮助搜索引擎搜索。 //tetle 图片的标题 鼠标移到图片显示 //图片地址为 相对路径 “ . . xxxx " 向上返回一层路径 //常用的图像文件的扩展名为 gif 和 jpg。
四 超链接标签
1、 < a > < /a >
< a href = "http://www.baidu.com" target=" _ blank " > < font color="red" > 百度 </ font > //将指向字体设置为红色 < /a > //href =" 超链接地址"
//target=" _ blank " 在新页面打开链接地址
//对指向文字格式设置 放在<a>标签里边
2、去掉指向文字下的下划线
//指定 a 标签的样式
a{ text - decoration : none }
五 表格
< table > < tr > < td > < /td > < /tr > < /table >
1、表格 样式
< 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 //背景图片。
2、行
<tr height=”100%“ align=”center“ > </tr> height // 行高 align: //行的内容的水平对齐方式 valign: //行的内容的垂直对齐方式 ( bottom 底,toop 顶 , 默认居中) bgcolor: //背景色 background: //背景图片
3、单元格
内容必须放在单元格里,单元格必须放在行里,行必须放在表格里。设置单元格行高、列高时,会同时影响对应的行或列
<td> <td> <th></th> //表头,单元格的内容自动居中、加粗 width //单元格宽度 height //单元格高度 align //单元格的内容的对齐方式 valign //单元格的内容的垂直对齐方式 bgcolor //背景色 background //背景图片
4、去掉表格最外边留白
//对表格进行样式设置 padding : 0px ; margin : 0px ;