HTML

一、HTML的元素组成

元素的大小 = 外边距margin + 边框border + 内边距padding + 内容

二、HTML的块级元素

1.作用:
用于搭建网页结构
2.特点:
  • 独占一行空间
  • 默认宽度为100%
  • 高度由子元素或内容决定
  • 可以通过css指定其宽度
3.举例:
  • <div>、<html>:没有margin、padding、border
  • <body>:有margin
  • <p>:有上下margin
  • <h1~h5>:有上下margin、有font-size、font-weight
  • <ul><li> 无序列表,<ol><li>有序列表:有上下maigin、padding-left、黑色圆点

TIPS: 上下放置两个块级元素时,两个元素之间的外边距为max{a元素的外边距,b元素的外边距}

三、HTML的行内元素

1.作用:
用于内容的填充
2.特点:
  • 与其他行内元素共享一行空间
  • 不能通过css为其指定宽高
  • 宽高由自身决定,内容的容器
3.举例:
<span>:组合行内元素
<a&nbsp>:超链接
<a herf ="相对地址/绝对地址"  target=" _self/_blank(建立新的选项卡)">
<a herf="id"> 锚点,回到顶部,到达底部
..返回上一级
<a herf="javaScript:void(0)">
<img> :图片
<img src ="地址./images/photo.jpg" alt="找不见时的文本替换">
<video>:视频
> controls 进度条
> autoplay 自动播放
<audio>:音频
> controls 进度条
> autoplay 自动播放

TIPS: 如何给行内元素设置宽高?先将行内元素设置为块级元素或者是行内块元素,再设置宽高

四、HTML中的表格

table【用于展示数据】

属性:border、bgcolor、cellspacing、cellpadding、width
<table>【用于展示数据】
    <caption> 【标题】</caption >
        <thead>   【表头】
             <tr> 【表行(头)】
                  <th>【表列(头)加粗显示】姓名</th>
                  <th>【表列(头)加粗显示】学号</th>
             <tr>
        </thead>
        <tbody>  【表体】
             <tr>【表行(体)】
                  <td>【表列(体)】江寒</td>
                  <td>【表列(体)】2056</td>
             </tr>
             <tr>
                    <td>凌风</td>
                    <td>24895</td>
             </tr>
       </tbody>
 </table>

image.png

TIPS:合并单元格

  • 跨行合并
    <td rowspan="2">江寒 凌风</td>
    image.png
  • 跨列合并
    <td colspan="2">江寒 24856</td>
    image.png

江寒
1 声望0 粉丝