【web系列三】HTML5

已于 2022-04-01 10:54:34 修改
阅读量1.6k 收藏 4
点赞数 1
分类专栏： Web开荒 文章标签： html5 html web javascript 前端
于 2022-03-11 16:08:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nichlson/article/details/123401550
版权

目录

开发前准备

什么是HTML5

HTML5新特性

需要掌握的技能

开发工具

学习资料

环境配置

HTML基础

常用标签

1、头文件和基础标签

2、标题

3、段落和换行

4、超链接和图片

元素、属性和格式

元素

属性

格式

样式、链接和表格

样式

链接

表格

列表、块和布局

列表

块

布局

表单、表单与服务器的交互

表单

表单与服务器的交互

HTML框架

HTML实体

开发前准备

什么是HTML5

  • HTML是一种用来描述网页的语言；
  • HTML指超文本标记语言（Hyper Text Markup Language）；
  • HTML不是编程语言，是一种标记语言。

HTML5新特性

  • 用于绘画的canvas标签；
  • 用于媒体回放的video和audio元素；
  • 对本地离线存储的更好支持；
  • 新的特殊内容元素：article\footer\header\nav\section
  • 新的表单空间：calendar\date\time\email\url\search
  • 广泛的浏览器支持：Safari\Chrome\Firefox\Opera\IE

需要掌握的技能

  • HTML5
  • XHTML
  • CSS3
  • JavaScript
  • jQuery

开发工具

  • webstrom
  • notepad++
  • eclipse
  • text sublime
  • dreamweaver
  • intellij idea

学习资料

HTML <optgroup> 标签 (w3school.com.cn)

HTML 表单 | 菜鸟教程 (runoob.com)

环境配置

        博主使用的是notepad++

1、附上html自动补全方法

Notepad 自动补全的插件 安装 （包括html,JavaScript）_张之海的博客-CSDN博客_notepad自动补全代码

2、notepad运行html方式

        点击运行，在跳出的界面输入以下内容即可，建议保存，方便下次用快捷键调用。

"$(FULL_CURRENT_PATH)"

HTML基础

常用标签

1、头文件和基础标签

        1.1用于区分不同版本的HTML

  • HTML5:<!DOCTYPE html> 
  • HTML4.01:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  • ......

        1.2html的必备基础标签，head和body

<!DOCTYPE html>                <!--html5头文件-->

<html>                         <!--所有代码都包含在html标签内-->
<head lang="en">               <!--定义网页的头部，lang用于定义内容的语言（非必选），不定义有乱码可能-->
	<meta charset="utf-8"/>    <!--编码格式-->
	<title>html基础</title>    <!--head中的必选标签，但可以不填内容，用于定义网页名-->
</head>
<body>                         <!--定义网页的主体-->
	hello world!
</body>
</html>

         有了这些元素就可以打开这个HTML网页了，网页名为html基础，内容为hello world!。

2、标题

        <h1>-<h6>

<!DOCTYPE html>                <!--html5头文件-->

<html>                         <!--所有代码都包含在html标签内-->
<head lang="en">               <!--定义网页的头部，lang用于定义内容的语言（非必选），不定义有乱码可能-->
	<meta charset="utf-8"/>    <!--编码格式-->
	<title>html基础</title>    <!--head中的必选标签，但可以不填内容，用于定义网页名-->
</head>
<body>                         <!--定义网页的主体-->
	<h1>标题h1</h1>
	<h2>标题h2</h2>
	<h3>标题h3</h3>
	<h4>标题h4</h4>
	<h5>标题h5</h5>
	<h6>标题h6</h6>
</body>
</html>

3、段落和换行

        <p> <br/>

<!DOCTYPE html>                <!--html5头文件-->

<html>                         <!--所有代码都包含在html标签内-->
<head lang="en">               <!--定义网页的头部，lang用于定义内容的语言（非必选），不定义有乱码可能-->
	<meta charset="utf-8"/>    <!--编码格式-->
	<title>html基础</title>    <!--head中的必选标签，但可以不填内容，用于定义网页名-->
</head>
<body>                         <!--定义网页的主体-->
	hello world!
	hello<br />
	hello world!
	
	<p>hello world!</p>
	hello
</body>
</html>

4、超链接和图片

        <a> <img>

<!DOCTYPE html>                <!--html5头文件-->

