HTML（菜鸡视角）
heading
<h>? 標題? </h>
多級標題時：<h1>? <h2>......級聯
Paragraph
<p> 段落內容? </p>
Note！
<!--? ?注釋內容? ?-->
Element
<main>? ?主要內容? ?</main>
image
<img src="圖片地址"? alt="圖片描述">
img表示顯示的是圖片image
src表示圖片是從哪里來的source
alt表示用文字描述一下圖片內容，這樣開發(fā)時就不用盯著圖片地址而不知道這里放的是啥圖片了
還有作用就是當網絡不好，圖片加載不出來時，那個破損圖標旁會顯示alt內容表示用文字將圖片替換alternate
anchor
外部跳轉
<a href="跳轉目的地的地址"> 網頁顯示內容 </a>
初次看到這個簡寫的a很奇怪，anchor錨用在這里干啥。但想了想游戲中傳送錨點，口袋錨點（原來你也玩原神）就想通了，不就是用來傳送的嗎，游戲中傳送人物，這里就是傳送到目的網頁
網頁顯示內容：是可點擊的，相當于超鏈接？點一下就相當于跳轉至href的目的地址
href：Hypertext Reference這是啥，不用管，反正我就記成“here from”，反正就是記錄這里的跳轉內容是從哪里來的
內部跳轉
<a? ?href="# 目的id ">contacts </a>
<h2? id? ?="? ?目的id ">contacts </a>
點擊contacts區(qū)域就會跳轉到“目的id”的位置
🐖：target=“_blank”要刪掉，不然會在新標簽頁打開
occupation
目的不確定時用? href=“#”此時不跳轉
image anchor
建立圖片鏈接
<a href = "#“><img src=""></a>
這樣點擊圖片就是一個超鏈接，跳轉至目的地了
unordered list
無序列表
<ul><li>sth1</li><li>sth2</li> </ul><li>的內容是并列的
ordered list
有序列表
<ol><li>sth1</li><li>sth2</li> </ol><li>的內容是自動排序的
?input
<input type = "text">
創(chuàng)建text類型的輸入框
占位
placeholder="默認值"
?form
創(chuàng)建發(fā)送給服務器的表單form
<form action="/url-where-you-want-to-submit-form-data"><input type="text" required><button type="submit">Submit</button> </form>按一下button按鈕，填入input的內容就發(fā)給服務器了
required表示這是必填項哦，不填就按button會被提醒
radio button
單選按鈕
<label> <input type="radio" name="indoor-outdoor">Indoor </label> <label> <input type="radio" name="indoor-outdoor">Outdoor </label>每個選項由標簽label包裹，type=radio表明單選的身份，相同的name表示選了一個剩下的就不能再選了
checkbox
復選框，多選題
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label> <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label> <label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label>for代表這個空就是for為了相對應的id準備的
🐖：①value = "id"可讓發(fā)送的數據更直觀，否則默認為on。
? ? ? ? ②在input中添加checked表示為默認選中
divide
用<div>內容</div>劃分內容
網頁結構
html?的結構主要分為兩大部分：head?和?body。 網頁的描述應放入?head?標簽， 網頁的內容（向用戶展示的）則應放入?body?標簽。
比如?link、meta、title?和?style?都應放入?head?標簽。
<!DOCTYPE html> <html><head><meta /></head><body><div></div></body> </html>main
標簽用于呈現網頁的主體內容，且每個頁面應只有一個。 這是為了圍繞與頁面中心主題相關的信息， 而不應包含如導航連接、網頁橫幅等需要在多個頁面中重復出現的內容。
main?標簽也有一個內嵌的特性，以便輔助技術快速定位到頁面的主體。 如果你在頁面頂部看到過“跳轉到主要內容”鏈接，那么使用?main?標簽會自動讓輔助設備具有這個跳轉的功能。
<div>?- 一組內容
?<section>?- 幾組相關的內容?
<article>?- 幾組獨立的內容
?header?也是一個具有語義化的、可以提升頁面可訪問性的 HTML5 標簽。 它可以為父級標簽呈現簡介信息或者導航鏈接，適用于那些在多個頁面頂部重復出現的內容。header?應當在 HTML 文檔的?body?標簽內使用。 它與包含頁面標題、元信息的?head?標簽不同。
nav（navigation）?也是一個具有語義化特性的 HTML5 標簽，它可以使屏幕閱讀器快速識別出頁面中的導航信息。 它用于呈現頁面中的主導航鏈接。
footer?元素也具有語義化的特性，可以讓輔助工具快速定位到它。 它位于頁面底部，用于呈現版權信息或者相關文檔鏈接。
HTML5 引入了?figure?標簽以及與之相關的?figcaption?標簽。 它們一起用于展示可視化信息（如：圖片、圖表）及其標題。 這樣通過語義化對內容進行分組并配以用于解釋?figure?的文字，可以極大地提升內容的可訪問性。
fieldset?標簽包裹整組單選按鈕，實現這個功能。 它經常使用?legend?標簽來提供分組的描述，以便屏幕閱讀器用戶會閱讀?fieldset?元素中的每個選項。
當選項的含義很明確時，如“性別選擇”，fieldset?與?legend?標簽可以省略。 這時，使用包含?for?屬性的?label?標簽就足夠了。
HTML5 規(guī)范添加了?date?類型來創(chuàng)建日期選擇器。 如果瀏覽器支持，在點擊?input?標簽時，日期選擇器會顯示出來，這讓用戶填寫表單變得更加容易。
datetime?屬性包含的有效格式。 輔助設備可以獲取這個值。 這個屬性也有助于避免混亂，因為它規(guī)定了時間的標準化版本，甚至可以在文本中以非正式的方式或學術方式使用它。
.sr-only
當信息為視覺格式（例如圖表）時，但屏幕閱讀器用戶需要備用文稿（例如表格）來訪問數據，在這種情況下， 使用 CSS 將屏幕的只讀元素放到瀏覽器窗口可視區(qū)域之外。
- display: none;?或?visibility: hidden;?會把內容徹底隱藏起來，屏幕閱讀器也無法獲取這些內容。
- 如果把值設置為 0px，如?width: 0px; height: 0px;，意味著讓元素脫離文檔流，這樣做同樣也會讓屏幕閱讀器忽略此元素。
?accesskey
用于指定激活元素或者使元素獲得焦點的快捷鍵。使用Alt +?accessKey?(或者 Shift + Alt +?accessKey) 來訪問帶有指定快捷鍵的元素。
tabindex
利用tab聚焦導航
@media
@media (max-width: 100px) { /* CSS Rules */ }當設備寬度小于或等于?100px?時返回內容：
自適應
設置?max-width?值為?100%?可確保圖片不超出父容器的范圍；設置?height?屬性為?auto?可以保持圖片的原始寬高比。
除了使用?em?或?px?設置文本大小，你還可以用視窗單位來做響應式排版。 視窗單位和百分比都是相對單位，但它們是基于不同的參照物。 視窗單位是相對于設備的視窗尺寸（寬度或高度），百分比是相對于父級元素的大小。
四個不同的視窗單位分別是：
- vw：如?10vw?的意思是視窗寬度的 10%。
- vh：?如?3vh?的意思是視窗高度的 3%。
- vmin：?如?70vmin?的意思是視窗的高度和寬度中較小一個的 70%。
- vmax：?如?100vmax?的意思是視窗的高度和寬度中較大一個的 100%。
?
總結
以上是生活随笔為你收集整理的HTML（菜鸡视角）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数学建模方法总结
- 下一篇： QT学习：网络应用开发练习（简单网页浏览