首页 > 代码库 > 【2017-03-20】HTML基础知识,标记,表格,表格嵌套及布局,超链接

【2017-03-20】HTML基础知识,标记,表格,表格嵌套及布局,超链接

一、HTML  网站(站点),网页基础知识

HTML是一门编程语言的名字:超文本标记语言

可以理解为:超越了文本的范畴,可以有图片、视频、音频、动画特效等其他内容,用标记的方法进行编程的计算机语言

基本格式:

<html>

<title>标题名称</title>

<head>

网页渲染,特效

</head>

<body>

  网页内容

</body>

</html>

 

二、标记

添加注释:<!--注释内容-->

1.文字标记

文字加粗:<b>文字</b>   或  <strong>文字<strong>

文字倾斜:<i>文字</i>

文字下划线:<u>文字</u>

文字颜色,字号,字体:<font color=""  size=""  face="">文字</font> 

color可以为颜色的英文名称,也可以为色号,即#+(A-F)之间任意3个字母      (http://tool.oschina.net/commons?type=3)

size=1-7其中一个数字   1最小,7最大

face直接写字体的中文名称即可

2.图片标记

<img src="http://www.mamicode.com/图片路径" width="宽度" height="高度" title="标签">   (图片最好和HTML文件放在一个同一个文件夹,方便操作)   ../  向上一层

title是图片标签,显示效果:将鼠标放置到图片上会显示该图片对应的标签的内容

如果想将图片等比放大或缩小只需控制宽度或者高度其中一项即可

宽度和高度可以为数值,也可以为%,width=100%即为将图片左右平铺,height=100%即为将图片上下平铺

3、常用标记

&nbsp;   --空格

<br/>    --换行

<p>段落内容<p>    --段落上下会各空一行

 

三、表格

1.基本格式

<table>                           --表格

   <tr>                            --行

      <td></td>                --单元格

      <td></td>

      <td></td>

   </tr>

   <tr>

      <td></td>

      <td></td>

   </tr>

</table>

表示创建一个表格,第一行有3个单元格,第二行有2个单元格

2.属性

border=""     --边框粗细,0或1

width=""       --宽度,   px或%

height=""      --高度,   px或%

align=""        --水平排列格式,center/left/right

valign=""       --垂直排列格式,center/top/bottom

bgcolor=""       --背景色

background=""    --背景图片

cellspacing=""      --单元格之间的间距  外间距

cellpadding=""     --单元格与内容的间距    内间距

3.去掉浏览器界面中表格四周的空白边框

在<head></head>输入如下代码:

<style type="text/css">

*{

padding:0px;

margin:0px;

}

</style>

 

四、超链接

<a href="http://www.mamicode.com/链接地址">图片/文字</a>     --点击图片/文字直接从本页面跳转到链接页面

注:链接地址如果是本地地址,填写相对路径即可;链接地址如果是公共网址,则必须加http://

<a href="http://www.mamicode.com/链接地址" target="_blank">图片/文字</a>    --点击图片/文字,会新建网页跳转到链接页面

【2017-03-20】HTML基础知识,标记,表格,表格嵌套及布局,超链接