<html>                         <!--所有代码都包含在html标签内-->
<head lang="en">               <!--定义网页的头部，lang用于定义内容的语言（非必选），不定义有乱码可能-->
	<meta charset="utf-8"/>    <!--编码格式-->
	<title>html基础</title>    <!--head中的必选标签，但可以不填内容，用于定义网页名-->
</head>
<body>                         <!--定义网页的主体-->
	<a href="https://blog.csdn.net/Nichlson?type=blog">Nichlson的博客</a>
	<img src="html5.png">
</body>
</html>

元素、属性和格式

元素

        元素指从开始标签到结束标签为止的所有内容，比如

<p>hello world!</p>       <!--这是空元素-->

<br />                    <!--这是一个空元素，用于换行-->

         大多数元素是可以嵌套的，比如

<head lang="en">               
	<title>html基础</title> 
</head>

属性

  • 属性填写在开始标签中，用于为该标签提供更多信息
  • 属性通常以键值对的形式出现
  • 常用属性，比如：class-规定元素类名（类似的id-规定元素id）、标题的align属性-指定对其方式等
<!DOCTYPE html>              
<html>                         
<head lang="en">               
	<title>元素、属性和格式</title>   
</head>
<body bgcolor="blue"> 
	<h1 align="right">标题h1</h1>
	
	<p id="hw">hello world!</p>
</body>
</html>

格式

         html有一系列定义文本格式的标签

<!DOCTYPE html>              
<html>                         
<head lang="en">               
	<title>元素、属性和格式</title>   
</head>
<body> 
	<p>hello world!</p>                    <!--原始字体-->
	
	<p><b>hello world!</b></p>             <!--加粗字体-->
	<p><strong>hello world!</strong></p>   <!--加重字体-->
	
	<p><big>hello world!</big></p>         <!--大号字体-->
	<p><small>hello world!</small></p>     <!--小号字体-->
	
	<p><em>hello world!</em></p>           <!--着重字体-->
	<p><i>hello world!</i></p>             <!--倾斜字体-->
	
	<p><ins>hello world!</ins></p>         <!--插入字体-->
	<p><del>hello world!</del></p>         <!--删除字体-->
	
	<p>hello <sub>world</sub> !</p>        <!--下标字体-->
	<p>hello <sup>world</sup> !</p>        <!--上标字体-->
</body>
</html>

样式、链接和表格

样式

         html有三种定义样式的方式：外部样式表、内部样式表和内联样式表

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>样式、链接和表格</title>   
	<link rel="stylesheet" type="text/css" href="mystyle.css">    <!--外部样式表，h1{color:red}-->
	<style type="text/css">                                       <!--内部样式表-->
		h2{
			color:blue
		}
	</style>
</head>
<body>
	<h1>red</h1>
	<h2>blue</h2>
	<p style="color:green">green</p>                              <!--内联样式表-->
</body>
</html>

         css文件写法如下

h1{
	color: red;
}

链接

        外部链接

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>样式、链接和表格</title>
</head>
<body>
	<a href="https://blog.csdn.net/Nichlson?type=blog">Nichlson的博客</a>
	<br />
	<a href="https://blog.csdn.net/Nichlson?type=blog">
		<img src="html5.png">                                <!--使用图片作为链接的界面-->
	</a>
	<br />
	<a href="https://blog.csdn.net/Nichlson?type=blog">
		<img src="html5.png" width="100px" height="100px">   <!--缩小图片的尺寸-->
	</a>
	<br />
	<a href="https://blog.csdn.net/Nichlson?type=blog">
		<img src="html.png" width="100px" height="100px" alt="html5logo">  <!--图片显示不出来时显示文字-->
	</a>
</body>
</html>

         文件内链接

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>样式、链接和表格</title>
</head>
<body>
	<a name="tips">hello</a>             <!--定义内部链接点-->
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<a href="#tips">跳转到hello</a>      <!--跳转到内部链接点-->
</body>
</html>

         “hello”和“跳转到hello”在页面上离得很远，下滚到“跳转到hello”后，点击即可返回至“hello”。

表格

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>样式、链接和表格</title>
</head>
<body>
	<table border="1">            <!--border设置边框，不写则无边框-->
		<caption>表格</caption>   <!--标题-->
		<tr>					  <!--表格一行的内容包含在里面-->
			<th>表头1</th>        <!--表头-->
			<th>表头2</th>
			<th>表头3</th>
		</tr>
		<tr>
			<td>内容1</td>        <!--内容-->
			<td>
				<ul>              <!--嵌套列表-->
					<li>列表1</li>
					<li>列表2</li>
					<li>列表2</li>
				</ul>
			</td>
			<td>内容3</td>
		</tr>
		<tr>
			<td>内容4</td>
			<td></td>             <!--不写则为空表格-->
			<td>内容6</td>
		</tr>
	</table>
