


【HTML基礎(chǔ)】頂級(jí)元素、塊元素、內(nèi)聯(lián)元素、可變?cè)?、元素屬性_html/css_WEB-ITnose
Jun 24, 2016 pm 12:34 PM
頂級(jí)元素:
說(shuō)明:頂級(jí)元素表現(xiàn)如塊,屬于高級(jí)塊元素。
例如:html,body,frameset塊元素:
特點(diǎn):獨(dú)占一行,寬(100%)、高、行高、padding、margin可控div 常用于布局p 段落h1~h6 標(biāo)題ol{li} 有序列表ul{li} 無(wú)序列表dl{dt,dd} 自定義列表table{tr,th,td,thead,tbody,tfoot,caption,col,colgroup} 表格form 表單pre 預(yù)文本格式address 地址blockquote 塊引用fieldset{legend} 控件組hr 水平線menu{li} 菜單列表noscriptlegend 定義fieldset標(biāo)題 HTML5新增:section 區(qū)塊article 文章塊aside 除主要內(nèi)容外的內(nèi)容塊header 頁(yè)眉footer 頁(yè)腳nav 導(dǎo)航hgroup{h1~h6} 標(biāo)題組合audio{source} 音頻video{source} 視頻canvas 圖形datalist{option} 下拉列表單details 元素細(xì)節(jié)figcaption 定義figure標(biāo)題figure{figcaption} 媒介內(nèi)容分組summary 定義details標(biāo)題已廢棄元素:center,dir,isindex,noframes,frame,frameset內(nèi)聯(lián)元素:
特點(diǎn):不獨(dú)占一行,寬、高、行高、豎向padding、豎向margin不可改變a 鏈接img 圖片input 輸入框span 內(nèi)聯(lián)區(qū)域strong 粗體強(qiáng)調(diào)textarea 多行文本框select{optgroup,option} 下拉菜單label 表單標(biāo)注em 強(qiáng)調(diào)var 定義變量b 粗體i 斜體abbr 縮寫(xiě)bdo 文本顯示方向br 換行cite 引用code 代碼dfn 項(xiàng)目kbd 鍵盤(pán)文本q 短引用samp 樣本代碼small 旁注,小字體文本sub 下標(biāo)sup 上標(biāo)HTML5新增:bdi 文本方向,脫離周圍文本方向command 命令按鈕keygen 密鑰mark 突出顯示文本meter 預(yù)定義范圍度量output 定義輸出類型progress 進(jìn)度條ruby 定義ruby注釋rt 定義ruby注釋解釋rp 不支持ruby顯示的內(nèi)容time 日期/時(shí)間source 定義媒體元素的媒介資源 track 定義媒體元素的文本軌道已廢棄元素:acronym,big,font,s,strike,tt,u,xmp可變?cè)兀?
說(shuō)明:可變?cè)馗鶕?jù)上下文確定該元素是塊元素還是內(nèi)聯(lián)元素。
button 按鈕del 刪除文本iframe 頁(yè)面嵌入ins 插入文本map{area} 圖像區(qū)塊object object對(duì)象script 客戶端腳本HTML5新增:embed 外部交互內(nèi)容或插件已廢棄元素:applet其他元素:
<!-- --> 定義注釋<!DOCTYPE> 文檔類型html 定義html文檔meta 元信息base 頁(yè)面默認(rèn)urlhead 文檔信息link 資源引用style 定義樣式已廢棄元素:basefont元素屬性:
id 元素唯一名class 元素類名title 提示信息style 內(nèi)聯(lián)樣式lang 語(yǔ)言編碼tabindex tab鍵控制次序{number}dir 內(nèi)容文本想法{ltr,rtl}accesskey 規(guī)定訪問(wèn)元素的鍵盤(pán)快捷鍵{character}HTML5新增:contenteditable 是否允許編輯內(nèi)容{true,false}contextmenu 規(guī)定元素上下文菜單{id}data-value 自定義屬性draggable 是否允許拖動(dòng){true,false}hidden 規(guī)定該元素?zé)o關(guān){hidden}item 組合元素{empty,url}itemprop 組合項(xiàng)目{url,group,value}spellcheck 是否對(duì)元素進(jìn)行拼寫(xiě)或語(yǔ)法檢查{true,false}subject 規(guī)定元素對(duì)應(yīng)的項(xiàng)目{id}

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Pour utiliser des éléments de bouton HTML pour réaliser des boutons cliquables, vous devez d'abord ma?triser son utilisation de base et ses précautions communes. 1. Créer des boutons avec des balises et définir les comportements via des attributs de type (tels que le bouton, soumettre, réinitialiser), qui est soumis par défaut; 2. Ajouter des fonctions interactives via JavaScript, qui peuvent être écrites en ligne ou lier les écouteurs d'événements via ID pour améliorer la maintenance; 3. Utilisez CSS pour personnaliser les styles, y compris la couleur d'arrière-plan, la bordure, les coins arrondis et les effets de survol / statut actif pour améliorer l'expérience utilisateur; 4. Faites attention aux problèmes communs: assurez-vous que l'attribut désactivé n'est pas activé, les événements JS sont correctement liés, la mise en page d'occlusion et utilisent l'aide des outils de développement pour dépanner les exceptions. Ma?triser ceci

