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 原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其它特殊字符
&quot; " 引号
&reg; ® 已注册
&copy; © 版权
&trade; 商标
&ensp;   半个空白位 / 半角空格
&emsp;   一个空白位 / 全角空格
&nbsp;   半角不断行空白格

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协议版本。
posted @   半条咸鱼  阅读(40)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示