前端-HTML，基础协议、表单表格、元素页面、H5新特性、框架

最新推荐文章于 2022-04-22 19:02:47 发布

山旮旯的脆带鱼

最新推荐文章于 2022-04-22 19:02:47 发布

阅读量331

点赞数

分类专栏：前端开发文章标签：前端 html5

本文链接：https://blog.csdn.net/fonrye/article/details/124291062

版权

前端开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html

Http协议

是web客户端与服务器之间进行通信的数据传输协议
是一个属于应用层的面向对象的协议
支持客户/服务器模式
无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。（面向无连接）
客户向服务器请求服务时，只需传送请求方法和路径。常用的请求方法有GET、PUT、HEAD、POST等（简单快捷）
HTTP允许传输任意类型(文本、图片、二进制流)的数据对象。正在传输的类型由Content-Type加以标记（灵活）
HTTP协议是无状态协议，所谓无状态是指协议对于事务处理没有记忆能力。（无状态）

HTTP事务

由一条（从客户端发送到服务器的）请求命令和一个（从服务器发回客户端的）响应结果组成。
复合的Web页面要为每个嵌入式资源使用一个单独的HTTP事务。

URL

在这里插入图片描述

Web服务器

是Web资源（Web Resource）的宿主，Web资源是Web内容的源头。最简单的Web资源是Web服务器文件系统的静态文件(html、图片等)。web资源不一定是静态文件，还可以是根据需要生成内容的软件程序（ASP\php\JSP）。用户可以通过HTTP客户端访问Web资源。最常见的HTTP客户端就是Web浏览器

在这里插入图片描述

HTML5基础

HTML5与HTML4相比，其中一个重要的区别在于HTML5取消了HTML4繁杂的文档类型声明

声明必须是HTML文档的第一行，位于

标签之前。<!DOCTYPE>声明并不是HTML标签

特定属性=标准属性+自定义属性

表格

在这里插入图片描述

<table>
        <thead>//table head 表头
            <tr>//table row行
                <th>姓名</th> //table head 表头
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>//table body 表体
            <tr>
                <td>张三</td> //table data 单元格
                <td>男</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>

有序无序列表

注：实际开发很少用无序列表

<body>
    <ul>//ul有序  ordered lists
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>

    <ol>//ol无序 unordered lists
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ol>
</body>

表单


<form action="跳转页面"
method="get"|"post"
<--!默认为get。get一般从服务器上获取资源，post一般用来更新服务器上的资源-->
name="表单名称"
target="打开方式" 
enctype="multipart/form-data">
<--!主要用于表单具有上传功能时使用该属性，且该属性的值为“multipart/form-data”，该属性为可选属性。-->

  表单数据项部分

</form>

Get Post

从安全性来讲，在于使用get方式提交的信息会在提交的过程中显示到浏览器的地址栏；而以post方式提交的信息则不会显示到地址栏
从请求内容大小来看，GET请求的长度受限于浏览器或服务器对URL长度的限制，允许发送的数据量比较小，而POST请求则是没有大小限制的。
从请求参数形式上看，GET请求的数据附在URL之后，
格式如下:url?param1=x1&param2=x2…
param1表示参数名称，x1表示对应的值

input


<input type="类型"
name="输入项名称"
value="输入项值"
/>

在这里插入图片描述

多行文本框


<textarea rows="行数"
cols="列数"
name="名称">文本内容</textarea>

基本框架

//文件设置为自动保存省的保存

！+tab 会在vscode自动显示出

alt+b html内容直接在浏览器中快速查看

tab可以生成完整的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

常用标签

在这里插入图片描述

<body>
		html的内容都写在这里
</body>

<a href=""  target="_blank">
这里是网页文字。a标签定义超链接,blank是新页面打开。
</a>

<span>
这是个行内元素（不换行,行内元素无法规定宽高），***一般***用来存放文字图片和超链接
</span>

<div>
这是个块级元素（自动换行，独占一行可指定宽高），可以放任何东西，比span的可放范围大。
</div>

<img src="./" width= "200" height="200" alt="">
src填写图片所在***路径***或者所在***网址*，“./”** （打这个会有提示）
width宽 height高  ***两者只写一个会等比例缩放***                  
</img>

<p><b>加粗</b> <i>倾斜</i> <u>下划线</u></p>
<p align="center"><b>加粗</b> <i>倾斜</i> <u>下划线</u></p>

<h1>这是标题 1</h1>
<h1>这是标题 2</h1>
<h2>这是标题 3</h2>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

<a name="top"
id="top"></a>  这个标签命名的锚的名字为top (name的值)
<A HREF="url#name">转到锚name</A>
p如果HREF属性的值是指定一个锚，则必须在锚名前面加一个“#”符号。例如，在网页的尾部添加如下代码：
<a href="#top">返回顶部</a>

在网页中插入一个多媒体文件clock.avi，代码如下：
<img border="0" dynsrc="clock.avi"
start="fileopen" width="321"
height="321">
dynsrc属性用于指定动画文件的文件名，包括文件所在的路径。
start属性用于指定动画开始播放的时间，fileopen表示网页打开时即播放动画

