首页 > 其他分享 >（三）复习第三课（07.20- 07.25第二轮）：HTML标签元素练习大全

（三）复习第三课（07.20- 07.25第二轮）：HTML标签元素练习大全

时间：2024-07-25 15:52:33浏览次数：12  
标签：章节 显示 定义 标题 这边 HTML 内容 07.25 第三课 

<!DOCTYPE html>
<!--练习时间：2024.07.20-2024.07.25-->
<html lang="en"><!--添加了en可以让你的网站打开时会提示翻译-->
<head>
	<p id="head1"></p>
    <meta charset="utf-8"><!--对于中文网页需要使用此标签声明编码，否则会出现乱码-->
	<meta http-equiv="Refresh" content="30"><!--这个是刷新界面，每隔3秒会刷新一次-->
	<meta name="Keywords" content="HTML,css,XHTML,JavaScript"><!--为搜索引擎定义关键词-->
	<meta name="Description" content="免费 Web & 编程 教程"><!--为网页定义描述内容-->
	<meta name="author" content="Runoob"><!--定义网页作者-->
	<!--<base href="http://www.baidu.com" target="_blank">--><!--默认HTML文档所有的连接标签链接-->
	<!--<link rel="stylesheet" type="text/css" href="../CSS/one.css">--><!--这是一个外部链接，链接外部样式-->
	<script src="../JS/myScript.js"></script><!--这是一个链接外部JS-->
	<title>这是一个标题</title><!--标题-->
</head>
<!--牛逼：按ctrl+/就能够快速注释-->
<body>
<!--第一/二/三节：元素、属性、标题-->
	<hr><!--这是一个带横线的换行符号-->
	<div class="one"><!--块级标签div，带属性class-->
        <h1>这是一级标题</h1><!--这是一个标题-->
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
        <p>这是一个段落</p><!--这是一个段落-->
		<a href="https://www.runoob.com/html/html-head.html">这是一个链接（百度一下，你就知道）</a><!--这是一个链接-->
		<img src="../Images/001.png" alt="加载失败提示" width="100" height="100"><!--图像标签-->	
		<br><!--这是一个空格换行-->
	</div>
<!--第四节：文本格式化-->
	<hr>
	<div class="two">
		<b>定义粗体文字</b>
		<br>
		<em>定义着重文字</em>
		<br>
		<i>定义斜体字</i>
		<br>
		<small>定义小号字</small>
		<br>
		<strong>定义加重语气</strong>
		<br>
		<sub>定义下标文字</sub>
		<br>	
		<sup>定义上标文字</sup>
		<br>
		<ins>定义插入字</ins>
		<br>
		<del>定义删除字</del>
		<br>
		<code>定义计算机代码</code><br>
		<kbd>定义键盘码</kbd><br>
		<samp>定义计算机代码样本</samp><br>
		<var>定义变量</var><br>
		<pre>定义预格式文本</pre><br>
		<abbr title="定义缩写">定义缩写</abbr><br>
		<address>定义地址</address><br>
		<bdo dir="rtl">定义从右向左文字方向</bdo><br>
		<bdo dir="ltr">定义从左到右文字方向</bdo><br>
		<blockquote>定义长引用</blockquote><br>
		<q>定义短引用</q><br>
		<cite>定义引用、引证</cite><br>
		<dfn>定义一个定义项目</dfn><br>
	</div>
<!--第五节：链接-->
	<hr>
	<div class="three">
		<a href="https://www.runoob.com/html/html-head.html">
		<img border="3" src="../Images/001.png" alt="加载失败后的提示"></a><!--这是一个带边框的图像链接-->
		<p>
			<a href="#c4">查看章节</a><!--这是一个当前页面链接到指定位置-->
		</p>
		<h2>章节1</h2>
		<p>这边显示该章节的内容</p>
		<h2>章节2</h2>
		<p>这边显示该章节的内容</p>
		<h2>章节3</h2>
		<p>这边显示该章节的内容</p>
		<h2>章节4</h2>
		<p>这边显示该章节的内容</p>
		<h2>章节5</h2>
		<p>这边显示该章节的内容</p>
		<h2>章节6</h2>
		<p>这边显示该章节的内容</p>
		<h2>章节 7</h2>
        <p>这边显示该章节的内容……</p>
        <h2>章节 8</h2>
        <p>这边显示该章节的内容……</p>
        <h2>章节 9</h2>
        <p>这边显示该章节的内容……</p>
        <h2>章节 10</h2>
        <p>这边显示该章节的内容……</p>
        <h2>章节 11</h2>
        <p>这边显示该章节的内容……</p>
        <h2>章节 12</h2>
        <p>这边显示该章节的内容……</p>
        <h2>章节 13</h2>
        <p>这边显示该章节的内容……</p>
        <h2><a id="c4">章节 14</a></h2>
        <p>这边显示该章节的内容……</p>
        <h2>章节 15</h2>
        <p>这边显示该章节的内容……</p>
        <h2>章节 16</h2>
        <p>这边显示该章节的内容……</p>
        <h2>章节 17</h2>
        <p>这边显示该章节的内容……</p>
		<br>
		<p>跳出框架</p>
		<a href="https://www.runoob.com/html/html-head.html" target="_top">点击这里跳出当前界面显示</a><!--target可以选择是在当前界面打开还是跳出框架打开-->
		<br>
		<p>这是一个电子邮件链接</p>
		<a href="mailto:[email protected]?Subject=Hello%20again" target="_top">发送邮件</a><!--发送邮件-->
	</div>
