块标签和行标签
块标签
1.div 标签(用来页面布局的)
块属性标签,没有任何意义的标签,通常用来 进行页面布局
<div style="border:1px #f00 solid">千里冰封</div>
2.h 标题标签(h1-h6)
h1 的权限较大!!
<h1>万里长城永不倒</h1>
<h2>巴啦啦小魔仙</h2>
<h3>巴啦啦小魔仙</h3>
3.p 段落标签
它的里面一般包含一段文字
<p > </p>
- hr br 标签
hr分割线 br换行符
<hr>
<p>越来越好</p>
5.无序列表 ul>li
可以设置它的 list-sytle-type 属性
-
square 实心方块
-
circle 空心圆
-
dotted 实心圆
-
none 取消列表样式
-
disc 高版本系统下的默认样式
<ul style="list-style-type:none;">
<li></li>
<li></li>
<li></li>
</ul>
6.有序列表 ol>li
可以设置它的 list-sytle-type 属性
-
lower-alpha 小写字母
-
upper-alpha 大写字母
-
lower-roman 小写罗马文
-
upper-roman 大写罗马文
<ol>
<li></li>
<li></li>
<li></li>
</ol>
ol,ul,li 都是块属性标签。并且 ol,ul 的子元素,必须是 li (列表项) 标签
7.自定义列表 dl>dt dl>dd
- dl: 块标签,定义列表的 父元素
- dt: 块标签,定义列表的 标题项
- dd: 块标签,定义列表的 列表项
<dl>
<dt>早餐</dt>
<dd>包子</dd>
<dd>油条</dd>
<dd>豆浆</dd>
<dt>中餐</dt>
<dd>米饭</dd>
<dd>面条</dd>
<dd>螺蛳粉</dd>
</dl>
```html
8.address 地址标签
```html
<address></address>
9.blockquote 引用标签
引用标签,一般是引用的一段文字,
他的 cite 属性 表示该文字 引用的文献名目>
<blockquote cite="毛主席语录">要想知道梨子的味道,你必须亲自尝一尝</blockquote>
行标签(包括图片)
1.span 标记标签(用来渲染文字的)
标记标签,没有实际意义,通常用来渲染文字
2.a 标签(超链接)
属性:
- herf 属性 ,用来设置超链接的地址
- target 属性 ,用来设置 标签页的打开方式( _blank 在新标签页打开;_self 默认值,在当前页打开)
a 标签的作用:
- 1设置超链接
- 2设置锚点(不能!设置 herf 为空,这样会导致页面刷新)
a.通常用来 回到顶部 ,即是herf="#"
b.如果在开发过程中需要设置a标签点击没有效果(不动)
则可以设置herf属性为 ##即是:herf="##"
c.快速直达,页面的某一部分
- 3下载文件
- 如果设置的下载文件是 音频、视频、图片、文档等,都需要进过 压缩 后,再在 herf 上设置文件的路径
- 如果是 文本类型 的文件,可以(不用压缩)直接把文件路径,设置在 herf 属性上,直接由浏览器打开
//超链接
<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="./QQ.zip">下载文件</a>
3.强调、加粗、斜体标签
- strong 强调标签(加粗)
- em 强调并斜体
- b 文本加粗bold(不常用,h5中即将废弃)
- i 文本倾斜incline
- var文本倾斜(不常用,h5中即将废弃)
4.引用标签q、格式化pre、嵌套代码code标签
-
q 引用标签,其引用的内容都比较简短
-
pre 标签,用来格式化输出
-
code 标签,一般是嵌套代码使用
< 在html中渲染为 < > 在html中渲染为 > 在html中渲染为 空格
代码如下:
//引用
<span>子曰:</span>
<q>学而时习之</q>
<p>
种豆南山下
草盛豆苗稀
</p>
//格式化输出
<pre>
种豆南山下
草盛豆苗稀
</pre>
//输出标签代码
<code>
<p>陶渊明</p>
</code>
//输出空格
<code>
巴啦 啦
</code>
- img 标签 (特殊的行属性标签)
- src 属性
用来设置图片资源的地址/路径,src资源的缩写resource
文件资源路径分为一下三种:
a.网络路径
是图片的网络地址
b.绝对路径
从 服务器的根目录 开始查找,直到找到需要的文件的整个路径,一般 不使用
c.相对路径(最常用的!从当前位置开始)
相对于 当前文件所在的资源路径
./ 代表:当前目录
../代表:上一级目录
代码如下:
<!-- 绝对路径(从根目录开始),记得!!反斜杠,如从day01服务器里找到,本网页即02图片,双击即可-->
<img src="D:代码/01HTML/day02/images/a.jpg" width="800" height="500" alt="">
<!-- 相对路径(从当前文件的位置开始)-->
<img src="./images/b.jpg" width="500" height="500" alt="">
<img src="./images/b.jpg" width="500" alt="">
- alt 属性
用来解释图片的内容
作用:
1.当图片没有被加载出来时,会显示alt的内容
2.通过alt属性 ,告诉浏览器当前图片的内容
- width/height 属性(一般只设其中一个)
设置图片的宽和高。 在实际的开发过程中,一般只设置 单个的 宽或者高,另一侧根据比例显示大小
块和行标签的总结
1.块属性标签
a.独自占据一行空间(从上至下竖向排列)
b.支持宽和高的设置,设置完宽和高以后,仍然独占一行
c.支持上下 padding 和 上下 margin
2.行属性标签
a.不会独占一行空间(从左至右横向排列)
b.无法设置宽和高,他的宽和高由内容 撑开
c.不支持上下 padding 和 上下 margin
标签的嵌套
-
标签嵌套规则
1.块标签作为一个 布局标签 ,可以嵌套 所有 !的标签
2.行标签 并不能嵌套 块标签
以下标签不能相互嵌套
1.p 标签,h1-h6 都不能 相互嵌套(并且他们也不能嵌套 块标签 )
2.a 标签不能 相互嵌套