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>
复制代码