<!--第六节：头部-->
	<hr>
	<div class="four">
		<p><a href="#head1">点击此处链接到头部</a></p>
	</div>
<!--第七节：CSS-->
	<hr>
	<style type="text/css">
		p{color:aquamarine;}/*这个是内部样式表*/
	</style>
	<div class="five">
		<p style="color:aqua;margin-left: 20px;">这是一个段落</p><!--这个是内联样式-->
		<h2 style="background-color: crimson">这里定义了标签的背景颜色</h2><!--定义标签的背景颜色-->
		<h3 style="font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', 'serif';color:red;font-size:20px;">定义标签的字体、字体颜色、字体大小</h3>
		<h4 style="text-align:center;">居中对齐的标题</h4>
	</div>
<!--第八节：图像-->
	<hr>
	<div class="six">
		<h4>浮动图片</h4>
		<p><img src="../Images/pic_bulbon.gif" alt="图片加载失败的时候提示" style="float:left" width="100" height="100">一个带图片的段落，图片浮动在这个文本的左边</p><!--图片浮动左边-->
		<p><img src="../Images/pic_bulboff.gif" alt="图片加载失败的时候提示" style="float:right" width="100" height="100">一个带图片的段落，图片浮动在这个文本的右边</p>
		<a href="http://www.baidu.com"><img border="2" src="../Images/32X32.gif" alt="图片加载失败时提示信息" width="20" height="20">这是一个图片链接</a>
	</div>
<!--第九节：表格-->
	<hr>
	<div class="seven">
		<table border="1"><!--定义表格标签-->
			<caption>这是表格的标题</caption><!--定义表格标题-->
			<thead><!--定义表头标题部分-->
              <tr><!--定义行-->
                  <th>列标题1</th><!--定义表头单元格-->
                  <th>列标题2</th>
                  <th>列标题3</th>
              </tr>
			</thead>
			<tbody><!--定义表格主体部分-->
				<tr>
					<td>行1，列1</td><!--定义表格的数据单元格-->
					<td>行1，列2</td>
					<td>行1，列3</td>
				</tr>
				<tr>
					<td>行2，列1</td>
					<td>行2，列2</td>
					<td>行2，列3</td>
				</tr>
			</tbody>
		</table>
		<br>
		<table border="3">
			<h4>一列：</h4>
			<tr>
				<td>100</td>
			</tr>
        </table>
        <table border="3">
			<h4>一行三列：</h4>
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
        </table>
		<table border="3">
			<h4>两行三列:</h4>
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
	</div>
<!--第十节：列表-->
	<hr>
	<div class="eight">
		<h3>无序列表：</h3>
		<ul><!--定义无序列表-->
			<li>cofe</li>
			<li>tea</li>
			<li>milk</li>
		</ul>
		<h3>带编号的有序列表</h3>
		<ol>
			<li>apple</li>
			<li>banan</li>
			<li>lemon</li>
		</ol>
		<h3>大写字母列表：</h3>
		<ol type="A">
			<li>apple</li>
			<li>banna</li>
			<li>lemons</li>
		</ol>
		<h3>小写字母列表：</h3>
		<ol type="a">
			<li>apple</li>
			<li>banna</li>
			<li>lemons</li>
		</ol>
		<h3>罗马数字列表：</h3>
		<ol type="I">
			<li>apple</li>
			<li>banna</li>
			<li>lemons</li>
		</ol>
		<h3>小写罗马数字列表：</h3>
		<ol type="i">
			<li>apple</li>
			<li>banna</li>
			<li>lemons</li>
		</ol>
		<h3>嵌套列表</h3><!--这是一个嵌套列表-->
		<ul>
			<li>Coffee</li>
			<li>tea
			<ul>
				<li>black tea</li>
				<li>green tea</li>
			</ul>
			</li>
		</ul>
		<dl><!--自定义列表开始标签-->
			<dt>coffee</dt><!--注意此处的不同-->
              <dd>*black hot drink</dd>
              <dd>*white cold drink</dd>
		</dl>
	</div>