Les métadonnées à HTMLhead sont cruciales pour le référencement, le partage social et le comportement du navigateur. 1. Définissez le titre et la description de la page, utilisez et gardez-le concis et unique; 2. Ajoutez des informations sur les cartes OpenGraph et Twitter pour optimiser les effets de partage social, faire attention à la taille de l'image et utiliser des outils de débogage pour tester; 3. Définissez le jeu de caractères et les paramètres de la fenêtre pour s'assurer que le support multi-langues est adapté au terminal mobile; 4. Les balises facultatives telles que l'auteur Copyright, le contr?le des robots et le contenu en double prévention canonique doivent également être configurés raisonnablement.

Toléarnhtmlin2025, chooseAtUtorialthatBalanShands-on -PracticewithModerNstandardsAnd IntegratescsSandjavascriptBasics.1.prioritizehands-onlearningwithstep-by-steprojectsmelindingapersonalprofileorblayout.20

Comment faire des modèles de courrier HTML avec une bonne compatibilité? Tout d'abord, vous devez construire une structure avec des tables pour éviter d'utiliser DIV Flex ou la disposition de la grille; Deuxièmement, tous les styles doivent être inclus et ne peuvent pas compter sur des CS externes; Ensuite, l'image doit être ajoutée avec une description ALT et utiliser une URL publique, et les boutons doivent être simulés avec une table ou un TD avec une couleur d'arrière-plan; Enfin, vous devez tester et ajuster les détails sur plusieurs clients.

L'utilisation de sommes HTML permet une clarté intuitive et sémantique pour ajouter du texte de légende aux images ou aux médias. 1. Utilisé pour envelopper le contenu multimédia indépendant, tels que des images, des vidéos ou des blocs de code; 2. Il est placé comme texte explicatif et peut être situé au-dessus ou en dessous des médias; 3. Ils améliorent non seulement la clarté de la structure de la page, mais améliorent également l'accessibilité et l'effet de référencement; 4. Lorsque vous l'utilisez, vous devez faire attention à éviter les abus et s'appliquer au contenu qui doit être mis en avant et accompagné d'une description, plut?t que des images décoratives ordinaires; 5. L'attribut Alt qui ne peut être ignoré, qui est différent de Figcaption; 6. La figue est flexible et peut être placée en haut ou en bas de la figure au besoin. L'utilisation de ces deux balises aide correctement à créer un contenu Web sémantique et facile à comprendre.

Lorsqu'il n'y a pas de serveur backend, la soumission de formulaire HTML peut toujours être traitée via une technologie frontale ou des services tiers. Les méthodes spécifiques incluent: 1. Utilisez JavaScript pour intercepter les soumissions de formulaires pour réaliser la vérification des entrées et les commentaires des utilisateurs, mais les données ne seront pas persistées; 2. Utilisez des services de formulaire de serveur tiers tels que FormSpree pour collecter des données et fournir des fonctions de notification et de redirection par e-mail; 3. Utilisez LocalStorage pour stocker les données des clients temporaires, ce qui convient à l'enregistrement des préférences des utilisateurs ou à la gestion de l'état de l'application d'une seule page, mais ne convient pas au stockage à long terme d'informations sensibles.

La classe, l'identification, le style, les données et le titre sont les attributs globaux les plus couramment utilisés en HTML. La classe est utilisée pour spécifier un ou plusieurs noms de classe pour faciliter le paramètre de style et les opérations JavaScript; ID fournit des identifiants uniques pour les éléments, adaptés aux sauts d'ancrage et au contr?le JavaScript; Le style permet d'ajouter des styles en ligne, adaptés au débogage temporaire mais pas recommandé pour une utilisation à grande échelle; Data-Properties est utilisé pour stocker des données personnalisées, ce qui est pratique pour l'interaction frontale et back-end; Le titre est utilisé pour ajouter des invites de souris, mais son style et son comportement sont limités par le navigateur. La sélection raisonnable de ces attributs peut améliorer l'efficacité du développement et l'expérience utilisateur.

Le chargement paresseux natif est une fonction de navigateur intégrée qui permet le chargement paresseux des images en ajoutant un attribut chargé = "paresseux" à la balise. 1. Il ne nécessite pas de bibliothèques JavaScript ou tierces et est utilisée directement dans HTML; 2. Il convient aux images qui ne sont pas affichées sur le premier écran sous la page, les modules complémentaires de défilement de la galerie d'images et les grandes ressources d'image; 3. Il ne convient pas aux images avec premier écran ou affichage: aucun; 4. Lorsque vous l'utilisez, un espace réservé approprié doit être réglé pour éviter la gigue de mise en page; 5. Il devrait optimiser le chargement d'image réactif en combinaison avec les attributs SRCSET et tailles; 6. Les problèmes de compatibilité doivent être pris en compte. Certains anciens navigateurs ne le soutiennent pas. Ils peuvent être utilisés grace à la détection des fonctionnalités et combinés avec des solutions JavaScript.
