Rumah  >  Artikel  >  hujung hadapan web  >  Satu artikel menerangkan tag HTML dan atribut secara terperinci (analisis ringkas struktur utama)

Satu artikel menerangkan tag HTML dan atribut secara terperinci (analisis ringkas struktur utama)

青灯夜游
青灯夜游asal
2022-08-02 18:47:242518semak imbas

Artikel ini akan memperkenalkan anda kepada teg dan atribut HTML, dan bercakap tentang struktur utama dan teg berkaitan dokumen HTML saya harap ia akan membantu anda!

Satu artikel menerangkan tag HTML dan atribut secara terperinci (analisis ringkas struktur utama)

Struktur utama HTML

Struktur asas halaman HTML adalah seperti berikut, yang mana mengandungi pelbagai Pelbagai teg yang diperlukan untuk membuat halaman web (seperti doctype, html, kepala dan badan, dsb.).

<!--这是html的注释信息-->

<!DOCTYPE html> <!--这是DOCTYPE声明-->

<html> <!--这是根-->

<head> <!--这是头-->

    <meta charset = "UTF-8"> <!--  描述性标签  -->
    
     <title>Hello</title> <!--标题栏-->
</head>

    <body> <!--网页体-->
    
    <!--这里的内容显示到网页上-->
    这是我的第一个HTML页面
    
    </body>
</html>
  • Pengisytiharan teratas <br>

    • Pengisytiharan ialah komponen pertama dokumen dan terletak di bahagian atas daripada dokumen tersebut.

    • Teg ini memberitahu penyemak imbas spesifikasi HTML yang digunakan.

  • bermula dengan dan berakhir dengan , dan mengandungi teg pengepala dan teg badan di tengah

Format sintaks teg HTML

Secara amnya, teg HTML terdiri daripada teg permulaan, atribut, kandungan dan teg akhir teg tidak sensitif huruf besar dan kecil tetapi nilai kebanyakan atribut perlu peka huruf besar-kecil, seperti yang ditunjukkan di bawah:

	  属性
	   ↓
<div class="foo">PHP中文网</div>
 ↑            ↑           ↑
开始标签        内容   结束标签

Selain atribut kelas, teg mula juga boleh mengandungi atribut lain maklumat, seperti id, tajuk, dan lain-lain, yang akan kita bincangkan kemudian Beri penjelasan.

Perhatikan bahawa walaupun teg HTML tidak sensitif huruf besar dan kecil dalam sintaks, demi penyeragaman dan profesionalisme, adalah amat disyorkan untuk sentiasa menggunakan huruf kecil apabila mentakrifkan teg.

Apabila menggunakan penyemak imbas untuk membuka dokumen HTML yang kami tulis, penyemak imbas akan membaca kandungan dalam dokumen dari atas ke bawah dan memaparkan kandungan dalam teg dalam penyemak imbas berdasarkan tag HTML dan atribut di dalam kapal.

Dokumen HTML mesti mempunyai beberapa teg asas agar penyemak imbas dapat membezakan antara teks biasa dan dokumen HTML. Anda boleh menggunakan sebarang bilangan teg bergantung pada kesan yang ingin anda capai, tetapi terdapat beberapa perkara yang perlu diberi perhatian:

  • Semua teg HTML mesti diletakkan dalam kurungan sudut

  • Teg yang berbeza dalam HTML boleh mencapai kesan yang berbeza

  • Jika teg tertentu digunakan, ia mesti diakhiri dengan teg penutup yang sepadan; (Kecuali Autisme dan Tag).

Penutup sendiri dan teg

Sesetengah teg HTML tidak mempunyai teg penutup yang berasingan, tetapi tambah / dalam teg pembukaan untuk menutupnya . Label sedemikian dipanggil autistik dan pelabelan. Sila lihat contoh berikut:

<img src="./logo.png" alt="C语言中文网Logo" />  <!-- 图像 -->
<hr />  <!-- 分割线 -->
<br />  <!-- 文本换行 -->
<input type="text" placeholder="请输入内容" />  <!-- 文本输入框 -->