<td colspan=#>用于定义横向通栏
<tr rowspan=#>用于定义纵向通栏。
#表示通栏占据的单元格数量。 

<td bgcolor="#C0C0C0">  单元格的背景颜色

<pre>标签用于定义预格式化的文本其中的文本会以等宽字体显示，并保留空格和换行符。
</pre>标签通常可以用来显示源代码。

<ol>
<li>北京</li>
</ol>
有序列表标签
<ul>
<li>天津</li>
</ul>
无序列表标签

框架


<html>

<head>

<title>...</title>

</head>

<noframes>...</noframes>**html5废弃**
元素中包含了框架不能被显示时的替换内容

<frameset>**html5废弃**
元素是一个框架容器，它将窗口分成长方形的子区域，即框架。
在一个框架设置文档中，<frameset>取代了<body>位置，紧接<head>之后。
基本属性包括rows和cols，
它们定义了框架设置元素中的每个框架的尺寸大小。
rows值从上到下给出了每行的高；cols值从左到右给出了每列的宽。

<frame src="url">**html5废弃**
定义一个子窗口
<frame src="url">

<frame src="url">
name  框架名称。
src  框架内容URL。
longdesc 框架的长篇描述。
frameborder  框架边框。
marginwidth 边距宽度。
lmarginheight 边距高度
noresize 禁止用户调整框架尺寸。
scrolling  规定了行内框架中是否需要滚动条。**html5废弃**

……
</frameset>**html5废弃**
框架是可以嵌套的
也就是说可以在<frameset>中还可以包含一个或多个<frameset>标签。

</html>

下拉列表框


<select name=“sel”>

<option value="value1">选项1</option>

<option value="value2">选项2</option>

...

</select>

简化的标签类型

在这里插入图片描述


<figure>标签用于定义独立的流内容（图像、图表、照片、代码等等）。</figure>

HTML5新增内联(行内)元素

<mark>标签用于定义带有记号的文本</mark>

<time>标签用于定义公历的时间（24小时制）或日期，时间和时区。</time>
<time datetime="YYYY-MM-DDThh:mm:ssTZD">
用于指定日期 / 时间。如果不指定此属性，则元素的内容给定日期 / 时间
<time pubdate="pubdate">
用于指定指示 <time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期
Datepickers (date, month, week, time, datetime, datetime-local)：
HTML5新增，其中input的属性值可以为括号中其中任意一个，表示日期或时间输入域；

<meter>标签用于定义度量衡。仅用于已知最大和最小值的度量。浏览器会使用图形方式表现< meter >标签。< meter >标签的属性说明如下：
high，定义度量的值位于哪个点，被界定为高的值。
low，定义度量的值位于哪个点，被界定为低的值。
max，定义最大值。默认值是 1。
min，定义最小值。默认值是 0。
optimum，定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value  定义度量的值。
<meter min="0"max="20" value="5"></meter>
<meter value="0.1"></meter>
<meter value="0.3"optimum="1" high="0.9" low="0.1"max="1"min="0"></meter><span>30%</span>
<meter min="0"max="100" value="80"></meter>
<meter min="0"max="100" value="100"></meter>

<progress>标签用于定义定义一个进度条</progress>
max，定义完成的值。
value，定义进度条的的当前值，如果不指定value值，则显示一个动态的进度

支持动态页面

菜单
右键菜单
async属性
details标签


<menu>
<li><input type="checkbox" />ASP</li>
<li><input type="checkbox" />PHP</li>
<li><input type="checkbox" />JSP</li>
</menu>

<menuitem> 标签的常用属性</menuitem>
label菜单项的标题
icon 菜单项前面显示的图标
onclick指定单击此菜单项时执行的JavaScript代码

使用<menu>标签和<menuitem>标签定义一个右键菜单的例子
<menu type="context"id="mymenu">
	<menuitem label="刷新"onclick="window.location.reload();"icon="refresh.ico"></menuitem>
	<menu label="演示子菜单...">
		<menuitem label="子菜单1"onclick="alert('子菜单1');"></menuitem> 
		<menuitem label="子菜单2"onclick="alert('子菜单2');"></menuitem>
	</menu>
</menu>
 

<img src="Water lilies.jpg"
draggable="true" contextmenu="mymenu"/>
使用contextmenu属性指定此元素使用的右键菜单
定义一个图片，右击其可以弹出

async属性是HTML5的新属性。
在<script>标签中使用async属性可以指定异步执行指定的脚本。
也就是在加载网页的同时执行指定的脚本。
如果不指定async属性，则需要等到加载完前面的网页内容，才能开始执行脚本；
执行完脚本才能加载后面的网页内容
<script async="async"></script>

描述文档或文档某个部分的细节，相当于summary为目录，p里为展开后的具体内容
<details>
<summary>数据库文档说明.</summary>
	<p>本文档用于描述数据库结构.由开发部数据库小组维护。最后修改于2012-10-15</p>
