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

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>  

种豆南山下 草盛豆苗稀

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

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>