本文详细介绍了HTML中的常见标签，如a标签用于创建超链接，img标签用于展示图片，iframe用于内嵌框架，以及meta、strong、em、b、i、var等辅助标签的使用。同时，文章提到了CSS样式表的基础应用，包括类选择器和文本对齐方式。还讨论了标签的嵌套规则和一些注意事项，如块标签和行标签的嵌套限制。
常用行标签及其作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行标签</title>
</head>
<body>
<!--
iframe 框架
src="需要显示的页面地址"
height="设置高度"
width="设置宽度"
-->
<iframe src="./case.html" height="100" width="100"></iframe>
<!--
a标签
href属性：用来设置超链接的地址
target属性：设置标签页的打开方式
_blank 在新标签页打开
_self 默认值，在当前页面打开
作用：
1.设置一个超链接
2.设置锚点
常用效果是回到顶部
如果在开发中需要设置a标签点击没有效果，则可以设置href属性为##即是
href="##"
如果需要设置回到顶部则href="#"
不要设置href为空，这样会导致页面刷新
3. 下载文件
a. 如果需要下载的文件是音频、视频、图片、文档等，都需要经过压缩之后，再在href上设置文件路径
b.如果是文本类文件，可以直接把文件路径设置在href属性上，直接由浏览器打开
-->
<a href="http://www.baidu.com">百度</a>
<a href="./case.html" target="_blank">案例</a>
<hr />
<div id="ye" style="height: 100px; background: #ff0;"></div>
<div id="gr" style="height: 100px; background: #04be02;"></div>
<a href="#ye">黄色块</a>
<a href="#gr">绿色快</a>
<a href="#">回到顶部</a>
<a href="##">点不动</a>
<a href="./abc.txt">下载文本</a>
<a href="./aa.zip">下载文件</a>
<!--
strong强调标签
em强调并斜体
b.文本加粗（不常用，h5中即将废弃）
i.文本斜体
var文本斜体（不常用，h5中即将废弃）
-->
<hr />
<strong>飞流直下三千尺</strong>
<em>飞流直下三千尺</em>
<b>飞流直下三千尺</b>
<i>飞流直下三千尺</i>
<var>飞流直下三千尺</var>
<!--
q 标签，引用标签，引用的内容都比较简短
pre 标签，格式化输出
code标签，一般是嵌套代码使用
<：在html中渲染为<
>在html中渲染为>
在html中渲染为 空格
-->
<hr>
<span>子曰：</span>
<q>学而时习之</q>
<p>
种豆南山下
草盛豆苗稀
</p>
<pre>
种豆南山下草盛豆苗稀
锄禾日当午
</pre>
<code>
<p>陶渊明</p>
</code>
</body>
</html>img标签用法及注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img标签</title>
</head>
<body>
<!--
img标签，是一个单标签
src属性：用来设置图片资源路径
图片资源路径分为三种
a.网络路径
图片的网络地址
b.绝对路径
从服务器根目录开始直到找到文件的整个路径,通常不使用
c.相对路径
相对于当前文件所在的资源路径
./代表当前目录
../代表的是上一级目录
相对路径在开发中最常用
alt属性,用来解释图片的内容
作用:
1.当图片没有被加载出来的时候,会显示alt的内容
2.通过alt属性告诉浏览器当前图片的内容
width/height 设置图片的宽和高,在实际的开发中,一般只设置单个的宽或高,另一侧根据比例显示大小
-->
<!-- 绝对路径 -->
<img src="D:/H5230701/上课代码/day02/imges/Capture001.jpg" width="800" height="500" alt="甘雨">
<!-- 相对路径 -->
<img src="./imges/Capture001.jpg" width="800" height="500" alt="甘雨">
<img src="./imges/Capture001.jpg" width="800" alt="甘雨">
</body>
</html>emmit语法（增添书写代码舒适度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>emmit语法</title>
</head>
<body>
<!--
E代表标签名
E*n创建n个E标签
E{自挂东南枝}*n创建n个内容为"自挂东南枝"的E标签
E{自挂东南枝$}*n创建n个内容为"自挂东南枝"+序号的E标签,$表示序号,从一开始
> 表示的下一层元素(子元素)
E>a 在E标签中添加子元素a标签
+代表同级
E+P同时创建兄弟元素E和P
^表示上一级
E>p^div 创建div标签和E标签同级,也就是创建p标签的上一级
使用[]设置属性
-->
<!-- ul>li*5>a{郑科$} -->
<p>自挂东南枝</p>
<p>自挂东南枝</p>
<p>自挂东南枝</p>
<p>自挂东南枝</p>
<p>自挂东南枝</p>
<ul>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
</ul>
<ul>
<li><a href="">百度</a></li>
<li><a href="">百度</a></li>
<li><a href="">百度</a></li>
<li><a href="">百度</a></li>
<li><a href="">百度</a></li>
</ul>
<!-- div+p -->
<div></div>
<p></p>
<!-- div>a+p -->
<div>
<a href=""></a>
<p></p>
</div>
<!-- a[href="##"]*10 -->
<a href="##"></a><a href="##"></a><a href="##"></a><a href="##"></a><a href="##"></a><a href="##"></a><a href="##"></a><a href="##"></a><a href="##"></a><a href="##"></a>
<!-- a[href="###"]{百度}*5 -->
<a href="###">百度</a><a href="###">百度</a><a href="###">百度</a><a href="###">百度</a><a href="###">百度</a>
<!-- ul>li*10^div -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</body>
</html>标签嵌套练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套练习</title>
</head>
<body>
<!--
标签嵌套规则
1.块标签可以作为一个布局标签,嵌套所有标签
2.行标签不能嵌套块标签
以下标签不能相互嵌套
1.p标签,h1-h6都不能相互嵌套,并且它们也不能嵌套块标签
2.a标签不能相互嵌套
-->
<div style="border: 1px #f00 solid;">
<div>分手!</div>
<span>原神,启动!</span>
<ul>
<li>
<img src="./imges/1234.jpg"width ="800px;" alt="妮露">
</li>
<li>
<!-- p不能嵌套p -->
<p>落霞与孤<p>鹜齐飞,秋水共</p>长天一色</p>
</li>
<!-- a不能嵌套a -->
<li>
<a href="http://sina.com">
新<a href="http://jd.com">京东</a>浪
</a>
</li>
<li>
<div>
<h2>秋风萧瑟</h2>
<span>独钓<span style="color: #f00;">寒</span>江雪</span>
</div>
</li>
<li></li>
</ul>
</div>
</body>
</html>css样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css样式表</title>
<style type="text/css">
/* 设置类名
.类名{
样式内容
}
text-align:文本排布,一般放在块元素上,用来控制块标签中行标签和文本的对齐位置
值:
left:居左对齐(默认)
center:居中对齐
right:右对齐
*/
.wp{
width: 200px;
height: 200px;
background: #f00;
color: #ff0;
text-align:center
}
</style>
</head>
<body>
<!--
css层叠式样式表,它是用来给html结构添加样式的
引入方式:
1.行间样式
在标签上,设置style属性,在style中设置样式
2.内部样式表
在head中设置style标签,在标签中设置样式
-->
<div class="wp">
<img src="./imges/1234.jpg"width="100px" alt="">
</div>
<p class="wp">宜将剩勇追<span>穷寇</span></p>
</body>
</html>
扫一扫
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
