HTML知识点02

一、html中元素分类

1.块级元素

• 总是在新行上开始，占据一整行；
• 高度，行高以及外边距和内边距都可控制；
• 宽度始终是与浏览器宽度一样，与内容无关；
•  它可以容纳行内（内联）元素和其他块元素；
• 即当使用了该元素后，该元素会使下一个元素在下一行展示，也就是产生换行。
• html中常用块元素 p,h1,h2,h3,h4,h5,h6,ul,ol,div,hr,form

2.内联元素(行内元素)

• 和其他元素在一行内，只有在内容超过HTML的宽度时，才会换行 ；
• 宽度与高度由内容决定；
• 行内元素只能容纳文本或者其他行内元素。
• html中常用内联元素 b,strong,i,em,sup,sub,span,a,label，small

3.内联块状元素

• 就是同时具备内联元素、块状元素的特点；
• 和其他元素都在一行上；
• 元素的高度、宽度、行高以及顶和底边距都可设置
• html中常用内联块状元素 img,iframe,input，textarea，select，button

二、图片标签

<img src="tupian.jpg" alt="图片加载失败，请重试" width="50%" height="50%" title="这是一张图片">

• src:用来表示图片的引入路径
• width：设置图片的宽度 默认单位：像素px
• height：设置图片的高度 默认单位：像素px
• title:鼠标放到标签上的提示文本

注：上方代码中width="50%"表示宽度占浏览器的50%,高度同理。

三、标题标签

<h1>...<h6>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h1>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

 效果：

• 相同点：都属于块元素，且都加粗
• 不同点：字号依次减小

 四、换行

• <br/>常用于段落内部的换行

<p>在一段文字内<br/>添加换行</p>

注：该标记是自我闭合标记

五、水平线

<hr/>一条宽度默认为100%的水平线(使用css后不推荐使用)

<hr/>

也可以自行修改该水平线的参数

<hr width="50%" align="center" color="red">

• width:宽度
• align:水平方向对齐方式

            center:居中对齐

             left:居左对齐

            right：居右对齐

• color:修改水平线的颜色

六、列表标签

1.无序列表

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
</ul>

2.有序列表

 <ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
 </ol>

七、表现元素

1.对文字进行加粗

<b>内容</b>

主旨表强调的加粗

<strong>内容</strong>

2.文字倾斜

<i>内容</i>

主旨表强调的文字倾斜

<em>内容</em>

 3.上下标

<sup>上标</sup>

<sub>下标</sub>

 4.小号字体

<small>内容</small>

八、其他

• <div></div>

<div> 块级元素 </div>

•  <span></span>

<span>行内元素</span> 

九、特殊符号

•  小于号：&lt;
•  大于号：&gt;
•  空格:&nbsp;、&ensp;、&emsp;
• 版权符号：&copy;
• "&"符号：  &amp;