Domanda:
Strumento che mostra la struttura dei documenti HTML5
unor
2014-02-05 07:17:29 UTC
view on stackexchange narkive permalink

La specifica HTML5 definisce un algoritmo per la creazione di una struttura del documento.

Sto cercando strumenti che seguano esattamente questo algoritmo e mostra la struttura . Essere in grado di esportare la struttura come testo sarebbe bello, ma non è necessario.

Lo strumento dovrebbe supportare almeno uno di questi modi per inserire un documento HTML5:

  • tramite URL HTTP (recuperandolo dal Web)
  • tramite input diretto (incollando l'intero documento HTML)

Non importa quale tipo di strumento (stand- da solo o integrato in browser, editor di testo, ...; per desktop, mobile o server; GUI o basato su testo), ma per favore nessun servizio web (che non può essere installato sul mio server).

Tre risposte:
#1
+5
braveterry
2014-02-07 02:40:04 UTC
view on stackexchange narkive permalink

Dai un'occhiata all'estensione di Google Chrome HTML5 Outliner. Questo strumento è disponibile anche come bookmarklet, JavaScript, estensione Opera e un'estensione Firebug sperimentale: https://code.google.com/p/h5o/.

HTML5 Outliner tooltip UI

Sembra che questo strumento sia disponibile anche come bookmarklet, JavaScript, estensione per Opera e un'estensione sperimentale per Firebug: http://code.google.com/p/h5o/ - Le ultime [versioni] (http: // code. google.com/p/h5o/downloads/list) sembrano essere del 2010, però; ma poi non so se l'algoritmo di struttura sia stato cambiato in questo periodo.
@braveterry aggiungeresti le informazioni del commento di unors alla risposta in modo che sia meglio visibile (non tutti gli utenti leggono i commenti)
L'ho appena testato (estensione Chromium e bookmarklet). Sembra funzionare alla grande per la maggior parte dei casi, ma non segue correttamente l'algoritmo al 100%. Esempi: (1) Gli elementi con l'attributo `hidden` non dovrebbero contribuire alla struttura, ma in h5o lo fanno. (2) L'elemento `dialog` è una radice di sezionamento, ma h5o non lo gestisce in questo modo.
Solo un nome, un collegamento e uno screenshot non sono una buona risposta. Si prega di consultare [questo meta post] (http://meta.softwarerecs.stackexchange.com/q/356/185) riguardo a quella che è considerata una risposta di alta qualità su questo sito.
Sebbene questo possa teoricamente rispondere alla domanda, [sarebbe preferibile] (http://meta.stackexchange.com/q/8259) includere qui le parti essenziali della risposta e fornire il collegamento per riferimento.
#2
+5
unor
2014-03-10 17:35:15 UTC
view on stackexchange narkive permalink

HTML5 Outliner è disponibile come bookmarklet e file JavaScript. (È disponibile anche una demo online.)

Quando fai clic sul bookmarklet, il contorno viene sovrapposto alla pagina (in posizione fissa). Facendo clic in un punto qualsiasi della pagina (o di nuovo sul bookmarklet) si nasconde lo schema.

Licenza

È concesso in licenza con WTFPL (Versione 2), quindi è software libero (ma non software open source).

Esempio

Ecco un esempio utilizzato nell'articolo di Wikipedia Stack Exchange :

HTML5 Outliner: overlayed outline

Funzionalità

Facendo clic su una voce scorre la pagina all'intestazione / sezione corrispondente.

Puoi cambiare la numerazione da livello singolo (predefinito, vedi screenshot) a multilivello ( 1 , 1.7 , 1.7.1 ,…). Può anche essere disabilitato.

Puoi disabilitare la funzionalità che facendo clic in un punto qualsiasi della pagina nasconde la struttura (quindi dovresti fare clic sul pulsante bookmarklet di nuovo per nasconderlo).

È possibile abilitare suggerimenti , contenenti dettagli tecnici (ad esempio, quale elemento di sezionamento e / o elemento di intestazione viene utilizzato).

I colori delle voci (così come altri CSS) possono essere modificati facilmente.

#3
+2
sideshowbarker
2015-09-23 02:27:23 UTC
view on stackexchange narkive permalink

L'attuale codice di backend del W3C HTML Checker ha una funzione Mostra struttura che è conforme all'algoritmo di struttura nelle specifiche HTML.

I hai scritto istruzioni su come eseguire facilmente la tua istanza del checker in locale.

Puoi scaricarla ed eseguirla in pochi minuti (se non secondi) con solo due comandi :

  wget https://sideshowbarker.net/releases/jar/vnu.jarjava -cp ./vnu.jar nu.validator.servlet.Main 8888  

Quindi apri http: // localhost: 8888 / nel tuo browser e avrai un modulo che puoi utilizzare per controllare i documenti specificando i loro URL o tramite caricamento di file.

Per ottenere una struttura per un documento, seleziona la casella di controllo struttura in quel modulo.



Questa domanda e risposta è stata tradotta automaticamente dalla lingua inglese. Il contenuto originale è disponibile su stackexchange, che ringraziamo per la licenza cc by-sa 3.0 con cui è distribuito.
Loading...