第七阶段 -- 网页编程基础：【HTML】

最新推荐文章于 2021-06-28 09:53:56 发布
最新推荐文章于 2021-06-28 09:53:56 发布
阅读量295 收藏
点赞数
分类专栏： 前端/可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42375099/article/details/95097011
版权

文章目录

1. HTML入门

  • 前端网站的学习：http://www.w3school.com.cn/
<html>
 
  <head>
    <!--head会书写一些和浏览器中的配置信息-->
    <!--告诉浏览器按照UTF-8编码解析该网页-->
    <meta  charset='UTF-8'/> 
    <title>这是我的第一个网页</title>
  </head>
  
  <body>
    <!--body中放直接展现到用户面前的信息-->
     This is my first  HTML
  
  </body>

</html>

2. Head

<!DOCTYPE html>
<!--HTML中的文档约束（DTD）
	
	HTML5的文档约束  <!DOCTYPE html>
	HTML  4.01文档约束   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                                 "http://www.w3.org/TR/html4/strict.dtd">
	
-->
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--搜索引擎优化-->
		<meta name="author"  content="朱自清，张三" />
		<meta name="description" content="盼望着盼望着东风来了" />
		<meta name="keywords" content="东风，盼望" />
		
		<!--自动刷新网页（五秒后自动刷新）-->
		<meta http-equiv="refresh" content="5;http://www.bjsxt.com" />
		
		<!--禁止网页缓存--三种方式 (了解)-->
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
	</head>
	<body>
	
	</body>
</html>

3. body中的标签

3.1. body中的基本标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--标题标签  h1-h6  自动的加粗加黑  会自动的换行   align:调整标签的位置 （默认是left） -->
		【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园
		<!--标题居中-->
		<h1 align="center">【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h1>
		<h2>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h2>
		<h6>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h6>
		
		<!--分割线标签   width：宽度  500px:像素   color:颜色  align:位置（默认center）  size:垂直方向的大小 -->
		<hr width="500px" color="red" align="left" size="20px"/>
		<!--p段落标签   br:换行    &nbsp;空格-->
		<p>&nbsp;&nbsp;新华网阿里5月11日电（张宸 雪珍）55岁的白玛加布看着在<br/>
			玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑容。</p>
		<p>&nbsp;&nbsp;新华网阿里5月11日电（张宸 雪珍）55岁的白玛加布看着在<br/>
			玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑容。</p>
			
		<!--预文本标签  按照我们指定的格式输出 （灵活性比较大）-->
		<pre>
			新华网阿里5月11日电（张宸 雪珍）
			55岁的
			白玛加布      看着在
			玛旁雍错边飞舞的海鸥
			和欢呼的游客，脸上露出了欣慰的笑容
		</pre>
	</body>
</html>

3.2. body中其他一些小标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--下划线标签-->
		<u>北京</u>
		<!--斜体标签-->
		<i>北京</i>
		<!--加粗加黑标签-->
		<b>北京</b>
		<!--删除线标签-->
		<del>北京</del>
		<!--上标标签-->
		2<sup>3</sup>
		<!--下标标签-->
		log<sub>7</sub>
		<!--字体变小标签-->
		<small>北京</small>
		<!--字体放大-->
		<big>北京</big>
		
		<!--字体标签 font/span; face：指定字体的风格-->
		<!--北京-->
		<font color="red" size="25px" face="宋体">北京尚学堂</font>
		<span>北京</span>
		<hr />
		<!--列表标签: [1]有序列表，[2]无序列表，[3]自定义列表-->
		<!-- 作用：
			 【1】树形菜单
			 【2】导航栏的布局 -->
		<!--[1]有序列表-->
		<ol type="I">
			<li>javaSE</li>
			<li>javaEE</li>
			<li>javaME</li>
		</ol>
		
		<!--[2]无序列表-->
		<ul type="square">
			<li>javaSE</li>
			<li>javaEE</li>
			<li>javaME</li>
		</ul>
		
		<!--[3]自定义列表-->
		<dl>
			<dt>java</dt> <!--父亲节点-->
			<dd>javaSE</dd> <!--子节点-->
			<dd>javaEE</dd>
			<dd>javaME</dd>
		</dl>
		<!--跑马灯标签，从右边开始滚动，以40像素每秒滚动-->
		<marquee direction="right" scrollamount="40px">北京</marquee>
	</body>
