Day04 HTML标记

路径

./   同级目录
./   进入该目录名下
../  上一级目录

HTML标记

图片

<!--
 图片标记
 src      图片的路径
 width    设置图片宽度
 height   设置图片高度
 title    鼠标放到图片上时显示标题  利于搜索引擎化
 alt      网速慢，或者图片不小心删除，影响用户体验   加载慢，      或者图片不存在，使用alt属性值来提示

 特点：多个占一行，可以设置宽高
-->
   <img
       src="./img/bd2.png"
       width="200px"
       title="总统"
       alt="这是一张总统照片"
    />
   <img src = "./img/logo/logo.png" width = "150"/>

列表标记

有序列表

<!--
    有序列表
    ol中只嵌套li
    特点：独占一行，自带样式
 -->
 <ol>
    <li>列表内容 1</li>
    <li>列表内容 2</li>
    <li>列表内容 3</li>
 </ol>

无序列表

  <!--
    无序列表
    ul中只嵌套li
    特点：独占一行，自带样式
  -->
  <ul>
    <li>无序列表内容</li>
    <li>无序列表内容</li>
    <li>无序列表内容</li>
  </ul>

自定义列表

 <!--
    自定义列表
    特点：独占一行
  -->
  <dl>
    <dt>中国的城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>内蒙古</dd>
    <dt>美国的城市</dt>
    <dd>华盛顿</dd>
    <dd>纽约</dd>
  </dl>

div标记

//特点：独占一行   不自带样式
<div>div</div>

span标记

//特点：多个占一行  不自带样式
<span>span标记</span>
<span>span标记</span>
<span>span标记</span>

表格标记

<table width="500" border="1" cellspacing="0"  >
    <caption>
        <h1>初一各班成绩表</h1>
        <!--
            tr:行
            属性：
            height：高度
            align：内容水平对齐方式   center：居中  left：居左  right：居右
            valign:内容垂直对齐方式   middle   top   bottom
         -->
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>欧阳</td>
            <td>女</td>
        </tr>
        <tr>
            <td>戴璐</td>
            <td>女</td>
        </tr>
    </caption>
</table>