1、html概念
①html ：hyper text markup language 超文本标记语言（超文本标签语言）
②html文件 是由html这个语言写的文件。
这些标签告诉WEB浏览器如何显示页面。
HTML文件可以通过记事本来创建，文件扩展名必须为html或htm。（建议用html作为扩展名，避免一些新软件打不开以htm为扩展名的文件）
HTML文件又叫html文档。
2、html标签
标签的格式： <标签名> 封装的数据 </标签名> 或者 <标签名/> 前者是双标签的格式，后者是单标签的格式
标签名大小写不敏感
标签拥有自己的属性，还可以自定义标签的属性。
<html>
<head>
<title>这里写页面的标题</title>
<base href="http://www.baidu.com/" target="_blank" />
</head>
<body>
<a href="http://www.xxx.com/ ">首页</a>
<a href="bbs/index.html" target="_self ">论坛</a>
<p> <b>这是我的第一个页面,此句话被加粗了</b></p>
</body>
</html>
3<html>标签
<html>标签告诉浏览器此 HTML 文件的起点。</html>标签告诉浏览器，这是 HTML 文件的结束点。
4 <head>标签
head 元素可包含关于文档的信息。head标签较为特殊，
在 <head> 标签和 </head> 标签之间的内容是头信息。
头信息不会显示在浏览器窗口中。只以下标签才能放到
head标签之间，
它们分别是 <title>、<base>、<meta>、
<scirpt>、<link>、<style>
<title>标签：标签之间写的字符串就是该页面的标题。对当前页面核心内容的一个简短的、概括性描述，会显示在浏览器的标题栏，还会出现在浏览历史列表和书签中，也是搜索引擎的一个重要索引项。
<title>CSDN-专业开发者社区</title>
<base/>标签:单标签。为页面上的所有链接设置默认url地址(由href属性指定)和默认目标窗口（由target属性指定）
<base href="http://www.baidu.com/" target="_blank" />
当页面的某个链接没有写href属性或target属性（比如a标签），
或链接写错时,导致链接无效，也会采用base中设置的默认链接。
<meta/>标签：单标签。提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
常见的就是描述网页的关键字、网页内容描述、搜索引擎向导、作者、版权声明等，以便搜索引擎对网页的信息进行查找和分类。如：
<head>
<meta name="keywords" content="HTML, CSS, RWD" />
<meta name="description" content="Study HTML, CSS, RWD for free" />
<meta name="robots" content="all" />
<meta name="author" content="csdn, www.csdn.com" />
<meta name="copyright" content="仅供学习使用，欢迎转载、评论、交流" />
</head>
到了HTML5，一切都变简单了，只需设置meta标签的charset属性来定义网页所使用的编码字符集。
<meta charset="utf-8"/>
5 <script>标签
这个标签在学校JavaScript时用到。
6 <h1>标签
h1 - h6 都是标题标签，h1的字号最大，h6的字号最小。
用过markdown语法的同学对此肯定很熟悉
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
结果如下：
7<a>超链接标签
Hypertext Reference 超文本引用，俗称超链接，指向一 些网络资源，类似指针，通过他，就可以访问那个资源。
具有同种思想的还有一个常常在多个标签中出现的src属性，此属性的值也是一个地址，是一种引用。
8列表标签
敲代码技巧
输入 ul>li*3 后直接敲Tab键，就会输出
<ul>
<li></li>
<li></li>
<li></li>
</ul>
>可以理解成 子元素，是可以连续使用的,即嵌套。
其他敲代码的小技巧，可点击：
HTML标签敲代码小技巧
9 img标签
img标签可以在html页面上显示图片。
常用属性：
- src:设置图片的路径
- width:设置图片宽度
- height：设置图片高度
- border：设置图片边框大小
- alt：当根据src找不到图片时，用来代替显示的文本内容。
注意：在HTML4.0中，img标签的align、border、hspace、vspace不赞成使用，在HTML5中，不再支持这些属性。
绝对路径和相对路径
我们知道，在javaSE中有相对路径和绝对路径，
相对路径：从工程名开始算；
绝对路径：就是在磁盘上哪个目录下。盘符：/目录/文件名。
在web中路径也分为相对路径和绝对路径两种：
相对路径：
.一个点表是当前文件所在的目录
..两个点表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件。相当于./文件名，./可以省略
绝对路径：
正确格式是：http://ip:port/工程名/资源路径
而非磁盘路径。因为这是在网络上，要用ip和端口号。
10 <table>标签
是非常常用的标签。
简单模拟：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="http://www.baidu.com" target="_self">
<title>表格的使用复习</title>
</head>
<body>
<table border="2">
<tr>
<td >地方精选特产</td>
<td rowspan="2">云糕细腻香甜</td> <!--只夸2行，即这一个方格占1*2-->
<td rowspan="2" colspan="2" > </td> <!-- 跨2行跨2列，即这一个方格占2*2-->
</tr>
<tr>
<td>古田特级银耳</td>
</tr>
<tr>
<td rowspan="2" colspan="2">辽宁美食大观园</td>
<td>老字号：经典味道</td>
</tr>
<td>手工艺：万种风情</td>
<tr>
</table>
</body>
</html>
11 <input>标签
很常用的标签，常常和form标签一起使用。
input的属性：
注意：replace属性已经没有了。
补充一个属性：placeholder 占位符，他的值就是占位值，常用于输入框。
用户名:<input type="text" placeholder="请输入用户名">
效果如下：
input标签最常用的属性type，此属性可以使input标签具有不同的功能，比如变成密码输入框、多选框、单选、下拉等
input标签的另一个重要的属性：value
12 <textarea>标签
<textarea name="personalInfo" id="textarea01" cols="30" rows="10">我是默认内容。请输入你的内容</textarea>
<!--
是一个多行纯文本编辑控件，当你想让用户输入大量自由格式的文本(例如评论或反馈表单上的评论)时，它很有用。
id属性:此标签的id，需唯一
name属性，提交表单时提交给服务器的key。
我们知道表单提交时是以key-value的形式(即键值对形式)提交给服务器的,
值就是输入的文本。
Rows和cols属性，设置文本域的大小，即指定行、列是多少。设置这些参数有助于保持一致性，因为浏览器的默认值可能不同。
在标签之间输入的内容是默认内容。
不支持value属性
-->
13<select>下拉列表标签
敲select>option*4 然后按Tab键
<select name="nations" id="nations" >
<option >选择国籍..</option>
<!--加上selected属性，默认选中中国。下面其实是selected="selected"的简写-->
<option value="china" selected="selected">中国</option>
<option value="usa">美国</option>
<option value="xrb">日本</option>
</select>
14 <form>表单标签
form标签就是表单。要提交给服务器。也是很常用的标签。
表单格式化：在form标签内使用table标签、input标签、
如何写代码：先有一个整体的、大概的样子，然后敲除整体得结构，再往里面添东西。比如这个例子，先根据需求敲出多个，然后在各自的中敲出多个,敲完后，再往td里填写其他东西，比如其他的标签。其实，这就是标签嵌套使用的过程，要先把外部结构搭建好，一层层往里，这样多标签使用才不容易乱
form例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form的格式化测试</title>
</head>
<body>
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1>用户注册</h1>
<!--使用table标签就是为了格式好看，都对齐。-->
<table >
<tr>
<td> 用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td> 密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td> 确认密码</td>
<td><input type="password" name="password2"></td>
</tr>
<tr>
<td> 邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td> 性别</td>
<td><input value="man" type="radio" name="sexselection">男 <input value="woman" type="radio" name="sexselection"> 女</td>
</tr>
<tr>
<td>国籍</td>
<td>
<select name="selectlist">
<option value="china" selected="selected">中国</option>
<option value="xrb">日本</option>
<option value="bz">韩国</option>
<option value="usa">德国</option>
<option value="els">俄罗斯</option>
<option value="jnd">加拿大</option>
</select>
</td>
</tr>
<tr>
<td>以下你喜欢的角色有</td>
<td>
<input type="checkbox" value="zhongli" name="hobby"> 钟离 <br>
<input type="checkbox" value="keli" name="hobby"> 可莉 <br>
<input type="checkbox" value="diaona" name="hobby"> 迪奥娜 <br>
<input type="checkbox" value="feixeier" name="hobby"> 菲谢尔 <br>
<input type="checkbox" value="xiaogong" name="hobby"> 霄宫 <br>
<input type="checkbox" value="ningguang" name="hobby"> 凝光 <br>
</td>
</tr>
<tr>
<td>简单的自我介绍</td>
<td>
<textarea rows="10" cols="15" name="desc"></textarea>
<input type="reset" >
</td>
</tr>
<tr>
<td>
<input type="submit" >
</td>
</tr>
</table>
</form>
</body>
</html>
上面例子中，form的使用的method是post，如果改成get，然后在页面中填写信息，就可以在浏览器地址栏里看到下面的东西：
在浏览框中能看到以下信息.以名字/值对的形式发送给服务器，即name/value对的形式，所以，一些标签中必须写上name属性和value属性，只有写上了，才能把这些数据发送给服务器。
http://localhost:8080/?action=login&username=%E6%89%80%E5%BF%B5%E7%9A%86%E6%98%9F%E6%B2%B3&password=1&password2=1&email=2213273020%40qq.com&sexselection=man&selectlist=china&hobby=zhongli&hobby=keli&hobby=diaona&desc=asd
这就是表单使用get方式，你填写后，这些信息会发送给
指定的服务器。密码都暴露在地址栏里，可见get方式是不安全的。
所以，表单的提交常用post。
补充说明：
http是服务器的ip地址
？是分隔符
action 是<input type="hidden" name="action" value="login" /> 此标签的 名字/值对。
& 是连接符，用于连接多组名字/值对。
15div、span、p标签
span：范围
div:division 分隔
p:paragraph 段落