HTML
创建 HTML
1、HTML 文件不需要编译
2、直接由浏览器解析执行
书写规范
<!DOCTYPE html><!-- 约束、声明 -->
<html lang="zh_CH"><!-- 表示 HTML 的开始,lang="zh_CH" 表示中文 -->
<head><!-- 表示头部信息,一般包含三部分:title 标签,css 样式,js 代码 -->
<meta charset="UTF-8"><!-- 表示当前页面使用 UTF-8 字符集 -->
<title>Title</title><!-- 表示标题 -->
</head>
<body><!-- 整个 HTML 页面显示的主体内容 -->
<!-- 页面主题内容 -->
</body>
</html><!-- 表示 HTML 的结束 -->
注释
<!-- HTML 的代码注释 -->
标签
1、标签的格式:<标签名>封装的数据</标签名>
2、标签名大小写不敏感
3、标签拥有自己的属性
(1)基本属性:修改简单样式效果
(2)事件属性:直接设置事件响应后的代码
4、分类
(1)单标签格式:<标签名/>
(2)双标签格式:<标签名>封装的数据</标签名>
5、语法
(1)标签不能交叉嵌套
(2)标签必须正确闭合
(3)属性必须有值,属性值必须加引号
(4)注释不能嵌套
常用标签
1、常用特殊符号
HTML 原代码 | 显示结果 | 描述 |
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | " | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
  | 半个空白位 / 半角空格 | |
  | 一个空白位 / 全角空格 | |
