前端html标签:块级元素,行内元素,空元素

更新日期: 2019-07-07阅读: 2.3k标签: 标签

前端是一个很容易入门,但却很难走进去的一个行业。看似简单,但一旦深入,就“不可自拔”。说到,前端,肯定少不了要认识他的组成元素,那这就涉及到块级元素,行内元素以及一些空元素。


html标签

html标签定义:
是由一对尖括号包裹的单词构成,例如: <html>.
标签不区分大小写<html> 和 <HTML>, 推荐使用小写.
标签分为两部分: 开始标签<html> 和 结束标签</html>, 两个标签之间的部分我们叫做标签体.
有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如: <br/><hr/><input/><img/>
标签可以嵌套,例如:<a><b><b/><a/>;但是不能交叉嵌套,例如:<a><b><a/><b/>


块级元素

总是在新行上开始;
高度,行高以及外边距和内边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度。
它可以容纳内联元素和其他块元素

块级元素分类(双标签,eg:<div></div>):
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 定义 HTML 标题。
<div> 定义文档中的节。
<p> 定义段落。
<ul>  定义无序列表。
<ol>  定义有序列表。
<li>  定义列表的项目。
<dl>  自定义定义列表。
<dt>  自定义定义列表中的项目。
<dd>  自定义定义列表中项目的描述。
<table> 定义表格。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容(脚注)。
<th>  定义表格中的表头单元格。
<tr>  定义表格中的行。
<td>  定义表格中的单元。
<pre> 定义预格式文本。
<address> 定义地址。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<video> 定义视频。
<blockquote>  定义长的引用。
<canvas>  定义图形。
<caption> 定义表格标题。
<details> 定义元素的细节。
<fieldset>  定义围绕表单中元素的边框。
<figcaption>  定义 figure 元素的标题。
<figure>  定义媒介内容的分组,以及它们的标题。
<footer>  定义 section 或 page 的页脚。
<form>  定义供用户输入的 HTML 表单。
<header>  定义 section 或 page 的页眉。
<nav> 定义导航链接。
<noframes>  定义针对不支持框架的用户的替代内容。
<noscript>  定义针对不支持客户端脚本的用户的替代内容。
<legend>  定义 fieldset 元素的标题。
<menu>  定义命令的列表或菜单。
<meter> 定义预定义范围内的度量。
<output>  定义输出的一些类型。
<section> 定义 section。


行内元素

和其他元素都在一行上;
高,行高及外边距和内边距不可改变;
宽度就是它的文字或图片的宽度,不可改变;
内联元素只能容纳文本或者其他内联元素;

设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

<a> 定义锚。
<abbr>  定义缩写。
<span>  定义文档中的节。
<strong>  定义强调文本。
<i> 定义斜体字。
<acronym> 定义只取首字母的缩写。
<b> 定义粗体字。
<button>  定义按钮 (push button)。
<sub> 定义下标文本。
<sup> 定义上标文本。
<textarea>  定义多行的文本输入控件。
<em>  定义强调文本。
<bdo> 定义文字方向。
<big> 定义大号文本。
<cite>  定义引用(citation)。
<code>  定义计算机代码文本。
<command> 定义命令按钮。
<dfn> 定义定义项目。
<del> 定义被删除文本。
<embed> 定义外部交互内容或插件。
<kbd> 定义键盘文本。
<label> 定义 input 元素的标注。
<map> 定义图像映射。
<mark>  定义有记号的文本。
<objec> 定义内嵌对象。
<progress>  定义任何类型的任务的进度。
<q> 定义短的引用。
<samp>  定义计算机代码样本。
<select>  定义选择列表(下拉列表)。
<small> 定义小号文本。
<tt>  定义打字机文本。
<var> 定义文本的变量部分。


空标签

没有闭合标签的标签被称作为空标签。
在我们使用的标签中,有的具有闭合标签。例如<td>标签,它有闭合标签</td>。但是也有一部分标签没有闭合标签,例如<br />标签,这一类标签我们称之为空标签。

<input />  用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。
<img /> 代表文档中的一个图像。
<isindex /> 使浏览器显示一个对话框,提示用户输入单行文本。
<hr/>  定义水平线。
<br>  定义简单的折行。
<area /> 在图片上定义一个热点区域
<base /> 指定用于一个文档中包含的所有相对URL的基本URL。
<basefont /> 用来设置文档的默认字体大小。(目前已废弃 )
<bgsound /> IE浏览器中设置网页背景音乐的元素。
<col /> 定义表格中的列,并用于定义所有公共单元格上的公共语义。它通常位于`<colgroup>`元素内。
<embed /> 用于表示一个外部应用或交互式内容的集合点,换句话说,就是一个插件。 
<frame /> ,它定义了一个特定区域,另一个 HTML 文档可以在里面展示。(已废弃)
<link /> 指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。
<meta /> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息.
<param />  定义了 <object>的参数
<plaintext /> 将起始标签后面的任何东西渲染为纯文本,不会解释为 HTML。它没有闭合标签,因为任何后面的东西都会看做纯文本。(已废弃)
<spacer /> 它可以向页面插入间隔。它由 Netscape 设计,用于实现单像素布局图像的相同效果,Web 设计师用它来向页面添加空白,而不需要实际使用图片。(已废弃)


Html模板

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Fanstyle</title>
    <!-- 设置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容国产浏览器的高速模式 -->
    <meta name="renderer" content="webkit">
    <meta name="Author" content="孟繁胜游" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
      
    </style>
</head>
<body>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  
</script>
</body>
</html>

链接: https://www.fly63.com/article/detial/4569

Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

a标签是我们常用的一个标签之一,这篇文章主要讲解如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。

web标签语义化的理解_web语义化是什么意思

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容

HTML中<base>标签的正确使用

<base> 标签必须位于 <head> 元素内部,在一个文档中,最多能使用一个 <base> 标签,使用了<base>标签的链接后,其他链接必须在<base>标签的链接里面,不然将无法找到。

使用Map标签指定点击区域时的兼容性问题

因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。当然,label和map中的用法也不同,不论如何,引以为戒

html 标签优化_如何优化网站HTML标签代码优化

如何优化网站HTML标签代码优化?选用合适的标签、htm5提供了很多类型的input的type类型、使用html5语义化标签等

js动态添加html标签和属性_手动插入meta、script、div、img等标签

web网页是由 html标签一层层组成的,js也可以动态添加对应的标签,比如mate标签、script标签、div标签、img标签等,动态创建的方法基本都差不多,下面将简单介绍下如何实现

head里两个重要标签base和meta

<base>我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签,分为3类:具有charset属性的meta 、带有http-equiv 属性的 meta

JSTL学习总结

在mvnrepository中,直接搜索jstl,,找到下载量最高的,下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展,使用需导jar包

<script>标签的属性

src定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。type该属性定义script元素包含或src引用的脚本语言。

10 个不常用但你有必要知道的 html 标签

HTML 也被称为超文本记语言( hyper text markup language )是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!