</html>

4. html中超链接标签

超链接标签的作用（不会自动换行）：

  1. 实现不同页面之间的跳转
    href：指定跳转到目标资源的位置
    target：打开网页的方式；_blank：另起一页打开
  2. 实现锚点功能
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#bottom" name="top">返回底部</a> <!--锚点功能-->
		<br />
		<!--超链接标签的作用（不会自动换行）：
			【1】实现不同页面之间的跳转
			     href:指定跳转到目标资源的位置
			     target：打开网页的方式；_blank：另起一页打开
			【2】实现锚点功能-->
			
		<!--跳转到本地的资源位置-->
		<a href="02body中常用小标签.html" target="_blank">02小标签测试</a>
		
		<!--跳转到网络的位置-->
		<a href="http://www.bjsxt.com">北京尚学堂</a>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<a href="#top" name="bottom">返回顶部</a>
	</body>
</html>

5. 图片标签

img：(不会自动的换行)

  1. src：引入图片的位置（相对路径、绝对路径、网络路径 ）
  2. title：图片的标题
  3. width/height: 如果只制定一个的话，另外一个等比例变化
  4. border:图片的边框
  5. alt：图片无法正常显示的时候显示的属性
  6. align：图片的位置，必须有参照物的参照，这个属性才会起作用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<!-- img：(不会自动的换行)
	src：引入图片的位置{相对路径、绝对路径、网络路径  }
	title：图片的标题
	width/height: 如果只制定一个的话，另外一个等比例变化
	border:图片的边框
	alt：图片无法正常显示的时候显示的属性
	align：图片的位置，必须有参照物的参照，这个属性才会起作用 -->
		<!--1. 相对路径-->
		<img src="img/2.jpg" />
		<!--2. 绝对路径；在HBuilder中容易出错，但是这么写没问题-->
		<img src="C:\\Users\\my\\Documents\\HBuilderProjects\\01HTML\\img\\1.jpg" />
		<!--3. 网络路径-->
		<img src="https://www.baidu.com/img/bd_logo1.png" />
		<hr />
		
		<p>
		6666
		<a href="#"> <!--添加啊标签，就可以点击图片后跳转指定网页，这里#意为跳转至本页-->
		<img src="img/1.jpg" title="图片"  width="200px" height="200px" border="2px" alt="图片显示错误" align="right"/>
		</a>
		8888
		</p>
		
	</body>
</html>

6. 表格标签

6.1. table表格

  1. table表格的自适应能力 (align="center")整个的表格整体居中
  2. width="300px"；height="300px"
    tr：行 :height
    td：普通的列
    th：标题列：自动的居中，加黑效果
    快捷键：table>tr*3>th*3 --> 声明3行3列的表格，写完这句再按tab键就自动生成。
    colspan：列合并
    rowspan：行合并
    bgcolor：背景颜色
    cellpadding：内容和单元格的距离
    cellspacing：单元格和单元格的距离
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" align="center" cellpadding="20px" cellspacing="30px">
			<tr height="100px" align="center">
				<td width="100px" align="center">11</td>
				<td width="100px">2</td>
				<td width="100px">3</td>
			</tr>
			<tr height="100px">
				<th>4</th>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr height="100px">
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			<tr height="100px">
				<th>11</th>
				<th>12</th>
				<th>13</th>
			</tr>
		</table>
		<hr />
		<table border="1px" width="300px" height="300px" bgcolor="bisque">
			<tr bgcolor="aqua"> <!--设置背景颜色-->
				<th colspan="2" bgcolor="blue">1--2</th> <!--列合并-->
				<!--<th>2</th>-->
				<th>3</th>
			</tr>
			<tr>
				<th>4</th>
				<th>5</th>
				<th rowspan="2">6--9</th> <!--行合并-->
			</tr>
			<tr>
				<th>7</th>
				<th>8</th>
				<!--<th>9</th>-->
			</tr>
		</table>

		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
        
	</body>
