块元素

特点

• 能设置宽高
• 自己独占一行

代码

<div class="box text_center" >
    <p>我是一个指定了宽300px 高60px的p标签</p>
    <h1 class="block" >标题1</h1>
    <h2 class="block">标题2</h2>
    <h3 class="block">标题3</h3>
    <h4 class="block">标题4</h4>
    <h5 class="block">标题5</h5>
    <h6 class="block">标题6</h6>
</div>

渲染

我是一个指定了宽300px 高60px的p标签

标题1

标题2

标题3

标题4

标题5

标题6

行内元素

特点

• 不能设置宽，高
• 不占用一行，内容多长占用多长

代码

<!--demo_bg 设置了高但是由于是行内元素，并不生效-->
<span class="demo_bg">行内元素1，内容多长我多长</span>
<span class="demo_bg">行内元素2，内容多长我多长</span>

渲染

行内元素1，内容多长我多长 行内元素2，内容多长我多长

行内块元素

特点

• 不占一行
• 能指定宽高

代码

<input class="demo_input" title="输入框" placeholder="我是输入框1,高30px,宽200px">
<input class="demo_input" title="输入框" placeholder="我是输入框2,高30px,宽200px">

渲染

元素类型转换 (opens new window)

• display：block ，定义元素为块级元素
• display : inline ，定义元素为行内元素
• display：inline-block，定义元素为行内块级元素

总结

• 【块元素】会独占一行，而【行内元素】和【行内块元素】则会在一行内显示；
• 【块元素】和【行内块元素】可设置 width、height 属性，而【行内元素】设置无效；
• 【块元素】的 width 默认为 100%，而行内元素则是根据其自身的内容或子元素来决定其宽度；
• 【行内块级元素】同时拥有【块元素】和【行内元素】的部分特点。

附:块元素

元素	描述
address	定义地址
caption	定义表格标题
dd	定义列表中定义条目
div	定义文档中的分区或节
dl	定义列表
dt	定义列表中的项目
fieldset	定义一个框架集
form	创建 HTML 表单
h1	定义最大的标题
h2	定义副标题
h3	定义标题
h4	定义标题
h5	定义标题
h6	定义最小的标题
hr	创建一条水平线
legend	元素为 fieldset 元素定义标题
li	标签定义列表项目
noframes	为那些不支持框架的浏览器显示文本，于 frameset 元素内部
noscript	定义在脚本未被执行时的替代内容
ol	定义有序列表
ul	定义无序列表
p	标签定义段落
pre	定义预格式化的文本
table	标签定义 HTML 表格
tbody	标签表格主体（正文）
td	表格中的标准单元格
tfoot	定义表格的页脚（脚注或表注）
th	定义表头单元格
thead	标签定义表格的表头
tr	定义表格中的行

附:行内元素

元素	描述
a	标签可定义锚
abbr	表示一个缩写形式
acronym	定义只取首字母缩写
b	字体加粗
bdo	可覆盖默认的文本方向
big	大号字体加粗
br	换行
cite	引用进行定义
code	定义计算机代码文本
dfn	定义一个定义项目
em	定义为强调的内容
i	斜体文本效果
kbd	定义键盘文本
label	标签为 input 元素定义标注（标记）
q	定义短的引用
samp	定义样本文本
select	创建单选或多选菜单
small	呈现小号字体效果
span	组合文档中的行内元素
strong	加粗
sub	定义下标文本
sup	定义上标文本
textarea	多行的文本输入控件
tt	打字机或者等宽的文本效果
var	定义变量

附:行内块元素

元素	描述
button	按钮
input	输入框
textarea	文本域
select	多选框
img	图片

H5新增语义标签

元素	描述
<header>	头部标签
<nav>	导航标签
<article>	内容标签
<section>	定义文档某个区域
<aside>	侧边栏标签
<footer>	尾部标签

视频标签

HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放

常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放 (谷歌浏览需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	pixels(像素)	设置插放器宽度
height	pixels(像素)	设置插放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto (预先加载视频) none (不应加载视频)	规定是否预加载视频(如果有了autoplay 就忽略该属性)
src	url	视频url地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音插放

H5新增input类型

属性值	说明
email	限制输入为 email 类型
url	限制输入为 url 类型
date	限制输入为 日期 类型
time	限制输入为 时间 类型
month	限制输入为 月 类型
week	限制输入为 周 类型
number	限制输入为 数字 类型
tel	手机号
search	搜索框
color	颜色选择器

H5新增表单类型

属性值	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	自动聚焦	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如 autocomplete="on"，关闭autocomplete ="of" 需要放在表单内，同时加上name 属性，同时成功提交
multiple	multiple	可以多选文件提交

附:页面CSS

.box {
  border: 3px solid  rgba(29,190,184);
}

.box p {
  height: 60px;
  width: 300px;
  margin: 0 auto;
  line-height: 60px;
  border: 3px solid  rgb(29,80,190);
}
.block {
  width: 400px;
  margin: 10px auto;
  background-color: rgba(29,190,184);
}

.text_center{
  text-align: center;
}

.demo_bg{
    height: 50px;
    background-color: rgba(29,190,184);
    border: 3px solid #000000;
}

.demo_input {
    border-radius: 15px;
    border: 3px solid  rgba(29,190,184);
    width: 200px;
    height: 30px;
}