</body>
</html>

         表格的属性

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>样式、链接和表格</title>
</head>
<body>
	<table border="1">            
		<tr>
			<td>内容1</td>
			<td>内容2</td>
			<td>内容3</td>
		</tr>
		<tr>
			<td>内容4</td>
			<td>内容5</td>         
			<td>内容6</td>
		</tr>
	</table>
	<table border="1" cellpadding="10">     <!--cellpadding大小-->           
		<tr>
			<td>内容1</td>
			<td>内容2</td>
			<td>内容3</td>
		</tr>
		<tr>
			<td>内容4</td>
			<td>内容5</td>         
			<td>内容6</td>
		</tr>
	</table>
	<table border="1" cellspacing="10">        <!--cellspacing边距-->    
		<tr>
			<td>内容1</td>
			<td>内容2</td>
			<td>内容3</td>
		</tr>
		<tr>
			<td>内容4</td>
			<td>内容5</td>         
			<td>内容6</td>
		</tr>
	</table>
	<table border="1" bgcolor="blue">          <!--bgcolor颜色-->    
		<tr>
			<td>内容1</td>
			<td>内容2</td>
			<td>内容3</td>
		</tr>
		<tr>
			<td>内容4</td>
			<td>内容5</td>         
			<td>内容6</td>
		</tr>
	</table>
	<table border="1" cellpadding="50" background="html5.png">  <!--background底图-->    
		<tr>
			<td>内容1</td>
			<td>内容2</td>
			<td>内容3</td>
		</tr>
		<tr>
			<td>内容4</td>
			<td>内容5</td>         
			<td>内容6</td>
		</tr>
	</table>
</body>
</html>

列表、块和布局

列表

        无序列表、有序列表、自定义列表

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
</head>
<body>
	<ul>                             <!--无序列表-->
		<li>第一行</li>              <!--列表的一行-->
		<li>第二行</li>
	</ul>
	<ul type="disc">                 <!--实心圆-->
		<li>第一行</li>
		<li>第二行</li>
	</ul>
	<ul type="circle">               <!--空心圆-->
		<li>第一行</li>
		<li>第二行</li>
	</ul>
	<ul type="square">               <!--方块-->
		<li>第一行</li>
		<li>第二行</li>
	</ul>
	<ol>                             <!--有序列表-->
		<li>ios</li>
		<li>android</li>
	</ol>
	<ol type="A">                    <!--大写字母序号-->
		<li>ios</li>
		<li>android</li>
	</ol>
	<ol type="a">                    <!--小写字母序号-->
		<li>ios</li>
		<li>android</li>
	</ol>
	<ol type="I">                    <!--大写罗马数字序号-->
		<li>ios</li>
		<li>android</li>
	</ol>
	<ol type="i">                    <!--小写罗马数字序号-->
		<li>ios</li>
		<li>android</li>
	</ol>
	<ol start="10">                  <!--从10开始的数字序号-->
		<li>ios</li>
		<li>android</li>
	</ol>
</body>
</html>

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
</head>
<body>
	<ul>                             <!--无序列表-->
		<li>第一行</li>
			<ol>                     <!--嵌套有序列表-->
				<li>ios</li>
				<li>android</li>
			</ol>
		<li>第二行</li>
	</ul>
	<dl>                             <!--自定义列表-->
		<dt>自定义第一行</dt>        <!--自定义列表项-->
			<dd>描述第一行</dd>      <!--自定义列表描述-->
		<dt>自定义第二行</dt>
			<dd>描述第一行</dd>
	</dl>
</body>
</html>

块

        块元素（<h1>\<p>\<ul>等）前后会换行，而内联元素（<b>\<a>\<img>）不会。

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
</head>
<body>
	<h1>h1</h1>
	<p>p</p>
	<a>a</a>
	<b>b</b>
</body>
</html>

        div也被成为块元素，主要是组合HTML元素的容器，可以方便定义样式。

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
	<div id="div1">
		<p>p</p>
		<a>a</a>
	</div>
	<div id="div2">
		<p>p</p>
		<a>a</a>
	</div>