</html>
<!--
	table>tr*3>th*3  :声明3行3列的表格	
	table表格的自适应能力 (align="center")整个的表格整体居中
	  width="300px" height="300px"  cellpadding：内容和单元格的距离  cellspacing：单元格和单元格的距离
	tr：行  :height
	td/th：列  width
	  td:普通的列
	  th:标题列:自动的居中，加黑效果
	 colspan:列合并 
	  rowspan：行合并 
	  bgcolor：背景颜色
-->

6.2. form表单

  1. url地址含义：https://www.baidu.com/s?键1=值1&键2=值2：
  2. action：表单提交的位置
  3. method (get/post)：表单提交的方式
    get：
  • (1). 参数会依附于url地址之后
  • (2). 利用get方式提交数据，数据的长度有限制
  • (3). 利用get方式提交数据，是不安全的
    post：
  • (1). 请求不会依附于地址
  • (2). 利用post处理参数不受限制
  • (3). post提交数据比较安全
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.baidu.com/s" method="get">
			<!--普通文本框-->
			<input type="text"  name="wd"/> 
			<input type="submit" value="百度一下" />
		</form>
	</body>
</html>
<!--
	https://www.baidu.com/s？键1=值1&键2=值2
	action：表单提交的位置
	method（get/post）：表单提交的方式
	get:(1)参数会依附于url地址之后，(2)利用get方式提交数据，数据的长度有限制(3)利用get方式提交数据，是不安全的
	post(1)请求不会依附于地址，(2)利用post处理参数不受限制（3）post提交数据比较安全
-->

6.3. form表单中的标签

  1. 普通文本框：checked="checked"默认选择这一项
  2. 单选框：要想实现单选效果必须制定一样的name属性；value是返回给数据库的值
  3. 多选框
  4. 多行文本框：<textarea rows="15" cols="20" value="">你好</textarea><br />
  5. 文件选择框：
  6. 隐藏框：
  7. 下拉框：value是返回给数据库的值；selected="selected"默认选择
  8. 按钮：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<!--1. 普通文本框  value：文本框中值-->
			账号： <input type="text"  name="zh" value="123" /> <br />
			密码：<input type="password" name="pwd" value="123" /><br />
			<!--2. 单选框：实现单选的效果必须指定同一个name属性   checked：默认的选择-->
		   男：<input type="radio"  name="sex"  value="1" checked="checked"/>
		   女：<input type="radio"  name="sex" value="0"/>	<br />
		   <!--3. 多选框-->
		    抽烟:<input type="checkbox"  value="1" checked="checked">
		    喝酒:<input type="checkbox" />
		    烫头:<input type="checkbox" /><br />
		    <!--4. 多行文本框-->
		    个人介绍： <textarea rows="15" cols="20" value="">你好</textarea><br />
		    <!--5. 文件选择框-->
		    <input type="file" name="file" /><br />
		    <!--6. 隐藏框-->
		    <input type="hidden" name="sno" value="20180607" /><br />
		    <!--7. 下拉框  selected：默认的选择-->
		    <select name="ch">
		    	<option value="1">中国</option>
		    	<option value="2" selected="selected">美国</option>
		    	<option value="3">日本</option>
		    	<option value="4">新加坡</option>
		    </select> <br />
		    
		    <!--按钮-->
		    <!--1. 提交按钮-->
		    <input type="submit" value="提交" /> <br />
		    <!--2. 清除按钮,清空写好的内容-->
		    <input type="reset" value="清除" />
		    <!--3. 普通的按钮  没有提交数据的功能-->
		    <input type="button" value="提交" />
		</form>		
	</body>