<!--第十一节：区块、布局-->
	<hr>
	<div class="night" style="width:500px;"><!--使用div布局-->
		<div class="header" style="background-color:yellow;">
			<h1 style="margin-bottom:0;">主要的网页标题</h1>
		</div>
		<div class="menu" style="background-color:blue;height:200px;width:100px;float:left;">
			<b>菜单</b><br>html<br>css<br>javascipt<br>
		</div>
		<div class="content" style="background-color:red;height:200px;width:400px;float:left;">内容在这里
		</div>
		<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权@代号六零一</div>
	</div>
	<br>
	<table width="500" border="1"><!--使用table布局-->
		<tr>
			<td colspan="2" style="background-color:#FFA500;">
				<h1>主要的网页标题</h1>
			</td>
		</tr>
		<tr>
			<td style="background-color:#FFD700;width:100px;vertical-align:top;">
				<b>菜单</b><br>
				html<br>css<br>javascript
			</td>
			<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">内容在这里</td>
		</tr>
		<tr>
			<td colspan="2" style="background-color:#FFA500;text-align:center;">版权#代号六零一</td>
		</tr>
	</table>
<!--第十二节：表单-->
	<script>
		//post:是HTTP-POST方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
		//get:默认值，是HTTP-GET方法，表单数据会附加在action属性的URL中，并以？作为分隔符，一般用于不敏感的信息，如分页等，例如https://www.runoob.com/?page=1,这里page=1就是get方法提交的数据。
	</script>
	<hr>
	<form action="/" method="post">
		<!--文本输入框-->
		<label for="name">用户名：</label>
		<input type="text" id="name" name="name" required>
		<br>
		<!--密码输入框-->
		<label for="password">密码：</label>
		<input type="password" id="password" name="password" required>
		<br>
		<!--单选按钮-->
		<label>性别：</label>
		<input type="radio" id="male" name="gender" value="male" checked>
		<label for="male">男</label>
		<input type="radio" id="female" name="gender" value="female">
		<label for="female">女</label>
		<br>
		<!--复选框-->
		<input type="checkbox" id="subscribe" name="subscribe" checked>
		<label for="subscribe">订阅推送信息</label>
		<br>
		<!--下拉列表-->
		<label for="country">国家：</label>
		<select name="country" id="country">
			<option value="cn">CN</option>
			<option value="usa">USA</option>
			<option value="uk">UK</option>
		</select>
		<!--提交按钮-->
		<input type="submit" value="提交">
	</form>
<!--第十三节：JavaScript脚本-->
	<!--颜色是由红色、绿色、蓝色混合而成-->
	<hr>
	<div class="ten">
		<script>
			document.write("Hello World!");
			//这个标签用于插入JS脚本语言
			function myFunction()
			{
				document.getElementById("demo").innerHTML="Hello World";
			}
			function myFunction1()
			{
				x=document.getElementById("demo1")//找到元素
				x.style.color="#ff0000"//改变样式
			}
		</script>
		<noscript>抱歉，你的浏览器不支持JavaScript</noscript><!--浏览器不支持JavaScript时弹出的提示-->
		<p id="demo">JavaScript可以触发事件，就像按钮点击</p><!--注意：这里要用ID，不能用class，否则失效-->
		<button type="button" onclick="myFunction()">点我回修改P段落的文字</button>
		<p id="demo1">JavaScript改变HTML元素的样式</p>
		<button type="button" onclick="myFunction1()">点击这里改变样式</button>
	</div>
<!--第十四节：字符实体-->
<!--HTML中的预留字符必须被替换为字符实体，一些在键盘上找不到的字符也可以使用字符实体来替换-->
	<hr>
	<div class="a">
		&#33;<!--感叹号-->
		<br>
		&nbsp;<!--空格-->
		&#36;<!--美元符号-->
	</div>
