HTML 学习笔记(十)块和内联

每个HTML元素都有一个默认的显示值,显示值又可以再分为block(块)和inline(内联)

一、块元素

通过F12进入浏览器开发者模式查看该元素会发现其所占宽度为整个网页的宽度

1.div标签

通过div标签将一些元素装进"盒子",从而对盒子中的全部元素进行相同的操作

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tabletitle>
    head>
    <body>
        <div align="center">
            <h2>标题h2>
            <p>第一段p>
            <p>第二段p>
        div>
    body>
html>

HTML 学习笔记(十)块和内联_第1张图片

2.常见的块元素

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tabletitle>
    head>
    <body>
        
        <table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
            <caption><b>块级元素b>caption>
            <tr>
                <th>标题元素th>
                <th>段落元素th>
                <th>列表元素th>
                <th>表格元素th>
                <th>分块元素th>
            tr>
            <tr align="center">
                <td>h1-h6td>
                <td>ptd>
                <td>ol,<br>li,<br>ul,<br>dl,<br>dd,<br>dttd>
                <td>table,<br>tr,<br>td,<br>th,<br>thead,<br>tfoot,<br>caption<br>td>
                <td>divtd>
            tr>
        table>
    body>
html>

HTML 学习笔记(十)块和内联_第2张图片

二、内联元素

内联元素(不会独占一行,且只占用必要的宽度)
内联元素里不能嵌套块级元素

1. span标签

内联元素span用来标记文本的一部分,而不产生额外的影响

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tabletitle>
    head>
    <body>
        
        <h2>什么是佛系?h2>
            <p><span title="inline">所谓佛系span>,是对无法改变的事物的不强求,而非浑浑噩噩的代名词p>
	body>
html>

HTML 学习笔记(十)块和内联_第3张图片

2.常见的内联元素

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tabletitle>
    head>
    <body>
        
        <table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
            <caption><b>内联元素b>caption>
            <tr>
                <th>链接元素th>
                <th>文本修饰元素th>
                <th>换行元素th>
                <th>图片元素th>
                <th>范围元素th>
            tr>
            <tr align="center">
                <td>atd>
                <td>b,<br>em,<br>i,<br>strong,<br>sub,<br>suptd>
                <td>brtd>
                <td>imgtd>
                <td>spantd>
            tr>
        table>
	body>
html>

HTML 学习笔记(十)块和内联_第4张图片

你可能感兴趣的:(HTML,html,学习,笔记)