11、认识基本主体标签
根标签<html></html> 、头标签<head></head> 、网页体标签<body></body>
<!--这是根-->
<html>
<!--头-->
<head>
<!--标题栏-->
<title>my first html page</title>
</head>
<!--网页体-->
<body>
<!--这里的内容显示到网页上！-->
这是我的第一个HTML页面！
</body>
</html>2、基本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本标签1</title>
</head>
<body>
<!-- 段落标签 p-->
<p>理想的储存器：容量大、速度快、价格低。但以上三种要求在实际应用中是相互矛盾：（1）速度快，价格高。
（2）容量大，价格低。（3）容量大，速度慢。为达到最佳效果的存储器，唯一方法：采用多种储存技术，
构成多级储存层次结构。</p>
<!-- 换行标签 br -->
<br>
hhhhhhhhh我在换行哦
<br>
<br>
<!-- 标题标签h1-h6 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 斜体字标签 i -->
<i>斜体字</i>
<br>
<!-- 粗体字标签 b -->
<b>粗体字</b>
<br>
<!-- 插入字标签 ins -->
<ins>插入字</ins>
<br>
<!-- 删除字标签 del-->
<del>删除字</del>
<br>
<!-- 右上角标签10^2 sup -->
10<sup>2</sup>
<br>
<!-- 右下角标签 sub -->
m<sub>2</sub>
<br>
<!--font字体标签-->
<!--color是字体颜色，size是字号-->
<font color="red" size="12">hello world!</font>
<br>
<!-- 水平线、独目标签 hr -->
<hr>
<hr color="red">
<hr color="blue">
<hr color="green">
<br>
<br>
<!-- 保留格式标签 pre -->
<pre>
for(int i = 0; i < 100; i++){
System.out.println("i = " + i);
}
</pre>
<br>
<br>
</body>
</html>
效果示例图
3、实体符号标签
<!DOCTYPE html>
<html>
<head>
<!-- 标签meta <!-- 设置浏览器字符编码方式，编码方式和文件的编码方式相同-->
<meta charset="utf-8">
<title>实体符号</title>
</head>
<body>
<!--1、空格-->
1、<br>
a b<br>
a bc<br>
a b<br><br>
<!-- 2、小于号 -->
2、<br>
a<b<br><br>
<!-- 3、大于号 -->
3、<br>
a>b<br><br>
</body>
</html>
效果示例图
4、表格标签1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<!-- 表格标签 table -->
<!-- border用来设置边框的宽度，1px表示1像素 -->
<table border="" cellspacing="" cellpadding="" align="center" width="40%">
<!-- 表格行标签 tr -->
<tr>
<!-- 表格单元标签 th/td -->
<!-- th可以代替td做单元格，th中的内容会自动加粗，会自动居中。 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>Data</td>
<!-- 合并行单元格,比如合并两个格 colspan="2"-->
<td colspan="2">Data</td>
<!-- <td>Data</td> -->
</tr>
<!-- 内容居中 align="center"-->
<tr align="center">
<td>Data</td>
<td>Data</td>
<!-- 合并列单元格，比如合并两个格 rowspan="2"-->
<td rowspan="2">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<!-- <td>Data</td> -->
</tr>
</table>
</body>
</html>
效果示例图
5、表格标签2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>thead tbody tfoot</title>
</head>
<body>
<!-- 一个table可以被thead tbody tfoot分隔为三部分。 -->
<!-- 这个语法主要是为了后期javascript提供方便。 -->
<table border="1px" width="50%">
<thead>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800.0</td>
</tr>
<tr>
<td>7370</td>
<td>KING</td>
<td>8000.0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</tfoot>
</table>
</body>
</html>
6、背景颜色/图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色&图片</title>
</head>
<!-- 指定背景颜色 -->
<!-- <body bgcolor="aquamarine"> -->
<!-- 指定背景图片 -->
<body background="image\pictrue3.png">
</body>
</html>
7、图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<!-- 背景图片 -->
<body background="images/bd.jpg">
<!-- 图片标签 img -->
<!-- <img src="images/xxx.png"></img> -->
<!-- 开始标签和结束标签之间没有内容的话，把结束标签删除掉，开始标签末尾添加 / -->
<!-- src属性：用来指定图片的路径 -->
<!-- width属性：用来指定图片的宽度，高度会等比例缩放！ 不要手动设置高度。-->
<!-- title属性用来设置鼠标悬停时的提示信息。 -->
<img src="images/bd.png" width="200px" title="点击我跳转到百度哦!" />
<!--alt用来指定当图片加载失败的时候的提示信息 -->
<img src="im/xxx.png" alt="图片找不到了哦!" >
</body>
</html>
8、a标签设置超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!-- 标签a,a标签常用来表示一个锚点或超链接,所有浏览器都支持a标签。 -->
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.jd.com">京东商城</a>
<br>
<a href="http://www.126.com">126邮箱</a>
<br>
<a href="https://map.baidu.com">百度地图</a>
<!-- 图片可以做热链接吗？可以 -->
<a href="https://map.baidu.com">
<!-- 标签嵌套使用！ -->
<img src="./image/bd.png" width="200px" title="点击我跳转到百度地图哦!" />
</a>
<br>
<br>
<!-- 关于超链接的target属性 -->
<!-- target属性用来设置，最终打开窗口的位置 -->
<!--
target ：
_blank：新窗口
_self：当前窗口
_parent：当前窗口的父窗口
_top：当前窗口的顶级窗口
-->
<a href="http://www.baidu.com" target="_self">百度（当前窗口）</a><br>
<a href="http://www.baidu.com" target="_blank">百度（新窗口）</a><br>
<a href="http://www.baidu.com">百度（默认是怎样的？当前窗口）</a><br>
<hr>
<!-- 一个窗口中的内部窗口 iframe -->
<iframe src="http://www.baidu.com"></iframe>
</body>
</html>
9、表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--
1、什么是表单有什么用？
表单最主要的作用就是：收集用户的信息,用户点击表单提交的时候，
不但可以发送请求，而且请求中还可以携带输入的数据。
表单对应的英语单词是：form
2、怎么定义一个表单对象呢？语法格式
<form>
表单项1:
表单项2:
</form>
另外要注意：一个网页上可以有多个表单对象。
3、form标签中有一个action属性，这个属性和超链接的href相同。
都需要填写url。
-->
<!-- 超链接-->
<a href="http://www.baidu.com">百度</a>
<br><br><br>
<!-- 表单-->
<form action="http://www.baidu.com">
<!-- 点击按钮触发请求，所有能够提交表单的按钮，type必须是submit，不能随便写 -->
<!-- <input type="submit"/> -->
<!-- 设置按钮上显示的文本 -->
<input type="submit" value="百度"/>
<!-- button是一个普通按钮，能提交表单吗？不能。 -->
<!-- <input type="button" value="百度"/> -->
</form>
<!-- submit提交按钮放在form外面也是不行的！-->
<input type="submit" value="百度(外)"/>
</body>
</html>
10、无序/有序列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!-- 无序列表标签 ul -->
<ul type="circle">
<!-- 列表项标签 li-->
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
<li>俄国</li>
</ul>
<!-- 有序列表标签 ol -->
<ol type="A">
<li>水果
<ol type="a">
<li>香蕉</li>
<li>哈密瓜</li>
<li>菠萝</li>
<li>苹果</li>
</ol>
</li>
<li>蔬菜</li>
<li>茶
<ol type="I">
<li>绿茶
<ol type="1">
<li>西红柿茶</li>
<li>龙井</li>
<li>毛尖</li>
</ol>
</li>
<li>红茶</li>
</ol>
</li>
</ol>
</body>
</html>
11、登录表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!-- 登录表单 -->
<!-- action路径随便写了 url-->
<!--
http://192.168.145.2:8080/crm/login
协议：http协议
访问的服务器IP地址：192.168.145.2
访问这个服务器上的那个软件：8080端口对应一个服务。
/crm/login：是这个服务器上的某个资源名！（它可能是一段处理登录的java程序！！！）
重点:表单最终提交的时候，表单项的name属性非常重要，有name的才会提交。没有name是不会提交的。
并且浏览器向服务器提交数据的格式是？
url?name=value&name=value&name=value&name=value&name=value
以上的提交数据的格式，是W3C指定的格式。所有浏览器都是这样的。
表单提交数据格式：
http://192.168.145.2:8080/crm/login?x=zhangsan&y=111
浏览器提交数据：name=value&name=value&name=value
类似map：
key value
---------------------------
x zhangsan
y 111
-->
<form action="http://192.168.145.2:8080/crm/login">
<!-- input是输入域，type不同，展示样式不同。text表示文本框 -->
用户名：<input type="text" name="x"/><!-- 文本框和密码框的value实际上是不需要程序员提供的，是用户输入的！ -->
<br>
<!-- type="password"表示密码框 -->
密码：<input type="password" name="y" />
<br>
<!-- 提交表单的按钮 -->
<input type="submit" value="登录"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册的表单</title>
</head>
<body>
<!-- name有，就能提交，没有name属性就不能提交。 -->
<!-- 提交格式：name=value&name=value&name=value -->
<form action="http://localhost:80/crm/register">
<!-- input输入域 -->
用户名 <input type="text" name="username" />
<br>
密码 <input type="password" name="userpwd" />
<br>
性别 <!-- 最终提交给服务器的数据是：sex=1 或者 sex=0 -->
<!-- 同一组的单选按钮radio，name是需要一致的，这样才可以做到单选的效果 -->
<!-- checked 表示默认选中此项 -->
<!-- input输入域 -->
<input type="radio" name="sex" value="1" checked />男
<input type="radio" name="sex" value="0"/>女
<br>
兴趣
<!-- input输入域 -->
<!-- 复选框checkbox，同一组的复选框name也是一致的。 -->
<input type="checkbox" name="aihao" value="smoke"/>抽烟
<input type="checkbox" name="aihao" value="drink" checked />喝酒
<input type="checkbox" name="aihao" value="firehair" checked />烫头
<br>
学历
<!-- 下拉列表 select -->
<!-- multiple 表示下拉列表支持多选 -->
<!-- size是设置下拉列表一次最多显示的条目数量。 -->
<select name="xueli" size="3">
<!-- 假设选中专科，提交的是：xueli=zk -->
<!--滚动列表中的一个元素显示-->
<option value="gz">高中</option>
<option value="zk">专科</option>
<option value="bk" selected >本科</option><!-- selected默认选中 -->
<option value="ss">硕士</option>
</select>
<br>
简介
<!-- 文本域标签 textarea -><!-- value是用户填写的！-->
<textarea rows="10" cols="60" name="jianjie"></textarea>
<br>
<!--input输入域 提交表单 -->
<input type="submit" value="注册" /><!-- 这个提交按钮不能有name，不然，这个按钮的value也会提交给服务器。 -->
<!-- 重置按钮 -->
<input type="reset" value="重置" />
<!-- 普通按钮不能提交 -->
<input type="button" value="普通按钮" />
</form>
</body>
</html>
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
