HTML
超文本标记语言
属性
<a href="">内容</a>
<img src=""/>
不区分大小写 建议小写
作用:开发静态页面
运行环境: 浏览器
开发环境:记事本 dw hbuilder
注释
<!-- -->
文字
标题
<h1>我的第一个标题</h1>
段落
<p>我的第一个段落</p>
列表
有序列表
<ol type="a">
<li>香蕉</li>
<li>苹果</li>
</ol>
有序列表(从c开始)
<ol type="a" start="3">
<li>香蕉</li>
<li>苹果</li>
</ol>
无序列表
<ul type="circle">
<li>java</li>
<li>c++</li>
</ul>
自定义列表
<dl>
<dt>想要描述的对象,可以是文字或图片</dt>
<dd>
描述内容,也可以是超链接
</dd>
<dd>
描述内容,也可以是超链接
</dd>
</dl>
列表的嵌套
有序列表的嵌套
<ol>
<li>香蕉</li>
<li>苹果</li>
<ol type="a">
<li>大苹果</li>
<li>小苹果</li>
</ol>
</ol>
#无序列表的嵌套
<ul type="circle">
<li>java</li>
<ul>
<li>javaee</li>
<li>javase</li>
</ul>
<li>c++</li>
</ul>
常用的字符实体
空格:
<:<
>:>
":"
版权:©
':'
图片
<img src="img/w3.jpg" width="800" title="这是一只小猫猫" alt="小猫猫不见了"/>
其中src属性必须要有,后面的属性可以没有
超链接
页面间链接
从一个页面导航到另一个页面
<a href="image.html">超链接的文本</a>
如果需要返回到原网页,可以在这个网页上再加一个超链接
<a herf="link.html">超链接的文本</a>
页面内链接
1.锚标记 <a name="abc">...</a>
2.锚链接 <a href="#abc">....</a>
<body>
<dl>
<dt>微信电脑版</dt>
<dd>
<a href="#download">下载</a>
</dd>
</dl>
<div style="height: 9999px;"></div>
<ul>
<li>
<a name="download">电信高速下载1</a>
</li>
<li>电信高速下载2</li>
<li>电信高速下载3</li>
<li>电信高速下载4</li>
</ul>
</body>
功能性链接
<a href="mailto:1344346@163.com">新闻投稿</a>
表格
最基本的标签 table tr td th caption
<table border="1" width="400" height="200">
<caption>姓名信息表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</table>
属性 border rowspan colspan
表格跨行跨列
<table border="1">
<tr>
<td colspan="3">111</td>
</tr>
<tr>
<td rowspan="2">222</td>
<td>222</td>
<td rowspan="2">222</td>
</tr>
<tr>
<td>333</td>
</tr>
</table>
分组 thead tbody tfoot
<table border="1" width="400" height="200">
<caption>姓名信息表</caption>
<thead>
<tr>
<th>姓名</th>
<th>支出</th>
<th>收入</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>50000</td>
<td>35000</td>
</tr>
<tr>
<td>李四</td>
<td>80000</td>
<td>60000</td>
</tr>
</tbody>
<tfoot>
<td>总计</td>
<td>130000</td>
<td>950000</td>
</tfoot>
</table>
表单
填写数据的一组标签
get标签在地址栏里可以看到,将数据附加在url后面以明文方式提交,并且
地址栏能接收到的数据是有限的,由于是以字符串形式提交的,二进制数据
无法提交
post便签在地址栏里看不到,随着请求报文提交,数据量理论上不受限制
,取决于服务器。
输入型
单行文本框
<form action="http:www.baidu.com" method="get">
用户名<input type="text" name="username" maxlength="10"/>
<br />
密码<input type="password" name="password" />
<br />
<input type="submit" value="登录" />
</form>
多行文本框
<textarea rows="6" cols="50">xxxxxxxxxxxxxxxx</textarea>
密码框
<input type="password" name="password" />
点击选择型
单选按钮
性别:<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
其中name必须一样
多选按钮
选修课程:
<input type="checkbox" name="course"/>java
<input type="checkbox" name="course"/>c++
<input type="checkbox" name="course"/>c#
下拉列表
所在城市:
<select>
<option value="许昌">许昌</option>
<option value="郑州">郑州</option>
<option value="开封">开封</option>
<option value="武汉">武汉</option>
</select>
数字上拉下拉选择
<input type="number" min="5" max="20" value="10" step="1"/>
选择日期
<input type="date" name="date"/>
选择颜色
<input type="color" name="color"/>
选择文件
<input type="file" name="xxx"/>
提交按钮
<input type="submit" value="登录" />
<button>提交</button>
重置按钮
<input type="reset" value="重置"/>
触发按钮
<input type="button" value="点歌" onclick="alert('你想干啥?')"/>
图片按钮
<input type="image" src="img/btn_reg.gif"/>
隐藏域
<input type="hidden" value="r31xaqeg"/>
默认选择
checked=“checked”
selected=“selected”
例如:
<input type="radio" name="sex" checked="checked"/>男
<input type="checkbox" name="course" checked="checked"/>java
<option value="郑州" selected="selected">郑州</option>
禁止登陆
<input type="submit" value="登录" disabled="disabled"/>
禁止输入用户名
<input type="text" name="username" maxlength="10" value="张三" readonly="readonly"/>
右对齐
<td align="right">注册邮箱:</td>
框架
1.框架集
主要用于网络布局
实现点击超链接,内容在右面边框打开:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/w3.jpg" width="120" align="middle"/>
<span style="font: bold 80px '微软雅黑';">许昌</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><a href="f3.html" target="a">信息工程学院</a></li>
<li><a href="f4.html" target="a">体育学院</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>
信息工程学院
</dt>
<dd></dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>
体育学院
</dt>
<dd>xxxxxxxxxxxxxxxxxxxxxxx</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="200,*" frameborder="0">
<frame src="f1.html" scrolling="no"/>
<frameset cols="200,*" frameborder="0">
<frame src="f2.html" scrolling="no"/>
<frame src="f3.html" name="a" scrolling="no"/>
</frameset>
</frameset>
</html>
2.内联框架
主要用来做页面复用
例如写一个搜索的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="post">
<input type="text" name="text" size="50"/>
<input type="submit" value="搜索" />
<!--
超链接被引用后在新的窗口打开
<a href="f5.html" target="_top">信息工程学院</a>
-->
</form>
</body>
</html>
在另一个页面中复用这个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>aaaaaaaaaaaaaaaaa</p>
<iframe src="search.html" width="500" height="60" frameborder="0" scrolling="no"></iframe>
<p>bbbbbbbbbbbbbbbbb</p>
</body>
</html>
标签分类
1.块级标签
自带换行,<div></div>
,多用于布局
段落<p></p>
标题<h1></h1>
2.行级标签
不带换行<a></a>
<span></span>
用于修饰中间的一小块,如商品降价
价格:<span style="font: bold 18px 微软雅黑; color: red;">¥998</span> 1500
<hr />
:在页面显示一条水平线
<br />
:换行
<label></label>
<label for="username">用户名</label><input type="text" name="username" id="username"/>
<label for="aa">同意</label>
<input type="radio" id="aa"/>
如果for和id值相同,点击文字和文本框有一样的效果