块级元素

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

行内元素

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

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

  1. <!DOCTYPE html>
  2. <!--当前文档为html5-->
  3. <html>
  4.  
  5. <head>
  6.     <!--设置文档编码-->
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <meta charset="utf-8" />
  9.     <!--设置关键字和描述方便SEO-->
  10.     <meta name="keywords" content="关键字">
  11.     <meta name="description" content="网站描述">
  12.     <!--设置移动端开发缩放比例-->
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
  14. </head>
  15.  
  16. <body>
  17.     <div>div</div>
  18.     <div>
  19.         <p>P</p>
  20.     </div>
  21.     <dl>
  22.         <dt>dt</dt>
  23.         <dd>dd</dd>
  24.     </dl>
  25.     <h1>标题h1</h1>
  26.     <h2>标题h2</h2>
  27.     <h3>标题h3</h3>
  28.     <h4>标题h4</h4>
  29.     <h5>标题h5</h5>
  30.     <hr/>
  31.     <!-- 无序列表 -->
  32.     <ul>
  33.         <li>li 1</li>
  34.         <li>li 2</li>
  35.         <li>li 3</li>
  36.         <li>li 4</li>
  37.     </ul>
  38.     <!-- 有序列表 -->
  39.     <ol>
  40.         <li>li 1</li>
  41.         <li>li 2</li>
  42.         <li>li 3</li>
  43.         <li>li 4</li>
  44.     </ol>
  45.     <b>b是加粗</b>
  46.     <u>u是下滑线</u>
  47.     <i>i是斜体</i>
  48.     <s>s是删除</s>
  49.     <strong>strongs是非常强壮</strong>
  50.     <img src="" alt="图片显示失败时显示的文字" title="鼠标在图片上时的提示" width="100" height="100">
  51.     <a href="https://www.baidu.com/" target="_blank">新的页面打开</a>
  52.     <a href="https://www.baidu.com/" target="_self">在本身打开</a>
  53.     <table border="1">
  54.         <thead>
  55.             <tr>
  56.                 <th>
  57.                     头一
  58.                 </th>
  59.                 <th>
  60.                     头二
  61.                 </th>
  62.             </tr>
  63.         </thead>
  64.         <tbody>
  65.             <tr>
  66.                 <td colspan="2">
  67.                     12
  68.                 </td>
  69.             </tr>
  70.             <tr>
  71.                 <td rowspan="2">
  72.                     35
  73.                 </td>
  74.                 <td>
  75.                     4
  76.                 </td>
  77.             </tr>
  78.             <tr>
  79.  
  80.                 <td>
  81.                     6
  82.                 </td>
  83.             </tr>
  84.         </tbody>
  85.     </table>
  86.  
  87.     <iframe src="https://www.baidu.com/" width="200" height="200"></iframe>
  88. </body>
  89.  
  90. </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. Web Analytics 2.0 中文翻译 [ 系列索引 ]

    引言 内容概述 第一章:网站分析2.0的新奇世界 第二章:选择你的网络分析灵魂伴侣的最佳策略 第三章:点击流分析的奇妙世界:指标 第四章:点击流分析的奇妙世界:实际的解决方案 第五章:荣耀之钥:度量成 ...

  2. New blog

    New blog //域名还没备案_(:з」∠)_

  3. Finite State Machine 是什么？

    状态机(Finite State Machine):状态机由状态寄存器和组合逻辑电路构成,能够根据控制信号按照预先设定的状态进行状态转移,是协调相关信号动       作.完成特定操作的控制中心. 类 ...

  4. <!DOCTYPE html>作用

    1.定义: DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. <!DOCTYPE> 声明 ...

  5. [转载]抓包，端口镜像，monitor session命令（转）

    原文地址:抓包,端口镜像,monitor session命令(转)作者:浮云皓月 一.SPAN简介 SPAN技术主要是用来监控交换机上的数据流,大体分为两种类型,本地SPAN和远程SPAN. --Lo ...

  6. C#设置textBox只能输入数字（正数，负数，小数）简单实现

    /* *设置textBox只能输入数字(正数,负数,小数) */ public static bool NumberDotTextbox_KeyPress(object sender, KeyPres ...

  7. 使用MicroService4Net 快速创建一个简单的微服务

    “微服务架构(Microservice Architecture)”一词在过去几年里广泛的传播,它用于描述一种设计应用程序的特别方式,作为一套独立可部署的服务.目前,这种架构方式还没有准确的定义,但是 ...

  8. JavaScript - 对象

    1.对象(Object)或实例(instance):在JavaScript中,对象则是数据与程序代码的组合,它可以是整个应用程序或整个应用程序的一部分. 2.属性(property)或字段(filed ...

  9. PAT Mooc datastructure 6-1

    Saving James Bond - Hard Version This time let us consider the situation in the movie "Live and ...

  10. PHP之static静态变量详解（二）

    在看别人项目过程中,看到函数里面很多static修饰的变量,关于static修饰的变量,作用域,用法越看越困惑,所以查了下资料. static用法如下: 1.static 放在函数内部修饰变量 2.s ...