HTML基本语法
<!-- <!DOCTYPE html> 声明告诉浏览器我们使用的是HTML5 -->
<!DOCTYPE html>
<!-- <html> 在标记语言中称为根标签，所有内容都在根标签中 -->
<html>
<!--<head> 头部标签 -->
<head>
<!-- <meta charset="utf-8">设置网页解析时使用的编码格式-->
<meta charset="utf-8">
<!-- <title>设置网页的标题如<title>百度一下你就知道了</title>-->
<title></title>
<!-- 为标题处引入图标文件 -->
<link href="img/baidu.ico" rel="icon" />
<!-- 抓关键字搜索 -->
<meta name="keywords" content="手机，家电" />
</head>
<!--<body> 所有的内容都写在其中</body> -->
<body>
<h1>HTML的复习之旅</h1>
<!--
HTML基本语法
标记==标签==记号 用标签来修饰网页中的内容(文字,图片,表格...)
标签的分类
<开始> 标签体(修饰的内容)<结束/> 称为不和标签,有称为双标签
<标签名/> 自闭和标签,在标签内直接结束,完成某种功能 比如<br/>
标签属性:通过属性可以进一步对标签内容进行修饰
语法:属性必须写在开始标签中
属性名 = "属性值"
一个标签可以拥有多组标签-->
你好<br />世界
</body>
</html>
基本常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 基本常用标签 -->
<!-- 标题标签<h1></h1>...<h6></h6>
align="center" left,center,right 设置内容在水平位置的对齐方式
-->
<h1>一级标题</h1>
<h2 align="center"> 二级标题居中对齐</h1>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 <p> </p> -->
<p>盼望着，盼望着，东风来了，春天的脚步近了。
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。</p>
<p align="right">
“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。
雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的，在雨里静默着。</p>
<!-- 换行标签</br> -->
你好<br />世界
<hr />
<!-- 特殊符号的转义符 -->
空三格 后的效果
大于号 >
小于号 &li;
<a >
® 商标注册
© 版权
<!-- 列表
无序列表<ul> <li> </li> </ul>
type属性： circle,disc,square 改变默认图标,还可以通过css进行设置
有序列表<ol> <li> </li> </ol>
type属性：1,A,a,i,I
-->
<ul type="square">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ol type="1">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</body>
</html>
超链接_图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
<a href="链接地址"(必须的) target="打开链接文档的位置"> 名称 </a>
target="_self" 在当前窗口中打开文件
target="_blank"在新窗口中打开该文件
-->
<a href="http://www.qq.com" target="_blank">腾讯</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<!--
在网页中插入图片
<img src="图片地址"
border = "1" 对图片设置表框
alt="对图片进行描述,当图片不能正常显示时提示"
title="鼠标悬浮到标签上时的提示信息" />
-->
<img src="img/baidu.ico" width="300" height="300" border="1" alt="这是百度logo" title="点击进入" />
</body>
</html>
超链接定义锚点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.定义锚点
<a name = "top"> 锚点位置</a>
2.超链接找锚点
<a href = "#top"返回顶部<a/>-->
<a name="top"></a>
<h1><a href="#p1">商品1</a>
<a href="#p2">商品2</a>
<a href="#p3">商品3</a>
<a href="#p4">商品4</a>
<a href="#p5">商品5</a> </h1>
<hr />
<h2>商品1
<a name="p1"></a></h2>
<img src="img/nike/1.png" />
<h2>商品2
<a name="p2"></a></h2>
<img src="img/nike/2.png" />
<h2>商品3
<a name="p3"></a></h2>
<img src="img/nike/3.png" />
<h2>商品4
<a name="p4"></a></h2>
<img src="img/nike/4.png" />
<h2>商品5
<a name="p5"></a></h2>
<img src="img/nike/5.png" />
<h2 align="right"><a href="#top">返回顶部</a></h2>
</body>
</html>
表格
个人简历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >
<!-- 表格
table>tr*行数>td*列数 Tab键 自动生成表格
cellPadding 内边距
cellspacing 外边距
colspan 列合并,同行进行
rowspan 行合并,删除对应行的对应单元格
行高列宽
bgcolor 背景颜色
backgroungcolor背景图片
-->
<h1 align="center">个人简历</h1>
<table border="1" cellpadding="5" cellspacing="5" align="center">
<tr>
<td bgcolor="#CCEDFF">姓名</td>
<td width="100"></td>
<td bgcolor="#CCEDFF">性别</td>
<td></td>
<td rowspan="5" width="120">照片</td>
</tr>
<tr>
<td bgcolor="#CCEDFF">出生年月</td>
<td></td>
<td bgcolor="#CCEDFF">籍贯</td>
<td></td>
</tr>
<tr>
<td bgcolor="#CCEDFF">政治面貌</td>
<td></td>
<td bgcolor="#CCEDFF">名族</td>
<td></td>
</tr>
<tr>
<td bgcolor="#CCEDFF">健康状况</td>
<td></td>
<td bgcolor="#CCEDFF">婚姻状况</td>
<td></td>
</tr>
<tr>
<td bgcolor="#CCEDFF">联系电话</td>
<td></td>
<td bgcolor="#CCEDFF">电子邮箱</td>
<td>crraxx@163.com</td>
</tr>
<tr>
<td bgcolor="#CCEDFF">求职意向</td>
<td colspan="4" height="40"></td>
</tr>
<tr>
<td bgcolor="#CCEDFF">工作经历</td>
<td colspan="4" height="350"></td>
</tr>
<tr>
<td bgcolor="#CCEDFF">计算机水平</td>
<td rowspan="1" colspan="4" height="40" ></td>
</tr>
<tr>
<td bgcolor="#CCEDFF">自我评价</td>
<td rowspan="1" colspan="4" height="40"></td>
</tr>
</table>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表单中提供了许多可以输入和选择的组件,用户可以输入信息或者选择信息,最终通过表单将数据提交至服务器端程序
表单在网页上是一块区域
text 单行文本框 textarea多行文本框 passward密码输入框 radio单选框 checkbox多选框
file 文件选择框
<select> <option> </option></select>下拉框
reset 重置 submit提交 button普通按钮,后面用来触发js函数
name 设置表单名字，值自定义，可重复，向服务器端提交数据的键，不可为数字
id 设置表单编号，值自定义，不可重复
size 设置表单的列宽
readonly 只读性，只可查看不能修改
disabled 禁用组件，不能向服务器提交
placeholder ，输入前的提示信息，当输入信息后会被覆盖
value 表单中的值
单选框与多选框中默认类型的设置checked="checked"
-->
<form action="" method="">
<!-- 单行文本框 -->
<label for="userid"> 用户名:</label>
<input type="text" id="userid" name="username" value="" placeholder="请输入用户名"/>
<br />
<!-- 密码输入框 -->
密码:<input type="password" name="pwd" value="" placeholder="请输入密码"/>
<br />
<!-- 单选框 -->
性别:<input type="radio" name="sex" value="男" id="men" />男
<input type="radio" name="sex" value="女" id="women" />女
<br />
<!-- 多行文本框 -->
地址:<textarea name="address" cols=20 rows="5">a</textarea>
<br />
<!-- 多选框 -->
课程:<input type="checkbox" name="course" value="html" />html
<input type="checkbox" name="course" value="java" />java
<input type="checkbox" name="course" value="c++" />c++
<input type="checkbox" name="course" value="c" />c
<br />
<!-- 下拉框 -->
省份:
<select name="private">
<option value="陕西">陕西</option>
<option value="山西">山西</option>
<option value="四川" selected="selected">四川</option>
<option value="湖北">湖北</option>
</select>
<br />
<!-- 文件选择框 -->
文件:<input type="file" />
<br />
<!-- 按钮 -->
<input type="button" value="普通按钮" onclick="alert()" />
<input type="submit" value="提交"/>
<input type="button" value="重置" />
</form>
</body>
</html>
内联框架
eg1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe 内联框架</title>
</head>
<body>
<!--内联框架(窗口):在一个大的浏览器窗口内,嵌入一个小窗口,在窗口内引入一个页面
target="指定的内联窗口名称" 在指定的窗口中打开
-->
父页面
<iframe src="http://www.baidu.com " height="350" width="700"
frameborder="1" name="rightFrame">
浏览器不支持iframe</iframe>
<a href="http://www.qq.com" target="rightFrame"></a>
</body>
</html>
eg2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
1
<iframe src="l2.html" name="newWindow" width="600" height="500" frameborder="1"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
2
<a href="http://www.qq.com" target="_parent">腾讯</a>
<a href="http://www.sina.com.cn" target="_top">新浪</a>
<iframe src="l3.html"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="http://www.qq.com" target="_parent">腾讯</a>
<a href="http://www.sina.com.cn" target="_top">新浪</a>
3
</body>
</html>
3283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