Teg penutup tidak perlu mengelilingi kandungan, jadi tidak perlu untuk teg penutup yang berasingan. Hanya sebilangan kecil teg HTML yang ditutup sendiri.

<!-- --> mewakili ulasan HTML, digunakan untuk menerangkan kod HTML Penyemak imbas akan mengabaikan kandungan ulasan, jadi pengguna tidak dapat melihat ulasan pada halaman web

Konsep dan penggunaan atribut HTML

Apakah itu atribut

Atribut boleh disediakan untuk Tag HTML Beberapa maklumat tambahan, atau pengubahsuaian pada tag HTML. Atribut perlu ditambahkan dalam teg permulaan Format sintaks ialah:

attr="value"

attr mewakili nama atribut dan value mewakili nilai atribut. Nilai atribut mesti dikelilingi oleh petikan berganda "" atau petikan tunggal &#39;&#39;.

Perhatikan bahawa walaupun petikan berganda dan petikan tunggal boleh mengelilingi nilai atribut, demi penyeragaman dan profesionalisme, sila gunakan petikan berganda sebanyak mungkin.

Teg tidak boleh mempunyai atribut, atau boleh mempunyai satu atau lebih atribut.

Contoh penggunaan atribut HTML:

<p id="user-info" class="color-red">
欢迎 <font color="red" size="3">Tom</font> 来到PHP中文网。
<p>

Atribut khas

Terdapat banyak atribut HTML, yang boleh dibahagikan secara kasar kepada dua kategori:

Sesetengah atribut digunakan pada kebanyakan atau semua teg HTML, kami memanggil atribut ini sebagai atribut universal;

Teg Satu artikel menerangkan tag HTML dan atribut secara terperinci (analisis ringkas struktur utama) dalam HTML mempunyai dua atribut khas, src dan alt; teg 🎜>

Penjelasan kod:

<img src="./logo.png" alt="PHP中文网Logo" width="100"    style="max-width:90%">
<a href="http://c.biancheng.net/" target="_blank">PHP中文网</a>

Satu artikel menerangkan tag HTML dan atribut secara terperinci (analisis ringkas struktur utama) Atribut src dalam teg digunakan untuk menentukan laluan imej dan atribut alt digunakan untuk menentukan maklumat perihalan imej Apabila imej tidak normal, ia tidak boleh Apabila dipaparkan secara normal, maklumat dalam alt akan dipaparkan. Atribut href bagi teg

Selain atributnya sendiri, HTML juga membenarkan kami menyesuaikan atribut Walaupun atribut ini boleh dikenali oleh penyemak imbas , Tetapi ia tidak akan menambah sebarang kesan khas Kami perlu menggunakan CSS dan JavaScript untuk memproses atribut tersuai dan menambah gaya atau gelagat tertentu pada teg HTML. Atribut

digunakan untuk menyimpan data tersuai yang digunakan di belakang halaman peribadi. Ia adalah atribut baharu dalam HTML5.

data-*

sesuatu nilai: Tentukan nilai atribut (rentetan)
<element data-*="somevalue">

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。

data-* 属性由以下两部分组成:

  • 属性名不要包含大写字母,在 data- 后必须至少有一个字符。

  • 属性值,该属性值可以是任何字符串

注意: 自定义属性前缀 "data-" 会被客户端忽略。

利用dataset可以获取data-属性构造的对象,该方法目前只能在Chrome 、Opera等部分浏览器中实现,其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

这个data属性还可以应用在CSS中,前提是你的浏览器支持after伪类,以及content的attr属性(低版本的IE不支持):

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>
#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

如何获取data属性的值?

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

1、使用getAttribute来获取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

2、使用Html5自定义属性对象Dataset来获取

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

注意:带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor。例如data属性为data-other-attribute,则我们要获取相应的值可以使用:myp.dataset.otherAttribute

如果Html元素定义了多个自定义属性,如何获取?

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

