第一章 HTML基础 ③ 详细代码演练、解析

小丫头爱打盹

已于 2022-06-30 17:22:36 修改

阅读量537

点赞数

分类专栏： # HTML+CSS 文章标签： html 前端 html5

于 2022-06-07 00:28:29 首次发布

本文链接：https://blog.csdn.net/Liu_wen_wen/article/details/125152940

版权

HTML+CSS 专栏收录该内容

16 篇文章 6 订阅

订阅专栏

第一章 HTML基础 ③ 详细代码演练、解析

一、常用标签

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
	<body>
		<!--h标题: h1-h6 -->
		<h1>1级标题</h1>
		<h2>2级标题</h2>
		<h3>3级标题</h3>
		<h4>4级标题</h4>
		<h5>5级标题</h5>
		<h6>6级标题</h6>
		<h7>7级标题</h7>
		这是普通内容
		<!--分割线标签-->
		<hr/>
		<!--p标签：段落标签，拥有段间距-->
		<p>这是一行内容</p>
		<p>这是一行内容</p>
		<hr/>
		<!--br:换行标签,行之间没有间距-->
		这是第一行内容<br/>
		这是第二行内容
	</body>
</html>

运行结果如下：
在这里插入图片描述

二、相对引用绝对引用

代码所在的目录如下：
在这里插入图片描述
图片在页面目录下的子级目录中的布局：

图片在页面上级目录下的目录中的布局：

代码如下：（Noname2.html）

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
	<body>
		<!--
		相对引用: 从当前页面的位置出发去找目标资源
		相对于本页面的位置做参考。因此，当前页面一定要先保存。
		-->
		<!--图片与页面在同级目录-->
		<img src="1212.jpg" alt="XX的图片" width="100" height="150" />
		这是一些图片说明这是一些图片说明这是一些图片说明这是一些图片说明...
		<hr/>
		<!--图片在页面目录下的子级目录中-->
		<img src="./img/3.jpg" width="100" height="150"/>
		<hr/>
		<!--图片在页面上级目录下的目录中-->
		<img src="../wenjian1211/1211.jpg" width="100" height="150"/>
		<hr/>
		<!--
		绝对引用:
		1.带上磁盘根盘符的路径
		2.带上服务器域名地址的路径
		-->
		<img src="file:///D:\培训\项目space\10第二周周一两个测试\th.jpg"/>
		<hr/>
		<img src="https://img-blog.csdnimg.cn/f084bb3065074a5d9a97d5d5f0488674.png"/>
	</body>
</html>

运行结果如下：
在这里插入图片描述

三、img 及内部属性

代码、图片布局如下：
在这里插入图片描述
代码如下：（）

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
	</head>
	<body>
		<img src="1221.jpg" alt="XX的图片" width="100" height="150" />
		这是一些图片说明这是一些图片说明这是一些图片说明这是一些图片说明这是一些图片说明这是......
	</body>
</html>

运行结果如下：
在这里插入图片描述

四、无序列表

代码、图片布局如下：
在这里插入图片描述

代码如下：（Noname4.html）

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
	</head>
	<body>
		<!--无序列表
		  ul: unordered list 无序列表
		  li: list item 列表项目
		  描述的内容写在li中
		-->
		<h1>你喜欢的经典语句有哪些?</h1>
		<ul>
			<li>天道酬勤</li>
			<li>好好学习，天天向上</li>
			<li>撸起袖子加油干</li>
			<li>嫉妒别人,仇视异己,就等于把生命交给别人</li>
			<li>古之立大事者,不惟有超世之才,亦必有坚忍不拔之志</li>
		</ul>
		<hr/>
		<h1>把大象放到冰箱有几个步骤?</h1>
		<!--
			ol:ordered list 有序列表
			li:list item 列表项目
		-->
		<ol>
			<li>将大象牵到冰箱旁边</li>
			<li>打开冰箱门</li>
			<li>将大象放进去</li>
			<li>关上冰箱门</li>
		</ol>
		<hr/>
		<!--
			自定义列表:
			dl :define list 自定列表
			dt :数据标题
			dd :数据项
		-->
		<img src="./img/kt.jpg"/>
		<dl>
			<dt>产品</dt>
			<dd>格力空调</dd>
			<dt>价格</dt>
			<dd>￥2000元</dd>
			<dt>产地</dt>
			<dd>深圳</dd>
		</dl>
	</body>
