精华内容
参与话题
问答
  • 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元素的属性,属性包通常含属性名称和值两...
  • 有趣的HTML5元素周期表

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

    千次阅读 2017-05-07 21:53:22
    html5 元素拖拽
  • Html5-CSS之元素的五大居中方式

    千次阅读 多人点赞 2019-10-26 15:12:51
    Html5-CSS之五大居中方式 你是不是也对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?恭喜你,搜到这篇博客! 这是鄙人在前端的学习与实践中总结出的元素的五大居中...
  • HTML5元素分类

    千次阅读 2016-02-15 16:50:33
    HTML5元素分类 HTML5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素4大类。 结构性元素主要负责web上下文结构的定义 ...
  • 我在用jsp编写程序时,使用html5支持的元素但是显示的时候不符合预期,请问如何在jsp页面使用html5元素?
  • HTML5中定位网页元素重点总结

    千次阅读 2018-08-27 20:51:08
    定位: position属性 1. static:默认值,没有定位   2. relative:相对定位 相对自身原来位置进行偏移:偏移设置:top、left、right、bottom left和top正、负取值的方向: top向下为正,left向左......
  • HTML5 元素拖拽 移动删除效果

    千次阅读 2013-06-16 17:10:09
    通过拖放实现添加、删除 div>div{ display: inline-block; padding: 10px; background-color: #aaa; margin: 3px; } 可将喜欢的语言拖入收藏夹 JAVA PHP C++ C style="width:400px;...
  • (1)行内元素 a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体 ( 不推荐 ) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码 ( ...
  • HTML5新增7个结构元素(详解)

    千次阅读 2019-04-02 15:25:55
    header 元素表示页面中的一个内容区块或者整个页面的标题,通常放在页面的头部。 通常用来显示页面中的标题、logo图片、搜索文本框或者其他相关的内容 <div class="mian-container"> <header> <...
  • HTML5元素嵌套规则

    千次阅读 2016-09-22 09:44:52
    先来看以下这样一段代码: 当然,我是不会告诉你这段代码来自于FACEBOOK的 ,各位认为以上元素的嵌套有没有问题呢?...元素元素不能嵌套块元素 那么到底什么是块元素,什么是内联元素? 以下是W3C
  • HTML5拖动元素放到指定位置

    千次阅读 2017-04-25 10:44:40
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&...
  • HTML5元素拖拽drag与拖放drop相关API

    千次阅读 多人点赞 2017-03-08 21:26:50
    其实HTML5就是新增一些有用的API 让我们更轻松的开发 从而把更多精力都放在业务逻辑上来 这些API的使用也非常简单 不过我的记性不太好 所以还是以博客的形式记录下来(手动滑稽) 今天就来写一下这个拖拽API...
  • [知识点滴]HTML5元素垂直居中那些事?

    千次阅读 2016-09-18 01:07:15
    一 摘要让一个元素水平居中对于CSS来说非常简单:如果是一个内联元素,我们可以在他的父元素上设置text-align:center;;如果是一个块元素,我们可以使用margin:auto;。然而,只要一想到让一个元素垂直居中,让人死的...

空空如也

1 2 3 4 5 ... 20
收藏数 1,062,189
精华内容 424,875
关键字:

html5元素