20-HTML与HTML5常用标签(前端)
感谢你的路过，希望学生的笔记能给你一点微不足道的参考
Java基础思维导图，完整Java体系的链接
目录标题
-
- 一，B/S: Browser/Server 浏览器/服务器端
- 二， HTML
-
- 2.1. 概念：是最基础的网页开发语言
- 2.2 快速入门：
- 2.3 开发工具:HBuilder
- 2.4 常用标签：
- 2.5 标签分类
- 2.6 链接标签：
- 2.7 表格标签：
- 2.8 表单标签：非常重要（建议直接看代码，更详细）
- 2.9 框架
- 2.10 常用的布局组合标签
- 2.11 HTML4与HTML5的区别
- 2.12 转义符号
- 练习：
一，B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点：
1. 开发、安装，部署，维护 简单
* 缺点：
1. 如果应用过大，用户的体验可能会受到影响
2. 对硬件要求过高
B/S架构详解
* 资源分类：
1. 静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2. 动态资源：
* 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
* 我们要学习动态资源，必须先学习静态资源！
* 静态资源：
* HTML：用于搭建基础网页，展示页面的内容
* CSS：用于美化页面，布局页面
* JavaScript：控制页面的元素，让页面有一些动态的效果
二， HTML
2.1. 概念：是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言。 HTML 运行在浏览器上，由浏览器来解析。
2.2 快速入门：
1. html文档后缀名 .html 或者 .htm
2. 标签分为
1. 围堵标签：有开始标签和结束标签。如
2. 自闭和标签：开始标签和结束标签在一起。如
3. 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：
正确：
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。
2.3 开发工具:HBuilder
再给的资料里，直接解压就能用
2.4 常用标签：
1.基本结构：构成html最基本的标签
* html:html文档的根标签
其他标签都要在他里面
lang属性：你的文件是那个国家的
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
定义浏览器标题的
* body：体标签
定义浏览器内容的
* ：html5中定义该文档是html文档
* HTML注释以结尾。 可以是一行，也可以是多行
代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面title>
head>
<body>
hello html 这是我的第一个HTML页面
body>
html>
2. 文本标签：和文本有关的标签
标签
* to ：标题标签
* h1~h6:字体大小逐渐递减
*
：换行标签
*
：段落标签
*
：展示一条水平线
* 属性：
* color：颜色
* width：宽度
* size：高度
* align：对其方式
* center：居中
* left：左对齐
* right：右对齐
* ：范围标签 一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。
不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标签包裹，然后修改它的样式。
代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<h1>1、与文本相关的标签h1>
<h2>摸鱼儿.雁丘词h2>
<p>为世间情为物,很难大彻大悟；p>
<p><span style="color: red;">感情span>上的事，真的不能过于盲目。p>
<p>为世间情为物,很难大彻大悟；<br/>感情上的事，真的不能过于盲目。p>
<hr color="red" size="5" />
<h1>1级标题h1>
<h2>2级标题h2>
<h3>3级标题h3>
<h4>4级标题h4>
<h5>5级标题h5>
<h6>6级标题h6>
body>
html>
3. 图片标签：
*< img/>：展示图片
* 属性：
* src：指定图片的位置
相对路径
* 以.开头的路径
* ./：代表当前目录 ./image/1.jpg
* ../:代表上一级目录
热点区域（例子）：
代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<h1>2、图片标签h1>
<img src="../img/bg1.png" usemap="#myMap" />
<map name="myMap">
<area shape="circle" coords="100,100,100" href="circle.html" title="圆形"/>
<area shape="rect" coords="400,100,600,200" href="rect.html" title="矩形"/>
<area shape="poly" coords="500,300,600,400,500,400" href="poly-triangle.html" title="三角形"/>
<area shape="poly" coords="300,240,400,300,360,400,240,400,200,300" href="poly.html" title="多边形"/>
map>
<img src="../img/cat.jpg" title="服不服?" width="200px" height="300px"/>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<h1>我是圆形h1>
body>
html>
aDOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<h1>我是多边型--三角形h1>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<h1>我是矩形h1>
body>
html