Home > List of blog posts > html快捷键/属性/标签学习

Blogger Information

Blog 11

fans 0

comment 0

visits 5789

Special Recommendation

More>

Related recommendations

vscode html快捷键

# id属性 div#id
. class属性 div.class
\^ 上级 div^p
> 下级 div>p
+ 同级 div+div
* 多少个 li*3
\$ 序号生成 li.item$*3
\@ 跳过或者倒叙 li.item$@-1*3
{} 内容

html

通用属性

class
id
style
预置属性
alt
title
src
ref
href
…
事件属性 on + click
onclick
onkeydown
onload
…
自定义属性
data-xxx

语义化标签

<header></header>
<main></main>
<footer></footer>
<nav></nav>
...

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css">
    <script src="js" ></script>
</head>
<body>
    <header></header>
    <main>
        <!-- div>table#tid>tr.trclass$*3>td.tdclass$@-1{item$@5}*2+td>img[src]{预置属性}^td>p[style]{通用属性}^td>button[onclick="事件"]{事件属性}^td>div[data-omg]{自定义属性} -->
        <div>
            <table id="tid">
                <tr class="trclass1">
                    <td class="tdclass2">item5</td>
                    <td class="tdclass1">item6</td>
                    <td><img src="" alt="">预置属性</img></td>
                    <td>
                        <p style="">通用属性</p>
                    </td>
                    <td><button onclick="事件">事件属性</button></td>
                    <td>
                        <div data-omg="">自定义属性</div>
                    </td>
                </tr>
                <tr class="trclass2">
                    <td class="tdclass2">item5</td>
                    <td class="tdclass1">item6</td>
                    <td><img src="" alt="">预置属性</img></td>
                    <td>
                        <p style="">通用属性</p>
                    </td>
                    <td><button onclick="事件">事件属性</button></td>
                    <td>
                        <div data-omg="">自定义属性</div>
                    </td>
                </tr>
                <tr class="trclass3">
                    <td class="tdclass2">item5</td>
                    <td class="tdclass1">item6</td>
                    <td><img src="" alt="">预置属性</img></td>
                    <td>
                        <p style="">通用属性</p>
                    </td>
                    <td><button onclick="事件">事件属性</button></td>
                    <td>
                        <div data-omg="">自定义属性</div>
                    </td>
                </tr>
            </table>
        </div>
    </main>
    <footer></footer>
</body>
</html>

Correcting teacher：

autoload

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html快捷键/属性/标签学习

2021-12-21 22:54:52

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

vscode html快捷键

html

通用属性

预置属性

事件属性 on + click

自定义属性

语义化标签

案例