</html>

7. IFrame标签

HTML5中一般用Iframe，不用Framset。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<ul>
			<!--target：超链接打开的方式，在这里超链接在框架中打开，因为框架的name属性和target属性同名-->
			<li><a href="http://www.baidu.com" target="ifm">百度</a></li>
			<li><a href="http://www.taobao.com" target="ifm">淘宝</a></li>
			<li><a href="http://www.jd.com" target="ifm">京东</a></li>
		</ul>
		
		<!--框架学习：width：宽度；height：高度；name：在框架中可以打开的网页；src:默认路径 -->
		<iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com"></iframe>
	</body>
</html>

8. Frameset标签

在HTML5中用的不多，一般用IFrame！
对整个网页进行划分布局；<frameset>不在<body>标签中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--横向划分：顶部大小150，底部100，其余是中间-->
	 <frameset rows="150px,*,100px">
	 	<!--顶部部分-->
	 	<!--src：把已经写好的网页引入进来-->
	 	<!--norsize：不允许改变框架大小-->
	 	<frame  src="admin/top.html" noresize="noresize"/>
	 	<!--中间的部分；纵向划分，第一部分占10%，其余是第二部分-->
		<frameset cols="10%,*">
 		<!--左侧部分-->
 		<frame  src="admin/left.html"/>
 		<!--右侧部分-->
 		<frame  src="admin/right.html" name="rig"/>
	 	</frameset>
	 	<!--底部部分-->
	 	<frame  src="admin/bottom.html"/>
	 </frameset>
	<!--<body>
	</body>-->
</html>

9. 层div标签

网页布局的第三个标签。
div标签本身是没有任何的含义；div的作用就是把网页进行模块化的划分。

  • 使用div做一个类似于京东首页结构的网页
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*.top和class="top"相对应*/
			.top{
			height:100px;
			width: 100%;
			/*背景颜色*/
			background-color: red;
			}
			
			.tips{
				width: 100%;
				height: 40px;
				background-color: pink;
			}
			
			.center{
				width: 100%;
				height: 475px;
				background-color: palegreen;
			}
			
			.bottom{
				width: 100%;
				height: 150px;
				background-color: paleturquoise;
			}
			
			.login{
				width: 350px;
				height: 400px;
				background-color: #ffffff;
				/*相对定位：距离框架左边950，距离框架上边10*/
				position: relative;
				left: 950px;
				top: 10px; 
			}
		</style>
	</head>
	<body>
		<!--1. 头部模块-->
		<div class="top">
		</div>
		<!--2. 中间提示-->
		<div class="tips"></div>
		<!--3. 中间的展现-->
		<div class="center">
			<!--login的框架-->
			<div class="login">
			</div>
		</div>
		<!--4. 底部模块-->
		<div class="bottom"></div>
	</body>
</html>
<!--
	div本身是没有任何的含义
	div：作用就是把网页进行模块化的划分
-->

10. HTML5简介

  1. W3C组织指定的HTML规定。
  2. HTML5是由W3C，谷歌，火狐，IE，苹果一起指定的规则。在移动端的兼容很好，但是PC端不同浏览器有时候兼容性不好。
  • 去除了HTML4中的不常用标签
  • HTML5增加了一些语义标签
  • HTML5功能强大

11. HTML5增强表单(form)标签

