目录
一、网页的组成
- 结构：使用HTML标签定义网页主体结构。
- 表现：设定HTML网页结构的展示形式，包括：颜色、边框、布局等等。
- 行为：让原本静态的页面能够动态和用户互动。
二、HTML概述
1、作用
HTML这门技术存在的意义就是定义网页的主体结构。
2、名字
HTML：Hyper Text Markup Language超文本标记语言
-
Hyper Text：超文本。HTML本身是文本文件，但是网页上却可以显示图片、视频等等多媒体数据。
-
Markup：标记，或者说标签。意思是HTML内部主要是由标签组成的。
-
Markup Language：标记语言，和编程语言不同，标记语言只有标签、属性、文本。没有流程控制、数据类型、异常处理等等功能。
3、HelloWorld
-
第一步：新建文本文件，把扩展名改成html
-
第二步：编写代码
-
第三步：用浏览器打开，看看效果
<html>
<!-- 这是注释，不会在浏览器上显示出来 -->
<!-- head标签定义网页的头部 -->
<head>
<!-- title标签定义网页的标题 -->
<title>这是网页的标题：HelloWorld</title>
<!-- meta标签用来设置网页元数据 -->
<!-- charset="UTF-8"告诉浏览器解析当前网页使用的字符集 -->
<meta charset="UTF-8">
</head>
<!-- body标签定义网页的主体 -->
<body>
<!-- body标签内的标签负责浏览器窗口显示 -->
<p>HelloWorld HTML！</p>
</body>
</html>4、使用IDEA创建HTML页面
①创建静态资源module
创建module时，在Language这里选择Javascript即可。
②创建 HTML 文件
在module根目录下创建HTML文件，不需要写扩展名。IDEA创建的HTML文件自动包含如下结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>5、语法规则
只需编写正确的HTML代码，不要违背规则
- 根标签有且只有一个，就是html标签。
- 标签必须正确关闭双标签：
- 有开始标签也有结束标签
- 单标签：自己结束。以前旧的标准，要求自己关闭，现在最新标准不关闭也可以。
- 标签可以嵌套，但不能交叉嵌套。
- 注释不能嵌套
- 属性必须有值，属性值必须加引号，单、双引号都可以
- 如果属性名和属性值一致，属性值可以省略
- 标签和属性值都不区分大小写，但建议用小写
三、各个具体标签
1、应用场景：展示一篇文章
①标题标签
HTML一共提供了六个级别的标题，不同级别的标题体现了不同的逻辑层级。
<h1>物质条件</h1>
<h2>有房吗？</h2>
<h3>多少平方？</h3>
<h2>有车吗？</h2>
<h3>什么品牌？</h3>
<h2>有存款吗？</h2>
<h3>有几位数？</h3>
<h1>兴趣爱好</h1>
<h2>喜欢狗吗？</h2>
<h2>喜欢猫吗？</h2>
<h2>喜欢看书吗？</h2>
<h3>什么书？</h3>
<h4>列举一段</h4>②段落
段落用来显示一篇文章的正文。在浏览器显示时，每一个段落独占一行。
<p>叶剑英是功勋卓著的开国元帅，长期担任党、国家和军队重要领导职务，同时他还是一位素有“儒帅”美誉，深得毛泽东、周恩来等老一辈无产阶级革命家高度评价的诗人。</p>
<p>他的许多诗句饱含深刻哲理，令人展卷仰止，字里行间充满的浩然之气与他多次在重大和紧要历史关头的力挽狂澜、表现出的伟大革命气魄相得益彰，相互辉映。</p>③换行
专门负责换行。
<p>当我深情凝望你的眼眸，<br/>昨夜的红酒焚尽了情殇。</p>④列表
<!--无序列表-->
<ul>
<li>对抗路</li>
<ul>
<li>战士</li>
<li>坦克</li>
</ul>
<li>发育路</li>
<ul>
<li>射手</li>
<li>辅助</li>
</ul>
<li>中路</li>
<ul>
<li>法师</li>
<li>辅助</li>
</ul>
<li>野区</li>
</ul> <!--有序列表-->
<ul>
<ol>
<li>打野</li>
<li>辅助</li>
</ol>
</ul>⑤HTML 实体
作用是在HTML页面上显示特殊符号，常用包括空格和大于号、小于号。
<!-- 多个空格-->
<p>回眸一笑      百媚生</p>
<!--<:生成小于号 >:生成大于号-->
<P>100 < 200</P>
<P>1314 > 520</P>官方的常用实体列表：
⑥块
专门为了实现页面布局而设计出的标签，配合CSS使用。
<div>回眸一笑百媚生，定睛一看是如花(独占一行)</div>
<span>span块不会导致换行</span>
<span>span块不会导致换行</span>
<span>span块不会导致换行</span>
<span>span块不会导致换行</span>⑦路径
-
物理路径：D:\file\html\index.html
-
相对路径：./hello/file/index.html
-
当前目录：./
-
上一级目录：../
-
由于我们的项目虽然在本地开发，但是，是在服务器上运行，所以必须具备『可迁移性』。所以我们开发中，不能使用物理路径。
⑧图片
用于在网页上显示图片。
<img src="../images/no1.jpg" height=216px width=384px>
<img src="../images/no2.jpg" height=216px width=384px>
<img src="../images/no3.jpg" height=216px width=384px>
<img src="../images/no4.jpg" height=216px width=384px>
<img src="../images/no5.jpg" height=216px width=384px>⑨超链接
作用从当前页面跳转到另一个页面
<a href="page01.html">跳转到目标页面</a>
<br>
<a href="page03.html" target="_blank">跳转到目标页面[新窗口中打开]</a>2、应用场景：展示数据表格
①表格本身
<table>
<tr>
<!--表头单元格-->
<th>名称</th>
<th>属性</th>
<th>分路</th>
</tr>
<tr>
<!--普通单元格-->
<td>花木兰</td>
<td>战士</td>
<td>战坦路</td>
</tr>
<tr>
<td>妲己</td>
<td>法师</td>
<td>中路</td>
</tr>
<tr>
<td>后羿</td>
<td>射手</td>
<td>发育路</td>
</tr>
</table>②设置边框
<style>
table{
border: 1.5px solid deeppink;
border-collapse: collapse;
}
th,td{
border: 1.5px solid deeppink;
}
</style>
③合并单元格
<tr>
<td>漩涡鸣人</td>
<!-- rowspan 属性：设置当前单元格横跨几行 -->
<td rowspan="2">风</td>
<!-- colspan 属性：设置当前单元格横跨几列 -->
<td colspan="2">下忍</td>
<!-- 被合并单元格覆盖的单元格通常要删掉<td>木叶</td> -->
<!-- 被合并单元格覆盖的单元格通常要删掉<td>砂</td> -->
</tr>3、应用场景：提供表单供用户填写数据
①form标签定义整个表单
<!-- form 标签：本身不显示，仅仅只是从逻辑上定义一个表单 -->
<!-- action 属性：指定表单提交的目标地址（将来这里肯定是对接 Java 程序） -->
<!-- method 属性：指定提交当前表单后，使用什么请求方式。可选值包括：get、post -->
<!-- 请求方式建议使用 post -->
<form action="page01.html" method="get">
</form>
<form action="page01.html" method="post">
</form>②name属性
一个表单可以向服务器提交很多数据，服务器接收后需要分清哪个数据对应哪个具体属性。
"tom",25,"java",5000
所以每一个数据，都需要专门起一个名字，这个名字就通过表单项的 name 属性来指定
③按钮
<button type="button">普通按钮,需要配合js使用，否则点击无效</button>
<button type="submit">提交按钮，点击之后提交表单</button>
<button type="reset">重置按钮，点击之后表单项恢复默认值</button>④请求参
如果请求参数放在URL地址后面，那么遵照下面格式：
-
请求参数列表和请求地址之间用问号分开
-
请求参数名和请求参数值之间用等号分开
-
各个请求参数之间用&符号连起来
⑤GET请求和POST请求区别
-
GET请求：请求参数附着在URL地址后面
-
如果请求参数中包含密码，那么密码就会明文显示出来，不安全
-
请求地址这里能够携带的数据有限，如果请求参数多，可能丢失
-
-
POST请求：请求参数放在请求体中
-
请求参数放在请求体中，不容易被看到，安全行更好
-
POST请求使用请求体发送数据没有数据量的限制，所以将来上传文件就必须使用POST请求方式
-
⑥密码框
密码：<input type="password" name="userPwd"/><br>⑦表单隐藏域
不会在浏览器窗口有任何显示，但是能够携带数据发送到服务器端。通常用来维护私密的、后端需要拿到的数据。
<input type="hidden" name="userId" value="5533" />
⑧单选按钮
请选择你喜欢的季节：<br/>
春天：<input type="radio" name="season" value="spring" /><br/>
夏天：<input type="radio" name="season" value="summer" checked /><br/>
秋天：<input type="radio" name="season" value="autumn" /><br/>
冬天：<input type="radio" name="season" value="winter" /><br/>⑨多选按钮
选择喜欢的菜<br>
京酱肉丝<input type="checkbox" name="dishes" value="jingjiangrousi"/><br>
宫保鸡丁<input type="checkbox" name="dishes" value="jiding"/><br>
鱼香肉丝<input type="checkbox" name="dishes" value="yuxiangrousi"/><br>
开水白菜<input type="checkbox" name="dishes" value="baicai"/><br>
葱烧海参<input type="checkbox" name="dishes" value="haishen"/><br>
油闷大虾<input type="checkbox" name="dishes" value="daxia"/><br>
溜肉段<input type="checkbox" name="dishes" value="rouduan"/><br>
锅包肉<input type="checkbox" name="dishes" value="guobaorou"/><br>
地锅鸡<input type="checkbox" name="dishes" value="ji"/><br>checkbox：名词，是指一个多选框
checked：形容词，是指被选中的状态
⑩多行文本框
<textarea name="desc" cols="30" rows="20">duifadbzilucha;jdbnzpuhfa;jdn;kljchbailjdbflkjd p diaopdijfha;old iodh o; h
</textarea>
⑪下拉列表
<select name="food">
<option value="null" ></option>
<option value="liurouduan">溜肉段</option>
<option value="guobaorou" selected>锅包肉 </option>
<option value="disanxian">地三鲜</option>
</select>12.文件上传的表单
<!--上传文件的表单-->
<form action="target.html" method="post" enctype="multipart/form-data">
请选择你的头像<input type="file" name="picture"/><br>
<button type="submit">上传头像</button>
</form>
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
