块级元素

div - dl - form 交互表单
h1 - h6 标题
hr 水平分割线
p 段落
ul 非排序列表
table 表格

行内元素

a 链接
br 换行
em 强调
i 斜体
img 图片
input 输入框
label 表格标签
select 项目选择
span 文本内区块
label 标签
strong 粗体强调
textarea 多行

换行是块级元素不换行的是行内元素

<!DOCTYPE html>

<!--当前文档为html5-->

<html>

<head>

    <!--设置文档编码-->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta charset="utf-8" />

    <!--设置关键字和描述方便SEO-->

    <meta name="keywords" content="关键字">

    <meta name="description" content="网站描述">

    <!--设置移动端开发缩放比例-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">

</head>

<body>

    <div>div</div>

    <div>

        <p>P</p>

    </div>

    <dl>

        <dt>dt</dt>

        <dd>dd</dd>

    </dl>

    <h1>标题h1</h1>

    <h2>标题h2</h2>

    <h3>标题h3</h3>

    <h4>标题h4</h4>

    <h5>标题h5</h5>

    <hr/>

    <!-- 无序列表 -->

    <ul>

        <li>li 1</li>

        <li>li 2</li>

        <li>li 3</li>

        <li>li 4</li>

    </ul>

    <!-- 有序列表 -->

    <ol>

        <li>li 1</li>

        <li>li 2</li>

        <li>li 3</li>

        <li>li 4</li>

    </ol>

    <b>b是加粗</b>

    <u>u是下滑线</u>

    <i>i是斜体</i>

    <s>s是删除</s>

    <strong>strongs是非常强壮</strong>

    <img src="" alt="图片显示失败时显示的文字" title="鼠标在图片上时的提示" width="100" height="100">

    <a href="https://www.baidu.com/" target="_blank">新的页面打开</a>

    <a href="https://www.baidu.com/" target="_self">在本身打开</a>

    <table border="1">

        <thead>

            <tr>

                <th>

                    头一

                </th>

                <th>

                    头二

                </th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td colspan="2">

                    12

                </td>

            </tr>

            <tr>

                <td rowspan="2">

                    35

                </td>

                <td>

                    4

                </td>

            </tr>

            <tr>

                <td>

                    6

                </td>

            </tr>

        </tbody>

    </table>

    <iframe src="https://www.baidu.com/" width="200" height="200"></iframe>

</body>

</html>

HTML行为元素和块级元素及语义化的更多相关文章

  1. HTML中行内元素与块级元素的区别：

    HTML中行内元素与块级元素的区别:在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关:④它可以 ...

  2. HTML 行内元素和块级元素的理解及其相互转换

    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...

  3. HTML <!DOCTYPE> 标签 布局引用的几种方法 行级元素与块级元素

    HTML <!DOCTYPE> 标签 <!DOCTYPE html> <html> <head> <title>文档的标题</titl ...

  4. CSS 中的内联元素、块级元素以及display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  5. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  6. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  7. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  8. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  9. CSS 中的内联元素、块级元素、display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  10. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

随机推荐

  1. samsung bios configuration怎么设置U盘启动

    1.用第三方U盘制作软件制作U盘启动盘,并下载正版系统镜像或纯净版镜像,下载后缀为ISO的镜像文件拷贝到U盘根目录.2.开机按F2键进入BIOS设置.选择BOOT选项—Secure Boot设置为“D ...

  2. codevs 1772 歌词

    1772 歌词  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver       题目描述 Description 35痛过以后才知情已难寻吾爱至斯只剩飞花梦影回 ...

  3. Linux下通过脚本自动备份Oracle数据库并删除指定天数前的备份

    说明: Oracle数据库服务器操作系统:CentOSIP:192.168.0.198端口:1521SID:orclOracle数据库版本:Oracle11gR2 具体操作: 1.root用户登录服务 ...

  4. Win7如何删除需要管理员权限才能删除的文件夹

    在Windows 7系统运行中.往往会遇到想要删除某个文件夹时,系统提示:文件夹访问被拒绝 你需要权限来执行此操作,如何才能删除此类文件夹呢? ------------------ --------- ...

  5. PC工作原理

    提到"技术"这个词时,大多数人都会想到计算机.事实上,我们生活中的方方面面都离不开计算机部件.家里的电器设备有内置的微处理器,例如电视机.甚至汽车里也装有计算机.但是,提到计算机大 ...

  6. Yii应用的目录结构和入口脚本

    以下是一个通过高级模版安装后典型的Yii应用的目录结构: . ├── backend ├── common ├── console ├── environments ├── frontend ├── ...

  7. ArcGIS Server开发教程系列（3）切片

    切片工作,我们可以一级一级的切,也可以,所有的一块切,Recreate All Tiles这项是说,在没有进行任何的切片工作时,可以选用这项:Recreate Empty Tiles这项是说,如果之前 ...

  8. 数据存储_SQLite (2)

    SQL代码应用示例 一.使用代码的方式批量添加(导入)数据到数据库中 在ios项目中使用代码批量添加多行数据示例 代码示例: 1 // 2 // main.m 3 // 01-为数据库添加多行数据 4 ...

  9. [Nhibernate]对象状态

    目录 写在前面 文档与系列文章 对象状态 瞬时态(Transient) 持久态(Persistent) 托管态(Detached) 对象状态转换 总结 写在前面 前面两篇文章介绍了SchemaExpo ...

  10. Solr5.4.0部署到Tomcat

    所用工具 下载 solr 5.4.0 版本:http://www.apache.org/dyn/closer.lua/lucene/solr/5.4.0 下载 Tomcat(6以上版本),另外可以根据 ...