全面的HTML标签：
全面的HTML属性：
HTML基本标签：
注意：
1，双引号可以改成单引号，也可以不写，语法非常松散
2，浏览器会自动地在标题的前后添加空行。
3，默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
4，换行<br> 与 <br />
<br> 与 <br /> 很相似。
即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
段落标签<p>
标题字：<h1>--<h6>
换行标签<br><br/>（单目标签,一般使用后面的）
横线标签<hr>
预留格式标签<pre>
文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <font > | 字体标签 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <s> | 不赞成使用。使用 <del> 代替。 |
| <strike> | 不赞成使用。使用 <del> 代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
链接标签：<a href="网站名称">
图像标签：<img>
<!doctype html>
<html>
<head>
<title>HTML的基本标签</title>
</head>
<body>
<!--段落标记-->
<p>HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，</P>
<p>它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，
它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，
将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，
并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页</p>
<!--标题字，是HTML预留的格式，和word中的标题字相同-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
<!--换行标签-->
hello
HTML；
hello <br>
HTML;
<!--横线标签，也是一个独目标签-->
<hr>
<!--color 和width都是hr标签的属性-->
<hr color="red" width="50%">
<!--预留格式标签-->
for(int i=0;i<10;i++){
Systme.out.println(i);
}
<pre>
for(int i=0;i<10;i++){
Systme.out.println(i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
<!--右上角字-->
10<sup>2</sup>
<!--右下角字-->
10<sub>m</sub>
<font color="red" size="10">字体标签</font>
<!--超链接标签-->
<a href="http://www.w3school.com.cn">w3school</a>
<!--图像标签,图片名称和尺寸是以属性方式提供的-->
<img src="图片路径" width="100px" height="100px"/>
</body>
</html>实体符号：
< :表示小于号 > :是大于号 ：表示空格
注意有很多实体符号，只是列出常见的。
<!doctype html>
<html>
<head>
<title>HTML的实体符号</title>
</head>
<body>
<!--会和标签冲突-->
b<a>c
<!--实体符号以&开始，以 ; 结束,< :表示小于号 > :是大于号-->
b<a>c
<!--加空格,没有使用标签，加再多空格都是一个-->
<br>
a b<br>
a b
</body>
</html>表格：
<!doctype html>
<html>
<head>
<title>HTML的表格</title>
</head>
<body>
<!--表格标签<table>,
表格标签里面有，<tr>标签表示行，
行标签里面有,<td>标签表是单元格，-->
<table>
<tr>
表格第一行
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
表格第二行
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
表格第三行
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
<table>
<tr>表格第一行</tr>
<tr>表格第二行</tr>
<tr>表格第三行</tr>
</table>
<!-- border="1px" width="300px" height="150px"
设置表格的边框为1像素，
宽度为300像素, 高度为150像素
宽度可以用百分比，如果页面有变化，表格也会变化
-->
<table border="1px" width="300px" height="150px">
<!--align对齐方式，
可以在整行，也可以在单元格，整张表也可以使用该元素。
center 居中-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td align="center">d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</html>单元格合并：
<!doctype html>
<html>
<head>
<title>表格的单元格合并</title>
</head>
<body>
<table border="1px" width="50%" height="300px">
<!--注意事项：
1，row（行）合并的时候，删除下面的单元格，添加rowspan属性
2，col(列）合并的时候，对删除哪个没有要求，添加colspan属性
-->
<tr>
<td>a</td>
<td colspan="2">b</td>
<!--<td>c</td>-->
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<!--<td>i</td>-->
</tr>
</table>
</body>
</html>th标签：
一般用于表格的第一行。
<!doctype html>
<html>
<head>
<title>表格的单元格合并</title>
</head>
<body>
<table border="1px" width="50%" height="300px">
<tr>
<!--th标签会自动居中，并且加粗 -->
<th>a</th>
<th colspan="2">b</th>
<th>c</th>
</tr>
<tr>
<td>a</td>
<td colspan="2">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<!--<td>i</td>-->
</tr>
</table>
</body>
</html>HTML元素：
HTML元素指的是从开始标签到结束标签的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href="default.htm" > | This is a link | </a> |
| <br /> |
HTML元素语法：
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
HTML属性：
1，HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
2，属性总是以名称/值对的形式出现，比如：name="value"。
3，属性总是在 HTML 元素的开始标签中规定
链接<a>：
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
注意：
1，href属性后面一定是一个资源的地址。可以是绝对路径，也可以是相对路径。
可以是网络资源的地址，也可以是本机资源的地址
2，超链接有一个target属性：（不展示，可以去自己试一试）
可取值：_blank:新窗口，点一下链接会打开一个新的页面
_self:当前窗口，点一下链接会刷新当前的页面进行跳转。
_top:顶级窗口，
_parent:父窗口
<a href="http://www.w3school.com.cn">This is a link</a>
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>浏览器显示如下：
Coffee
Black hot drink
Milk
White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
HTML表单<form>
<input> 元素
<input>标签也是单目标签，一般使用<input ....../>
<input> 元素是最重要的表单元素。（ 离开表单同样可以使用的）
<input> 元素有很多形态，根据不同的 type 属性。
列出常见的几个：
| 类型 | 描述 |
|---|---|
| text | 定义常规文本输入。 |
| radio | 定义单选按钮输入（选择多个选择之一），一般需要手动定义value， |
| submit | 定义提交按钮（提交表单），会把所有的form里面的内容全部提交，以name=value&name=value...的形式 |
| password | 定义密码形式的文本输入 |
| button | 普通按钮 |
| reset | 清空内容按钮， |
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html 表单</title>
</head>
<br>
<!--
1，表单有什么用？
收集用户信息，表单展现之后，用户填写表单，点击提交按钮提交数据给服务器
2，怎么画一个表单？
使用form标签画表单
3,一个网页可以有多个表单form
4，表单最终是要提交数据给服务器的,from标签有一个action属性
这个属性用来指定服务器地址，
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样，都可以向服务器发送请求（request）
5,http://localhost:8080这是请求路径，表单提交数据最终交给
localhost（IP地址号）机器上的8080端口对应的软件
6,表单是以什么格式提交数据给服务器的
form.html?username=%E6%88%91&password=w
格式：action？name=value&name=value......
http协议规定的，必须以这种格式提交给服务器
重点强调：表单项写了name属性的，一律会提交给服务器。
不想提交这一项就不要写name属性。
文本框和密码框的value属性不需要程序员指定，用户输入的是什么value就是什么
当value没有写的时候但是有name属性，value的默认值是空字符串""
,会将空字符串提交给服务器。Java代码得到的是：String s="";
-->
<form action="http://localhost:8080/a">
<!-- 画一个提交按钮，这个提交按钮可以提交表单
画按钮可以使用input输入域
type=submit的时候表示该按钮是一个提交按钮，具有提交数据的能力
对应按钮来说 ，按钮有一个value属性，用来指定按钮上显示的文本信息
-->
<input type="submit" value="注册 "/>
<!-- type=button的时候只是一个普通按钮，不具有提交数据的能力 -->
<input type="button" value="普通按钮"/>
</form>
<!-- 可以直接跳到百度页面
这个提交按钮和普通的超链接没有什么太大的区别
超链接和表单都可以向服务器发送请求，只不过表单发送请求的时候
可以携带数据
-->
<form action="http://www.baidu.com">
<input type="text"/>
<!-- 会把form表单中的数据都给提交 -->
<input type="submit" value="百度"/>
</form>
<form action="http://localhost:8080/jc/save">
用户名<input type="text"/></form>
密码 <input type="password"/></br>
<input type="submit" value="登录"/>
</form>
<!-- 为了更好看可以使用表格 -->
<form action="http://localhost:8080/a/c">
<table border="1px">
<tr>
<td>用户名</td>
<!-- 必须在input标签内添加name属性，要不然不会携带数据提交 -->
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录"/>
<input type="reset" value="清空" >
</td>
</tr>
</table>
</form>
</body>
</html>get ,post区别。
和各种标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册的表单</title>
</head>
<body>
<!--
用户注册：
用户名
密码
确定按钮
性别
兴趣爱好
学历
简历
form表单method属性：（如果不指定默认是get）
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post:采用post方式提交的时候，用户提交的信息不会显示在地址栏上。
当用户提交的信息有敏感信息建议使用post
post提交的时候提交的格式是和get一样的，只是不显示在地址栏上
post提交的数据格式还是：name=value&name=value......
超链接也可以提交数据给服务器，但是提交的数据是估计不变的
超链接是get请求。不是post请求，
<a href="http://localhost:8080/a?uesr=zhangsan&password=111">提交</a>
-->
<form action="http://localhost:8080/jc/c" method="post">
用户名：
<input type="text" name="username"/>
<br>
密码:
<input type="password" name="password"/>
<br>
确定按钮:
<!-- 不需要提交给服务器 -->
<input type="password" />
<br/>
性别：
<!-- name如果一样，表示一组，只能选一个
真正提交的是里面的内容，
单选按钮必须手动指定value
checked可以加在后面表示默认选择
-->
<input type="radio" name="gender" value="1"/>男
<input type="radio" name="gender" value="0"/>女
<br/>
兴趣爱好：
<!-- 需要手动指定value -->
<input type="checkbox" name="interest" value="study"/>学习
<input type="checkbox" name="interest" value="drink"/>喝酒
<input type="checkbox" name="interest" value="read"/>看动漫
<br/>
学历：
<!-- 下拉列表 ，选中哪个提交哪个，默认选中在后面添加selected-->
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
</select>
<br/>
简历:
<!-- 文本域,rows指定行数，cols指定列数
文本域没有value属性，用户填写的数据就是value
-->
<textarea rows="10" cols="20"></textarea>
<br/>
<input type="submit" value="提交"/>
<input type="reset"value="清空"/>
</form>
</body>
</html>多选下拉列表，和各种控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表支持多选</title>
</head>
<body>
<!--需要按住CTRL键才能多选
multiple="multile" 支持多选的
size设置显示的条目数量
-->
<select multiple="multile" size="2">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
<!-- file控件,点击可以选中本地文件 -->
<input type="file"/>
<!-- hidden控键 -->
<form action="http://localhost:8080/o/a">
<!-- 隐藏域，网页内容上看不到，如果是get请求地址栏是会显示，但是表单提交的时候数据会自动提交给服务器 -->
<input type="hidden" name="userid" value="111"/>
用户代码<input type="text" name="usercode"/>
<input type="submit" value="提交"/>
<!--
readonly， disabled都是只读不能改
但是readonly可以提交给服务器
disabled不能提交给服务器，有name属性也不行
-->
<input type="text" name="user " value="111" readonly/>
<input type="text" name="password" value="124" disabled/>
</form>
<!-- input控键的maxlength属性 ,
控制最多输入字符数量-->
<input type="text" maxlength="3"/>
</body>
</html>HTML <style> 元素
注意：这里有CSS里面的内容，为了更清晰的理解先引入了。
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<div> 和 <span>
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
HTML <span> 元素是行内元素，能够用作文本的容器。
1,div和span是什么？有什么用
div和span都可以称为“图层”
图层的作用就是 为了保证页面可以灵活的布局。
div和span 是可以定位的，只要定下div左上角的x和y轴的坐标即可。
2，其实最早的网页采用table布局，但是table不灵活，太死板
现代的网页开发中div布局使用最多，
div也可以嵌套
div和span的区别：
div独自占用一行（默认情况下）
span不会独自占有一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span</title>
</head>
<body>
<div id="div1">我是一个div</div>
<div id="div2">我是一个div</div>
<span id="span1">我是一个span标签</span>
<span id="span2">我是一个span标签</span>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>id属性：
HTML
id属性用于 为HTML 元素指定唯一的 id。一个 HTML文档中不能存在多个有相同 id 的元素。
使用 id 属性
id属性指定 HTML 元素的唯一 ID。id属性的值在 HTML 文档中必须是唯一的。
id属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
下面的例子中我们有一个<h1> 元素，它指向 id 名称 "myHeader"。这个<h1> 元素将根据 head 部分中的#myhead 样式定义进行样式设置：
class属性：
类是HTML元素的非唯一标识符
每一个元素都有class属性 ，相同的class，被认为是同一组的元素
Class 与 ID 的差异
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：
7781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
