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>
- 结果展示
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>
- 结果展示
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>
- 结果展示
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>
- 结果展示
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>
- 结果展示
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
