精华内容
参与话题
问答
  • HTML5常用元素

    2018-09-18 20:47:49
    HTML5是对以前版本的HTML及XHTML的妥协,在无法完美规范HTML规则的情况下采取的折中方法,对之前任何版本的HTML都最大可能性的兼容,所以学习起来并不像学习一门新语言一样费劲。 HTML5最基本的代码格式如下:  ...

    HTML5是对以前版本的HTML及XHTML的妥协,在无法完美规范HTML规则的情况下采取的折中方法,对之前任何版本的HTML都最大可能性的兼容,所以学习起来并不像学习一门新语言一样费劲。

    HTML5最基本的代码格式如下: 

    <html>
    <head>
         <meta charset="utf-8">
    	<title>HELLO</title>
    	<style> </style>
    </head>
    <body>
    	<p>HELLO WORLD</p>
    </body>
    </html>

    1.基本元素有:

    <!--...--> : 定义HTML注释;

    <html>: HTML5文档的根元素;

    <head>:HTML5文档的页面头部分;

    <title>:HTML5文档的页面标题;

    <body>:HTML5文档的页面主体部分;

    <p>:定义段落;

    <br>:换行;

    <hr>:下划线;

    <div>:定义文档中的节;

    <span>:与<div>相似,<span>包含的内容默认不换行。

     

    2.文本格式相关元素:

    <b>,<i>,<em>,<strong>:分别定义文本的粗体,斜体,强调文本和粗体文本;

    <sup>,<sub>:分别定义上标文本和下标文本;

    <bdo>:定义文本显示的方向,rtl为从右向左,ltr为从左向右。

     

    3.语义相关元素:

    <abbr>:表示一个缩写;

    <address>:表示一个地址;

    <blockquote>:定义一段长的引用文本;

    <q>:定义一段短的引用文本;

    <cite>:用于表示作品的标题;

    <code>:表示一段计算机代码;

    <pre>:预定义文本;

    <del>:定义文档中被删除的文本;

    <ins>:定义文档中插入的文本;

    <var>:表示一个变量.

    4.重点:<a>用于添加超链接和锚点

    <href>:指定了超链接所链接的另一个资源;

    <hreflang>:指定超链接所链接的文档所使用的语言;

    <target>:有四个可取值,_self、_blank、_top、_parent分别代表在自身,新窗口,顶层框架和父框架来装载新资源;

    <download>:指定用户下载目标链接所指向的资源。

    5.<img>:

    <src>:指定文件所在位置;

    <alt>:指定一段文字,作为该图片的提示信息;

    <height>,<width>:指定图片的长和宽;

    <map>:定义图片映射;

    <area>:定义图片映射的内部区域,包括shape,coords,herf,alt,target等属性;

     

     

    展开全文
  • html5元素

    千次阅读 2018-08-11 23:09:26
    1.空元素 area 、base、 br、 col、 command、 embed、hr、 img、 input、 keygen、 link、 meta、 param、 source、 wbr  eg: &lt;img src="a.jpg" /&gt;   &lt;img src="a.jpg&...

    1.空元素

    area 、base、 br、 col、 command、 embed、hr、 img、 input、 keygen、 link、 meta、 param、 source、 wbr

     eg: <img src="a.jpg" />    

           <img src="a.jpg" >  (不推荐)

     

    2.可省略结束标签

    colgroup、 dt、 dd、li、optgroup、 option、 p、 rt、 rp、 thead、 tbody、 tfoot、 tr、 td、 th

     

    展开全文
  • HTML5元素分类 html5元素分类图: 1.结构性元素 article与section 元素名称 元素释义 特点 article 用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容 article元素是一...

    HTML5元素分类

    html5元素分类图:
    HTML5元素分类

    1.结构性元素

    • article与section
    元素名称 元素释义 特点
    article 用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容 article元素是一段独立完整的内容,通常组成=header+内容+footer,例如:博客或一篇文章、一篇论坛帖子
    section 用于对网站和应用程序中页面上的内容进行分区 组成=内容+标题,常用于对页面的内容进行分块处理,如对文章分段等,相邻的section元素应当是相关的,不像article那样独立

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>article和section</title>
    </head>
    <body>
    	<article>
    		<header>
    			<h1>李小白的个人介绍</h1>
    		</header>
    		<p>李小白是一个30岁的女程序员,正在拼搏的路上。</p>
    	</article>
    	<section>
    		<h1>评论</h1>
    		<article>
    			<h3>评论者:张三</h3>
    			<p>没有什么岁月静好,只是有人在为你砥砺前行。</p>
    		</article>
    		<article>
    			<h3>评论者:李四</h3>
    			<p>人生,选择比努力更重要。</p>
    		</article>
    	</section>
    </body>
    </html>
    

    事实上article元素可以看做是特殊的section元素,如上面例子中的

    <article>
    	<h3>评论者:张三</h3>
    	<p>没有什么岁月静好,只是有人在为你砥砺前行。</p>
    </article>
    <article>
    	<h3>评论者:李四</h3>
    	<p>人生,选择比努力更重要。</p>
    </article>
    

    这段代码,此处的article实际上用于对评论内容进行分区显示,但因为每个评论是独立的、完整的,因此此处使用article更确切。
    article元素更强调独立性、完整性,section元素更强调相关性。

    section使用Tips:
    1、不要将section元素当做设置样式的页面容器,对于此类操作应该使用div元素实现
    2、如果article、aside或nav元素更符合使用条件,不要使用section。
    3、不要为没有标题的内容使用section元素。可以使用html5轮廓工具(https://gsnedders.html5.org/outliner/)来检查

    注意:article、section不能替代div来布局网页。div的用处就是用来布局网页的,划分大的区域,在不同的内容块中,我们按照需求添加article、section等内容块,并且显示其中的内容。div元素关注结构独立性、section元素关注内容的独立性。

    • nav导航信息
    元素名称 元素释义 特点
    nav 用于页面导航的链接组,其中导航元素链接到其他页面或当前页面的其他部分 只需要将主要的、基本的链接组放进nav元素即可。一个页面可以拥有多个nav元素,作为页面整体或不同部分的导航

    nav元素的使用场合:

    1. 传统导航条:用于网站页面之间的跳转。
    2. 侧边栏导航:将页面从当前文章或商品跳转到其他文章或商品。
    3. 页内导航:本页面几个主要组成部分之间进行跳转。
    4. 翻页操作。多个页面的前后页或博客网站的前后篇文章滚动。

    导航示例一:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>nav导航示例</title>
    </head>
    <body>
    	<nav draggable="true">
    		<a href="index.html">首页</a>
    		<a href="book.html">图书</a>
    		<a href="bbs.html">论坛</a>
    	</nav>
    </body>
    </html>
    

    显示效果:

    nav导航示例

    导航示例二

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>nav示例综合</title>
    </head>
    <body>
    <h1>技术资料</h1>
    <!-- 用于页面导航 -->
    <nav>
    	<ul>
    		<li><a href="/">主页</a></li>
    		<li><a href="/blog">博客</a></li>
    	</ul>
    </nav>
    <article>
    	<header>
    		<h1>HTML5+CSS3</h1>
    		<!-- 文章中导航 -->
    		<nav>
    			<ul>
    				<li><a href="#HTML5">HTML5</a></li>
    				<li><a href="#CSS3">CSS3</a></li>
    			</ul>
    		</nav>
    	</header>
    	<section id="HTML5">
    		<h1>HTML5</h1>
    		<p>HTML5特性说明</p>
    	</section>
    	<section id="CSS3">
    		<h1>CSS3</h1>
    		<p>CSS3特性说明</p>
    	</section>
    	<footer>
    		<p><a href="?edit">编辑</a>|<a href="?delete">删除</a>|<a href="?add">添加</a></p>
    	</footer>
    </article>
    <footer>
    	<p><small>版权信息</small></p>
    </footer>
    </body>
    </html>
    

    显示效果:

    nav示例综合

    技术资料

    版权信息

    tip:在HTML5中不要用menu元素代替nav元素。menu元素主要用作一系列交互命令的菜单上。

    2.级块元素

    • aside
    元素名称 元素释义 特点
    aside 表示当前页面或文章的附属信息部分 可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条以及其他类似的有别于主要内容的部分

    aside元素的使用场合:

    1. 作为主要内容的附属信息部分,包含在article元素中,其中的内容可以是与当前文章有关的参考资料、名词解释等。
    2. 侧边栏导航:作为页面或站点全局的附属信息部分,在article元素之外使用。最典型的形式是侧边栏,其中的内容可以是友情链接,博客中其他文章列表、广告单元等。
    展开全文
  • HTML5常见120个元素

    2019-01-10 14:58:41
    标签 描述 效果 &lt;!-- --&gt; 注释   &lt;!DOCTYPE&gt;... 只取首字母的缩写(HTML5不支持)   &lt;address&gt; 文档作者或拥有者的联系...
    标签 描述 效果
    <!-- --> 注释  
    <!DOCTYPE> 文档类型  
    <a>  
    <abbr> 缩写  
    <acronym> 只取首字母的缩写(HTML5不支持)  
    <address> 文档作者或拥有者的联系信息  
    <area> 图像映射内部的区域,空元素  
    <article> 文章(HTML5新标签)  
    <aside> 页面内容之外的内容(HTML5新标签)  
    <audio> 声音内容(HTML5新标签)  
    <b> 粗体字  
    <base> 页面中所有链接的默认地址或默认目标,空元素  
    <bdi> 文本的文本方向,使其脱离其周围的文本的方向设置(HTML5新标签)  
    <bdo> 文字方向  
    <big> 大号文本  
    <blockquote> 长的引用  
    <body> 文档的主体  
    <br /> 或者<br> 简单的折行,空元素  
    <button> 按钮  
    <canvas> 图形(HTML5新标签)  
    <caption> 表格标题  
    <cite> 引用  
    <code> 计算机代码文本  
    <col> 表格中一个或多个列的属性值,空元素  
    <colgroup> 表格中供格式化的列组  
    <command> 命令按钮(HTML5新标签)  
    <datalist> 下拉列表(HTML5新标签)  
    <dd> 定义表格中项目的描述  
    <del> 被删除的文本
    <details> 元素的细节(HTML5 新标签)  
    <div> 文档中的节  
    <dfn> 定义项目  
    <dialog> 对话框或窗口(HTML5新标签)  
    <dl> 定义列表  
    <dt> 定义表格中的项目  
    <em> 强调文本  
    <embed> 外部交互内容或插件(HTML5新标签)  
    <fieldset> 围绕表单中元素的边框  
    <figcaption> figure元素的标题(HTML5新标签)  
    <figure> 媒介内容的分组,以及他们的标题(HTML5新标签)  
    <footer> section或page的页脚(HTML5新标签)  
    <form> 供用户输入的HTML表单  
    <frame> 框架集的窗口或框架,空元素  
    <frameset> 框架集  
    <h1>到<h6> HTML标题  
    <head> 关于文档的信息  
    <header> section或page的页眉(HTML5新标签)  
    <hr> 水平线,空元素  
    <html> HTML文档  
    <i> 斜体字  
    <iframe> 内联框架  
    <img> 图像,空元素  
    <input> 输入控件,空元素  
    <ins> 被插入文本  
    <kbd> 键盘文本  
    <keygen> 生成密钥(HTML5新标签)  
    <label> input元素的标注  
    <legend> fieldset元素的标题  
    <li> 列表的项目  
    <link> 文档于外部资源的关系,空元素  
    <map> 图像映射  
    <mark> 有记号的文本(HTML5新标签)  
    <menu> 命令的列表或菜单  
    <menuitem> 用户可以从弹出的菜单调用命令/菜单项目  
    <meta> 关于HTML文档的元信息,空元素  
    <meter> 预定义范围的度量(HTML5新标签)  
    <nav> 导航链接(HTML5新标签)  
    <noframes>

    针对不支持框架的用户的替代内容

     
    <noscript> 针对不支持客户端脚本的用户的替换内容  
    <object> 内嵌对象  
    <ol> 有序列表  
    <optgroup> 选择列表中相关选项的组合  
    <option> 选择列表中的选项  
    <output> 输出的一些类型(HTML5新标签)  
    <p> 段落  
    <param> 对象的参数,空元素  
    <pre> 预格式文本  
    <progress> 任何类型的任务进度(HTML5新标签)  
    <q> 短的引用  
    <rp> 浏览器不支持ruby元素时显示的内容(HTML5新标签)  
    <rt> ruby注释的解释(HTML5新标签)  
    <ruby> ruby注释(HTML5新标签)  
    <samp> 计算机代码样本  
    <script> 客户端脚本  
    <section> section(HTML5新标签)  
    <select> 下拉列表  
    <small> 小号文本  
    <source> 媒介源(HTML5新标签)  
    <span> 文档中的节  
    <strong> 强调文本  
    <style> 文档的样式信息  
    <sub> 下标文本  
    <summary> 为<details>元素定义可见的标签(HTML5新标签)  
    <sup> 上标文本  
    <table> 表格  
    <tbody> 表格中的主体内容  
    <td> 表格中的内容  
    <textarea> 多行的文本输入控件  
    <tfoot> 表格中的表注内容  
    <th> 表格中的表注内容  
    <thead> 表格中的表头单位格  
    <time> 日期/时间(HTML5新标签)  
    <title> 文档的标题
    <tr> 表格中的行  
    <track> 用在媒体播放器中的文本轨道(HTML5新标签)  
    <tt> 打印机文本  
    <ul> 无序列表  
    <var> 文本的变量部分  
    <video> 视频(HTML5新标签)  
    <wbr> 在文本何处适合添加换行符(HTML5新标签)  

     

    展开全文
  • HTML5——元素分类

    2019-12-29 17:11:46
    HTML5 中将元素进行了分类,具体的类别如下: 元数据内容(Metadata content) 流式内容(Flow content) 章节内容(Sectioning content) 标题内容(Heading content) 短语内容(Phrasing content) 嵌入内容...
  • HTML5中的基本元素

    2020-03-05 12:19:58
    一、了解什么是分组元素 用于对页面中的元素进行分组 二、掌握figure、figcaption、hggroup三种分组元素的用法及用途 1、figure元素用于定义独立的流内容,如图像、图表、照片、代码等,一般指一个单独的单元。 ...
  • HTML5元素的属性

    千次阅读 2015-12-28 16:56:21
    HTML文档中包含了各种各样的元素,同时元素还可以用属性(attribute)进行配置,一个元素可以配置一个或者多个属性,例如: I like apples and oranges.class、href和id都是a元素的属性,属性包通常含属性名称和值两...
  • (1)行内元素 a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体 ( 不推荐 ) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码 ( ...
  • HTML 空元素

    千次阅读 2018-02-06 16:44:24
    就是字面意思:没有内容的HTML元素,比较常见的空元素像 这种,他们往往没有关闭标签(从表面上看是自己关闭自己233,像),听说在未来的趋势里这种没有关闭标签的情况会被取消掉.。 一、area元素 作用:形成矩形,...
  • HTML空元素

    千次阅读 2018-10-05 11:07:29
    一个空元素(empty element)可能是 HTML,SVG,或者 MathML 里的一个不可能存在子节点(例如内嵌的元素或者元素内的文本)的element。 HTML,SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容(define ...
  • HTML中的空元素

    2016-12-04 20:47:48
    没有内容的 HTML 元素被称为空元素空元素是在开始标签中关闭的, 都是没有关闭标签的空元素。目前HTML支持不带关闭的空元素,但在 XHTML、XML 以及未来版本的 HTML中,所有元素都必须被关闭。 在开始标签中...
  • 块级元素:、、、、、、、、、、、、、、、、、、、、、、、、、、、、、行内元素:、、、、、、、、、、、、、、、、、、、、、、、、、、空元素(void):
  • xml中非空元素空元素的区别

    千次阅读 2012-12-04 17:35:53
    先来看看这两者的定义 非空元素的语法格式如下: ...非空元素主要是由开始标签、结束标签机包含其间的内容组成。开始标签由“”、标签名以及不是...首先格式上的区别,空元素与非空元素最大的不同就是没有内容及
  • XML 空元素

    千次阅读 2009-10-22 10:30:00
    空元素 (empty element)如果一个 XML 元素没有内容,比如, 我们称其为空元素 (empty element)。空元素有一种特殊的写法,以 开始,然后是元素名称,然后以 /> 结束。比如, 。
  • (1)行内元素 a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体 ( 不推荐 ) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码 ( ...
  • ## 请问各位大神,html元素种类除了行内元素和块级元素还有什么??? 面试遇到了一个问题,查都查不到的问题:html元素种类除了行内元素和块级元素还有什么?(不是行内块级元素!) 求解答!!!
  • Python 中删除列表中所有的空元素

    万次阅读 2018-04-29 16:08:55
    Python 中删除列表中所有的空元素 1. 删除None值 mylist = ["asas", "cfdsgfdas", None, "csdfew"] while None in mylist: mylist.remove(None) des = " ".join...
  • 有趣的HTML5元素周期表

    千次阅读 2011-08-21 13:28:41
    网站在这里:http://joshduck.com/periodic-table.html 点击每一个元素,还会弹出相应的简介. 更有趣的就是, 在下面图显示的文本框中输入相应的网址,然后点击Inspect. H
  • 【Python】去除List中的空元素

    千次阅读 2019-03-19 14:17:02
    #创建包含空元素的List >>>x = ['a',1,2,'','b','',3] >>>x >['a', 1, 2, '', 'b', '', 3] #去除空元素 >>>x = [i for i in x if(len(str(i))!=0)] >>>x >['a', 1, 2, 'b...
  • 最近在干活的时候发现数组中有空元素,根据需求,要删除这个空元素,可惜的是,javascript并没有提供这么一个方法,找了很多的解决办法,发现都是自己实现的一个函数,以下是我找到的两种方法: 第一种: [code=&...
  • PHP 去除数组中的空元素

    千次阅读 2018-05-08 15:23:14
    原数组:Array([0] =&gt; sdfdsdsdsfrrrrrrr[1] =&gt; fdsfdsdsfds[2] =&...[5] =&gt;[6] =&gt;[7] =&gt; fdsfdsfdsfds[8] =&gt; fdsfdsfdsfdsfdsfsd[9] =&gt; ssssssss[10...
  • Java 去除数组空元素

    万次阅读 2016-09-27 13:28:52
    private String[] removeArrayEmptyTextBackNewArray(String[] strArray) { List<String> strList= Arrays.asList(strArray); List<String> strListNew=new ArrayList(); for (int i = 0;
  • ]如何删除数组中的空元素?如,删除下面数组中的空元素 $arr=[1,2,3,'',5,6,0]。 解决办法: NO1.使用array_filter()过滤 $arr=[1,2,3,'',5,6,0]; $arr=array_filter($arr,function($item){ return $...
  • java 去除数组空元素

    千次阅读 2018-09-14 16:15:08
    private static String[] removeArrayEmptyTextBackNewArray(String[] strArray) {  List&lt;String&gt; strList= Arrays.asList(strArray);  List&lt;String&... strListNew=new ArrayList&...
  • Python去除列表中的空元素

    千次阅读 2019-09-25 00:10:18
    方法1. >>> ls=[' ',1,'w e',4,'','good',' ',''] >>> ls [' ', 1, 'w e', 4, '', 'good', ' ', ''] >>...=''] #去除空元素 >>> ls1 [' ', 1, 'w e', 4, 'go...
  • Schema中定义空元素

    千次阅读 2005-10-23 15:28:00
    XSD例子,如下:XML使用时:
  • java 删除集合中的空元素

    千次阅读 2020-05-05 23:14:51
    java 删除集合中的空元素方法一方法二方法三 方法一 注:下面代码中需要注意的是Arrays.asList Arrays.asList创建的数据为定长集合,集合长度在操作时是不可以改变的,不能对集合进行增删操作。 如果操作会抛异常。...
  • 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为... HTML 元素被称为空元素。 块级元素,会自动占据一
  • List如何去除空元素

    千次阅读 2018-10-11 21:22:51
    之前在 List中去除null的处理是: public static void main(String[] args) { ArrayList&lt;String&gt; list = new ArrayList&lt;String&gt;(); list.add("name"...fr...
  • 删除一个list中所有空元素

    万次阅读 2013-11-09 15:27:31
    package com.dada; import java.math.BigDecimal; import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap; import java.util.List; import java.util.Map; public class TestArray7... ...

空空如也

1 2 3 4 5 ... 20
收藏数 1,741,788
精华内容 696,715
关键字:

html5元素