HTML学习入门

时间:2022-02-17 10:10:44

HTML(元素、属性)

HTML:

超文本标记语言   1、 超文本即为带有链接属性的文本  2、标记即为标签


一、body属性:

bgcolor:页面背景颜色

text:文字颜色

background:背景壁纸

topmargin、leftmargin、rightgargin、tottomargin:上、左、右、下边距


二、格式控制标签

<font color=“” size="" face=""></font>  color为字体颜色   size为字体尺寸   face为字体。

<b></b>:字体加粗

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

<u></u>:下划线

<strong></strong>:强调字体加粗

<em></em>:强调字体倾斜

<center></center>:居中

</br>:回车,换行   快捷键shift+enter

&nbsp:空格   快捷键shift+ctrl+enter


三、内容容器标签

<h1></h1>........<h6></h6> :标题标签   重要性依次减小,字体依次减小,默认前后若有其他,自动换行并空开一行,h1--h3是在目前文字大小基础上+尺寸,h4---h6是在目前默认文字大小-尺寸

<p></p>:段落标签    默认前后若有其他,自动换行并空开一行,证明自身是一个整体

<div></div>:层标签   默认占一行

<span></span>:层标签    用多少占多少

<ol type="1"></ol>;有序数列    自带序号,自动换行,默认前后若有其他,自动换行并空开一行

<ul type=""></ul>:无序数列       不带序号,自动换行,默认前后若有其他,自动换行并空开一行

”../":上级目录

“./"当前目录


四、超链接标签

<a href="http://www.cnblogs.com/tfl-511/" target="_blank”>   blank为打开新页面

设置页面返回顶端:在第一行 <a name="ding"></a>

在最后一行<a href="#ding"></a>


五、图片标签

可以在前端添加超链接:<a href="http://www.cnblogs.com/tfl-511/"><img src="图片地址“  width="10" height=“10” title="名字"/></a>

注:title显示图片名字    其中width  height两个量字需要设置一个。


六、table表格标识

width:宽度,可以用百分比表示

border:边框,一般设置为0无边框,1是有边框

cellpadding:内容与单元格间距,一般为0

cellspacing:单元格之间间距,一般为0

align:对齐方式,居中center

bgcolor:背景颜色

backgroung:背景图片


七、<tr></tr>行

align:水平对齐方式

valign:竖直对齐方式

height:行高


八、列(单元格)

align:单元格内容对齐方式

valign:内容竖直对齐方式

height:单元格高

width:单元格宽度


九、单元格合并

横向合并:colspan="n"

纵向合并:rowspan="n"

n为需要合并的单元格数值


例如 个人简历的编写

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人简历</title>
</head>

<body bgcolor="#33FFCC" bottommargin="300">
<font size="6" color="#99CC00">
<center><strong>个人简历</strong></center><br />
</font>
<font size="5" color="#0033FF">
<table width="960" border="1" cellpadding="0" cellspacing="0" align="center">
<tr align="center" height="50">
<td width="192"><strong>姓名</strong></td>
<td width="192">滕飞龙</td>
<td width="192"><strong>籍贯</strong></td>
<td width="192">吉林省通化县</td>
<td width="192" rowspan="3"><img src="001e4f9d6e5514dd1da263.jpg" width="192" title="照片"/></td>
</tr>
<tr align="center" height="50">
<td width="192"><strong>民族</strong></td>
<td width="192">汉</td>
<td><strong>政治面貌</strong></td>
<td width="192">团员</td>
</tr>
<tr align="center" height="50">
<td width="192"><strong>身高</strong></td>
<td width="192">173</td>
<td width="192"><strong>出生年月</strong></td>
<td width="192">1992.02.02</td>
</tr>
<tr align="center" height="50">
<td width="192"><strong>博客</strong></td>
<td width="192" colspan="4"><a href="http://www.cnblogs.com/tfl-511/" target="_blank">http://www.cnblogs.com/tfl-511/</a></td>
</tr>
<tr align="center" height="50">
<td width="192"><strong>QQ</strong></td>
<td width="192" colspan="2">2417920382</td>
<td width="192"><strong>微信</strong></td>
<td width="192"></td>
</tr>
<tr align="center" height="50">
<td width="192"><strong>邮箱</strong></td>
<td width="192" colspan="2">18353366911@163.com</td>
<td width="192"><strong>电话</strong></td>
<td width="192">15753394737</td>
</tr>
<tr align="center" height="50">
<td width="192"><strong>大学</strong></td>
<td width="192" colspan="2">山东理工大学</td>
<td width="192"><strong>专业</strong></td>
<td width="192">环境工程</td>
</tr>
<tr align="center" height="50">
<td width="192"><strong>学历</strong></td>
<td width="192" colspan="2">本科</td>
<td width="192"><strong>学制</strong></td>
<td width="192">全日制</td>
</tr>
<tr align="center" height="50">
<td width="192" colspan="5"><strong>技能特长、证书等级</strong></td>
</tr>
<tr align="center" height="50">
<td width="192"><strong>计算机</strong></td>
<td width="192" colspan="2">C语言二级</td>
<td width="192"><strong>英语</strong></td>
<td width="192">四级</td>
</tr>
<tr align="center" height="50">
<td width="192" colspan="5"><strong>兴趣爱好</strong></td>
</tr>
<tr align="center" height="80">
<td width="192"colspan="5">打游戏、唱歌</td>
</tr>
<tr align="center" height="50">
<td width="192" colspan="5"><strong>工作经历</strong></td>
</tr>
<tr align="center" height="50">
<td width="192" colspan="2">时间</td>
<td width="192" colspan="3">企业</td>
</tr>
<tr align="center" height="50">
<td width="192" colspan="2">2015.6-2016.9</td>
<td width="192"colspan="3">青岛鼎信通讯股份有限公司</td>
</tr>
</table>
</font>
</body>
</html>

HTML学习入门