</body>
</html>

         css文件写法如下

#div1{
	color: red;
}

#div2 p{
	color: green;
}

#div2 a{
	color: blue;
}

        span元素是内联元素，可作为文本的容器，通常和div一起使用，方便定义格式。

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
	<style type="text/css">
		span{                                <!--只修改span内的样式-->
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<p><span>pppppp</span>pppppppp</p>
	</div>
</body>
</html>

布局

        使用div的布局

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
	<style type="text/css">
		div#container{ 
			width: 100%;
			height: 300px;
			background-color: grey;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="head">头部</div>
		<div id="menu">目录</div>
		<div id="body">主题</div>
		<div id="foot">底部</div>
	</div>
</body>
</html>

         设置Body去除留白，并添加嵌套div样式

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
	<style type="text/css">
		body{
			margin: 0;                <!--去除留白-->
		}
		div#container{ 
			width: 100%;
			height: 300px;
			background-color: grey;
		}
		#head{                        <!--前面的div可以不加-->
			width: 100%;
			height: 10%;
			background-color: green;
		}
		div#menu{ 
			width: 30%;
			height: 80%;
			background-color: blue;
		}
		div#body{ 
			width: 70%;
			height: 80%;
			background-color: yellow;
		}
		div#foot{ 
			width: 100%;
			height: 10%;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="head">头部</div>
		<div id="menu">目录</div>
		<div id="body">主题</div>
		<div id="foot">底部</div>
	</div>
</body>
</html>

         我们会发现布局不像我们想象中的样子，我们需要为menu和body设置float浮动属性。

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
	<style type="text/css">
		body{
			margin: 0;                <!--去除留白-->
		}
		div#container{ 
			width: 100%;
			height: 300px;
			background-color: grey;
		}
		div#head{ 
			width: 100%;
			height: 10%;
			background-color: green;
		}
		div#menu{ 
			width: 30%;
			height: 80%;
			background-color: blue;
			float: left;              <!--float属性，从左向右-->
		}
		div#body{ 
			width: 70%;
			height: 80%;
			background-color: yellow;
			float: left;              <!--float属性，从左向右-->
		}
		div#foot{ 
			width: 100%;
			height: 10%;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="head">头部</div>
		<div id="menu">目录</div>
		<div id="body">主题</div>
		<div id="foot">底部</div>
	</div>
</body>
</html>

         我们有发现底部的样式不见了，我们把body的width设置成60%看看。

         原来foot也跟随顶上的float属性排序了，我们需要给foot清除排序。

<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
	<style type="text/css">
		body{
			margin: 0;                <!--去除留白-->
		}
		div#container{ 
			width: 100%;
			height: 300px;
			background-color: grey;
		}
		div#head{ 
			width: 100%;
			height: 10%;
			background-color: green;
		}
		div#menu{ 
			width: 30%;
			height: 80%;
			background-color: blue;
			float: left;              <!--float属性，从左向右-->
		}
		div#body{ 
			width: 70%;
			height: 80%;
			background-color: yellow;
			float: left;              <!--float属性，从左向右-->
		}
		div#foot{ 
			width: 100%;
			height: 10%;
			background-color: red;
			clear: both;              <!--清除float效果-->
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="head">头部</div>
		<div id="menu">目录</div>
		<div id="body">主题</div>
		<div id="foot">底部</div>
	</div>
</body>
</html>

         使用table的布局

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>列表、块和布局</title>
</head>
<body marginwidth="0px" marginheight="0px">
	<table width="100%", height="300px" style="background-color: grey">   
		<tr>
			<td colspan="2" width="100%" height="10%" style="background-color: green">头部</td> 
			<!--colspan表示合并单元格。由于整个网页是一个表格，
			该表格的第二行是由两个单元格组成的，所以头部和底部都需要合并两个单元格-->
		</tr>
		<tr>
			<td width="30%" height="80%" style="background-color: blue">目录</td>
			<td width="70%" height="80%" style="background-color: yellow">目录</td>
		</tr>
		<tr>
			<td colspan="2" width="100%" height="10%" style="background-color: red">底部</td>
		</tr>
	</table> 
</body>
</html>

表单、表单与服务器的交互

表单

        表单用于获取不同类型的用户输入。

        常用表单标签包括：

  • <form>         表单
  • <input>        输入域
  • <textarea>     文本域
  • <label>        控制标签
  • <fieldset>     定义域
  • <legend>       域的标题
  • <select>       选择列表
  • <optgroup>     选项组
  • <option>       下拉列表中的选项
  • <button>       按钮
