HTML基本操作
网页三部份内容:HTML CSS Javascript
一、body
bgcolor背景色
background背景图片
topmargin上边距
rightmargin
bottommargin
leftmargin
body以上的属性仅做了解。
二、标签
(一)基本标签:
1.格式控制:
(1).字体控制
<font face="字体名称" color="颜色" size="大小"></font> 字体
<b></b>加粗 <strong></strong>加粗并强调(强调:搜索时优先显示)
<i></i>倾斜 <em></em>倾斜并强调
<u></u>下划线
(2).位置控制
<center></center>居中
<br> 换行不分段
(3).转义字符:——需要记住
——空格
<——小于号 <
>——大于号 >
&——& (举例:输入代码“& nbsp”,网页显示“ ”)
© ——©
2.内容容器:
<h1></h1> ...<h6></h6> ——标题。默认情况下,加粗,独立一行
<p></p> ——段落。独立一段,默认情况下,段落前后都会有一行大小的空白。
<div></div>——区域标签,层标签。用来划分网页区域,进行页布局。前后换行。
<span></span>——区域标签,层标签。前后不换行。
<ul></ul>——无序列表标签。
<ol></ol>——有序列表标签。
<li></li>——列表项标签,用来放在ol或ul里面的。
(二)常用标签:
1. 插入超链接
1).连接网页地址
<a href="超链接的路径" target="_blank">超链接显示的内容</a>
2).制作书签:
第一步:定义书签 <a name="书签名">内容</a>
第二步:定义超链接 <a href="页面名#书签名">超链接文字</a>
例题:<a href="Untitled-4.html#first">第一章</a> <a href="Untitled-4.html#second">第二章</a> <a href="Untitled-4.html#third">第三章</a>
2.插入图片
语法:<img src="路径(相对)" width="" height="" alt=""/>
路径:一般做网页的时候用的相对路径。
images/aaa.jpg 在网页文件所在目录,打开images文件夹,选中aaa.jpg;
images/1000/aaa.jpg 在网页文件所在目录,打开images文件夹,再打开1000文件夹,选中aaa.jpg;
../images/aaa.jpg 在网页文件上一级文件夹中打开images文件夹,选中aaa.jpg ;
../../images/aaa.jpg 在网页文件上上级文件夹中打开images文件夹,选中aaa.jpg;
尺寸设置:宽度,高度一般只设置一个,防止图片变形
3.插入图片超链接
<a href="超链接的路径"> <img src="图片路径"/> </a>
三、表格:
<table></table>
width:宽 像素,百分比。
bgcolor:背景色。
align:表格在页面中的对齐方式。
border:边框宽度
cellpadding:边距
cellspacing:间距
<tr></tr>
height:高度,一般是像素,也可设百分比。
bgcolor:背景色
align:这一行中的文字的对齐方式
<td></td>
width:宽
height:高
bgcolor:背景色
align:水平对齐
valign:竖直对齐
colspan:列的跨度。
rowspan:行的跨度。
注意:合并单元格的时候,一定要算好格数,减去被合并的单元格。
四、表单:
<form id="" name="" action="" method=""></form>
1.文本类
单行文本框:<input id="" name="" type="text" value="内容"/>
多行文本框:<textarea id="" name="" rows="行数" cols="列数">内容</textarea>
密码框:<input id="" name="" type="password" value="内容"/>
隐藏域:<input id="" name="" type="hidden" value="内容"/>
2.按钮类
普通按钮:<input id="" name="" type="button" value="按钮上的文字"/>
提交按钮:<input id="" name="" type="submit" value="按钮上的文字"/>
重置按钮:<input id="" name="" type="reset" value="按钮上的文字"/>
图片按钮:<input id="" name="" type="image" src="图片的路径" width="宽" height="高"/>