html 之块级元素与行内元素

最新推荐文章于 2024-09-25 14:00:00 发布

笑望灬星辰

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量475

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/hu1628299958/article/details/106632436

版权

html 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

html 之块级元素与行内元素

块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        html 块级元素的特点
        1.总是从新的一行开始
        2.高度、宽度都是可控的
        3.宽度没有设置时，默认为100%
        4.块级元素中可以包含块级元素和行内元素
     -->
    <address>address</address>
    <blockquote>blockquote</blockquote>
    <div>div</div>
    <dl>dl</dl>
    <dt>dt</dt>
    <dd>dd</dd>
    <dl>dl</dl>
    <form>form</form>
    <h1>h</h1>
    <hr>
    <li>li</li>
    <menu>menu</menu>
    <ol>ol</ol>
    <p>p</p>
    <pre>pre</pre>
    <table>
        <tr>
            <td>td</td>
        </tr>
        <tr>
            <th>th</th>
        </tr>
    </table>
    <ul>ul</ul>
    <!-- 
        html5 语义化标签
     -->
     <Header>Header</Header>
     <Footer>Footer</Footer>
     <section>section</section>
     <Nav>Nav</Nav>
     <Time>Time</Time>
     <Article>Article</Article>
     <!-- 等等  很多 列了常用的-->

</body>
</html>

行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <span>span</span>
  <a> 链接</a>  链接
  <br>  换行
  <b> 加粗</b> 
  <strong> 加粗</strong>  加粗
  <img >  图片
  <sup> 上标</sup>  上标
  <sub> 下标</sub>  下标
  <i> 斜体</i>  斜体
  <em> 斜体</em>  斜体
  <del> 删除线</del>  删除线
  <u> 下划线</u>  下划线
  <input> 文本框</input>  文本框
  <textarea> 文本框</textarea>  多行文本
  <select> 多行文本</select>  下拉列表
<!-- 
    行内置换元素   可以改变宽高  依靠属性的值来填充  类似一个壳子  所以可以给壳子设置宽高
    img input textarea select
 -->
</body>
</html>