</html>

运行结果如下：
在这里插入图片描述

五、无序列表2

代码如下：（）

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<!--级联菜单-->
		<ul>
		<li>
			商品管理
			<ul>
				<li>商品查询</li>
				<li>商品添加</li>
				<li>商品上下架</li>
			</ul>
		</li>
		<li>
			人事管理
			<ul>
				<li>员工查询</li>
				<li>员工添加</li>
			</ul>
		</li>
		<li>
			采购管理
			<ul>
				<li>采购单查询</li>
				<li>采购单创建</li>
			</ul>
		</li>
		</ul>
	</body>
</html>

运行结果如下：
在这里插入图片描述

六、超链接

代码如下：（）

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
	<meta charset="utf-8">
	</head>
	<body>
		<!--超链接的使用-->
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.bilibili.com">B站</a>
		<a href="http://www.taobao.com">淘宝</a>
		<hr/>
		<a href="./pages/A.html">A页面</a>
		<a href="pages/B.html">B页面</a>
		<a href="pages/C.html">C页面</a>
	</body>
</html>

运行结果如下：
在这里插入图片描述

七、索引锚点

代码如下：（）

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
	</head>
	<body>
		<a href="mailto:1423432@qq.com">发邮件</a>
		<center>
		<a href="#jingji">经济新闻</a>
		<a href="#yule">娱乐新闻</a>
		<a href="#junshi">重要新闻</a>
		<span id="top"></span>
		</center>
		<hr/>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
		<h1><a name="jingji">经济新闻</a></h1>
		<a href="#top">回到顶部</a>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
		<h1><a name="yule">娱乐新闻</a></h1>
		<a href="#top">回到顶部</a>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
		<h1><a name="junshi">重要新闻</a></h1>
		<a href="#top">回到顶部</a>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
		<p>这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容这是一些新闻内容</p>
 </body>
</html>

运行结果如下：
在这里插入图片描述

八、font 字体

代码如下：（）

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
	</head>
	<body>
		<!--
		font标签: 修饰字体的大小，颜色，字体类型
		size:大小
		color:颜色
		face:字体类型
		b: bold 加粗
		u: underline 下环线
		i: italic 斜体
		sub: 子 下标
		sup: super超人 上标
		-->
		<font size="7" color="red" face="隶书">猪八戒</font>
		<br/>
		普通效果
		<b>加粗效果</b>
		<u>下划线</u>
		<i>斜体效果</i>
		<hr/>
		x<sub>1</sub><sup>2</sup>+y<sub>1</sub><sup>2</sup>
		<hr/>
	</body>
</html>

运行结果如下：
在这里插入图片描述

九、table tr td 商标符号版权符号

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
	</head>
	<body>
		<!--学生信息表-->
		<table border="1" align="center" width="800" height="300">
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>手机</th>
		</tr>
		<tr>
			<td>101</td>
			<td>张三</td>
			<td>男</td>
			<td>20</td>
			<td>1111</td>
		</tr>
		<tr>
			<td>102</td>
			<td>李四</td>
			<td>女</td>
			<td>18</td>
			<td>1111</td>
		</tr>
		<tr>
			<td>102</td>
			<td>李四</td>
			<td>女</td>
			<td>
				<h1>标题</h1>
			</td>
			<td>
				<table>
					<tr>
						<td>第一类</td>
						<td>第二类</td>
					</tr>
				</table>
			</td>
		</tr>
		</table>
		a &lt; b &gt; c<br/>
		&copy; 版权符号<br/>
		&reg; 注册商标<br/>
		你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好<br/>
		你abcd好<br/>
	</body>
</html>

运行结果如下：

在这里插入图片描述