第二章 HTML基础学习标签

最新推荐文章于 2024-03-25 00:11:20 发布

violent_sunset

最新推荐文章于 2024-03-25 00:11:20 发布

阅读量159

点赞数

分类专栏： JAVA/JAVA SE 学习记录文章标签： HTML基础学习2

本文链接：https://blog.csdn.net/qq_36346496/article/details/80317353

版权

JAVA/JAVA SE 学习记录专栏收录该内容

28 篇文章 0 订阅

订阅专栏

dl:一个带有名字和描述的描述列表 description list
dt:描述标题 descirption title
dd:用于在描述列表中描述一项内容：description describe
b:blod 字体加粗
i:字体倾斜
em:强调短语标签，显示强调，效果表现类似加倾斜
strong：重点短语标签，显示重点，效果表现类似字体加粗
u:下划线,
del:删除线
ins:插入在删除文本后的修改内容，效果如下划线一样
sub:下标标注：用于化学元素如：H2O,
sup:上标标注：用于数学公式的表示；如a的平方
code：用于代码格式的显示
pre:段落样式，允许换行或者空格隔开，
  :空格
> :大于符号 great than
≥ :大于等于符号 great and equal
< :小于符号 less than
≤ :小于等于符号 less and equal
© ：版权声明
font :字体，其中可调：size color face
a: 超链接，链接到某个网址去 uri:universal resource identifier ,url:universal resource located
超链接打开模式：target包括以下几种：_blank：在一个新空白网页中打开，_self:在当前网页中打开（默认），_parent:在父级窗口中打开，_top:在顶部打开，_framename:
img:加载图片，图片标签，打开一张图片
table:表格标签，
tr：行标签
td:列标签

th：标题标签：

thead:表格名字（头）标签，一般位于第一行

tbody：表格值（身体）标签，记录

caption：标题标签，表格名字；

简单标签的HTML网页例子

<!DOCTYPE html>
<html>
<head>
	<title>质数查询</title>
	<meta charset="utf-8">
	<style type="text/css">
		#result span{
			display: inline-block;
			width:60px;
			text-align: center;
			color:blue;
		}


	</style>
	<script>
		function $(id)
		{
			return document.getElementById(id);
		}




		function findPrime()
		{
			var start=parseInt($("start").value);
			var end=parseInt($("end").value);
			var result="";
			var cnt=0;
			for(var i=start;i<=end;i++)
			{
				if(isPrime(i))
				{
					result+="<span>"+i+"</span>";
					if(++cnt%10==0)
					{
						result+="<br>";
					}
				}
			}
			$("result").innerHTML=result;
		}


		//判断这个数是否质数
		function isPrime(num)
		{
			if(num<=1)return false;//小于等于1的数都不是质数
			if(num==2)return true;//2是质数
			var top=Math.floor(Math.sqrt(num));//sqrt是对num进行开平方，然后floor是求开平方所得的数向上取整正整数
			var i;
			/*将num循环取余i，是否为0也就是整除i，如果是，就证明不是质数。如果最后i>top,就证明没有能够整除的数,为质数。*/
			for(i=2;i<=top;i++)
			{
				if(num%i==0)break;
			}
			return i==top+1;//如果i
		}
	</script>
</head>
<body>
	<h3>求某范围内质数</h3>
	<!-- div:代表一行，是一个块元素，span代表一行中的某个区域，是一个心里呢元素 -->
	<div>
		<span>开始范围:</span>
		<input type="text" id="start" value="3"><!-- input是一个单标签，可以不写收口,XHTML=以XML的语法严格标准来规范HTML -->
	</div>
	<div>
		<span>结束范围:</span>
		<input type="text" id="end" value="1000">
	</div>
	<div>
		<button οnclick="findPrime()">查找</button>
	</div>
	<hr>
	<div id="result"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	
</head>
<body>
	<dl>
		<dt>计算机</dt>
		<dd>一种能够自动计算的设备</dd>
		<dt>Java EE</dt>
		<dd>一种B/S企业级开发解决方案</dd>
	</dl>
	<hr>
	<i>this is</i> a <b>book</b>!<br>
	<em>hello</em> <strong>world</strong>!<br><!-- 语义化标记的使用时流行的趋势 -->
	this is <u>a book</u>！<br>
	My favorite color is <del>blue</del> <ins>red</ins>!<br>
	H<sub>2</sub>O,a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>,<br>
	<code>int a=10;</code><br>
	this
		is 
			a 
				book<br>
	<pre>
	this
		is 
			a 
				book
	</pre><br>
	5>3,5≥3,2<3,2≤3,5&eq;5,<br>
	&copy;2015-2016 zkl.edu.cn
	<br>
	<font color="red" size="28">this is a book!</font>
	<ins><font color="red" size="28" face="verdana">this is a book!</font></ins><br>
	 <!-- a:anchor 锚点 href：html reference 
	 网址：url：universal resource locator 网址：
	 网址：URI：universal resource identifier 网址：ISBN-CODe -->
	<!--  绝对网址：站外跳转 -->
	<a href="http://www.163.com">去网易看看</a><br>
	<!-- 相对网址：相对本网页的其他页面的站内跳转 -->
	<a href="process.html" target="_blank">去处理数据页面</a><br>
	<a href="novel.html">去看小说</a>
	<img src="prince.webp">
	<hr>
	<!-- tr:table th:table head cell . 
	row,row,column,line -->
	<table border="1" cellspacing="0">
		<caption>新生登记表</caption>
		<tbody> 
			<tr>
				<td>123012</td>
				<td>wangxin</td>
				<td rowspan="2">25</td>
			</tr>
			<tr>
				<td>123013</td>
				<td>wangxin</td> 
			</tr>
			<tr>
				<td>123014</td>
				<td colspan="2">资料不明</td>
				 
			</tr>
		</tbody>
		<thead>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		</thead>
		
	</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	process now!.....
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<h3>目录</h3>
	<ol id="main">
		<li><a href="#chapter1">第1章</a></li>
		<li><a href="#chapter2">第2章</a></li>
		<li><a href="#chapter3">第3章</a></li>
		<li><a href="#chapter4">第4章</a></li>
		<li><a href="#chapter5">第5章</a></li>
		<li><a href="#chapter6">第6章</a></li> 
	</ol> 
	<hr>
	<div id="chapter1">
		<p>雨停了</p>
		<p>雨停了</p>
		<p>雨停了</p>
		<p>雨停了</p>
		<p>雨停了</p> 
	</div>
	<hr>
		<a href="#main">回首页</a>
	<hr>
	<div id="chapter2">
		<p>花开了</p>
		<p>花开了</p>
		<p>花开了</p>
		<p>花开了</p>
		<p>花开了</p>
		<p>花开了</p> 
	</div>
	<hr>
		<a href="#main">回首页</a>
	<hr>
</body>
</html>

violent_sunset

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二章 HTML基础学习标签

dl:一个带有名字和描述的描述列表 description listdt:描述标题 descirption titledd:用于在描述列表中描述一项内容：description describe b:blod 字体加粗i:字体倾斜em:强调短语标签，显示强调，效果表现类似加倾斜strong：重点短语标签，显示重点，效果表现类似字体加粗u:下划线,del:删除线ins:插入在删除文本后的修改内容，效...
复制链接

扫一扫