基础标签
HTML基本标签
标签 名称 示例
<h1>~<h6> 标题标签 <h1>静夜思</h1>
<p></p>、<br/> 段落和换行标签 <p>床前明月光<br/>疑是地上霜</p>
<hr/> 水平线标签 <hr/>
<em></em> 斜体 <em>zh举头望明月</em>
<strong></strong> 字体加粗 <strong>低头思故乡</strong>
快捷键TAB自动代码补全
学习方法：w3cSchool帮助手册,官网
图片标签
常见图片格式:jpg、gif、hmp、png
网页中常用的png
gif支持动画
jpg支持透明度
语法<img src="图片路径" alt="图片出错,用文字替代" width="图片宽度" height="图片高度"/>
img后面的src类似的代表属性
绝对路径E:\HTML\images\向日葵.jpg
相对路径images\向日葵.jpg
../4.txt 返回上一级目录找4.txt
../../返回上一级的上一级
网页背景设置 <body background="图片路径">
超链接
<a href="链接地址" target="目标窗口位置">文本或图像</a>
目标窗口位置_self:自身窗口
_blank：新建窗口
例如:target="_blank"
超链接的应用
1、页面间连接:A页到B页,网上常见连接
<a href="test.html" target="_blank"><em><strong>作者:李白</strong></em></a>
2、锚链接:跳转自身固定位置,或A页跳转到B页固定位置,需锚记
声明要跳转的位置href="#register"
<a href="#register"><h3>静夜思</h3></a>
跳转到的位置name="register"
<a name="register"><p>床前明月光，</p></a>
要跳转到另一个网页指定位置
当前网页
<a href="test.html#register" target="_blank" ><em><strong>作者:李白</strong></em></a>
需跳转网页
<a name="register"><h1>hello world!!</h1></a>
3、功能性链接:电子邮件、QQ、MSN等链接
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="Keywords" content="关键字"/>
<meta name="Description" content="简介、描述"/>
<title>
这是title
</title>
</head>
<body>
<h2>诗词</h2>
<hr>
<h3>静夜思</h3>
<p>床前明月光<br/>疑是地上霜</p>
<em>举头望明月</em><br/>
<strong>低头思故乡</strong>
<hr><br>
<h2>网址导航</h2>
<hr><br>
<ul>
<li><a href="http://www.biadu.com" target="_blank">百度</a><br><br></li>
<li><a href="http://www.360.com" target="_blank">360</a><br><br></li>
<li><a href="http://www.51cto.com" target="_blank">51cto</a><br><br></li>
<li><a href="http://www.youku.com">优酷</a><br><br></li>
</ul>
<hr><br>
<h2>图片展示</h2>
<hr>
<img src="/images/1.jpg" width="500px">
<hr><br>
</body>
</html>
多媒体标签
图片展示
</h2>
<hr>
<img src="../images/1.jpg" width="500px">
<hr><br>
<h2>
音乐播放
</h2>
<hr><br>
<audio src="/mus/反方向的钟.mp3" controls="controls">正在播放：反方向的钟.mp3</audio>
<hr><br>
<h2>视频播放</h2>
<hr><br>
<video controls="controls"><source src="/mus/mss.mp4" type="video/mp4" />正在播放：杭州美术生.mp4</video>
<hr><br>
表格标签
<hr><br>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
form标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
form表单
</title>
</head>
<body>
<h2>表单实例</h2>
<form action="1.php" method="post" enctype="multipart/form-data">
账号：<input type="text" name="username" value="admin">
<br><br>
地址：<input type="text" value="上海市浦东新区xx路xx号" readonly disabled size="40" />
<br><br>
密码：<input type="password" name="userpwd">
<br><br>
性别：<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br><br>
爱好：<input type="checkbox" name="like[]" value="1">足球
<input type="checkbox" name="like[]" value="1">篮球
<input type="checkbox" name="like[]" value="1">台球
<input type="checkbox" name="like[]" value="1">电竞
<br><br>
头像：<input type="file" name="headpic">
<br><br>
日期：
<select name="year">
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
<br><br>
简介：
<textarea cols="30" rows="6"></textarea>
<br><br>
<input type="submit" name="提交">
<input type="reset" name="重置">
</form>
</body>
</html>
效果：
1243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
