目录
总结：
1.标签由标签名、标签属性和文本内容三部分组成（注意：单标签没有文本内容）。
2.标签属性是对标签的一种描述方式。
3.标签属性分通用属性、自有属性和自定义属性。
4.通用属性:所有标签都具有的属性（除
通用属性有：
id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。
class：用来给标签取一个类名。
style：用来设置该标签的行内样式。
title：当鼠标移到该标签，所显示的提示内容。
5.自定义标签属性：通常用来传值或用于图片懒加载等方面。
格式：data-*
<img data-src="图片名" alt="提示文本"/>
<p data-id="goodsid">...</p>
6.table主要用于呈现格式化数据。表格是由行和列组成。
格式：
<table>
<tr>
<th></th>
<td></td>
…
</tr>
...
</table>
7.table属性
border:表格边框，默认单位是像素
width:表格宽度，默认单位是像素
align:表格对齐方式（left（默认）/center/right）
cellpadding:单元格文本与边框的距离
cellspacing:单元格边框间距
8.跨行/跨列属性主要用来绘制复杂表格。
rowspan:跨行
colspan:跨列
9.完整表格组成：caption（标题)、thead（表头）、tbody（表体）和tfoot（表尾）四部分组成。
10.form表单标签是所有标签最核心标签之一。它是用来实现前后端交互的一个重要标签。
常用属性：
name:表单名称
action:表单数据提交的地方(通常是一个后台文件名(.jsp/.php/.asp/.aspx/.py等），或网址）。如果是#，表示提交到当前文件下。
method:前端提交数据到后端的方法，主要有：get和post,默认的是get。
11.表单元素分为：
1）input类：主用用来输入，选择或发出指令。
type:text/password/radio/checkbox/file/button/image/submit/reset
a.text:单行文本输入框 type="text"可以不写，默认值。
属性：placeholder(提示）/name（命名）/minlength和maxlength（最少/多输入的字符个数）/disabled（失效）/readonly（只读）
value（默认值）/pattern（正则匹配）
b.password:密码框 属性与text一样
c.radio:单选钮，通常是两项以上。常用属性有：name（必须要有）/value/checked（选中）/disabled（失效）/readonly（只读）
d.checkbox:复选框，可以用来选择0项、1项或多项。
常用属性有：name（必须要有）/value/checked（默认选中）/disabled（失效）/readonly（只读）
e.file:文件上传按钮
f.button:普通按钮，通常用它去调用脚本代码。
常用属性有：value（按钮的标题）/disabled（失效）
g.image:图片按钮，用法与button一样。有一个特殊属性：src(用来加载提示图片，用它替换了value)
它有提交功能，与submit功能一样。
h.submit:提交按钮，用来将表单数据提交到后台。
常用属性有：value（按钮的标题）/disabled（失效）
j.reset:重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态。
常用属性有：value（按钮的标题）/disabled（失效）
2）textarea类
文本域（也可以叫多行文本框），主要用于输入大批量的文本内容。
常用属性：name/id/cols(列数)/rows(行数)/placeholder/minlength/maxlength/required(必须输入)/value(获取内容)
3）select类
下拉列表框，默认用于单项选择。用option呈现每个选项。
multiple属性：表示可以多选，这时的下拉列表框变成了列表框
size:最多显示的行数
4）button类
普通按钮，具有提交功能。可以单独使用，不写在form元素中；如果写在form中，有提交功能。
1.Web基本概念
- 客户端：与用户进行交互，用于接收用户的输入(操作)、展示服务器端的数据以及向服务器传递数据 。
- 服务端：与客户端进行交互，接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据。
- 服务器的作用：与客户端进行交互，接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据；
“服务器”是一个非常宽泛的概念，从硬件而言:服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。从软件而言:服务器其实就是安装在计算机上的一个软件，根据其作用的不同又可以分为各种不同的服务器，例如应用服务器、数据库服务器、Redis服务器、DNS服务器、ftp服务器等等
- 常见的服务器操作系统：
-
Linux系统: 使用最多的服务器系统，安全稳定、性能强劲、开源免费（或少许费用）。
-
Unix系统: 和硬件服务器捆绑销售，版权不公开，用法和Linux一样。
-
Windows Server系统: 源代码不开放，费用高昂，漏洞较多，性能较差，运维成本高。
-
常见的服务器软件：Tomcat(应用服务器)、MySQL(数据服务器)、Redis、FastDFS、ElasticSearch。
-
虚拟机服务器：虚拟的电脑（模拟器）
业务
业务就是服务器应用程序中的各个功能，例如商城里面的: 注册、登录、添加购物车、提交订单、结算订单等等都称之为业务。
请求(request)：将客户端的数据发送到服务端，比如将用户的信息 发送到服务端
响应(response)：服务端的数据反馈到客户端 注册成功 注册失败
Web技术体系
客户端技术：
HTML、CSS、JavaScript、Vue、Ajax、Axios
服务器端技术：
Tomcat、Servlet、Request、Response、Cookie、Session、Filter、Listener、Thymeleaf
持久层技术(数据库技术已学)：
MySql、JDBC、连接池、DBUtils
- 网页的组成
- html：超文本标记语言 网页的框架 毛坯房
- js: js文件 将静态网页变为动态网页 能交互
- css: 样式 美化网页，精装房
2.HTML
HTML：Hyper Text Markup Language『超文本标记语言』。一门计算机语言，它的作用是搭建网页结构，在网页上展示内容。超文本：可以展示多种资源。标记语言：由一系列『标签』组成的，每个标签都有它固定的含义和确定的页面显示效果。
(<p> 开始标签 </p>结束标签)
html基本结构
<!DOCTYPE html> <!-- 约束,声明 -->
<html lang="zh_CN"> <!-- html标签表示html的开始 lang="zh_CN"表示中文 html标签中一般分为两部分，分别是:head和body -->
<head> <!-- 表示头部信息，一般包含三部分内容，title标签，css样式，js脚本代码 -->
<meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集 -->
<title>某某宝</title> <!-- 表示标题 -->
</head>
<!--bgcolor是背景颜色属性
onclick表示单击(点击)事件
alert() 是javaScrip语言提供的一个警告框函数，他可以接收任意参数;参数就是警告框的提示信息
-->
<body> <!-- body标签是整个html页面显示的主体内容 -->
hello
<button onclick="alert('警告！')">按钮</button> 今天天气<br>真好
<hr>
呀
</body>
</html>
net/qq_43284469/article/details/109251591基本语法规则
-
文档声明: HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本。
-
根标签:html标签是整个文档的根标签，只能有一个。其他标签必须放在html标签里面。
-
头部:head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。
-
主体:body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。
-
注释:HTML注释的写法是：<!-- 注释内容 -->
-
标签名不区分大小写但建议使用小写
-
根标签<html> 有且只能有一个。其他标签必须放在html标签里面。
-
无论是双标签还是单标签都必须正确关闭
-
标签可以嵌套但不能交叉嵌套，注释不能嵌套
-
属性必须有值，值必须加引号，单引号或双引号均可。如果属性名和属性值一样，可以省略属性值。
一、HTML的基本标签
标签总结
| 标签 | 说明 | 语义 |
|---|---|---|
| <h1>~<h6> | 标题 | header |
| <p> | 段落 | paragraph |
| <br> (单标签) | 换行 | break |
| <hr> | 水平线 | horizontal rule |
| <div> | 分割（块元素） | division |
| <span> | 区域（行内元素） | span |
| <b> </b> | 加粗 | |
| <i> </i> | 倾斜 | |
| align="center" | 居中 | |
| align="right" | 居右 | |
| 列表标签 | ||
| <li> | 标记列表 | |
| <ul> | 无序列表 | |
| <ol> | 有序列表 | |
| 超链接标签 | ||
| <a> | ||
| target=" " | 在哪里打开跳转的页面 _blank:新建一个空白页打开 | |
| <img> | 图片标签 | |
| src = "图片资源地址" | 图片资源地址，本地文件地址或网络地址 | |
| alt = "未找到" | 图片没有加载成功的提示信息 | |
| width = 100xp | 设置图片的宽 单位xp(像素) | |
| height = 100xp | 设置图片的高 | |
| 块标签 | ||
| <hr> | 水平线 | horizontal rule |
| <div> | 块标签 进行页面布局，会换行 | division |
| <span> | 包裹内容，不会换行 | span |
(1) head标签 代表页面的“头”
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位（用得很少） |
<body>
<!--注释-->
<!--
align属性: 对齐属性
left: 左对齐(默认值)
right: 右对齐
center: 居中
-->
<h1 align ="center">一级标题</h1> <!--居中-->
<h2 align ="right">二级标题</h2> <!--最右-->
<h3>三级标题</h3> <!--默认最左-->
<h4>四级标题</h4>
<h5>五级标题</h5>
<h5>六级标题</h5>
<p>会当凌绝顶 一览众山小</p> <!--段落-->
<p>穷则独善其身 达则兼济天下</p>
<b>12345</b> <!-- 加粗-->
<i>67890</i> <!-- 倾斜--><br> <!-- 单标签，换行-->
<b><i>汗滴禾下土</i></b> <!--标签可以嵌套-->
<!-- 无序列表--> <!--Ctrl + Shift 快速注解-->
<ul>
<li>有序1</li>
<li>有序2</li>
</ul>
<!--有序列表-->
<ol>
看书 <!--li表示当前内容是小标签，去了就是普通内容-->
<li>无序1</li>
<li>无序2</li>
</ol>
<!--快读创建
ul>li*2>{你好} + tab键 要创建一个无序列表 内部有三个li，内容为你好-->
<ul>
<li>你好</li>
<li>你好</li>
</ul>
</body>(2) 超链接标签
| 标签 | 说明 | 语义 |
|---|---|---|
| <a> | 超链接标签 | |
| href="资源地址" | 资源地址，本地或网络地址 | |
| target=" " | 在哪里打开跳转的页面 _blank:新建一个空白页打开 | |
| <img> | 图片标签 | |
| src = "图片资源地址" | 图片资源地址，本地文件地址或网络地址 | |
| alt = "未找到" | 图片没有加载成功的提示信息 | |
| width = 100xp | 设置图片的宽 单位xp(像素) | |
| height = 100xp | 设置图片的高 | |
路径问题：
- 相对路径：相对自身资源而言，会在本级文件夹查找
向上跳转一级 ../ - 绝对路径：从服务器的根目录开始查询，具有明显的标识 /开头 (推荐使用)
/:服务器的根目录 http://localhost:63342
<body>
<h1 aligen = "center">超链接标签</h1>
<!--超链接标签：进行资源跳转-->
<a href="http://www.baidu.com">百度一下</a> <br>
<!---->
<a href="2.各种标签.html">跳转到2.各种标签页面</a>
<!--href = "资源url"
target = "_blank" 新的页面(空白页)打开
target = "_self" 在当前页打开
-->
<a href="http://www.baidu.com" target = "_blank">百度空白页</a>
<a href="http://www.baidu.com" target = "_self">百度当前页</a>
<!--路径：
1.相对路径：相对自身资源而言，会在本级文件夹查找 ../跳转到上一级
2.绝对路径：从服务器的根目录开始查询 明显的标识 /开头 (推荐)
/表示服务器的根目录 http://localhost:63342
-->
<!--<a href="1.Success.html">相对路径访问</a>-->
<a href="../02_html/1.Success.html">相对路径访问</a>
<!--<a href="/1.Success.html">绝对路径访问</a>--> <!--http://localhost:63342/1.Success.html-->
<a href="/World/Java_Web/02_html/1.Success.html">绝对路径访问</a>
<!--
图片标签
src = "图片资源地址" 本地文件地址或网络地址
alt = "图片没有加载成功的提示信息"
width 设置图片的宽 单位px像素 屏幕标尺？？
height 设置图片的高
-->
<!--加载本地图片-->
<!--<img src="../img/好康的.jpg" alt="图片没找到！">-->
<!--属性设置-->
<img src="../img/好康的.jpg" width="500px" height="300px" alt="图片没找到！">
<!--加载网络标签-->
<img src="https://img0.baidu.com/it/u=962361882,2281204904&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="网络图片没找到">
</body>(3) 块标签
| 标签 | 说明 | 语义 |
|---|---|---|
| <div> | 块标签 进行页面布局，会换行 | division |
| <span> | 包裹内容，不会换行 | span |
<!--
img标签是图片标签,用来显示图片
src属性设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片的边框大小
alt属性设置当指定路径找不到图片时，用来代替显示的文本内容
在JavaSE中路径也分为相对路径、绝对路径
相对路径: 从工程名开始算
绝对路径: 盘符:/目录/文件名
在web中路径分为相对路径、绝对路径两种
相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件，相当于 ./文件名 ./可以省略
绝对路径:
正确格式: http://ip:port/工程名/资源路径
错误格式: 盘符:/目录/文件名
-->
<head>
<meta charset="UTF-8">
<title>块级标签</title>
<style>
div{
/* 高100px
宽200px
背景颜色 橘黄色
距离顶部 20px
*/
height: 300px;
width: 600px;
background-color: orange;
margin-top: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<span>你好</span>
<span>世界</span>
</body>(4) 实体字符(了解)
表格标签
| 标签 | 说明 | 语义 |
|---|---|---|
| <table> | 表格标签 | |
| <tr> | 一行 | |
| <th> | 表头行的单元格使用，加粗、居中效果 | |
| <td> | 一个单元格 | |
| style="text-align: center" | 文字居中 | |
| colspan="?" | 合并列，合并?单元格数量 | |
| rowspan="?" | 合并行，合并?单元格数量 | |
<!--
table标签是表格标签
border属性设置表格边框
width属性设置表格宽度
height属性设置表格高度
align属性设置表格相对页面的对齐方式
cellspacing属性设置单元格间距
tr标签是行标签
th标签是表头标签(默认自带加粗居中)
td标签是单元格标签
align属性设置单元格文本对齐方式
b标签是加粗标签
colspan属性设置跨列
rowspan属性设置跨行
-->
<table bgcolor="#add8e6" border = "1xp" width = "400" style="text-align: center"> <!--单元格大小，表格大小，居中对齐 bgcolor 背景颜色-->
<tr>
<th>姓名</th>
<th>属性</th>
<th>级别</th>
<th>忍村</th>
</tr>
<tr>
<td>漩涡鸣人</td>
<td>风</td>
<td>下忍</td>
<td>木叶</td>
</tr>
<tr>
<td>宇智波佐助</td>
<td rowspan="2">雷火</td> <!--合并行 合并两行-->
<td colspan="2">下忍</td> <!--合并列 合并两列-->
<!--<td>下忍</td>--> <!--合并后删除多余列-->
</tr>
<tr>
<td>我爱罗</td>
<!--<td>沙</td>--> <!--合并后删除多余行-->
<td>影</td>
<td>砂隐村</td>
</tr>
</table>
二、表单标签(重要)
在项目开发过程中，凡是需要用户填写的信息都需要用到表单。它的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器。
在HTML中我们使用form<>标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。
① action属性
用户在表单里填写的信息需要发送到服务器端，对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。
这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个HTML页面来当作服务器端地址使用。
② method属性
『method』这个单词的意思是『方式、方法』，在form标签中method属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。
get：请求能够携带的参数较少，大小有限制，会在浏览器的URL地址栏显示数据类容，不安全，但高效。
post：请求能够携带的参数没有限制，大小没有限制，不会在浏览器的URL地址栏显示数据内容，安全，但不高效。
在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是将所有数据填好后一起提交。
我们通过『name属性』来给数据起『名字』，通过『value属性』来保存要发送给服务器的『值』。 但是名字和值之间既有可能是『一个名字对应一个值』，也有可能是『一个名字对应多个值』。 而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是：Map<String,String[]>。name属性就是Map的键，value属性就是Map的值。
表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。
单行文本框:
<input type="text" name="signal"/><br/>密码框:
<input type="password" name="secret"/><br/>单选框:
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天
<br/>多选框:
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国下拉框:
<select name="interesting">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射击</option>
<option value="skating">溜冰</option>
</select>按钮:
只有提交才会上传数据
<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>
<!--只有提交才会上传数据-->隐藏域:
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。
<input type="hidden" name="userId" value="2233"/>多行文本框:
<textarea name="desc"></textarea>文件表单:
头像:<input type="file" name="file"/><!--form 不是 from-->
<form action="" method=""></form>
<!--text 文本框-->
<span>用户名:</span><input type="text" name="uname" value=""><br>
<!--password 密码框-->
<span>密 码</span><input type="password" name="pwd"> <br>
<!--radio 单选框-->
<span>性别</span><input type="radio" name="sex" value="man" checked="checked">男 <!--checked 默认-->
<input type="radio" name="sex" value="women">女 <br>
<!--checkbox 多选框-->
<span>爱好</span><input type="checkbox" > <br>
<input type="checkbox" name="hobby" value="swim"> 游泳
<!-- 如果属性值和属性名一样则可以省略属性值-->
<input type="checkbox" name="hobby" value="read" checked="checked"> 读书
<input type="checkbox" name="hobby" value="movie" checked> 看电影
<input type="checkbox" name="hobby" value="run"> 跑步
<!--option 下拉框-->
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gd">广东</option>
</select> <br>
<!--hidden 隐藏域 用户不需要看到，但是后台需要这个数据-->
<input type="hidden" name="method" value="addUser"><br>
<!--textarea 多行文本框 大量普通文本么输入-->
<textarea name="write"></textarea><
<!--button 普通按钮-->
<input type="button">
<!--reset 重置按钮-->
<input type="reset"><br>
<!--type="submit" 提交按钮-->
<input type="submit" value="提交"> <br>
</body>3.CSS(了解)
Css 层叠样式表 美化html页面的
CSS的引入方式：
行内样式：仅对当前标签生效
<!--给div设置边框-->
<div style="border: 1px solid black;width: 100px; height: 100px;"> </div>内部样式：在当前页面的head标签中添加style标签，在style标签中编写css样式代码; 内部样式仅对当前页面生效
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
<!-- 内部样式-->
.one {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 5px;
}
</style>
</head>
<body>
<div style="border: 1px solid black;width: 100px; height: 100px;"> </div>
<div class="one"> </div>
<div class="one"> </div>
<div class="one"> </div>
</body>外部样式
创建、编辑CSS文件
.two {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 5px;
}引入外部文件
<link rel="stylesheet" type="text/css" href="/aaa/pro01-HTML/style/example.css" />CSS选择器
标签选择器、类选择器、id选择器。优先级：id选择器>类选择器>标签选择器。
<style>
//类选择器用. id选择器用#
/*
id 选择器： 根据id的名字选择
*/
#p3 {
background-color: red;
}
/*标签选择器
选中 页面内所有的p标签
*/
p {
background-color: orange;
width: 600px;
}
/*
类选择器： 选中页面内所有满足类型的元素
*/
.p1 {
background-color: blue;
}
</style>CSS常用样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
<style type="text/css">
div{
color: red; <!-- 文字颜色 -->
border: 1px black solid; <!-- 边框 -->
width: 300px; <!-- 宽度 -->
height: 300px; <!-- 高度 -->
background-color: blue; <!-- 背景颜色 -->
font-size: 30px; <!-- 字体大小 -->
margin-left: auto; <!-- DIV居中 -->
margin-right: auto;
text-align: center; <!-- 文本居中 -->
}
a{
text-decoration: none; <!-- 超链接去下划线 -->
}
table{
border: 1px solid red; <!-- 表格边框 -->
border-collapse: collapse;
}
td{
border: 1px solid red; <!-- 表格内边框 -->
}
ul{
list-style: none; <!-- 列表去除修前饰符 -->
}
</style>
</head>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
