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

时间:2022-05-24 07:07:20

一、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="图片路径" width="宽度" height="高度" title="标签" alt="文字">   (图片最好和HTML文件放在一个同一个文件夹,方便操作)   ../  向上一层

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

高跟宽设置一个即可,显示图片会按比例缩放

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

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

3、常用标记

&nbsp;   --空格

<br/>    --换行

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

<h1>内容</h1>~<h6></h6>          --标题标记

<div>内容</div>          --层标签(默认占一行)

<ol type="1"或"a"或"i">                   --有序列表

<li>序号1</li>

<li>序号2</li>

<li>序号3</li>

</ol>

<ul type="circle">                   --无序列表

<li>第一</li>

<li>第二</li>

<li>第三</li>

</ul>

三、表格

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=""       --垂直排列格式,middle/top/bottom

bgcolor=""       --背景色

background=""    --背景图片

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

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

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

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

<style type="text/css">

*{

padding:0px;

margin:0px;

}

</style>

四、超链接

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

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

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