HTML里的块级元素和行级元素

HTML部分

HTML超文本标记语言,描述了一个网站的结构,是一种标记语言而非编程语言。
HTML文件固定语句的含义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

  • < !DOCTYPE>声明必须是HTML文档的第一行,位于<html> 标签之前。
  • head元素定义文档的头部,我们通常在这里引用样式表、提供元信息等。文档的头部中的<title>...</title>定义文档的标题,在网页上体现为网页标签的标题。一个<head>元素必须包含且只能包含一个 <title>元素。
  • charset="UTF-8"表面编码格式为UTF-8.

块级元素和行内元素
块级元素:
常见的块级元素:

  1. <div> 定义文档中的节。
  2. <canvas>定义图形。
  3. <form> 定义供用户输入的 HTML 表单。
  4. <h1> to <h6> 定义 HTML 标题。
  5. <header> 定义 section 或 page 的页眉。
  6. <footer> 定义 section 或 page 的页脚。
  7. <hr> 定义水平线。

对块级元素,需要注意如下:

  • 宽度默认和父级元素的宽度一样(撑满副元素宽度,如果设置了宽度,那么宽度就是设置之后的值)
  • 高度默认被子元素撑起(如果设置了高度,那么高度就是设置的高度)
  • 默认独占一行(这一行的宽,默认和副元素宽度- -样,即使设置了宽度,这一行依然归属于它)

行内元素:
常见的行内元素:

  1. <a> 定义超链接/锚。
  2. <b> 定义粗体字
  3. <br> 定义简单的折行。
  4. <button> 定义按钮。
  5. <select> 定义选择列表(下拉列表)。
  6. <textarea> 定义多行的文本输入控件。

对行内元素,需要注意如下:

  • 设置宽度width 无效。
  • 设置高度height 无效,可以通过line-height来设置。
  • 设置margin 只有左右margin有效,上下无效。
  • 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。
    input标签类型总结
  • text 单行输入框。实例:用户名的输入
  • number 用于输入浮点数的控件。实例:用户手机号的输入
  • password 一个值被遮盖的单行文本字段,使用maxlength指定可以输入的值的最大长度。实例:用户密码的输入
  • checkbox 复选框 必须使用value属性定义此控件被提交时的值。使checkboxchecked属性指示控件是否被选择。实例:用户爱好的选择
  • radio 单选按钮。必须使用value属性定义此控件被提交时的值。使用checked必须指示控件是否缺省被选择。在同一个单选radio按钮组中,所有单选按钮的name属性使用同一个值;一个单选按钮组中是,同一时间只有一个单选按钮可以被选
    择。 实例:用户性别的选择
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值