| 半角不断行空白格 |
2、标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
(1)字号:h1 最大,h6 最小
(2)默认左对齐,align 属性是对齐属性(已弃用)
3、超链接
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" target="_self">百度</a>
<a href="https://www.baidu.com/" target="_blank">百度</a>
(1)a 标签:代表超链接
(2)href 属性:设置连接的地址
(3)target 属性:设置哪个目标进行跳转
(4)_self:表示使用当前页面跳转(默认值)
(5)_blank:表示打开新页面来进行跳转
4、列表标签
(1)无序列表
<ul><!-- 无序列表标签 -->
<li>无序1</li><!-- 列表项 -->
<li>无序2</li>
</ul>
(2)有序列表
<ol><!-- 有序列表标签 -->
<li>有序1</li><!-- 列表项 -->
<li>有序2</li>
</ol>
(3)type 属性:修改列表项的符号,存在兼容问题
5、图片标签
<img src="../picture/picture1.jpg" width="200" height="200" border="1" alt="图片 1 失效">
<img src="./picture2.jpg" width="200" height="200" border="1" alt="图片 2 失效">
(1)img 标签:显示图片
(2)src 属性:设置图片路径
(3)width 属性:设置图片宽度
(4)height 属性:设置图片高度
(5)border 属性(已弃用):设置图片边框大小
(6)alt 属性:当指定路径无法查找图片时,用以替代显示的文本内容
(7)Web 相对路径:./ 表示当前文件所在目录(可省略);../ 表示当前文件所在的上一级目录
表格标签
<table border="1" width="300" cellspacing="0">
<tr>
<th colspan="2">表头1</th>
<th>表头2</th>
</tr>
<tr>
<td align="center">单元格1</td>
<td rowspan="2"><b>单元格2</b></td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
1、able 标签:表格
(1)border 属性(已弃用):设置表格边框粗细
(2)width 属性(已弃用):设置表格宽度
(3)cellspacing 属性(已弃用):设置单元格间距
(4)cellpadding 属性(已弃用):填充单元格
2、tr 标签:行标签
3、th 标签:表头标签
4、td 标签:单元格标签
(1)colspan 属性:设置跨列
(2)rowspan 属性:设置跨行
5、b 标签:加粗
6、align 属性(已弃用):在 table 标签中,设置表格相对于页面的对齐方式;在 tr 标签中,设置该行所有单元格文本对齐方式;在 td 标签中,设置单个单元格文本对齐方式
iframe
<iframe src="内嵌页面路径.html" width="500" height="500" name="内嵌页面名称"></iframe>>
<br/>
<ul>
<li><a href="内嵌跳转路径1.html" target="内嵌页面名称">跳转页面1.html</a></li>
<li><a href="内嵌跳转路径2.html" target="内嵌页面名称">跳转页面2.html</a></li>
</ul>
1、作用:在页面开辟一个区域,显示一个单独的页面
2、iframe 标签、a 标签组合使用
(1)在 iframe 标签中使用 name 属性,定义一个名称
(2)在 a 标签的 target 属性,设置 iframe 的 name 属性值
表单
<form action="https://localhost:8080" method="post">
用户名:<input name="user" type="text" value="输入用户名"/><br/>
用户密码:<input name="code" type="password" value="默认值"/><br/>
性别:<input type="radio" name="gender" value="male" checked="checked"/>男<input type="radio" name="gender"
value="female"/>女<br/>
技能:<input name="skill" type="checkbox" value="Java" checked="checked"/>Java<input name="skill" value="CPP"
type="checkbox"/>C++<br/>
国籍:<select name="country">
<option value="CN" selected="selected">中国</option>
<option value="USA">美国</option>
</select><br/>
描述:<textarea name="description" rows="10" cols="20">默认值</textarea><br/>
<input type="reset" value="重置按钮"/>
<input type="submit"/>
<input type="button" value="自定义按钮"/>
<input type="file"/>
<input type="hidden" name="action" value="login">
</form>
1、form 标签:表单
(1)action 属性:设置提交的服务器地址
(2)method 属性:设置提交的方式:get(默认值)或 post
2、input 标签:搜集用户信息
3、type 属性:定义 input 元素类型
(1)text:文件输入框,value 设置默认显示内容
(2)password:密码输入框,value 设置默认显示内容
(3)radio:单选框,name 对其进行分组;checked="checked" 表示默认选中
(4)checkbox:复选框,checked="checked" 表示默认选中
(5)reset:重置按钮,value 修改按钮上的文本
(6)submit:提交按钮,value 修改按钮上的文本
(7)button:按钮,value 修改按钮上的文本
(8)file:文件上传域
(9)hidden:隐藏域,当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域,提交的同时发送给服务器
4、select 标签:下拉列表框
5、option 标签:下拉列表框中的选项,selected="selected" 设置默认选中
6、textarea 标签:多行文本输入框,起始标签和结束标签中的内容是默认值
(1)rows 属性:设置可以显示几行的高度
(2)cols 属性:设置每行可以显示几个字符宽度
7、结合表格标签,格式化表单
<table>
<tr>
<td>
</td>
</tr>
</table>
8、表单提交的时,数据没有发送给服务器的三种情况
(1)表单项没有 name 属性值
(2)单选框、复选框(下拉列表中的 option 标签)没有添加 value 属性
(3)表单项不在提交的 form 标签中
9、get 请求特点
(1)浏览器地址栏中的地址:action 属性 + ? + 请求参数;请求参数的格式:name=value&name=value
(2)不安全:请求参数直接暴露在地址栏
(3)有数据长度的限制,且只接受 ASCII 码
10、post 请求特点
(1)浏览器地址栏中只有 action 属性
(2)比 get 请求安全
(3)理论上没有数据长度的限制
div 标签:默认独占一行
<div>div标签</div>
span 标签:长度即封装数据长度
<span>span标签</span>
p 段落标签:默认在段落的上、下方各空出一行,若已空出,则不执行
<p>p段落标签</p>
HTTP 状态消息
1xx:信息
消息: | 描述: |
---|---|
100 Continue | 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。 |
101 Switching Protocols | 服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。 |
2xx:成功
消息: | 描述: |
---|---|
200 OK | 请求成功(其后是对GET和POST请求的应答文档。) |
201 Created | 请求被创建完成,同时新的资源被创建。 |
202 Accepted | 供处理的请求已被接受,但是处理未完成。 |
203 Non-authoritative Information | 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝。 |
204 No Content | 没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。 |
205 Reset Content | 没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。 |
206 Partial Content | 客户发送了一个带有Range头的GET请求,服务器完成了它。 |
3xx:重定向
消息: | 描述: |
---|---|
300 Multiple Choices | 多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。 |
301 Moved Permanently | 所请求的页面已经转移至新的url。 |
302 Found | 所请求的页面已经临时转移至新的url。 |
303 See Other | 所请求的页面可在别的url下被找到。 |
304 Not Modified | 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 |
305 Use Proxy | 客户请求的文档应该通过Location头所指明的代理服务器提取。 |
306 Unused | 此代码被用于前一版本。目前已不再使用,但是代码依然被保留。 |
307 Temporary Redirect | 被请求的页面已经临时移至新的url。 |
4xx:客户端错误
消息: | 描述: |
---|---|
400 Bad Request | 服务器未能理解请求。 |
401 Unauthorized | 被请求的页面需要用户名和密码。 |
402 Payment Required | 此代码尚无法使用。 |
403 Forbidden | 对被请求页面的访问被禁止。 |
404 Not Found | 服务器无法找到被请求的页面。 |
405 Method Not Allowed | 请求中指定的方法不被允许。 |
406 Not Acceptable | 服务器生成的响应无法被客户端所接受。 |
407 Proxy Authentication Required | 用户必须首先使用代理服务器进行验证,这样请求才会被处理。 |
408 Request Timeout | 请求超出了服务器的等待时间。 |
409 Conflict | 由于冲突,请求无法被完成。 |
410 Gone | 被请求的页面不可用。 |
411 Length Required | "Content-Length" 未被定义。如果无此内容,服务器不会接受请求。 |
412 Precondition Failed | 请求中的前提条件被服务器评估为失败。 |
413 Request Entity Too Large | 由于所请求的实体的太大,服务器不会接受请求。 |
414 Request-url Too Long | 由于url太长,服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时,就会发生这种情况。 |
415 Unsupported Media Type | 由于媒介类型不被支持,服务器不会接受请求。 |
416 | 服务器不能满足客户在请求中指定的Range头。 |
417 Expectation Failed |
5xx:服务器错误
消息: | 描述: |
---|---|
500 Internal Server Error | 请求未完成。服务器遇到不可预知的情况。 |
501 Not Implemented | 请求未完成。服务器不支持所请求的功能。 |
502 Bad Gateway | 请求未完成。服务器从上游服务器收到一个无效的响应。 |
503 Service Unavailable | 请求未完成。服务器临时过载或当机。 |
504 Gateway Timeout | 网关超时。 |
505 HTTP Version Not Supported | 服务器不支持请求中指明的HTTP协议版本。 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战