1、使用循环遍历

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == &#39;data-&#39;) {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

2、使用dataset属性

var expense = document.getElementById(&#39;myDiv&#39;).dataset;

注:dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1)、让所有的自定义的属性值塞到一个数组中

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

2)、删掉一个data属性

delete myDiv.dataset.attribute;

3、增加一个data属性

myDiv.dataset.attribute4 = &#39;value4&#39;;

dataset的兼容性处理

如果浏览器不支持dataset,有必要做一下兼容处理:

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
  var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
  var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

结语:

使用dataset操作data 要比使用getAttribute速度稍微慢些,虽然使用dataset不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的。

通用属性介绍

HTML 标签中有一些通用的属性,如 id、title、class、style 等,这些通用属性可以在大多数 HTML 标签中使用,下面来简单介绍一下它们的用法。

1) id

id 属性用来赋予某个标签唯一的名称(标识符),当我们使用 CSS 或者 JavaScript 来操作这个标签时,就可以通过 id 属性来找到这个标签。

为标签定义 id 属性可以给我们提供很多便利,比如:

如果标签中带有 id 属性作为唯一标识符,通过 id 属性可以很方便的定位到该标签;

如果 HTML 文档中包含多个同名的标签,利用 id 属性的唯一性,可以很方便的区分它们。

注意:在一个 HTML 文档中 id 属性的值必须是唯一的。

示例代码如下所示:

<input type="text" id="username" />
<div id="content">PHP中文网</div>
<p id="url">https://www.php.cn/</p>

2) class

与 id 属性类似,class 属性也可以为标签定义名称(标识符),不同的是 class 属性在整个 HTML 文档中不必是唯一的,我们可以为多个标签定义相同的 class 属性值。另外,还可以为一个 HTML 标签定义多个 class 属性值,如下所示:

<div class="className1 className2 className3"></div>
<p>PHP中文网</p>
<div>https://www.php.cn/</div>

当使用 CSS 或者 JavaScript 来操作 HTML 标签时,同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的,所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。

3) title

title 属性用来对标签内容进行描述说明,当鼠标移动到该标签上方时会显示出 title 属性的值,如下例所示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <a href="https://www.php.cn/" title="HTML教程">HTML教程</a>
</body>
</html>

运行结果如下图所示:

Satu artikel menerangkan tag HTML dan atribut secara terperinci (analisis ringkas struktur utama)

将鼠标在链接处悬停片刻才能看到提示框。

4) style

使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式,例如设置文本的颜色、字体等,如下例所示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <p style="color:red;">https://www.php.cn/</p>
    <img src="./logo.png"   style="max-width:90%" alt="PHP中文网LOGO">
    <div style="padding:10px;border:2px solid #999;text-align:center;">PHP中文网</div>
</body>
</html>

运行结果如下图所示:

Satu artikel menerangkan tag HTML dan atribut secara terperinci (analisis ringkas struktur utama)

标签中常用的标签