H5中表单增强的属性：

  • placeholder：里面是显示的内容
  • autofocus：自动的获得焦点；这两种写法一样：autofocus="autofocus"和autofocus；- HTML5中只写autofocus就可以
  • max：最大值；min：最小值
  • minlength：最小长度； maxlength：最大长度
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<p>
				<!--1. 邮箱-->
				邮箱: <input type="email" />
			</p>
			<p>
				<!--2. 数字-->
				年龄: <input type="number" />
			</p>
			<p>
				<!--滑动器-->
				滑动器: <input type="range" />
			</p>
			<p>
				<!--3. 搜索框-->
				搜索: <input type="search" />
			</p>
			<p>
				<!--4. 日期的框-->
				日期: <input type="date" />
			</p>
			<p>
				<!--日期的框2：今年的第几周-->
				日期: <input type="week" />
			</p>
			<p>
				<!--日期的框3：今年的第几个月-->
				日期: <input type="month" />
			</p>
			<p>
				<!--5. 颜色-->
				日期: <input type="color" />
			</p>
			<p>
				<!--6. 网址-->
				网址: <input type="url" />
			</p>
			<p>
				<input type="submit" value="提交" />
				<input type="reset" value="清空" />
			</p>
		</form>
		<hr />
		<!--
			H5中表单增强的属性
			placeholder
			autofocus:自动的获得焦点
			max：最大值
			min：最小值
			minlength:最小长度
			maxlength:最大长度
		-->
		<!--一个密码登录的小实例-->
		<form>
			<p>
				账号:<input type="text"  placeholder="手机号/邮箱/账号" autofocus/>
			</p>
			<p>
				年龄:<input type="number" max="130" min="0" />
			</p>
			<p>
				密码:<input type="password"  minlength="2" maxlength="4" />
			</p>
			<p>
				<input type="submit" value="提交" />
				<input type="reset" value="清空" />
			</p>
		</form>
	</body>
</html>