<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>表单、表单与服务器的交互</title>
</head>
<body>
	<form>
		<fieldset style="width: 500px">              <!--定义域，用于将表单内的元素分组-->
			<legend>登录信息</legend>                <!--定义域的标题-->
				用户名:
				<input type="text">                  <!--输入域-文本框-->
				密码:
				<input type="password">
		</fieldset>
		<p>请选择您的性别:<p>
		<label for="male">Male</label>               <!--控制标签-->                
		<!--使用for=对应的id，将label和input关联起来
		这样可以直接在单选按钮前显示label的内容，并且点击label即可触发input的功能-->
		<input type="radio" name="sex" id="male" />
		<br />
		<label for="female">Female</label>
		<input type="radio" name="sex" id="female" />
		<p>你喜欢的水果有？<p>
		苹果<input type="checkbox">                  <!--输入域-复选框-->
		香蕉<input type="checkbox">
		橘子<input type="checkbox">
		<p>请选择你最喜欢的饮料:<p>
		<select>                                     <!--选择列表-->
			<optgroup label="碳酸">                  <!--对下拉列表的选项做分类-->
				<option>可乐</option>                <!--下拉列表的选项-->
				<option>七喜</option>
			</optgroup>
			<optgroup label="果汁">
				<option>葡萄汁</option>              <!--下拉列表的选项-->
				<option>西瓜汁</option>
			</optgroup>
		</select>
		<br /><br /><br /><br /><br /><br />
		<p>备注:<p>
		<textarea cols="100" rows="5">请填写备注信息</textarea>     <!--文本域-->
		<br />
		<input type="button" value="确认">           <!--输入域-按钮-->
		<input type="submit" value="提交">           
		<!--输入域-提交，提交是按钮的一种特例，自动实现了提交功能
		如果想要在点击控件后再做一些处理才提交的话，则不能使用submit,否则会导致重复提交-->
	</form>
</body>
</html>

表单与服务器的交互

         这边就不讲具体的交互了，感兴趣的可以看这篇文章(1条消息) Django搭建本地python工程的云端可视化界面_Nicholson的博客-CSDN博客

         那这边讲啥呢，就讲两种表单信息的基本提交方式

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>表单、表单与服务器的交互</title>
</head>
<body>
	<form action="192.168.1.100:8020/login" method="get">
	<!--get方法在提交信息的同时会把提交的信息显示在新页面的网址后面，安全性较差，但是便于定位寻址-->
		用户名:
		<input type="text" name="name">
		密码:
		<input type="password" name="password">
		<br />
		<input type="submit" value="提交">
	</form>
	<form action="192.168.1.100:8020/login" method="post">
	<!--post方法在提交信息的同时不会把提交的信息显示在新页面的网址后面，安全性较好-->
		<!--使用django作为服务器时使用post方法需要加上“{% csrf_token %}”
		  为用户实现防止跨站请求伪造的功能-->
		用户名:
		<input type="text" name="name">
		密码:
		<input type="password" name="password">
		<br />
		<input type="submit" value="提交">
	</form>
</body>
</html>

HTML框架

        传统的框架有frame\frameset，在html5中已经不能使用，现在用的最多的时iframe，这里演示一下。

        test.html调用framec.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<body>
	<iframe src="framec.html" frameborder='0' width="600px" height="600px"></iframe>
</body>
</html>

         framea.html中加入超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>framea</title>
</head>
<body bgcolor="#faebd7">
	framea
	<br/>
	<a href="https://blog.csdn.net/Nichlson/article/details/123401550?spm=1001.2014.3001.5501" target="_self">HTML5学习笔记</a>
</body>
</html>

         frameb.html调用framea.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>frameb</title>
</head>
<body bgcolor="#ebfad7">
	frameb
	<br/>
	<iframe src="framea.html" frameborder='0' width="400px" height="400px"></iframe>
</body>
</html>

        framec.html调用frameb.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>framec</title>
</head>
<body bgcolor="#d7faeb">
	framec
	<br/>
	<iframe src="frameb.html" frameborder='0' width="500px" height="500px"></iframe>
</body>
</html>

       打开后页面如下

        注意超链接有一个target属性，当设置为_self时，在自身页面打开

         设置为_blank则在新页面打开

         设置为_parent则在父页面打开

         设置为_top则在顶层页面打开，注意顶层不是framec，而是test.html。

