网页由三部分组成：内容，表现，动作，其中内容和表现使用HTML语言实现，而动作作为用户和页面的交互，一般使用js实现，其中这里使用HTML语言通过IDEA实现
HTML入门
HTML文件的创建
由于新版的IDEA没有Static web这个选项，所以我选了Web模块里的Web模块
建好以后再新建一个模块选中html文件即可
最终在IDEA中出现这个代码并将titile改成标题，body处增加你想要的字并选中你想要的浏览器运行即可
HTML的书写规范
HTML一般由< html >，< head >，< body >，< title >三个标签组成，这三个标签都以< /标签名 >为结束
< html > 整个html页面的开始
< head > 头信息
<tile>标题</tile> 标题信息
</head>
<body>
内容
</body>
</html> 整个html页面的结束
HTML的代码注释的书写格式
<!--注释内容-->
HTML的标签介绍
1.标签的格式
<标签名>封装的数据</标签名>
2.标签名对大小写不敏感
3.标签拥有自己的属性
基本属性：修改简单的样式效果
事件属性：设置事件响应后的代码
4. 标签分为单标签和双标签
单标签:<标签名/>
其中<br/>为换行<hr/>添加水平线
双标签<标签名>封装的数据</标签名>
标签的语法
1.标签不能交叉嵌套
两个标签嵌套必须从第一个标签的头尾内包含第二个标签的头尾，不能够让第二个标签的尾部包含第一个标签的尾部
正确<head1><head2>内容</end2></end1>
错误<head1><head2>内容</end1></end2>
2.标签必须正确闭合
一个双标签必须有头有尾，不允许无头无尾
单标签必须加上/
3.属性必须要有值，且要以双引号引用
4.注释不可以嵌套：注释里套注释
常用标签
这里给出一个标签的说明文档
https://www.w3cschool.cn/htmltags/html-reference.html
特殊字符
由于在html中会将<，>等符号自动转义，所以就需要一些字符来将这些字符显示出来，字符实体有三部分：一个和号 ‘&’ 和一个实体名称（或者一个 ‘#’ 和一个实体编号），以及一个分号‘;’。
在这里列举出常用的特殊字符
1.<和>
>对应< //less than
<对应> // great than
2.空格
空格对应  //nb的space键
标题标签
标题标签一共由6个，从h1至h6，从大到小
对齐属性 align :right left center
默认为左对齐
<h1 align="right">标题1</h1>
<h2 align="left">标题2</h2>
<h3 align="center">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
超链接标签
超链接标签为<a></a>,常用的属性为href和target
href属性设置跳转的链接
target属性设置哪个目标进行跳转，常用参数为_self和_blank，_self表示当前窗口，_blank表示新窗口，其中_self为默认值。
<a href="http://localhost:8080" target="_blank"></a>
<a href="http://localhost:8080" target="_self"></a>
列表标签
有序列表和无序列表
列表标签一般分为：有序列表和无序列表,其中type属性可以修改列表项前的符号
1.创建无序列表<ul></ul>
2.创建有序列表<></>
3.列表中的列表项<ls></ls>
常用无序表
<ul>
<ls>刘能</br></ls>
<ls>张三</ls>>
</ul>
下拉列表
下拉列表框标签:<select><select/>
属性：选项标签<option></option>
通过设置选项标签中的selected属性
selected="selected"来使默认值为哪个选项
img标签
img标签可以在HTML中显示图片，并修改长宽高和图片的属性
src属性设置图片的路径，分为相对路径和绝对路径
web中的相对路径：
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件
等价于：./文件名
web中绝对路径：
http://ip:port/工程名/资源路径
img标签<img/>
属性src读取图片的路径
属性width,height,border,alt，分别表示图片的宽度，高度，边框，在所设置的路径中读取不到图片时所填充的内容。
<img src="../picture/1.png" width="160" height="90" alt="图片找不到QAQ"/>
表格标签
table标签<table></table>
属性：border,width,height，设置边框，宽度，高度
属性：align设置表格相对于页面的对齐方式
属性：cellspacing设置单元格间距
行标签<tr></tr>
属性：rowspan可以跨行
列标签在HTML中当作单元格处理，使用<td></td>
属性:colspan可以跨列
属性有align设置单元格内容居中，居左，居右
表头标签<th></th> 自动将单元格内容居中并加粗
内容加粗标签<b></b>
跨行和跨列操作都是产生新的单元格来实现跨行和跨列,如果在进行跨行和跨列操作的时候，要记得删除多余的行和列的单元格
<table border="1" width="160" height="90" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td><b>2.1</b></td>
<td>2.2</td>
<td><b>2.3</b></td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
iframe内嵌窗口标签
iframe标签<iframe></iframe>
属性：src表示iframe内部的内容网页
width,height表示窗口的宽度和高度
name表示iframe窗口的名字
iframe内嵌窗口与超链接标签
设置<a></a>标签中的targe=iframe属性的name值，则可以实现通过这个<a></a>的超链接，让iframe的内嵌窗口内的内容跳转到这个超链接。
<iframe src="hello.html" width="300" height="400" name="abc"></iframe>
<br/>
<ul>
<li><a href="hello.html" target="abc">没有页面的页面1</a></li>
<li><a href="hello.html" target="abc">没有页面的页面2</a></li>
<li><a href="hello.html" target="abc">没有页面的页面3</a> </li>
</ul>
表单标签
表单是HTML页面中所有收集用户信息的集合，然后把这些数据发给服务器
表单显示
表单标签<form></form>
定义输入控件<input/>
属性：type
- type=txt 文本输入框，value设置默认内容
- type=passward 密码输入框，value设置默认内容
- type=radio 单选框，name对其分组，checked="checked"表示默认选中
- type=checkbox为复选框标签， checked="checked"表示默认选中
- type=submit为提交按钮,value为按钮上的文本
下拉列表框:<select></select> 其中<option></option>表示下拉标签框中的选项
多行文本输入框：<textarea></textarea>
属性:rows为行高度，cols为列高度
<!DOCTYPE html>
<html lang="zh_CH">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<form>
用户名<input type="tex" value="默认值"/><br/>
密码<input type="password"/><br/>
确定密码<input type="password"/><br/>
性别<input type="radio" checked="checked" name="sex"/>男<input type="radio" checked="checked" name="sex"/>女<br/>
兴趣爱好<input type="checkbox" checked="checked"/>编程<input type="checkbox"/>看书<input type="checkbox" checked="checked">睡觉<br/>
国籍<select>
<option>---请选择国籍---</option>
<option selected="selected">---中国---</option>
<option>---韩国---</option>
</select><br/>
自我评价<textarea rows="10" cols="20">在此显示默认值</textarea><br/>
<input type="reset" value="修改"><input type="submit" value="提交"/>
<input type="button" value="按钮"/>
<input type="file" value="文件"/>
</form>
</body>
</html>
表单格式化
表单格式化就是将每一行定义的文字和输入框装入表格，并表格进行调整从而对表单进行调整
<!DOCTYPE html>
<html lang="zh_CH">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<form>
<table align="center" cellspacing="10">
<tr>
<td>用户名:</td>
<td><input type="tex" value="默认值"/><br/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password"/><br/></td>
</tr>
<tr>
<td>确定密码</td>
<td><input type="password"/><br/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" checked="checked" name="sex"/>男<input type="radio" checked="checked" name="sex"/>女<br/></td>
</tr>
<tr>
<td>兴趣爱好</td>
<td><input type="checkbox" checked="checked"/>编程<input type="checkbox"/>看书<input type="checkbox" checked="checked">睡觉<br/></td>
</tr>
<tr>
<td>国籍</td>
<td>
<select>
<option>---请选择国籍---</option>
<option selected="selected">---中国---</option>
<option>---韩国---</option>
</select><br/>
</td>
</tr>
<tr>
<td>自我评价</td>
<td><textarea rows="10" cols="20">在此显示默认值</textarea><br/></td>
</tr>
<tr>
<td align="right"><input type="reset" value="修改"><input type="submit" value="提交"/><br/></td>
<td align="right"><input type="button" value="按钮"/><br/></td>
</tr>
<tr>
<td><input type="file" value="文件"/></td>
</tr>
</table>
</form>
</body>
</html>
表单提交
使用from的两个属性：
1.action:提交服务器地址
2.method提交的方式：get或post
get请求的特点是：
1.地址栏的是：action属性+[？+请求参数]，多组之间用&连接
2.数据提交不安全
3.数据长度限制
post请求的特点是：
1.地址栏中只有action属性值
2.更加安全
3.数据长度没有限制
<form action="localhost:8080" method="get">
表单没有发给服务器的三种情况：
1.表单项没有name属性值
2.单选，复选，括弧，下拉列表中option都需要添加value属性，以便发给服务器
3.‘表单项不在提交的from中
其他标签
div标签:<div></div>默认占一行
span标签:<span></span>长度是封装数据的长度
p段落标签:<p></p>上方或下方空出一行，已有空行则不空行
IDEA快捷键分享
1.注释：Ctrl+Shift+/
扫一扫
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
