html常见标签总结1

1、常见标签总结01

  • 代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practicetitle>
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>2sup>+b<sup>2sup>=c<sup>2sup>p>
    <p>H<sub>2sub>Op>
    <h2>删除文本和插入文本h2>
    <p>原价<del>100del>,现价<ins>300ins>p>
    <p>一般情况删除文本和插入文本配合使用p>
    <p>一般文本修饰标签都是通过css样式实现p>
    <h2>练习:更好的理解文本修饰标签的作用h2>
    <p>
        某著名饭店——<em>好吃楼em> 即将关闭,<strong>若有消费卡还未消费,请尽快消费strong>,店中还有促销活动,原价<del>199del>,
        现价<ins>19ins>
    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>连接标签ah2>
    <p>href属性:是链接地址p>
    <p>target属性:可以改变链接打开的方式,默认情况下在当前页面打开_self,新窗口打开_blankp>
    <p>base标签:改变链接默认行为,一般写在head当中,一般设置target属性,相当于一个默认设置,设置好之后,
        网页中body当中有a标签都会采用base设置p>
body>
html>
  • 结果展示
    html常见标签总结1_第1张图片
    html常见标签总结1_第2张图片

2、常见标签总结02

  • 代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07practicetitle>
head>
<body>
    <h2>前言h2>
    <p>第一种锚点写法是通过a标签中的href属性中添加"#"符号和要跳转位置标签当中的id属性对应实现的p>
    <p>第二种锚点写法是通过a标签中的href属性中添加"#"符号和要跳转位置标签前的a标签当中的name属性对应实现的p>
    <a name="第一种锚点写法">a>
    <h2>第一种锚点写法:h2>
    <a href="#第一种锚点1">跳到锚点1a>
    <a href="#第一种锚点2">跳到锚点2a>
    <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">跳到锚点1a>
    <a href="#第二种锚点2">跳到锚点2a>
    <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>

  • 结果展示
    html常见标签总结1_第3张图片
    html常见标签总结1_第4张图片

3、常见标签总结03

  • 代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08practicetitle>
head>
<body>
    <h1>特殊符号h1>
    <p>编写一些文本时,经常会遇到输入法无法输入的字符,如®(注册商标)、
        ©(版权符)等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。
        这些无法输入和空格字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码。p>
    <h2>版权符号h2>
    <p>©p>
    <h2>大于号h2>
    <p>>p>
    <h2>小于号h2>
    <p><p>
    <h2>空格h2>
    <p>hello    worldp>
body>
html>
  • 结果展示
    html常见标签总结1_第5张图片

4、常见标签总结04

  • 代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09practicetitle>
    <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>定义列表第一项dtdt>
        <dd>第一项描述dddd>
        <dt>定义列表第二项dtdt>
        <dd>第二项描述dddd>
    dl>

body>
html>
  • 结果展示
    html常见标签总结1_第6张图片

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>
  • 结果展示
    html常见标签总结1_第7张图片

你可能感兴趣的:(web前端,html,前端,css)