02行标签,img标签,总结,emmet语法,嵌套,css样式表

半座空城32

已于 2023-07-09 21:43:04 修改

阅读量140

点赞数

文章标签： css 前端

于 2023-07-09 21:39:57 首次发布

本文链接：https://blog.csdn.net/weixin_62235902/article/details/131627106

版权

day02

01行标签

<iframe src="./case.html" height="200" width="600"></iframe>

iframe框架

    src=“需要显示的页面地址”
    src 资源的意思
    height="设置高度"
    width="设置宽度"     单位是px

<!-- <span>
        hr br  不是块也不是行 -->

a 标签

        herf 属性： 用来设置超链接的地址
        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="./aax.rar">下载文件</a>

strong 强调标签

    em 强调并且斜体   strong > em 强调程度
    b 文本加粗 （不常用，h5中即将废弃）
    i 文本斜体
    var 文本斜体 （不常用，h5中即将废弃）

<hr/>
      <strong>飞流直下三千尺 strong</strong>
      <em>飞流直下三千尺 em</em>
      <b>飞流直下三千尺 b</b>
      <i>飞流直下三千尺 i</i>
      <var>飞流直下三千尺 var</var>

q 标签，

引用标签，他引用的内容都比较简短

pre 标签，

格式化输出

code 标签，

一般是嵌套代码使用

&lt; 在html中渲染为  <
&gt; 在html中渲染为  >
&nbsp; 在html中渲染为 空格

<hr/>
       <span>子曰：</span>
       <q>学而时习之</q>

<p>
        种豆南山下
        草盛豆苗稀
       </p>
       
<pre>
种豆南山下
草盛豆苗稀
锄禾日当午
</pre>

<code>
        &lt;p&gt;&nbsp; 陶渊明 &lt;/p&gt;
       </code>

子曰：学而时习之

种豆南山下草盛豆苗稀

种豆南山下
草盛豆苗稀
锄禾日当午

<p> 陶渊明 </p>

02img标签

img 标签，是一个单标签

    src 资源的简写
    src 属性：用来设置图片的资源路径

    文件资源路径 分为三种
    a.网络路径
        图片的网络地址
    b.绝对路径
        从服务器根目录开始直到找到需要的文件的整个路径,
        一般不使用
    c.相对路径
        相对于当前文件所在的 资源路径
        ./ 代表的是当前目录
        ../ 代表的是上一级目录
        ../../ 上一级的上一级
        相对路径在开发中最常用
    alt 属性，用来解释图片的内容
        作用：
        1.当图片没有被加载出来的时候，会显示alt的内容
        2.通过alt属性，告诉浏览器当前图片的内容

    width/height 设置图片的宽和高，在实际的开发当中，一般只设置单个的宽或者高，另一侧根据比例显示大小

<!-- 网络路径 -->
    <img src="https://img2.baidu.com/it/u=288531610,1878146746&fm=253&fmt=auto?w=876&h=800" width="300" height="200" alt=""/>
     <!-- 绝对路径 -->
    <img src="C:/Users/ASUS/Desktop/上课代码/01HTML/day02/images/el.png" width="300" height="200" alt="" />
     <!-- 相对路径 -->
    <img src="./images/el.png" width="300" height="200" alt="小狗" />

    <img src="./images/el.png" width="300" alt="小狗" />

03总结

1.块属性标签

a.独自占据一行空间，支持宽和高的设置，设置完宽和高以后，仍然独占一行
b.支持上下 padding 和 上下 margin

2.行属性标签

a.不会独占一行空间，从左至右横向排列
b.无法设置宽和高，他的宽和高由内容撑开
c.不支持上下 padding 和 上下 margin

 <div style="background: #f00;height: 200px;width: 200px;"></div>

<div style="background: #f0f;height: 200px;width: 200px;"></div>

<span style="border: 1px #f00 solid;height: 200px;width: 200px;">一行白鹭上青天</span>

<span style="border: 1px #f00 solid;">两行白鹭上青天</span>

一行白鹭上青天
两行白鹭上青天

04emmet语法

E 代表标签名

E*n 创建n个E标签

E{自挂东南枝}*n 创建n个内容为 "自挂东南枝" 的 E标签
E{自挂东南枝$}*n 创建n个内容为 "自挂东南枝"+序号 的 E标签， $ 表示序号，从1开始

> 表示的下一个层级元素（子元素）
E>a 在E标签中添加子元素 a 标签

+ 表示同级
E+p 同时创建兄弟元素E和p  不相互嵌套

^ 表示上一级  ？
E>p^div 创建 div 标签和 E 标签同级，也就是创建 p 标签的上一级

使用[] 设置属性


    <!-- p*10 -->
    <!-- p{自挂东南枝}*10 -->
    <!-- 
        li*5>a{内容$}
     -->
    <ul>
        <li><a href="">郑科1</a></li>
        <li><a href="">郑科2</a></li>
        <li><a href="">郑科3</a></li>
        <li><a href="">郑科4</a></li>
        <li><a href="">郑科5</a></li>
    </ul>

    <!-- div+p 加号代表同级 -->
    <div></div>
    <p></p>

    <!-- div>a+p -->
    <div>
        <a href=""></a>
        <p></p>
    </div>
    
     <!-- a[href="##"]*10 -->
    <!-- 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>

    <!-- 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>

05嵌套练习

标签嵌套规则

    1.块标签可以作为一个布局标签，嵌套所有的标签
    2.行标签不能嵌套块标签

    以下标签不能相互嵌套
    1.p 标签，h1-h6 都不能相互嵌套， 并且他们也不能嵌套块标签
    2.a 标签不能相互嵌套

<div style="border: 1px #f00 solid;">
        <div>分不了一点</div>
        <span>和我结</span>
        <ul>
            <li>
                <img src="./images/el.png" width="200" 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>

分不了一点

和我结

落霞与孤
鹜齐飞，秋水
共长天一色
新京东浪
秋风萧瑟
独钓寒江雪

06css样式表

css 层叠式样式表，他是用来给html 结构添加样式的

    引入方式：
    1.行间样式
        在标签上，设置style属性，在style中设置样式
    2.内部样式表
        在head中设置 style 标签，在标签中设置样式

设置类名

.类名{
    样式内容
 }

text-align:文本排布，一般放在块标签上，用来控制块标签中 行标签 和 文本的对齐位置
    值：
    left: 左对齐（默认）
    center: 居中对齐
    right: 右对齐

.wp{
            width: 200px;
            height: 200px;
            background: #f00;
            color: #ff0;
            text-align: center;
        }

<div class="wp"><img src="./images/adwdad.jpg" width="100" alt=""></div>
<p class="wp">宜将剩勇追<span>穷寇</span></p>