什么是HTML
HTML是用来描述网页的一种语言
* HTML是超文本标记语言，不是一种编程语言，而是一种标记语言
* 标记语言是一条标记标签
* HTML是使用标记标签来描述网页
HTML标签
HTML标签通常被称为HTML标签
* HTM标签由尖括号扩起来的 例如 <htlm>
* 标签通常是成对出现<b></b>
* 标签第一个是开始标签，第二个是结束标签
* 开始和结束标签称为开放标签和闭合标签
* 自动换行的叫做块级标签，不自动换行的叫做行级标签
web游览器的作用是读取HTML，并以网页的形式显示他们
资源全部用相对路径，资源全部存放在工程中
乱码解决方案，title属性设置
<html>
<head>
<title>
网站的标题
</title>
<meta charset="UTF-8"> <!--运行过程中出现乱码 HTML5.0解决方案-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!--运行过程中出现乱码 HTML4.0解决方案-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.comm"> <!--5秒后刷新到某个指定页面，如果不写url 5秒刷新当前页-->
<meta name="keywords" content="java,c#,net,php"> <!--属性,设置网页关键字-->
<meta name="description" content="网页的描述">
<!-- ../表示返回上一级文件，资源全部用相对路径，资源全部存放在工程中 -->
</head>
<body>
网站的内容
</body>
</html>
常用的文本图片属性标签
* <h1></h1> 标题标签
* <p></p> 换行标签
*  空格符号
* © 版权所有标签
* <ul><li></li></ul>无序列表
* <ol><li></li></ol>有序列表
* <strong>加粗</strong>
* <b>加粗</b><br>
* <em>斜体</em><i>斜体</i><br>
* <dl><dt></dt><dl>定义列表
* <img src="images/2.jpg" width="40" height="40" title="这个是图片,鼠标悬停时显示" alt="图片无法显示时显示"/>
* <pre>段落标签<pre>
* <hr/>分隔符
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<>
<head>
<title>标签练习</title>
</head>
<>
<!--标题标签-->
<h1>标签一</h1>
<h2>标签二</h2>
<h3>标签三</h3>
<h4>标签室</h4>
<h5>标签五</h5>
<h6>标签六</h6>
<!--控制字体属性-->
<font color="aqua" size="100">测试字体</font>
<!--换行标签-->
<p>自动换行，表示一个段落</p>
<p>自动换行，具有行间距</p>
换行书写，表示一个段落，不具有行间距<br>
一个新的段落<br>
<!--空格符号-->
有好多的空格 有三个空格<br>
<!--大于小于符号-->
a<b a>b<br>
XXXX版权所有©
<!--无序列表 如果type值等于null则去掉项目符号<ul type="">-->
<ul>
<!-- li 排序列表 -->
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<!--无序列表嵌套书写-->
<ul>
<li>吃饭</li>
<ul>
<li>吃肉</li>
<li>吃菜</li>
<li>吃面条</li>
</ul>
</ul>
<!--有序排序-->
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
<!--y有序排序，修改项目符号-->
<ol type="A">
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
<!--字体加粗，斜体字体-->
<strong>加粗</strong>
<b>加粗</b><br>
<em>斜体</em><i>斜体</i><br>
<!--定义列表-->
<dl>
<dt>咖啡</dt> <!--这是标题-->
<dd>这是一杯咖啡</dd> <!--这是内容-->
</dl>
<!--图片标签，自带结束,也可以只设置宽度px自动调整高度，设置宽度百分百，是游览器所占屏幕的半分比。高度只能用像素控制，无百分百-->
<img src="images/2.jpg" width="40" height="40" title="这个是图片,鼠标悬停时显示" alt="图片无法显示时显示"/>
<!--pre标签，标签区域里的内容不会编译-->
<pre>
a < b a > b
</pre>
<!--分割线-->
<hr/>
</body>
</html>
<a>锚点定位超链接，表格
* <a href="常用的标签01.html" target="_blank">超链接</a>
* <table><tr><td></td></tr><table> 表格标签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!--超链接标签 href表示需要跳转的连接，#表示本页，target表示打开方式， blank表示新窗口打开，self表示当前窗体打开-->
<a href="常用的标签01.html" target="_blank">超链接</a>
<!--锚点定位,快速跳转-->
<ol>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<!--定位超链接去向，#表示本页的four-->
<li><a href="#four">第四章</a></li>
<!--跳转其他页面的快速定位，#表示需跳转的页面的five-->
<li><a href="常用的标签01.html#five">第五章</a></li>
</ol>
<!--定义超链接名字-->
<h1><a name="four">第四章</a></h1>
<!--表格标签 ，border属性代表边框属性，align表示表格位置，wideth是相对游览器，tr代表行,td代表列-->
<!--rules 表示边框规则-->
<table border="1" align="center" width="100%" style="height: 500px;">
<!--tr中的align表示文本居中，水平位置;valign表示垂直位置-->
<tr align="center" >
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<tr>
</tr>
</table>
</body>
</html>
去掉表格的间隙 border
<table align="center" style="border-collapse:collapse;">
table表格垮行垮列合并
* 行合并使用rowspan
* 列合使用colspan
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!--表格标签 ，border属性代表边框属性，align表示表格位置，wideth是相对游览器，tr代表行,td代表列-->
<!--rules 表示边框规则-->
<table border="1" align="center" width="100%" style="height: 500px;">
<!--tr中的align表示文本居中，水平位置;valign表示垂直位置-->
<tr align="center" >
<td>姓名</td>
<td>科目</td>
<td>分数</td>
<td>总分</td>
</tr>
<!--单元格合并 rowspan 垮行三行，垮的行数需要删除不书写-->
<tr align="center" >
<td rowspan="3">张三</td>
<td>语文</td>
<td>80</td>
<td rowspan="3">xxxx</td>
</tr>
<tr align="center" >
<td>数学</td>
<td>90</td>
</tr>
<tr align="center" >
<td>英语</td>
<td>70</td>
</tr>
<tr align="center" >
<td rowspan="3">李四</td>
<td>第5行第二列</td>
<td>第5行第三列</td>
<td>第5行第四列</td>
</tr>
<tr align="center">
<td>第6行第二列</td>
<td>第6行第三列</td>
<td>第6行第四列</td>
</tr>
<tr align="center" >
<td>第7行第二列</td>
<td>第7行第三列</td>
<td>第7行第四列</td>
</tr>
<!--垮列合并，用colspan，垮列也需删除-->
<tr>
<td colspan="4">总结：xxxxxxxxxxxxxxxx</td>
</tr>
</table>
</body>
</html>
form表单标签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表单标签</title>
</head>
<body>
<!--表单标签 还有method属性有get和post方法，get网页会跟上内容，post提交网页不会跟内容-->
<form action="registerSuc.html">
<!--input标签为行级标签文本框属性 readonly="readonly"表示文本框只读 disabled=“disabled”表示禁用，用到按钮表示按钮无法触发-->
用户名:<input type="text" value="请输入用户名"/><br>
<!--maxlength表示最大长度-->
密码:<input type="password" maxlength="8"/>
<!--网页实现互斥效果，名字相同就为一组,checkde为设置为默认选择-->
性别:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
<!--input标签提交按钮 disabled=“disabled”表示禁用，用到按钮表示按钮无法触发-->
<input type="submit" value="注册">
<!--为了达到自动对其效果可以使用表格-->
<table align="center">
<tr>
<td align="left">用户名：</td>
<td><input type="text" value="请输入用户名"></td>
</tr>
<tr>
<td align="left">密码：</td>
<td><input type="password" ></td>
</tr>
<tr>
<td align="left">性别:：</td>
<td><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女</td>
</tr>
<tr>
<td align="left">婚姻状况:：</td>
<td><input type="radio" name="marriage" checked="checked">已婚<input type="radio" name="sex">未婚</td>
</tr>
<tr>
<td align="left">兴趣爱好：</td>
<td >
<!--复选框-->
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打豆豆
</td>
</tr>
<tr>
<td>上传图片</td>
<!--选择文件属性，按钮提交-->
<td><input type="file"/></td>
</tr>
<tr>
<!--图片标签-->
<td ></td>
<td><input type="image" src="1.jpg"/></td>
</tr>
<tr>
<td><input type="reset" value="清空"/></td>
<td><input type="button" value="按钮"/></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>请选择地址</td>
<td>
<!--下拉框-->
<select>
<option>--请选择--</option>
<option>四川</option>
<option>云南</option>
<option>贵州</option>
</select>
<select>
<option>--请选择--</option>
<option>四川</option>
<option>云南</option>
<option>贵州</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<!--文本域 row设置初始行数 cols控制宽度-->
<textarea rows="10" cols="30">XXXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
杂项标签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!--对元素进行分组-->
<fieldset>
<legend>必填选项</legend>
<table>
<tr>
<td>姓名</td>
<td><input type="text"/></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>选填选项</legend>
<table>
<tr>
<td>电话</td>
<td><input type="text"/></td>
</tr>
</table>
</fieldset>
<!--范围标签-->
价格：<span style="color: red;font-size: 24px">99元</span>
<!--lable标签可以用for属性选择服务位置 ,id为唯一的不可重复的-->
<label for="userName">姓名：</label><input type="text" id="userName" />
<!--滚动标签 direction属性控制方向-->
<marquee>系统公告：xxxxx活动开始</marquee>
</body>
</html>
简单的注册页面练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>注册页面</title>
</head>
<body>
<form action="../../Project/registerSuc.html">
<table align="center">
<tr>
<td>账号：</td>
<td><input type="text" value="请输入用户名"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>用户昵称：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" value="选择头像"/></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<input type="radio" name="sex"/>保密</td>
</tr>
<tr>
<td>手机号码：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>安全提题：</td>
<td>
<select>
<option>--请选择提示问题--</option>
<option>你第一次坐飞机去什么地方</option>
<option>你读的小学交什么名字</option>
<option>你最喜欢的歌曲是什么</option>
</select>
</td>
</tr>
<tr>
<td>问题回答</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>会员协议</td>
<td><textarea rows="5" cols="20">W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。
当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。赞助商：上海赢科投资有限公司。 蒙ICP备06004630号</textarea></td>
</tr>
<tr>
<td colspan="2" align="center">我已经同意此协议<input type="checkbox"/></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="注册"/> <input type="reset" value="重写填写"/></td>
</tr>
</table>
</form>
</body>
</html>
网友评论