网页的组成
- 结构（HTML）：超文本标记语言
- 表现(CSS):层叠样式表
- 行为(JavaScript):脚本语言
一个良好的网页要结构、表现、行为三者分离
HTML简介
是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
-
HTML文档也叫做 web 页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html> <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。 <title> 元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落
HTML基本语法
- HTML中的标签分为成对出现的标签和自结束标签
- HTML中的标签不区分大小写，但是建议小写
- 标签可以嵌套但不能交叉嵌套
- 成对出现的标签必须正确关闭
- 属性必须有值且值必须加引号
- 注释不能嵌套
<!-- 1.标签的分类 -->
<!--
标签分为成对出现的标签和自结束标签两种
-成对出现的标签：如：<html></html> 、<head></head> 、 <p></p>
-自结束标签：如：<img />、<input /> 、<br/>
-->
<!-- 2.标签不区分大小写 -->
<P>标签不区分大小写，但建议小写</p>
<!-- 3.标签可以嵌套但不能交叉嵌套 -->
<div><p>标签可以嵌套，但不能交叉嵌套</div></p>
<!-- 4.标签必须正确关闭 -->
<p>成对出现的标签必须正确关闭</p>
<!-- 5.属性必须有值，且属性值必须加引号 -->
<font color="red">我要红</font>
<!-- 属性值没有加引号 -->
<font color=red>我要红2</font>
<!-- 属性没有值 -->
<font color="">我要红3</font>
<!-- 6.注释不能嵌套 -->
<!-- 注释的快捷键是：Ctrl+shift+/ -->
<!-- <!-- 我是嵌套的注释 --> -->HTML属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
HTML常用标签
标题标签
<h1></h1> ~ <h6></h6>div标签
<div>我是div标签，我主要用来布局，我默认占用浏览器的一整行</div>p标签
<p>我是一个段落，我默认也是占用浏览器的一整行，而且前后要空一行</p>
<br> 标签换行（新行)：
<p>这个<br>段落<br>分行</p>转义字符
小于号：< 大于号：> 空格： 版权符：©列表
无序列表
<ul>
<li>网页</li>
<li>新闻</li>
<li>贴吧</li>
</ul>
有序列表
<ol>
<li>网页</li>
<li>新闻</li>
<li>贴吧</li>
</ol>图片
<img alt="" src="/images/..." width="258" height="39" />
• 通过img标签向网页中插入一张图片
• alt属性：用来设置当图片无法显示时的描述性信息
• src属性：用来设置图片的路径
• 在相对路径中，通过../来返回上一级目录，返回多级目录使用多个../
超链接
<a href="http://..." target="_blank">这是一个链接</a>
• 使用a标签来创建一个超链接
• href属性：用来设置要跳转的页面的地址
• targe属性：用来设置要跳转的页面在何处打开
• _self：在当前窗口打开，默认值
• _blank：在新的窗口打开表格
| 标签 | 描述 |
|---|---|
| table | 定义表格 |
| th | 定义表格的表头 |
| tr | 定义表格的行 |
| td | 定义表格单元 |
| caption | 定义表格标题 |
| colgroup | 定义表格列的组 |
| col | 定义用于表格列的属性 |
<!-- 使用table标签来创建一个表格 -->
<table border="1">
<!-- 通过tr标签来表示表格中的行 -->
<tr>
<!-- 通过th标签来表示表格中的表头 -->
<th>姓名</th>
<th>阵营</th>
<th>职业</th>
<th>武器</th>
</tr>
<tr>
<!-- 通过td标签来表示表格中的列（单元格） -->
<td>刘备</td>
<!-- 跨行合并单元格使用rowspan属性来设置 -->
<td rowspan="4" align="center">蜀</td>
<td>蜀汉集团董事长</td>
<td>双股剑</td>
</tr>
<tr>
<!-- 通过td标签来表示表格中的列（单元格） -->
<td>诸葛亮</td>
<!-- <td>蜀</td> -->
<!-- 跨列合并单元格使用colspan属性来设置 -->
<td colspan="2" align="center">蜀汉集团CEO</td>
<!-- <td>破扇子</td> -->
</tr>
<tr>
<!-- 通过td标签来表示表格中的列（单元格） -->
<td>关羽</td>
<!-- <td>蜀</td> -->
<td>荆襄总裁</td>
<td>青龙偃月刀</td>
</tr>
<tr>
<!-- 通过td标签来表示表格中的列（单元格） -->
<td>张飞</td>
<!--<td>蜀</td> -->
<td>阆中销售经理</td>
<td>丈八蛇矛</td>
</tr>
</table>
表单
表单是一个包含表单元素的区域。表单本身并不可见。
from
| 标签 | 描述 |
|---|---|
| form | 定义供用户输入的表单 |
属性：
- Action 属性
action 属性*定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
在上面的例子中，指定了某个服务器脚本来处理被提交表单：
<form action="action_page.java">如果省略 action 属性，则 action 会被设置为要跳转的页面。
-
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.java" method="GET"><form action="action_page.java" method="POST">GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
`action_page.php?firstname=Mickey&lastname=Mouse` 注释：GET 最适合少量数据的提交。浏览器会设定容量限制。
POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form> 表单元素
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
input
类型：
| 标签 | 描述 |
|---|---|
| input | 定义输入域 |
| text | 文本输入的单行输入字段 |
| password | 定义密码字段 |
| chekbox | 定义复选框 |
| radio | 定义单选按钮输入（选择多个选择之一） |
| submit | 定义提交按钮（提交表单） |
| reset | 定义重置按钮 |
属性：
| 属性 | 描述 |
|---|---|
| type | 表单项的类型 |
| name | 为控件命名，以备后台程序用 |
| value | 提交数据到服务器的值（后台程序使用） |
| selected | 设置默认被选中 |
select
定义下拉列表：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi" selected="selected">Audi</option>
</select><option> 元素定义待选择的选项.
列表通常会把首个选项显示为被选选项.
selected 属性来定义预定义选项。
textarea
定义多行输入字段（文本域）：
<textarea name="message" rows="10" cols="30"> textarea </textarea>
button
定义可点击的按钮:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<body>
<!-- 通过form标签创建一个表单 -->
<!-- action属性：用来设置服务器的地址 -->
<!-- 通过method属性可以设置表单提交的请求的方式，可选值有GET和POST -->
<form action="success.html" method="post">
<!-- 1.表单中的表单项通过input标签表示，表单项的类型通过input标签中的type属性来指定 -->
<!-- 2.表单项必须设置name属性值，用户输入的数据通过name属性值进行携带，以键值对的形式发送到服务器，
如：username=admin89&password=999999
-->
用户名：<input type="text" name="username"><br/><br>
密码：<input type="password" name="password"><br><br>
<!--
1.要保证单选按钮单选，必须将它们设置为一组，即将它们的name属性值设置为同一个
2.单选按钮提交的是value属性值，所以必须设置value属性值
3.通过checked="checked"设置默认被选中
-->
性别：<input type="radio" name="gender" value="man" checked="checked">男
<input type="radio" name="gender" value="woman">女<br><br>
<!--
1.必须将复选框它们设置为一组，即将它们的name属性值设置为同一个
2.复选框提交的是value属性值，所以必须设置value属性值
3.通过checked="checked"设置默认被选中
-->
你的爱好： <input type="checkbox" name="hobby" value="money">钱
<input type="checkbox" name="hobby" value="beauty" checked="checked">美女
<input type="checkbox" name="hobby" value="sleeping">睡觉
<br><br>
选择列表：
<select name="star">
<!-- 如果没有指定value属性值，提交的是option中的文本值，如果设置了value属性值，提交的就是value属性值 -->
<option value="bdyjy">one</option>
<option>two</option>
<!-- 通过selected="selected"设置默认被选中 -->
<option selected="selected">three</option>
<option>four</option>
<option>five</option>
<option value="fbb">six</option>
</select>
<br><br>
<input type="reset">
<!-- 通过value属性值设置按钮中显示的文本 -->
<input type="submit" value="登录">
</form>
</body>
java
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。