HTML5初学日常知识点-第二天

一.补全昨日图片标签

<img src="路径“ alt="加载失败” width="宽度“ height="高度" title="鼠标挪到图片所显示文本">

src 图片引入路径
    1.当html文件 与 图片 在同一个目录下,
src="./1.jpg"
    2.当html文件 与 图片所在文件夹 在同一个目录下，src="./文件夹/2.jpg"
    3.当html文件所在文件夹 与 图片在同一个目录下，
src=".当前所在文件夹.图片所在文件夹/3.jpg"
    4.当html文件所在文件夹 与 图片所在文件夹 在同一目录下， src="../img/4.jpg"

alt 当图片加载失败时，用来替代图片的文本

width 宽度

height 高度

title 鼠标放到标签上的提醒文本

二.标题标签

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

 

三.换行<br> 常用于段落内部换行

四.水平线

<hr width=" align=“” color="">

width 宽度

align 水平方向的对齐方式
    center 水平居中对齐
    left 居左对齐
    right 居右对齐

color 修改水平线颜色

 

 五.列表

无序列表

<ul>
    <li>列表项</li>
    <li>列表项 </li>
</ul>

 

 

有序列表
     <ol>
            <li>列表</li>
            <li>列表</li>
 </ol>

 

 六.行内元素

加粗
    <b>内容</b>
<strong>内容</strong>强调

倾斜
    <i>内容</i>
<em>内容</em>
强调

上下标
    上标
^内容

    下标
_内容

小号字体
    <samll>内容</samll>

七.特殊符号

&lt< 

&gt>

空格
   &nbsp<&ensp<&emsp 
 

八.总结块级元素与行内元素有哪些以及区别

1.块级元素

总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽带始终是与浏览器宽度一样，与内容无关；
它可以容纳行内（内联）元素和其他块元素。

<div>...</div>

 <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表
 

2.行内元素

 和其他元素都在一行上；
高，行高及外边距和内边距部分可改变；
宽度只与内容有关；
行内元素只能容纳文本或者其他行内元素

 <span>...</span>

 <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  图片
    
  ^...  上标

  _...  下标

  <i>...</i>  斜体

  <em>...</em>  斜体

  <u>...</u>  下划线