寒假学习HTML记录3
记录内容:标题标签,段落标签,换行标签,文本格式化标签,盒子标签,图像标签的使用
标题标签 <h></h>
<body>
<h1>标题一共有六个等级</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果运行见</h6>
</body>
运行结果:
标题一共有六个等级
文字加粗一行显
由大到小依次减
从重到轻随之变
语法规范书写后
具体效果运行见
段落标签<p></p>
单词paragaph【段落】的缩写
特点:
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间有空隙。
换行标签<br/>
单词break【换行,打断】的缩写
特点:
3. <br/>
是单表签
4. <br/>
标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直地段落间距。
文本格式化标签
<strong>加粗</strong>或<b>加粗</b>
<em>斜线</em>或<i>斜线</i>
<del>删除线</del>或<s>删除线</s>
<ins>下划线</ins>或<u>下划线</u>
运行结果:
加粗 或 加粗
斜线 或 斜线
删除线 或 删除线
盒子标签<div>
和<span>
<div>
标签用来布局,但是一行只能放一个<div>
既“小盒子”
<span>
标签用来布局,一行可以用多个<span>
既“大盒子”
div是division【分割,分区】的缩写
span【跨度,跨距】
图像标签的使用
<body>
<h4>图像标签的使用</h4>
<img src="https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png"/>
<h4>alt替换文本图像显示不出来的时候用文字替换:</h4>
<img src="https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png" alt="提示文本" />
<h4>title提示文本鼠标放到图像上,提示的文字:</h4>
<img src="https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png" title="提示文本"/>
<h4>width给图像设点宽度:</h4>
<img src="https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png" width="500"/>
<h4>height给图像设点高度:</h4>
<img src="https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png" height="50"/>
<h4>width和height同时设置的时候,宽和高不会按照默认比例缩放,而是按照书写像素值:</h4>
<img src="https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png" width="500" height="1000"/>
<h4>border给图像设定边框:</h4>
<img src="https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png" border="15">
/*默认单位边框为像素xp*/
</body>
运行结果:
图像标签的使用
![](https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png)
alt替换文本图像显示不出来的时候用文字替换:
![提示文本](https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png)
title提示文本鼠标放到图像上,提示的文字:
![提示文本](https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png)
width给图像设点宽度:
![](https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png)
height给图像设点高度:
![](https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png)
width和height同时设置的时候,宽和高不会按照默认比例缩放,而是按照书写像素值:
![](https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png)
border给图像设定边框:
![](https://i-blog.csdnimg.cn/blog_migrate/20d6af58735197e7dbe45daf0793feb3.png)
图象标签属性注意点:
- 图像标签可以拥有多个属性,必须卸载标签名的后面。
- 属性之间不分先后顺序,标签名与属性,属性与属性之间均以空格分开。
- 属性采取键值对的格式,即key="value"的格式,属性=“属性值”。