Magento2开发教程NO6-Magento2开发编码规范

<section id="information-dialog-tree">    <p> ... </p>    <p> ... </p> </section> <a href="#information-dialog-tree">Scroll to text</a></a>

<section id="заголовок">    <p> ... </p>    <p> ... </p> </section> <section id="some_id">    <p> ... </p>    <p> ... </p> </section> <a href="#some_id">Scroll to text</a>

<ul>    <li class="first" type="button" aria-pressed="false" aria-controls="some-id">button 1</li>    <li type="button" aria-pressed="false" aria-controls="some-id">button 2</li>    <li type="button" aria-pressed="true" aria-controls="some-id">button 3</li> </ul> <div>    <label for="some-id">Enter text</label>    <textarea id="some-id"></textarea> </div> <a href="#some-id">Scroll to text</a>

<ul id="my-special-menu">    <li id="buttonId1" class="first" type="button">button 1</li>    <li id="buttonId2" type="button">button 2</li>    <li id="buttonId3" type="button">button 3</li> </ul>

$('#my-special-menu').on('click','li[id^="button"]', function() { ... })

#my-special-menu { ... } #my-special-menu > li { ... }

<p>HTML has been created to <b>semantically</b> represent documents.</p> <p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>

<p>HTML has been created to <strong>semantically</strong> represent documents.</p> <p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>

.notices-wrapper { ... } .page-header:after { ... } .payment-list:first-child { ... } .caution { ... } .caution.link { ... } form input[type="password"] { ... } .control-text:focus { ... } a:hover { ... } nav li._active { ... }

#header { ... } [data-action="delete"] { ... } form input[name="password"] { ... } section[role="main"] { ... } [role="menu] [role="menuitem"] { ... } [role="menu] [role="menuitem"].active { ... }

...    options: {       hOffset: 0,       myCustomElement: '[data-container="my-custom-element"]',  hiddenClass: '_hidden'   } ...    this.element.toggleClass(this.options.hiddenClass); ...    this.options.hOffset = /* calculation based on dimensions of some DOM elements within a widget */    this.element.find(this.options.myCustomElement).css({'margin-top', this.options.hOffset + 'px'}) ...

this.element.on('click', function() {    if ($(this).is(':visible')) {       $(this).css({ visibility: 'hidden' });    } else {       $(this).css({ visibility: 'visible' });    } });

<div class="no-display"> ... </div>

<div style="display: none;"> ... </div>

  $this->get(ClassName::class);

  $this->get(\Magento\Path\To\Class::class);

<ul>     <li>One</li>     <li>Two</li> </ul>

<br> <img src="image.png" alt="image"> <input type="text" name="username">

<br /> <img src="image.png" alt="image" /> <input type="text" name="username" />

<input data-bind="attr: { id: 'cart-item-'+item_id+'-qty', 'data-cart-item': item_id, 'data-item-qty': qty }, value: qty" type="number" size="4" class="item-qty cart-item-qty" maxlength="12"/>

<input data-bind="attr: {        id: 'cart-item-'+item_id+'-qty',        'data-cart-item': item_id,        'data-item-qty': qty        }, value: qty"        type="number"        size="4"        class="item-qty cart-item-qty"        maxlength="12"/>

<link rel = "stylesheet" href = "styles.css">

<link rel="stylesheet" href="styles.css">

<span data-bind="i18n : 'Update'"></span> <span data-bind="i18n:'Update'"></span>

<span data-bind="i18n: 'Update'"></span>

<button type="submit" class="button-green">Submit</button>

<button type="submit" class="action-primary">Submit</button>