Teg elemen baharu dalam HTML5 ialah: "", "", "", "", "", " ", "", "", "", "", "", dsb.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.
Teg elemen baharu dalam html5
标签
描述
定义一个文章区域
定义页面的侧边栏内容
定义音频内容
允许您设置一段文本,使其脱离其父元素的文本方向设置。
定义图形,比如图表和其他图像,标签只是图形容器,您必须使用脚本来绘制图形
定义命令按钮,比如单选按钮、复选框或按钮
定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
用于描述文档或文档某个部分的细节
定义对话框,比如提示框
定义嵌入的内容,比如插件。
定义 元素的标题
规定独立的流内容(图像、图表、照片、代码等等)。
定义 section 或 document 的页脚。
定义了文档的头部区域
规定用于表单的密钥对生成器字段。
定义带有记号的文本。请在需要突出显示文本时使用 标签。
定义度量衡。仅用于已知最大和最小值的度量。
定义导航链接的部分
定义不同类型的输出,比如脚本的输出。
定义运行中的进度(进程)。
标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
标签定义字符(中文注音或字符)的解释或发音。
标签定义 ruby 注释(中文注音或字符)。
标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
标签为媒介元素(比如 和 )定义媒介资源。
标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。
定义日期或时间,或者两者。
定义日期或时间,或者两者。
标签为诸如 video 元素之类的媒介规定外部文本轨道。
标签定义视频,比如电影片段或其他视频流。
规定在文本中的何处适合添加换行符。
(1) Tentukan pautan navigasi
Ia juga merupakan label yang bermakna, ia tidak bermakna hanya menambah label ini di suatu tempat Dengan gaya navigasi, ini semua bermakna. Tambahkan teg menu pada pengepala boleh digunakan bersama dengan tag
kod css:
<header>
<p>这是一个header部分</p>
<nav> <!--导航链接标签-->
<ul> <!--配合ul使用-->
<li>首页</li>
<li>关于</li>
<li>产品</li>
<li>联系</li>
</ul>
</nav>
</header> Salin selepas log masuk
Dengan cara ini, susun atur menu yang sebelum ini dilakukan hanya dengan p boleh direalisasikan
/*定义nav的高和颜色*/
nav{
height:30px;
background-color:#F33;
margin-top:100px;}
/*正常设置li的样式*/
li{
list-style:none;
float:left;
width:100px;
height:30px;
} Salin selepas log masuk
(2) Tentukan tag artikel
Anda boleh menggunakan tag blok artikel untuk menulis artikel, jadi gunakan teg ini untuk menulis artikel di bahagian bahagian . Digabungkan dengan
kod html:
gaya css:
<article><!--文章块p-->
<h2>文章标题</h2><!--标题-->
<p>文章内容文章内容文章内容文章内容文章内容文章内容
<br>
文章内容文章内容文章内容文章内容文章内容文章内容<br>
文章内容文章内容文章内容</p>
</article> Salin selepas log masuk
Dengan cara ini anda boleh menulis artikel
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
} Salin selepas log masuk
(3) Takrifkan kumpulan kandungan media, dan tajuknya
A. Teg ini boleh digunakan bersama dengan teg padanannya , tetapi tulis tajuk
<figure>
<figcaption>标题</figcaption><!--配套-->
<p>标题内容</p>
</figure> Salin selepas log masuk
B di tengah-tengah figcaption>. Ia juga boleh digunakan dalam kombinasi dengan , di mana digunakan untuk menulis tajuk, dan juga berbeza daripada kesan penggunaan padanan
(4) Tentukan kotak dialog atau tetingkap
<figure>
<dt>标题1</dt>
<dd>标题内容</dd>
</figure> Salin selepas log masuk
Dalam teg ini, anda juga boleh menggunakan tag dd dan dt, tajuk dan kandungan dalam kotak dialog, dan dialog Kotak mempunyai atribut yang terbuka Keserasian tag ini tidak begitu baik
<🎜. ><dialog open>
<dt>1问题</dt>
<dd>1答案</dd>
<dt>2问题</dt>
<dd>2答案</dd>
</dialog> Salin selepas log masuk
(5) Tentukan senarai atau menu arahan 🎜>
A. Tag ini boleh digunakan bersama dengan li
B. Anda boleh menambah kandungan anda sendiri pada klik kanan (hanya serasi dengan Firefox) <menu>
<li>定义列表</li>
<li>定义列表</li>
<li>定义列表</li>
</menu> Salin selepas log masuk
kesatuan (mentakrifkan perintah/item menu yang pengguna boleh panggil dari menu pop timbul) >
Item menu yang dikehendaki muncul selepas mengklik kanan
<menu type="context" id="cai">
<!--label是右键后显示的菜单项,onclick是选中菜单后执行的代码-->
<menuitem label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"></menuitem>
</menu> Salin selepas log masuk
Klik item menu dan kandungan akan muncul<span contextmenu="cai">单击我试试</span> Salin selepas log masuk
(6) Kumpulan tajuk
Anda boleh menulis beberapa gabungan tajuk
untuk kegunaan biasa
(7) Takrifkan teks kecil
<hgroup><!--标题组-->
<h3>标题</h3>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
</hgroup> Salin selepas log masuk
Teg ini sebenarnya serupa dengan teg tebal yang lain
(8) Butiran elemen definisi
<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small> Salin selepas log masuk
Kandungan di dalam boleh digunakan dengan tag tajuk dan kandungan
Klik pada butiran untuk melihat tajuk dan kandungan
<details>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
</details> Salin selepas log masuk
(9) Tentukan ulasan ruby
Apabila anda menghadapi aksara yang anda tidak kenali, anda boleh menggunakan ini untuk menganotasi pinyin, tetapi beberapa keserasian tidak begitu baik Anda boleh mengubah suainya apabila tiba masanya
(10) Tentukan dalam pratakrif. julat Measure
mempunyai beberapa nilai atribut, min="" max="" value="" low="" high="", di mana rendah dan tinggi ialah julat, apabila nilai Jika julat melebihi, kesan berbeza akan dipaparkan
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见,不能兼容的时候让括号可见,rt是进行这是的内容--> Salin selepas log masuk
Apabila nilai melebihi julat
<meter min="0" max="10" value="4" low="2" high="7"> Salin selepas log masuk
(11) Label bar kemajuan
<meter min="0" max="10" value="8" low="2" high="7"> Salin selepas log masuk
Nilai maksimum ialah panjang bar kemajuan, dan nilai nilai ialah kemajuan yang dipaparkan, yang boleh digunakan untuk bar Kemajuan dinamik
Dengan cara ini bar kemajuan boleh dilengkapkan bukankah ia lebih baik daripada menulis hanya dalam js Pelayar yang berbeza mempunyai ekspresi yang berbeza
<progress id="jindu" max="100" value="0"></progress>进度条 Salin selepas log masuk
Cadangan berkaitan: "<progress id="jindu" max="100" value="0"></progress>进度条
<script>
var pro = document.getElementById("jindu");
setInterval(function(){ pro.value+=1;},1000); //间隔1秒它的值加1
</script> Salin selepas log masuk
tutorial video html"
Atas ialah kandungan terperinci Apakah teg elemen baharu yang ditambahkan dalam html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!