跟著視頻學習了HTML5,簡要記錄一下學習的筆記。
基礎標簽學習
H系列標簽(Header1~Header6)
-作用:
-用于給文本添加標題語義
-格式 :
<h 1>xxxxxxx</h1>(注釋:h和1之間加了空格,原因是不加,簡書就只顯示XXXX了,淚奔~,)
-注意點:
-用來給文本添加標題語義的,而不是用來修改文本的樣式的
-H標簽一共有六個,從H1~H6.最多只能到六個,超過六個則無效。
-被H系列標簽包裹的內容會獨占一行
—在H系列的標簽中,H1最大,H6最小
—在企業開發中,要慎用H系列的標簽,特別是H1標簽,開發中一般情況下一個界面中只能出現一個H1標簽(與SEO有關)
P標簽(Paragraph)
-作用:
—告訴瀏覽器哪些文字是一個段落
-格式:
< p>xxxxxx</p >
-注意點:
-在瀏覽器中會單獨占一行
Hr標簽(Horizontal Rule)
-作用:
-在瀏覽器中添加一條分割線
-格式:
或者<hr />
-注意點:
-在瀏覽器會單獨占一行
-/可以寫,也可以不寫。
快捷鍵:
-如何在WebStorm中讓光標在多行中閃爍
——按住鍵盤上的Alt鍵不放,然后在按住鼠標的左鍵不放,然后拖動鼠標即可
-如何在WebStorm中快速的復制光標所在的那一行
—— 按住鍵盤上的Ctr+D
-如何在WebStorm中快速的刪除光標所在的那一行
—— 按住鍵盤上的Ctr+X
-如何在WebStorm中讓標簽包裹一段內容,也就是自動在一段內容前后加上標簽
—— 按下鍵盤上的Ctr+Alt+T,然后按下回車,然后輸入對一個的標簽即可
注釋
-格式:
<!—xxxxxxx —>
-快捷鍵: Ctrl+/
img標簽
-作用:告訴瀏覽器顯示一張圖片
img 標簽 格 式:< img src=“”> 即image source的縮寫
-注意點:
-img標簽不會單獨占一行
-兩個屬相:width:寬度、height:高度
-如果img標簽沒有指定需要顯示的圖片的寬高,則系統會按照圖片默認的寬高來顯示,如果img標簽指定寬高,則系統會按照指定的寬高顯示。
-指定寬高,可能導致圖片變形;
-如果不想讓圖片變形,只需指定img的寬和高其中一個值即可,只要指定了高度,系統會自動根據高度計算出寬度,反之自動計算高度,且都是等比拉伸,也就說不會變形。
-title,用于告訴瀏覽器,當鼠標懸停在圖片上時,需要彈出的描述框中顯示什么內容;alt,是alternate的縮寫,交換的意思,作用是告訴瀏覽器當需要顯示的圖片找不到時顯示的內容。
br標簽
-作用:換行
-格式:
< br>
-注意點:
-多個br標簽可以連續使用,使用幾個就換幾行
-br標簽是不另起一個段落換行,在開發中一般情況下需要換行都是因為需要另起一段落,所以在企業開發中很少使用br標簽