HTML元素应用指南-优快云博客

加粗和斜体

strong字体加粗，大小和原文一致，不会换行，不会对行间距发生变化
em字体变斜体，被em标签包裹的部分变斜体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体样式</title>
	</head>
	<body>
		<strong>徐志摩人物简介</strong>
		<p>
		<em>1910</em>年入杭州学堂<br/>
		<em>1918</em>年赴美国克拉学习银行学<br/>
		<em>1921</em>年开始创作新诗<br/>
		<em>1927</em>年参见创办新月书店<br/>
		<em>1931</em>年由南京乘飞机到北平，飞机失事，因而遇难<br/>
		</p>
	</body>
</html>

加粗和斜体展示
在这里插入图片描述

特殊字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>加粗和斜体</title>
	</head>
	<body>
		<h2>加粗-strong和斜体-em</h2>
		<h3>春夜喜雨</h3>
		<!-- 
			特殊字符：空格，页面如果自己手动敲空格，效果几乎没有，使用空格转义字符&nbsp; 
			小于号和大于号，是有特殊含义，<...> ，组合成一个标签，但是页面如果要展示尖括号的话，要用&lt;小于 &gt;大于
			双引号：&quot;
			版权符号：&copy;
		-->
		<p>朝代：唐代&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作者&lt;author&gt;：&lt;杜甫&gt;</p>
		<p>好雨知<strong>时节</strong>，当春乃<em>发生</em>。</p>
		<p>随风潜<strong>入夜</strong>，润物细<em>无声</em>。</p>
		<p>野径云<strong>俱黑</strong>，江船火<em>独明</em>。</p>
		<p>晓看红<strong>湿处</strong>，花重锦</重锦><em>官城</em>。</p>
		<p>课程&quot;2020-08-02&quot;,&copy;大数据&amp;课工场</p>
	</body>
</html>

特殊符号展示：
在这里插入图片描述

图像标签< img/>

src：图像地址
alt：图像不能正常显示的替代文字
title：鼠标悬停图像时的提示文字
width：图像宽度
height：图像高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="../image/2.jpg" alt="图片不能正常显示" title="宠物狗" width="100px" height="50px">
	</body>
</html>

链接标签< a>链接文本或图像< /a>

href：链接路径
target：链接在哪个窗口打开，常用值_self，_blank

页面间链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="beijing.html" target ="_blank">
			<img src="../image/2.jpg" alt="图片不能显示" title="宠物狗"/>
		</a>
		<a href="beijing.html" target ="_blank">点我去北京</a>
	</body>
</html>

链接标签展示：
在这里插入图片描述

锚链接

创建跳转标记

< a name=“marker”>乙位置< /a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锚连接</title>
	</head>
	<body>
		<a name="d1">dog1</a>
		<p>
		<img src="../image/2.jpg" alt="图片不能显示" width="100%"/>
        </p>
		<a name="d2">dog2</a>
		<p>
		<img src="../image/2.jpg" alt="图片不能显示" width="100%"/>
        </p>	
	</body>
</html>

创建跳转链接

< a href="#marker">甲位置< /a>
#marker 本页面查找
xxx.html#marker 不在同一个页面查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>去往锚连接</title>
	</head>
	<body>
		<a href="mao.html#d1">去dog1</a>
        <a href="mao.html#d2">去dog2</a>
	</body>
</html>

锚链接展示：
在这里插入图片描述

功能性链接（qq、电子邮件等）

< a href= “mailto:地址”>qq< /a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="beijing.html" target ="_blank">
			<img src="../image/2.jpg" alt="图片不能显示" title="宠物狗"/>
		</a>
		<a href="beijing.html" target ="_blank">点我去北京</a>
		<a href= "mailto:123456@qq.com">qq联系</a>
	</body>
</html>

内容展示：
在这里插入图片描述

块元素和行内元素

块元素：无论内容多少，该元素独占一行（p、h1-h6…）
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（strong、em、a…）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<h1>标题1</h1>
		<p>我是块元素</p>
		<a href="beijing.html">去北京</a>
		<strong>南京</strong>
	</body>
</html>