整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
注释：<!-- -->
DOCTYPE：就是告诉浏览器，我们要使用什么规范
head：网页头部标签
body：代表网页主题
标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释
特殊字符
特殊符号就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一级目录
文本链接
<a href="path" target="目标窗口位置">链接文本或图像</a>
图像链接：就是嵌套图片标签
页面间链接
锚链接
功能性链接
块元素
行内元素
什么是列表：就是一种展示方式
有序列表
无序列表
自定义列表
<dl>
<dt></dt> 标题
<dd></dd> 选项
<dd></dd>
<dd></dd>
</dl>为什么使用表格
基本结构
<table border="1px" 边框>表格标签
<tr>
<td></td>列标签
<td></td>
<td></td>
</tr>行标签 这代表一行
</table>跨列：使用colspan="夸的列数" <td colspan="4">
跨行：使用rowspan="夸的行数" <td rowspan="4">
视频元素
音频元素
元素名 | 描述 |
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
section | web页面中的一块独立区域 |
atricle | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
<iframe src="path" name="mainFrame"></iframe>
表单：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
post方式提交：比较安全，可以传输大文件
表单元素格式
属性 | 说明 |
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默认为text |
name | 指定表单元素的名称 必填，用来后台读取 |
value | 元素的初试值。type为radio时必须指定一个值 |
size | 指定元素的初始宽度。当type为text时或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
maxlength | type为txet或password时，输入的最大字符数 |
cheaked | type为radio或cheackbox时，指定按钮是否被选中 |
单选框
多选框
按钮
<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src ="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮下拉框
<select name="列表名称">
<option value="选项的值" select>中国</option>
<option value="选项的值">中国</option>
<option value="选项的值">中国</option>
<option value="选项的值">中国</option>
<option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value文本域
<textarea name="name" cols="列数" rows="行数">文本内容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>邮件验证
<input type="email" name="youjian">URL
<input type="url" name="url"> 数字验证
<input type="number" name="num" max="100" min="0" step="10">滑块
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隐藏域 hidden
<input type="text" id="mark" hidden>只读 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增强鼠标可用性
<label for="mark">点击</label>
<input type="text" id="mark">为什么要进行表单验证：缓解服务器压力、保证数据安全
提示信息
非空判断
正则表达式验证
高级验证使用js
欢web前端网页开发和python开发的、请加下企鹅群：526929231 内有大量案例和学习教程，对python、和web感兴趣的朋友可以加下哦
所有的控件(表单元素都写在form表单标签中)
<form> 使用form标签建立表单域，当提交数据的时候会收集表单域里面的数据然后发送给服务器</form>
赋予不同的type值可实现不同的表单控件
| type类型 | 描述 |
|---|---|
| text | 文本输入框 maxlength最大长度、onlyready只读、 disabled禁止、 placeholder |
| password | 密码遮掩框 |
| radio | 单选按钮，checked默认选择 |
| checkbox | 多选框 |
| submit | 收集表单域的name数据，然后提交到服务器上 |
<select> <option value="music">听音乐</option> <option value="running">跑步</option> <option value="study">学习</option> <option value="coffee">找小姐姐一起喝咖啡</option></select><!-- selected="selected"默认选中 --><!-- size="2" 现实两行下拉项 --><!-- disabled 禁止选择 -->
selected默认选择一项
<textare cols="30" rows="10"></textarea>
clos显示多少列，rows现实多少行
单独使用没有效果，一般配合js点击按钮的时候执行什么操作
<input type="button" value="自定义按钮标题" />
回到表单初识状态
<input type="reset" value="重置表单" />
目的在于收集或发送信息 页面上面没有任何效果 CSRF跨域攻击在此作用
<input type="hidden" value="ABCD1234" />
为input元素定义一个标记，label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果你在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签是，浏览器就会自动將焦点转到和标签相关的表单控件上
<input id="man" type="radio" /><label for="man">男</label>
| 属性 | 描述 |
|---|---|
| action | 指定提交到哪个url上 |
| method | 提交方式，常用的GET / POST |
| Method | Description |
|---|---|
| GET | URL地址栏上做拼接问号再加参数 |
| POST | 隐式提交方式，看不到，可以抓包 |
pre可定义预格式化的文本。
pre元素中的文本通常会保留空格和换行符。
主要用于在网页上显示代码，比如在网页当中显示html模板
代码示例
java复制代码public static String generateContent(String content) {
// 将 content 进行 url 编码
String ans;
try {
ans = URLEncoder.encode(content, "UTF-8");
} catch (UnsupportedEncodingException e) {
// 处理异常情况
throw new RuntimeException(e);
}
return ans;
}
java复制代码public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最终生成的 URL 的值为：" + ansUrl);
}
运行结果：
perl复制代码https://example.com/resource?a=%E5%B0%8F%E9%BB%91
粘贴到浏览器上会被浏览器解码出来给用户看到:
ini复制代码example.com/resource?a=小黑
网页截图：
java复制代码public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小 黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最终生成的 URL 的值为：" + ansUrl);
}
运行结果：
perl复制代码https://example.com/resource?a=%E5%B0%8F+%E9%BB%91
粘贴到浏览器上会被浏览器解码出来给用户看到:
ini复制代码https://example.com/resource?a=小+黑
网页截图：
java复制代码public static String generateContent(String content) {
// 将 content 进行 url 编码
String ans;
try {
// -----------------------调整-----------------------
ans = URLEncoder.encode(content, "UTF-8").replace("+", "%20");
} catch (UnsupportedEncodingException e) {
// 处理异常情况
throw new RuntimeException(e);
}
return ans;
}
public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小 黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最终生成的 URL 的值为：" + ansUrl);
}
运行结果：
perl复制代码https://example.com/resource?a=%E5%B0%8F%20%E9%BB%91
粘贴到浏览器上会被浏览器解码出来给用户看到:
ini复制代码https://example.com/resource?a=小 黑
网页截图：
其中 %20 是空格经过编码后的结果
从上面的案例可以看到，如果 url 中有空格出现，且不经过特殊处理，那么将会导致浏览器无法正确解析 url，从而导致 url 重定向失败，那么问题的原因是什么呢？首先来看一下URL的组成部分
下面是一个简单的 URL 链接：
bash复制代码http://localhost:8080/path/to/index.html?id=123#content它主要有下面几个部分组成
在 URL 编码过程中，会遵循以下的规则：
*请认真填写需求信息，我们会在24小时内与您取得联系。
