网页基础学习之HTML

来源：互联网发布：多岛遗传算法介绍编辑：程序博客网时间：2024/05/19 02:29

声明：本博主也在学习当中，所有内容均为学习总结

一、什么是HTML

HTML就是一个描述一个网页的语言，怎么去描述？比如我们可以用汉语来描述一条狗（OK，我想起至尊宝了呢）。然后HTML自然也有属于自己的语言规范，我们只是使用HTML的语言规范来描述一个网页。

二、简单的HTML学习

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>

1.下边来一个简单的例子（大家也可以下载一个Notepad++来编辑，这样会看起来更清晰一些）

<html><head><title >秦时明月</title></head><body><h1>秦时明月</h1><h2>盖聂</h2></body></html>

这段代码显示的

这段代码显示的

这似乎有点难看，那么我们来把代码增加一些东西。

<html><head><title >秦时明月</title></head><body><h1 align="center">秦时明月</h1><h2 align="center">盖聂</h2><p align="center"><img  src="2.jpg"/></p><p align="center"><a href="http://image.baidu.com/i?tn=baiduimage&ct=201326592&lm=-1&cl=2&nc=1&word=%E7%9B%96%E8%81%82&ie=utf-8">剑圣<br>盖聂</p></body></html>

这段代码显示的效果是

1.align ="center"是让这个标签居中，center可以换成right、left都可以

2.<p align="center"><img src="2.jpg"/></p>是我们在网页当中插入了一个图片。图片是我从网上下载之后重命名的

3.<p align="center"><a href="http://image.baidu.com/i?tn=baiduimage&ct=201326592&lm=-1&cl=2&nc=1&word=%E7%9B%96%E8%81%82&ie=utf-8">剑圣<br>盖聂</p>

这段代码中，我们加了一个超链接，并且在剑圣盖聂中间加了一个<br>，这个是让换行的意思。

2.下边做一个个人信息的提交

<html><head><title>秦时明月</title></head><body><!--为表格添加背景--><table border="1" background="22.jpg"><!--表格的标题--><caption>个人信息</caption><!--行--><tr><!--列--><th>姓名</th><!--表示要填写名字，type后边跟类型--><th><input type="text" name="username"></th></tr><tr><th>性别</th><!--单选按钮，只能选择一个--><th><input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="0">女</th></tr><tr><th>学历</th><th><!--下拉按钮--><select name="学历"><option value="0">初中</option><option value="1">高中</option><option value="2">大学</option><option value="3">硕士</option><option value="4">博士</option></th></tr><tr><th>兴趣</th><th><!--多选按钮-->动漫<input type="checkbox" name="动漫"/>篮球<input type="checkbox" name="篮球"/>足球<input type="checkbox" name="足球"/>游戏<input type="checkbox" name="游戏"/></th></tr><tr><th>简介</th><th><!--一个大区域的文本框--><textarea rows="10" cols="30"></textarea></th></tr><table><form><!--按钮，可以点击--><input type="button" value="提交个人信息"></form></body></html>

效果如下：

这是一些简单的用法，有什么疑问，大家一起讨论学习

0 0