<script>
	//备注：1.XHTML指的是可扩展的超文本标记语言；2.与HTML4.01几乎是相同的；3.是更严格更纯净的HTML版本；4.以XML应用的方式定义HTML；5.是2001年1月发布的W3C推荐标准；6.得到所有主流浏览器的支持。可以理解为XHTML是新一代的文本标记语言的标准
</script>
</body>		
</html>

 

标签：章节,显示,定义,标题,这边,HTML,内容,07.25,第三课
From： https://www.cnblogs.com/daihaoliulingyi601/p/18323351

相关文章

  • 简单HTML网页源代码bootstrap网页设计模板成品网站作业
    原创旅游主题bootstrap框架网页设计原创了一个以旅游城市为主题，以哈尔滨为内容的bootstrap框架网页设计，网站具有响应式(电脑端，平板端，手机端都可适应)。鑫风格简约，代码少且简单，符合初学者的水平。六个页面，页面之间可相互跳转，不想要的页面删了即可。有首页，美食列表，详细介绍，登......
  • 简单易用的分页插件 原生HTML分页功能 JS ajax对接后台数据接口的调用
    简单易用的分页插件原生HTML分页功能JSajax对接后台数据接口的调用先来看一下整体的效果图如下：今天给大家推荐jQuery-Paging插件，一个用于简化网页分页的轻量级工具，包含自定义样式、动态生成分页、事件处理和集成示例。详细说明了如何在HTML中使用该插件及其功能配置。......
  • HTML5 表单验证
    0x01概述表单验证的两种方式：form表单提交到后台无刷新页面的ajax提交以下内容主要为form表单验证HTML5表单基本特性与新特性：placeholder：输入框中的灰色文字提示<inputplaceholder="Enterusername"/>type：HTML5新增类型color、date、email、number、......
  • pg 关于表膨胀 转发：https://www.cnblogs.com/lottu/p/14549463.html
    对于PostgreSQL处理MVCC（数据文件中新增tuple）的方式；相比其他数据库(Oracle、Mysql)而言；更容易触发表/索引膨胀。因为update操作也会影响表膨胀的问题。PostgreSQL处理的方式是对表autovacuum，vacuum是不会降低水位线。能避免表、索引膨胀。vacuumfull,reindex才会降低水位线。当然......
  • 【java计算机毕设】在线教学平台MySQL springboot vue HTML maven小组设计项目源代码+
    目录1项目功能2项目介绍3项目地址1项目功能【java计算机毕设】在线教学平台MySQLspringbootvueHTMLmaven小组设计项目源代码+文档寒暑假作业 2项目介绍系统功能：在线教学平台包括管理员、用户、教师三种角色。管理员功能包括个人中心模块用于修改个人信息......
  • 基于 HTML5 和 Canvas 开发的在线图片编辑器
    预览https://zaixianps.net技术栈HTML5：构建用户界面，提供语义化标签。CSS3：美化界面，增强用户体验。JavaScript：处理用户交互，管理Canvas操作。CanvasAPI：主要绘图工具，用于图像处理。项目结构image-editor/│├──index.html//主页面├──style.css//......
  • 尝试从图像 url 中抓取图像（使用 python urllib ），但获取 html
    我尝试从以下网址获取图像。http://upic.me/i/fj/the_wonderful_mist_once_again_01.jpg我可以右键单击并另存为，但是当我尝试使用urlretrievelikeimporturllibimg_url='http://upic.me/i/fj/the_wonderful_mist_once_again_01.jpg'urllib.urlretriev......
  • 易优CMS模板标签adv广告列表每3条记录输出如下html元素
    【基础用法】标签：adv描述：获取广告列表内容。用法：{eyou:advpid='1'loop='3'}<ahref='{$field.links}'><imgalt='{$field.title}'src='{$field.litpic}'/></a>{/eyou:adv}属性：pid=''广告位置IDloop='......
  • JavaScript——DOM属性之innerHTML和insertBefore
    今天我们来看看DOM当中的innerHTML和insertBefore。今天是用的样例仍然与上次一样，样例代码如下：<body><p>喜欢的城市</p><ulid="city"><liid="bj"name="beijing">北京</li><li>上海</li><......
  • HTML笔记总结（Xmind格式）：第一天
    Xmind鸟瞰图：简单文字总结：笔记总结：1.常用开发工具：VScode，Hbuilder，IDEA2.常见浏览器：IE，火狐（Firefox），谷歌（chrome）,Safari3.Web标准：结构标准，表现标准，行为标准4.HTML的全称为超文本标记语言5.排版标签有：标题标签，段落标签，水平线标签，换行标签，div标签，span标签6.标题标签的特点： ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99