</details>

Small标签可以小型文本显示旁注
<p><small> Copyright2017-2050.</small></p>

contenteditable属性为true时，文本是可在页面可编辑的
<p contenteditable="true"> HelloWorld</p>

placeholder属性用于指定input元素的提示信息(描述输入域所期待的值)
<form action="validate.aspx" method="post">
<input type="text" name="userName" placeholder="用户名" /> <br/>
<input type="text"name="pwd" placeholder="密码" />
<input type="submit" />

选择框
<input name="radioSex1" type="radio" id="radioSex1"checked>男</input>
复选
<form id="form1"name="form1" method="post" action="ShowInfo.php">
      <input type="checkbox"name="C1" id="C1">文艺</input>
      <input type="checkbox"name="C2" id="C2">体育</input>
      <input type="checkbox"name="C3" id="C3">电脑</input>
</form>
组合框，一定要有select
<select name="city"id="city">  
	<option value="北京" selected>北京</option>   
	<option value="上海">上海</option>  
	<option value="天津">天津</option>
	<option value="重庆">重庆</option>
</select>

提交按钮（submit）、重置按钮（reset）、普通按钮（button）
<input type="submit"name="submit" id="submit" value="提交"/>
<input type="reset"name="reset" id="reset" value="重设"/>
<input type="button"name="hello" onclick="alert('hello')"value="hello" />
autofocus  HTML 5的新增属性，指定在页面加载时，是否让按钮获得焦点
disabled禁用按钮
name 指定按钮的名称

HTML5表单新特性

新的input类型

1．email类型
2．url类型
3．number类型
4．date类型
5．其他日期时间类型
6．search类型
7．color类型

<input type="email"name="user_email"/>

<inpu type="url"name="user_url" />

允许的最大值最小值，value默认值，step为数字间隔（理解为是这个数的倍数）
<input type="age"name="points" min="1" max="100" step='7'value="30"/>

<input type="date"name="birth" />
input类型：
month，用于选取月和年；
week，用于选取周和年；
time，用于选取时间（小时和分钟）；
datetime，用于选取时间、日、月、年（UTC 时间）；
datetime-local，用于选取时间、日、月、年（本地时间）。

search类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。 

可以出现颜色的选择
<input type="color" name="color" />

新的表单元素
1．datalist元素
2．keygen元素
3．output元素

datalist元素用于定义输入域的选项列表
<form id="form1"name="form1" method="post" action="ShowInfo.php">
搜索引擎:
<input type="url" list="url_list" name="link" />
	<datalist id="url_list">图3-16  使用datalist元素的例子
		<option label="百度"value="http://www.baidu.com" />
		<option label="Google" value="http://www.google.com" />
	</datalist>
</form>

pkeygen元素用于提供一种验证用户的可靠方法。它是一个密钥对生成器。
当提交表单时，会生成两个键，一个是私钥（private key），一个公钥（public key）。
私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。 
<keygen name="security" />

poutput元素用于显示不同类型的输出，
例如比如计算或脚本的结果输出。
<form id="form1"name="form1" method="post" action="ShowInfo.php">
<input id="num_a" /> +<input id="num_b" /> =<output id="result" onforminput="resCalc()"></output>
</form>
注：resCalc()函数是计算两个数之和
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>

新的表单属性

form元素的新增属性

autocomplete会记忆用户在表单元素中输入数据的历史记录
<form action="demo_form.asp" method="get" autocomplete="on">

novalidate规定在提交表单时不验证数据，不使用novalidate，则会验证数据
<form action="demo_form.asp"method="get" novalidate>

input元素的新增属性

autofocus规定在页面加载时，域自动地获得焦点，例如：
<input type="text"name="fname"  autofocus/>

formaction，重写表单的action属性；
formenctype，重写表单的 enctype 属性；
formmethod，重写表单的method属性；
formnovalidate，重写表单的novalidate 属性；
formtarget，重写表单的target属性。
表单重写属性通常只用于submit类型的<input>标签

pattern规定用于验证input域的模式
<input type="text"name="country_code"pattern="[A-z]{3}"/>

required规定必须在提交之前填写输入域，即不能为空
<input type="text" name="title" required />

表单验证

checkValidity()方法


<form name="form1" id="form1">
		<p>
		<label for="password1">输入密码:</label>
		<input type="password" id="password1" required>
		</p>
	<button onclick="document.form1.password1.checkValidity()">验证</button>
</form>

也可以点击给一个方法
<button onclick=" checkPasswords()">验证</button>

下面写具体的方法实现
<script type="text/javascript">
function checkPasswords() {  
var pass1 = document.getElementById("password1");   
var pass2 = document.getElementById("password2");   
if (pass1.value == "")
        pass1.setCustomValidity("请输入密码");
else
       pass1.setCustomValidity("");  
if (pass1.value != pass2.value)
       pass2.setCustomValidity("两次输入的密码不匹配");
else
      pass2.setCustomValidity("");  
}
</script>