12. HTML5中的增强结构标签

  1. 参考博客：(https://www.cnblogs.com/fly_dragon/archive/2012/05/25/2516142.html)
  2. 增强结构标签的意义：只用div标签的话，如果有写注释，很难直接看出页面整体布局，那里是头部，那里是导航，那里是正文，那里是底部… …所以这才有了增强结构标签，增强结构标签可以一目了然的看出来网页结构。不过还是使用传统div标签来布局的网页比较多！
  • 之前的京东登录页面来使用增强结构标签重写：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			header{
			height:100px;
			width: 100%;
			/*背景颜色*/
			background-color: red;
			}
		   nav{
				width: 100%;
				height: 40px;
				background-color: pink;
			}
			.center{
				width: 100%;
				height: 475px;
				background-color: palegreen;
			}
			footer{
				width: 100%;
				height: 150px;
				background-color: paleturquoise;
			}
			.login{
				width: 350px;
				height: 400px;
				background-color: #ffffff;
				/*相对定位*/
				position: relative;
				left: 950px;
				top: 10px; 
			}
		</style>
	</head>
	<body>
		<!--1. 头部模块-->
		<header></header>
		<!--2. 中间提示-->
		<nav></nav>
		<!--3. 中间的展现-->
		<div class="center">
			<div class="login">
			</div>
		</div>
		<!--4. 底部模块-->
		<footer></footer>
	</body>
</html>

13. HTML5中的音频标签

  1. 引入音频的标签：
    src
    control="control"
    source：把所有的格式都添加进入source标签；加上这个标签，使得网页更加健壮，如果第一个格式该浏览器不支持的话，就会尝试加载第二个格式，依次往下尝试加载，这也是最保险的方法，把所有的格式都写上来，让浏览器一个个来试。
  2. 引入视频的标签video
  3. 引入多媒体标签embed：既可以引入音频，也可以引用视频
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--1. 引入音频的标签-->
		<audio src="img/1.mp3" controls="controls">
			<!--
			audio只支持HTML5，之前的版本不支持这种格式，所以加下面这句话，如果该浏览器不支持，则显示下面这句话
			-->
			改网页不支持媒体标签，请更新浏览器版本！
		</audio>
		<!--下面这种写法更加健壮，从上到下来找，如果第一个mp3格式不支持，就往下找ogg-->
		<audio>
			<source src="img/1.mp3"></source>
			<source src="img/1.ogg"></source>
			改网页不支持媒体标签
		</audio>
		<!--2. 引入视频的标签-->
		<video src="img/movie.mp4" controls="controls" width="300px" height="300px"></video>
		<video>
			<source src="img/movie.mp4"></source>
			<source src="img/movie.ogg"></source>
			<source src="img/movie.webm"></source>
			改网页不支持媒体标签
		</video>
		<hr />
		<!--3. 多媒体标签，既可以引入音频，也可以引用视频 -->
		<embed src="img/1.mp3"></embed>
		<embed src="img/movie.mp4" width="500px" height="500px"></embed>
	</body>
</html>

14. HTML5中的其他标签

  1. figure：有点像列表标签；figcaption–给图片的一个描述
  2. details：有点像下拉框
  3. meter：刻度标签
  4. progress：进度条
  5. canvas：画布，画一些多边形
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<figure>
			<img src="img/1.jpg" />
			<figcaption>IT程序员</figcaption>
		</figure>
		<!--也可以用列表标签来实现上边功能-->
		<!--
		<dl>
			<dd>
				<img src="img/1.jpg" />
			</dd>
			<dd>
				IT程序员
			</dd>
		</dl>-->
		<!--展示文章的细节
		   mark：着重突出的内容
		-->
		<details>
			<summary>请选择</summary>
			<p>中国1</p>
			<p><mark>中国2</mark></p>
			<p>中国3</p>
			<p>中国4</p>
		</details>
		<!--刻度标签
			max:规定的最大值
			min:规定最小值
			value：当前的值（会根据这个值变颜色）
			low：自己定义的最小值
			high：自己定义的最大值
		-->
		<meter max="100" min="0" value="10" low="20" high="80"></meter>
		<!--进度条-->
		<progress max="100" value="40"></progress>
		<br />
		<input type="text" list="city" />
		<datalist id="city">
			<option value="IBM">IBM</option>
			<option value="IBM1">IBM1</option>
			<option value="IBM2">IBM2</option>
			<option value="IBM3">IBM3</option>
		</datalist>
		<!--画布标签-->
		<canvas id="mycat"></canvas>
		<script>
		   var  ca = document.getElementById("mycat");
		   var  te = ca.getContext("2d");
		   //背景颜色
		   te.fillStyle="#FF0000";
		   //绘制图形的大小
		   te.fillRect(0,0,80,100);
		</script>
	</body>
</html>
亚呦u椰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5基础阶段一
CSDN_GMC的博客
02-05 609
HTML5基础阶段一. 前端的整体构成（html,css,javascript）二. 文档结构三. HTML语法1. 标签2. 属性3. 元素四. css的使用（样式）五. 常用标签1. 标签可划分为两类2. 常用标签3. 列表标签（元素）4. 文本修饰 / 文字样式标签六. 页面注释标记注释的三种长相（html，css，Js中）七. 路径 一. 前端的整体构成（html,css,javascri...
html5第七章作业,第七章节HTML5的数据存储.ppt
weixin_35020262的博客
06-10 151
第七章节HTML5的数据存储典型的数据库API的用法，涉及打开数据库，然后执行一些SQL。但是需要注意的是如果使用服务器端的一个数据库的话，通常还要关闭数据库连接。 1．打开和创建数据库 通过初次打开一个数据库，就会创建数据库。在任何时间，在该域上只能拥有指定数据库的一个版本，因此如果你创建了版本1.0，那么应用程序在没有特定地改变数据库的版本时，将无法打开1.1。 打开和创建数据...
HTML5 权威指南第七章学习笔记
GoldenaArcher的博客
04-13 427
本来想扫一遍就跳过的，后来发现 `DOCTYPE` 也是常见的面试题之一， `metadata` 作用是什么自己也被问到过好几次……这种概念性的基础吧，还是挺重要的。
html7清除浮动补充案例,CSS浮动使用技巧
weixin_34618526的博客
06-28 158
这次给大家带来CSS浮动使用技巧，CSS浮动使用的注意事项有哪些，下面就是实战案例，一起来看一下。浮动具有以下特性：盖不住的文本浮动元素后面不是块级元素，后面的元素将会和它并排(除非设置了元素的宽度，并且屏幕放不下时将会换行)浮动元素的上一个元素如果没有浮动，浮动只在当前行浮动；当浮动遇到浮动，它们将在一行排序，除非没有位置了当元素设置定位值为absolute、fixed时，浮动将被忽略float...
HTML（第七章 案例分析）
qq_24249259的专栏
04-14 504
以主页为列 一 二
pre-work-phase-2-fundamentals:第二阶段工作前基础
03-31
1. **编程基础**：编程是IT工作的基石。可能涵盖至少一种或多种编程语言，如Python、Java或JavaScript。学员会学习变量、数据类型、控制结构（如循环和条件语句）、函数以及面向对象编程的基本概念。 2. **算法与...
goit-js-hw-07:DOM。 JS第七作业
04-07
7. **DOM事件冒泡与捕获**：理解事件传播的机制，包括冒泡和捕获阶段，以及如何利用它们优化事件处理。 8. **性能优化**：学习使用`documentfragment`提高批量DOM操作的性能，以及使用事件委托减少事件监听器的数量...
rn-fundamentos-react-native:React Native基础
04-10
这个"rn-fundamentos-react-native"项目显然专注于教授React Native的基础知识，让我们深入了解一下这个框架的核心概念和技术。 首先，React Native是基于React的，React是由Facebook开发的用于构建用户界面的...
goit-markup-hw-06:HTML + CSS 35在线课程
04-17
这可能是一个渐进式的学习过程，学生在完成前面的34个任务后，会来到这个阶段，继续提升他们的网页开发技能。 【标签解析】 "HTML"标签明确指出课程的核心内容是HTML，这是一种用于创建网页结构的语言，包含了诸如...
goit-markup-hw-07：作业7
02-12
"GoIT"可能是指该课程或项目的名称，而"markup-hw-07"暗示这是关于HTML标记语言的第七个作业。"GoIT"可能是对技术教育特别是Web开发领域的关注，强调了HTML作为构建网页的基础的重要性。 【描述】：“goit-markup-...
html7清除浮动补充案例,网页设计基础 javascript事件处理 第9章 JavaScript事件处理-补充案例.doc...
weixin_36231975的博客
06-28 213
第8章 JavaScript编程基础PAGE 34PAGE 1补充案例【案例9-1】 关闭广告栏案例描述考核知识点鼠标点击事件练习目标掌握鼠标点击事件的应用。掌握JavaScript对元素样式的操作。需求分析在浏览网页时，页面中经常会出现一些广告栏，点击广告栏上的关闭按钮即可关闭广告栏，本案例将通过JavaScript中的鼠标点击事件，完成这一效果。如图9-1所示。案例分析效果如图9-1所示...
浮动定义
weixin_30279315的博客
11-05 177
标准文档流：指元素根据块级元素和行内元素的特性，按照从上到下，从左到右的顺序依次排列，这种方式是默认的排列方式 一.块级元素和内联元素 块级元素内容独占一行，内联元素内容自动拼接display属性：块级元素与内联元素的相互转换block:块级元素的默认值，将内联元素转换成块级元素inline:内联元素的默认值，将内联元素转换为块级元素inline-block...
html网页制作图6,网页设计基础 HTML表单 第6章 HTML表单_补充案例（23页）-原创力文档...
weixin_29314405的博客
06-10 706
博学谷——让IT教学更简单，让IT学习更有效PAGE 22第6章 补充案例【案例6-1】 简单的用户登陆界面一、案例描述考核知识点input控件练习目标熟悉表单的构成。掌握标记的用法。理解标记相关属性。掌握input控件属性中的单行文本输入框、密码输入框以及提交按钮属性。需求分析在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。同时，为了明确信息分类、便于用...
第1章 补充案例（HTML练习题）
Ice Point.
02-03 4590
一、案例描述 1、 考核知识点 HTML5文档基本格式 2、 练习目标  初步了解HTML5文档基本格式。  能够运用HTML5文档基本格式制作简单的页面。 3、 需求分析 学习任何一门语言，都要首先掌握它的基本格式，HTML5标记语言也不例外。要想制作丰富多彩的HTML5网页，首先需要掌握HTML5文档的基本格式。本案例通过编写一个简单的HTML5网页，使初学者更好地理解HTML5文档的基本格式。 4、 案例分析 效果如图1-1所示。 具体实现步骤如下： a) 新建Dreamweaver默认文档。
登录+注册+跳转搜素+详情切换布局+详情点击图片双击放大
热门推荐
qq_40531965的博客
01-18 1万+
权限 uses-permission android:name="android.permission.INTERNET" /> 依赖 compile 'com.squareup.okhttp3:okhttp:3.6.0' compile 'com.squareup.okio:okio:1.11.0' compile 'com.google.code.gson:gson:2.8.
【自己练习】linux常见命令——（六）
weixin_34061482的博客
09-01 4228
菜鸟教程命令大全    http://www.runoob.com/linux/linux-command-manual.html 命令大全:      http://man.linuxde.net/   tab ：自动补全 Ctrl+l 清屏 (类似于clear命令) Ctrl+U 清空当前输入   ctrl+c  关闭 man command 帮助 man...
登录、注册、后台管理页面（动态）
weixin_30776545的博客
08-26 5382
一、作业需求： 1、后台管理主界面（左边菜单框、（全选、反选）框、返回顶部按钮） 2、老男孩登录、注册页面 二、博客地址：https://www.cnblogs.com/catepython/p/9306335.html 三、运行...
pygame-飞机大战(下·三)
Type真是太帅了
07-28 506
（二）中介绍了Kinds文件下下的类，但大多数都大同小异，除了贴图和更新函数的更新法则不同外，其他相同，而只有特殊的例如Ship、BOSS等含有多个不同的地方，其中由于Ship是主控元素，为了简单起见把界面的部分数据的显示也放入了该类里。 接下来介绍各个界面以及界面的鼠标点击触发函数。 在UI文件夹下的界面大部分采用draw函数代替update函数。draw函数在UIMgr的update...
开题报告宠物医院管理系统的设计与实现 已通过开题答辩的.docx
最新发布
07-25
随着人们生活水平的提高和精神需求的增加，宠物已经成为很多家庭的重要成员，宠物市场的规模和潜力也不断扩大。宠物医院作为宠物健康保障的重要机构，需要适应市场的发展和变化，提供更加专业和便捷的服务。宠物医院的业务和信息涉及多个方面，如科室信息、医生信息、坐诊信息、药品信息、挂号信息、网站公告信息等。如果采用传统的手工或半自动化的管理方式，会造成信息的分散、混乱、更新困难、查询不便等问题，影响管理的效率和质量。系统能够通过计算机技术和网络技术对宠物医院业务进行集中管理。它可以实现信息的录入、存储、查询、修改、删除、统计、分析、展示等功能，方便宠物医院的管理人员和工作人员进行业务操作和决策支持。宠物医院管理系统还可以利用网络技术，向宠物主人和宠物爱好者提供在线的服务和咨询，方便宠物主人和宠物爱好者了解和关爱自己的宠物，增强宠物医院的社会影响力和竞争力。综上所述，宠物医院管理系统是一个具有实际意义和应用价值的选题，它可以为宠物医院的管理和服务提供有效的支持，为宠物主人和宠物爱好者提供便捷的服务和咨询，为宠物的健康和福利做出贡献。
JavaScript基础教程：第一阶段
"JavaScript教学阶段1" 在JavaScript教学阶段1中，主要涵盖了JavaScript的基本概念、语法和核心功能。...通过这个阶段的学习，目标是掌握JavaScript的基础，理解其基本语法，并能熟练运用函数来增强网页的交互性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值