[email protected]常用标签分类,标签嵌套规则

一.html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念。
1.块级元素
块级元素是指本身属性为display:block;的元素。因为它自身的特点,我们通常使用块级元素来进行大布局(大结构)的搭建。

块级元素的特点:
独占一行,从上到下排布
可设宽度、高度,margin,padding
在不设置宽度,宽度是它父级元素,高度是它本身内容撑开的高度
内部可容文本,纳块级元素,以及内联元素

常用的块级元素
div
常用块级容器,也是css layout的主要标签
h1-h6
标题 大到小
hr
水平分隔线
ol,ul,li
有序,无序列表,(列表项)
dl,dt,dd
自定义列表,标题(特别的项目),项目
table(内部thead>tr>th,td标签与table连用,单独无法使用)
表格
p
段落
form
交互表单

2.内联元素
内联元素是指本身属性为display:inline;的元素。因为它自身的特点,我们通常使用内联元素来进行文字、小图标(小结构)的搭建。

内联元素的特点:
从左到右在一行显示
设宽高无效,只能设置内外边距左右,,....img标签特殊可以设置宽高,margin,padding;
宽高由内容撑开
只能容纳文本,内联元素

常用的内联元素
span
常用内联容器,定义文本内区块
a锚点
img
引入图片
b
加粗
strong
加粗强调
i
斜体
em
斜体强调
s
中划线(不推荐使用)
strike
中划线
del
文档中已被删除的文本
br
强制换行
u
下划线
textarea
多行文本输入框
input
输入框
select
下拉列表
label
input 元素定义标注(标记)
sub
下标
sup
上标
big
大字体文本
small
小字体文本

备注:W3C在最新的HTML5规范中对元素的分类方式:
元素的分类不再是块元素或内联元素这样来分类(其实从来就没有这样分),而是按照如下分类来分:Flow(流式元素)、Heading(标题元素)、Sectioning(章节元素)、Phrasing(段落元素)、Embedded(嵌入元素)、Interactive(交互元素)、Metadata(元数据元素)。

根元素:<html>
文档元数据:<link>、<meta>、<style>、<style>
内容分区:<header>、<nav>、 <section>、<aside> 、<footer> 、<h1>~<h6> 、<article> 、<address>、<hgroup>
文本内容:<main>、<div>、<p>、<pre>、<ol>、 <ul>、<li>、<dl> 、<dt>、<dd>、<figure> 、<figcaption>、<blockquote> 、<hr>
内联文本语义:<span>、<a>、<strong>、<em>、<q>、<br>、<mark>、<code>、<abbr>、<b>、<bdi>、<bdo>、<sub>、<sup>、<time>、<i>、<u>、<cite>、<data>、<kbd>、<nobr>、<s>、<samp>、<tt>、<var>、<wbr>、<rp>、<rt>、<rtc>、<ruby>
图片和多媒体:<img><audio> <video><track><map><area>
内嵌内容:<iframe>、<embed>、<object> 、<param>、<picture>、<source>
脚本:<canvas>、<noscript>、<script>
编辑标识:<del>、<ins>
表格内容:<table>、<caption>、<thead>、<tbody>、<tfoot>、<tr>、、<col><colgroup>、<th>、<td>
表单:<form> 、<input>、<textarea> 、<label>、<button>、<datalist>、<fieldset>、<legend>、<meter>、<optgroup>、<option>、<output>、<progress>、<select> 交互元素<details>、<summary>、<dialog>、<menu> Web 组件:<slot>、<template> 过时的和弃用的元素:<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><spacer><strike><shadow><tt><xmp>

二.标签嵌套规则

内联元素不能嵌套块元素。
p元素和<h1~6>元素不能嵌套块元素。

原文地址:https://www.cnblogs.com/3sss-ss-s/p/9786227.html

时间: 2024-08-09 06:01:58

[email protected]常用标签分类,标签嵌套规则的相关文章

常用的标签分类和嵌套规则

标签(空格分隔): 标签嵌套规则 HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素.常用的块状元素: <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> 常用的行内元素: <a> <span> <br> <i> <em> <strong> <label>

[email&#160;protected]较复杂的指令嵌套demo——综合小实例:登陆界面

1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>custom-directive</title>    <meta charset="utf-8">        <link rel="stylesheet" href="../css/bootstrap.css">

[email&#160;protected]常用属性记录

android:stackFromBottom="true" | "false" 默认false 说明:当listview加载完毕,显示最下面的内容,或者显示最上面的内容. android:divider="@null" | @drawable/... 说明:listview元素之间的分割线,可以设置为@null,或者一个图片资源.

HTML标签的嵌套规则

我在平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,后来发现有些标签嵌套却是错误的.通过网上找资料,了解了html标签的嵌套规则. 一.HTML 标签包括 块级元素(block).内联元素(inline)  1.块级元素  一般用来搭建网站架构.布局.承载内容的元素,如下:  address.blockquote.center.dir.div.dl.dt.dd.fieldset.form.h1~h6.hr.isindex.menu.noframes.nos

标签分类与元素转换

css 常见的css样式: 列表: 无序列表: list-style-type 设置无序列表前面的列表符号 disc 表示实心圆 square表示实心方块 circle表示空心圆 none 表示去掉列表符号 list-style-position 设置列表前面的项目符号是否包含在整个标签宽度范围之内 默认 outside 不在宽度范围内 inside 表示包含在列表宽度范围内 list-style-image 表示以图片作为列表的项目符号 list-style:none; 表示去掉列表前面的项目

@codeforces - [email&#160;protected] Big Problems for Organizers

目录 @[email protected] @[email protected] @accepted [email protected] @[email protected] @[email protected] n 个点连成一棵树,经过每条边需要花费 1 个单位时间. 现给出 m 次询问,每次询问给出两个点,需要求所有点同时出发,最终所有点到达这两个点之一的最小花费时间. input 第一行包含一个整数 n (2?≤?n?≤?100000) ,表示点数. 接下来 n-1 行每行两个 1~n 的

HTML5标签嵌套规则

× 目录 [1]分类 [2]子元素 [3]总结 前面的话 在html5中,<a>元素的子元素可以是块级元素,这在以前是被认为不符合规则的.本文将详细介绍html5的标签嵌套规则 分类 html5出现之前,经常把元素按照block.inline.inline-block来区分.在html5中,元素不再按照display属性来区分,而是按照内容模型来区分,分为元数据型(metadata content).区块型(sectioning content).标题型(heading content).文档

web前端(6)—— 标签的属性,分类,嵌套

属性 HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中 1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序. 2.属性值要用引号包裹起来,通常使用双引号也可以单引号. 3.属性和属性值不区分大小写,但是推荐使用小写. 为什么html会有属性呢? 这个举个生活中的例子,你要在茫茫人海中找到你的女神,你依据什么来找呢?肯定依据她身上的某个特征来找对吧?这个特征换个词就是属性,她特有的属性,其他人没有的对吧?比如她今天穿的紫色长

项目期复习总结:Table, DIV+CSS,标签嵌套规则

目录: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的区别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表格化显示的信息,比如数据的显示,统计或者二维报表之类的信息,而不是作为一种而已的工作 ② 表格有哪些元素? 表格元素:table thead tbody tfoot caption tr th td .... 较常用  ③ 表格的使用应该注意哪些? 1)使用表格时注意合理嵌套,遵循标签的语义性,tab