1、 标签</strong></p><p><title> 标签用来定义 HTML 文档的标题,只有包含 <title> 标签的文档才算是一个有效的 HTML 文档。另外,一个 HTML 文档中仅允许存在一个 <title> 标签,并且 <title> 标签必须放置在 <head> 标签中。</p><p><strong>2、<base> 标签</strong></p><p><base> 标签用于为页面中所有相对链接指定一个基本链接,当您设置了基本链接后,当前页面中的所有相对链接都会使用这个基本链接作为前缀,如下例所示:</p><p><strong>3、<link> 标签</strong></p><p><link> 标签经常用于引用外部 CSS 样式表,<link> 标签中包含两个主要的属性,分别是 rel 和 href。rel 属性用来指示引用文件的类型,href 属性用来设置外部文件的路径。示例代码如下:</p><pre class="brush:html;toolbar:false"><link rel="stylesheet" href="common.css"></pre><p><strong>4、<style>标签</strong></p><p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式,需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下:</p><pre class="brush:html;toolbar:false"><style> body { background-color: YellowGreen; } h1 { color: red; } </style></pre><p><strong>5、<meta> 标签</strong></p><p><meta> 标签用于提供有关 HTML 文档的元数据,例如页面有效期、页面作者、关键字列表、页面描述等信息。<meta> 标签定义的数据并不会显示在页面上,但却会被浏览器解析。</p><p><strong>6、<script> 标签</strong></p><p><script> 标签用于定义 JavaScript 脚本,示例代码如下:</p><pre class="brush:html;toolbar:false"><script> document.write("PHP中文网") </script></pre><p><strong>7、<noscript> 标签</strong></p><p>当用户的浏览器不支持 JavaScript 脚本或者禁用 JavaScript 脚本时,可以在 <noscript> 标签中定义一些内容来替代不能运行的 JavaScript 脚本或者给用户一些提示。除了 <script> 标签外,在 <noscript> 标签中可以包含任何 HTML 元素</p><p><strong><span style="font-size: 18px;">HTML注释标签<code><!-- --></p> <p>在 HTML 中您可以使用<code><!-- --></code>在代码中添加注释,<code><!--</code>和<code>--></code>之间的所有内容都会被视为注释。示例代码如下:</p><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <!-- head 开始 --> <head> <meta charset="UTF-8"> <!-- 当前文档采用UTF-8编码 --> <title>HTML注释的写法</title> </head> <!-- head 结束 --> <!-- body 开始 --> <body> <!-- 一段文本 --> <p>欢迎来到PHP中文网</p> </body> <!-- body 结束 --> </html></pre><p><img src="https://img.php.cn/upload/image/659/984/226/1659436774839636.png" title="1659436774839636.png" alt="Satu artikel menerangkan tag HTML dan atribut secara terperinci (analisis ringkas struktur utama)"></p> <p>注释可以出现在 HTML 文档的任意位置,包括文档开头、文档末尾、文档中间、标签外部、标签内容中等。</p> <p>相关推荐:《<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p> </blockquote><p>Atas ialah kandungan terperinci Satu artikel menerangkan tag HTML dan atribut secara terperinci (analisis ringkas struktur utama). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">ajax</a> <a href="javascript:void(0);">chrome</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">标识符</a> <a href="javascript:void(0);">字符串</a> <a href="javascript:void(0);">循环</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">对象</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">href</a> <a href="javascript:void(0);">样式表</a> <a href="javascript:void(0);">伪类</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan:</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya:<a class="dBlack" title="Bahasa Penanda Hiperteks HTML - Di manakah hiper? (analisis dokumen)" href="http://m.php.cn/ms/faq/494577.html">Bahasa Penanda Hiperteks HTML - Di manakah hiper? (analisis dokumen)</a></span><span>Artikel seterusnya:<a class="dBlack" title="Bahasa Penanda Hiperteks HTML - Di manakah hiper? (analisis dokumen)" href="http://m.php.cn/ms/faq/494583.html">Bahasa Penanda Hiperteks HTML - Di manakah hiper? (analisis dokumen)</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/494419.html" title="Adakah html5 menyokong format wmv?" class="aBlack">Adakah html5 menyokong format wmv?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/494475.html" title="Apakah dua jenis teg yang terkandung dalam HTML5?" class="aBlack">Apakah dua jenis teg yang terkandung dalam HTML5?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/494479.html" title="Teg HTML5 yang tidak boleh dibalut" class="aBlack">Teg HTML5 yang tidak boleh dibalut</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/494530.html" title="Bolehkah terdapat pelbagai bentuk dalam html5?" class="aBlack">Bolehkah terdapat pelbagai bentuk dalam html5?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/494577.html" title="Bahasa Penanda Hiperteks HTML - Di manakah hiper? (analisis dokumen)" class="aBlack">Bahasa Penanda Hiperteks HTML - Di manakah hiper? (analisis dokumen)</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!</p></div><div class="footermid"><a href="http://m.php.cn/ms/about/us.html">Tentang kita</a><a href="http://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="http://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>