1、常见标签总结01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>practice</title>
</head>
<body>
<h1>文本修饰标签</h1>
<h2>表强调:</h2>
<p><strong>这是strong文本修饰标签的效果</strong></p>
<p><em>这是em文本修饰标签的效果</em></p>
<p>strong的强调效果更强,em的强调效果弱一些</p>
<h2>上标和下标:</h2>
<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
<p>H<sub>2</sub>O</p>
<h2>删除文本和插入文本</h2>
<p>原价<del>100</del>,现价<ins>300</ins></p>
<p>一般情况删除文本和插入文本配合使用</p>
<p>一般文本修饰标签都是通过css样式实现</p>
<h2>练习:更好的理解文本修饰标签的作用</h2>
<p>
某著名饭店——<em>好吃楼</em> 即将关闭,<strong>若有消费卡还未消费,请尽快消费</strong>,店中还有促销活动,原价<del>199</del>,
现价<ins>19</ins>
</p>
<img src="https://pics7.baidu.com/feed/242dd42a2834349be739f480a0bd4dc536d3be5f.jpeg@f_auto?token=02401a0cdd87632341313851f1bbbbd2"
alt="寒潮下,抗疫工作者逆风而行"title='这是一幅图片'width='300'height='300'>
<p>图片中的alt属性是在图片加载不出来的时候,给用户一个友好提示,当图片加载没有任何问题时,alt不起任何作用</p>
<p>title属性是html标签都具备的属性,是一个提示信息,当鼠标移动到目标上的时候会显示提示信息</p>
<h2>引入文件的地址路径</h2>
<p>.在相对路径中表示当前路径(当前文件所在路径,不要理解为包含该文件的路径,简单而言就是当前路径下包含了该文件和该文件同级文件)</p>
<p>..在相对路径中表示上一路径</p>
<p>写路径要注意的问题用/而不是用\</p>
<p>做项目开发的时候尽量用相对路径,而不是绝对路径,这样便于别人运行项目</p>
<h2>连接标签a</h2>
<p>href属性:是链接地址</p>
<p>target属性:可以改变链接打开的方式,默认情况下在当前页面打开_self,新窗口打开_blank</p>
<p>base标签:改变链接默认行为,一般写在head当中,一般设置target属性,相当于一个默认设置,设置好之后,
网页中body当中有a标签都会采用base设置</p>
</body>
</html>
- 结果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/70f4e196b454394030ba1738f3971470.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/cc78e4a45cdb0a789a7276703ec9fe87.png#pic_center)
2、常见标签总结02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07practice</title>
</head>
<body>
<h2>前言</h2>
<p>第一种锚点写法是通过a标签中的href属性中添加"#"符号和要跳转位置标签当中的id属性对应实现的</p>
<p>第二种锚点写法是通过a标签中的href属性中添加"#"符号和要跳转位置标签前的a标签当中的name属性对应实现的</p>
<a name="第一种锚点写法"></a>
<h2>第一种锚点写法:</h2>
<a href="#第一种锚点1">跳到锚点1</a>
<a href="#第一种锚点2">跳到锚点2</a>
<a href="#第二种锚点写法">跳到第二种锚点写法</a>
<p id="第一种锚点1"><strong>这里是锚点1的段落</strong></p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p id="第一种锚点2"><strong>这里是锚点2的段落</strong></p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<h2 id="第二种锚点写法" >第二种锚点写法:</h2>
<a href="#第二种锚点1">跳到锚点1</a>
<a href="#第二种锚点2">跳到锚点2</a>
<a href="#第一种锚点写法">跳到第一种锚点写法</a>
<a name="第二种锚点1"></a>
<p><strong>这里是锚点1的段落</strong></p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<a name="第二种锚点2"></a>
<p id="锚点2"><strong>这里是锚点2的段落</strong></p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
</body>
</html>
- 结果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9975df3563eea890d25a6845d211fbd2.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f6767a51ddf46676bd14a53147b7c6f3.png#pic_center)
3、常见标签总结03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08practice</title>
</head>
<body>
<h1>特殊符号</h1>
<p>编写一些文本时,经常会遇到输入法无法输入的字符,如®(注册商标)、
©(版权符)等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。
这些无法输入和空格字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码。</p>
<h2>版权符号</h2>
<p>©</p>
<h2>大于号</h2>
<p>></p>
<h2>小于号</h2>
<p><</p>
<h2>空格</h2>
<p>hello world</p>
</body>
</html>
- 结果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dfb9f06f080fdc12fdc9fdb45ca412cc.png#pic_center)
4、常见标签总结04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09practice</title>
<base target="_blank">
</head>
<body>
<h1>列表</h1>
<h2>无序列表</h2>
<p>注意:ul和li必须是组合出现的,他们之间是不能有其他标签的</p>
<p>注意:无序列表可以有type属性,一般不常用,用CSS代替</p>
<ul>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
<h3>无序列表练习</h3>
<ul>
<li><a href="https://author.baidu.com/home/220"><strong>王宝强</strong></a></li>
<li><a href="https://baike.baidu.com/item/%E8%B0%A2%E9%9C%86%E9%94%8B/139911?fr=aladdin"><em>谢霆锋</em></a></li>
</ul>
<h2>有序列表</h2>
<p>注意:有序列表用的很少,一般用无序列表代替</p>
<p>注意:有序列表的type属性道理和无序列表一样</p>
<ol>
<li>有序列表第一项</li>
<li>有序列表第二项</li>
</ol>
<h2>定义列表</h2>
<p>dl:定义列表</p>
<p>dt:定义专业术语或名词</p>
<p>dd:对名词进行解释和描述</p>
<dl>
<dt>定义列表第一项dt</dt>
<dd>第一项描述dd</dd>
<dt>定义列表第二项dt</dt>
<dd>第二项描述dd</dd>
</dl>
</body>
</html>
- 结果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6d4958bc0fea6b1410500afe48cb3811.png#pic_center)
5、练习列表嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套列表练习</title>
</head>
<h1>好美味小吃</h1>
<ul>
<li>
<p>小吃类</p>
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
<li>
<p>卤味类</p>
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
<li>
<p>套餐类</p>
<ul>
<li>卤面筋饭</li>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪舌头饭</li>
</ul>
</li>
<li>
<p>炖罐类</p>
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心枸杞</li>
<li>羊肉枸杞</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
<p><em>亲,20元以上可送餐哦!!</em></p>
</html>
- 结果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e3374600588ffef11b3c0e815fc2fb46.png#pic_center)