HTML实体

        类似转义，当我们想要显示用于html格式化的符号或内容时，需要使用html实体替代，具体可以从这个网址找到。

HTML实体_百度百科 (baidu.com)

<!DOCTYPE html>              
<html>                         
<head lang="zn">           
	<meta charset="UTF-8">      
	<title>html实体</title>
</head>
<body>
	<p>abcd<html></p>          <!--不用实体无法显示<html>-->
	<p>abcd&lt;html&gt;</p>
</body>
</html>

Nicholson07
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端系列 html5入门到精通 视频教程
03-01
web前端系列 html5入门到精通 视频教程，百度云链接 ，永久有效！
浏览器 自动 补全 html标签 功能 兼容
Zoe_Wang_ing的专栏
10-24 1314
ie9 及以下浏览器 在 html 标签 出现
html 标签 自动闭合 无反斜杠包裹 自动修复 自动包裹 原生代码 函数
LingMax的博客
10-30 557
js版本 var aa = '<div class="default">无反斜杠包裹' var lsdiv = document.createElement("div"); lsdiv.innerHTML = aa; setTimeout(function(){ //必须延迟 console.log(lsdiv.innerHTML); },200); php...
html自动补全功能
weixin_45566935的博客
11-26 2759
一．是么是自动补全 所谓自动补全就是根据用户输入的信息给出与数据库相匹配的关键字，类似于百度、淘宝等软件搜索框中的提示功能。 二．功能基本框架 三：数据库设计 四．对应代码实现 首先导入对应的架包 ( 1 ).前台代码(jsp页面) 编写ajax与后台进行数据交互 <%@ page language="java" contentType="text/html; charset=UTF-...
数据提取2
weixin_51550438的博客
07-27 441
爬虫数据提取之xpath
Notepad 自动补全的插件 安装 （包括html,JavaScript）
热门推荐
张之海的博客
10-30 4万+
参考网站
基于HTML5构建Web操作系统
01-31
HTML5提供的多种新技术如：本地数据库、多线程开发、视频支持、离线编程等构建一个基本的Web操作系统。传统的操作系统有着一些难以克服的缺点，如仅能在本地终端访问，或仅支持有限的远程访问，限于本地终端的资源，...
使用HTML5canvas进行Web绘图
02-26
HTML5canvas元素的出现填补了这种不足，开发人员可以使用JavaScript脚本语言在canvas中进行一系列基于命令的图形绘制操作，本文将通过讲解如何使用canvas元素进行基本绘图操作，以及完成简单的动画和用户交互任务，...
HTML5系列教程
11-28
WEB开发系列教程，HTML5是新一代开发语言，在WEB项目开发，移动项目开发中必不可少的标记语言，本教程是你进行HTML5学习完整、系统的教材。
html5input自动补全,Input自动补全，并且将输入的数据存放到本地
weixin_36132740的博客
06-01 604
/p>"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">$(function () {//todo:id should be an arrayfunction inputSave(inputTextId, storeId, num) {var ele = $('#' + inputTextId);if ...
notepad中html自动补齐和标签,在Notepad ++中显示不匹配的html标签(Show unmatched html tags in Notepad++)...
weixin_29876591的博客
06-04 718
在Notepad ++中显示不匹配的html标签(Show unmatched html tags in Notepad++)有没有办法在Notepad ++中突出显示不匹配的HTML标签？例如，如果我有以下HTML ...Vital Stats我希望标记以某种方式突出显示它没有对应的标记。我还希望看到突出显示的任何结束标记都没有相应的开始标记。编辑我已经知道Notepad ++的单击标签的功能，...
notepad++ 【002】 html代码自动补全
ROVAST的专栏
10-24 4665
使用的插件是Zen Coding 听说变为了Emmet，无奈我怎么用都不行
HTML5-文档头部
weixin_52184490的博客
11-21 270
第1关：页面标题及字符集的设置 <!DOCTYPE html> <html> <head> <!-- ********* Begin ********* --> <meta charset="utf-8"/> <title>设置标题</title> <!-- ********* End ********* --> </head> <body> <h1..
最新方法VScode中html代码自动补全（超清晰详细，保证能用）
jdsydwr的博客
10-07 3万+
一、下载HTML Snippets插件 二、配置settings.json 1.在VScode窗口下按住ctrl + shift + P，调出搜索框，在搜索框中输入settings.json，选择打开设置，如下图所示。 2.在settings.json界面中添加代码如下：（注意这里将代码放在原有代码的下面，并且放在原有大括号的中间，了解编程的也应该知道为什么这么放。） "files.associations": { "*.vue":"html" }, "..
vscode html自定义标签自动补全,vscode代码编辑器的html标签自动补全如何设置
weixin_34653299的博客
05-31 6000
Vscode是微软推出的一款优秀的ide开发工具，界面简洁美观、默认支持中文，拥有丰富的插件，支持Windows，OS X和Linux。内置JavaScript、TypeScript和node.js支持，vscode的定位位于编辑器与IDE之间，但是更像一个编辑器。在使用vscode编写前端代码时，经常会遇到修改标签名的情况，比如div修改为header，div修改为main等等，下面我们就来看看...
Notepad++不能自动补全html标签
chenzhi6732的博客
09-13 2449
问题1： Notepad++不能自动补全代码 解决： Notepad输入必须是按照标签从左到右的顺序输入，必须< ----> <html ----> <html> 才能自动识别并补全，假如<> ----> <html>这...
html5最开始的头文件,初学HTML5必须知道的那些事（二）
weixin_35101659的博客
06-15 218
区别与之前繁杂的XHTML，HTML在头文件就简单了很多。http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这是XHTML，怎么样，看起来就很复杂吧。而在HTML5中头文件只有这一行。下面我们来看看HTML(HyperText Markup Language)1.超文本标记语言，一种纯文本类型的语言(尖括号里面的语言<&g...
html5 头文件,介绍下extern和头文件的联系
weixin_42519772的博客
07-01 119
用 #include 可以包含其他头文件中变量、函数的声明，为什么还要 extern 关键字？如果我想引用一个全局变量或函数a，我只要直接在源文件中包含 #include (xxx.h包含了a的声明)不就可以了么，为什么还要用 extern 呢？这个问题一直也是似是而非的困扰着我许久，经过实践和查找资料，有如下总结：一、头文件首先说下头文件，其实头文件对计算机而言没什么作用，她只是在预编译时在 #...
html编译的时候会自动补齐尾部标签吗,javascript – 为自动关闭标签添加尾部斜杠的字符串处理(IMG,BR等)...
weixin_39630744的博客
06-03 244
如果我得到一个元素的innerHTML,某些子元素应该有一个尾部斜杠是有效的XHTML(例如,“< br />”),但它们不会在Chrome,Firefox或IE中,不管doctype.显然这在大多数情况下并不重要,但在我的情况下,我正在使用来自DOM的html来作为模板系统的一部分 – 所以如果缺少那些反斜杠,它们会以这种方式进入使用这些构建的结果页面模板,因为这个页面将不会验证为X...
vb 控件 web htm5
最新发布
01-19
VB控件是一种用于开发Windows应用程序的工具，通常用于在Windows桌面应用程序中创建用户界面。它提供了各种不同类型的控件，包括文本框、按钮、标签等，可以方便地创建并操作这些控件来实现用户界面的交互性。 相比之下，HTML5是一种用于Web开发的技术标准，它提供了一系列的标签和属性，可以用于构建网页内容和用户界面。HTML5可以直接在Web浏览器中运行，无需安装额外的软件，因此具有跨平台和跨设备的优势。 如果将这两者结合起来，就可以使用VB控件来开发具有丰富交互性的Web应用程序。通过借助HTML5技术，我们可以在Web应用程序中嵌入VB控件，实现各种复杂的功能和用户界面交互。例如，可以使用VB控件来创建一个表单，然后使用HTML5的表单元素和属性来处理用户输入和表单提交。 在使用VB控件嵌入Web应用程序时，需要注意一些问题。首先，确保VB控件和Web页面所需的其他资源（如CSS样式、JavaScript文件）被正确加载和引用。其次，要确保VB控件在各种不同的Web浏览器中都能正常工作，因为不同的浏览器会对控件的支持程度有所差异。同时，还需要考虑到Web应用程序的性能和安全性，以确保用户可以流畅地使用应用程序并保护用户的隐私和数据安全。 总之，通过使用VB控件和HTML5技术，我们可以开发出功能强大、交互性好的Web应用程序，为用户提供更好的体验。这种技术组合的应用范围非常广泛，可以用于开发各种类型的Web应用程序，包括电子商务、社交媒体、企业管理系统等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值