HTMLCSS 超简单的前端设计入门-1!
第一個網(wǎng)頁
文章目錄
- 第一個網(wǎng)頁
- 注釋
- 元素(標(biāo)簽,標(biāo)記)
- 元素的嵌套
- 標(biāo)準(zhǔn)的文檔結(jié)構(gòu)
- 語義化
- 什么是語義化
- 為什么需要語義化?
- 文本元素
- h
- p
- span
- pre
- HTML 實體
- a元素
- href 屬性
- target屬性
- 路徑的寫法
- 站內(nèi)內(nèi)資源和站外資源
- 絕對路徑和相對路徑
- Emmet
注釋
-
注釋不參與運(yùn)行
-
書寫方式(html)
- <!-- comment -->
元素(標(biāo)簽,標(biāo)記)
<a href="http://www.duyiedu.com">杜伊教育</a>-
整體: element
-
element = 起始標(biāo)記(begin tag) + 結(jié)束標(biāo)記(end tag) + 元素內(nèi)容 + 元素屬性
-
屬性的分類
-
- 局部屬性: 某些元素特有屬性
- 全局屬性: 所有元素都有的屬性
-
空元素
- <meta charset="UTF-8">
元素的嵌套
- 父元素,子元素, 后代元素,祖先元素, 兄弟元素
標(biāo)準(zhǔn)的文檔結(jié)構(gòu)
-
HTML: 頁面, html文檔
-
文檔聲明: 告訴瀏覽器當(dāng)前文檔使用的HTML標(biāo)準(zhǔn)為HTML5
-
- <!DOCTYPE html>
-
根元素: 一個頁面最多只有一個,這個元素是其他元素的父元素或者祖先元素
-
- <html lang="en"> .........en --> English, zh-CN(cmn-hans) --> 漢語 </html>
-
lang屬性: language, 全局屬性, 表示該元素內(nèi)部使用的文字是使用哪一種自然語言書寫而成
-
文檔頭: 其內(nèi)部內(nèi)容不會顯示在頁面上
-
- <head> ......... </head>
-
文檔的元數(shù)據(jù): 附加信息
-
- <meta><meta charset="UTF-8"> <!-- charset: 指定網(wǎng)頁內(nèi)容編碼 --><meta http-equiv="X-UA-Compatible" content="IE=edge">內(nèi)核用edge<meta name="viewport" content="width=device-width, initial-scale=1.0">適配手機(jī)端
-
網(wǎng)頁標(biāo)題
-
- <title>Document</title>
-
文檔體:
-
- <body><!-- 超鏈接 --><a href="http://www.duyiedu.com" title="bsdcsjb">杜伊教育</a><h1 title="this is my first page.">第一個網(wǎng)頁</h1><img src="https://img2.baidu.com/it/u=3992703645,2278223385&fm=26&fmt=auto&gp=0.jpg"> </body>
語義化
什么是語義化
- a元素: 超鏈接
- p元素: 段落
- h1元素: 一級標(biāo)題
- 元素展示到頁面中的效果完全由CSS決定
- 瀏覽器帶有默認(rèn)的CSS樣式, 所以每個元素有一些默認(rèn)樣式
- 選擇什么元素取決于內(nèi)容的含義, 而不是顯示出來的效果
為什么需要語義化?
- 搜索引擎: 百度, Bing, Google
- 工作原理: 每隔一段時間抓取頁面的源代碼,
- 安裝插件:閱讀模式, 語音模式
文本元素
h
- <h1> .... <h6>: 表示一級到六級標(biāo)題
p
-
段落
-
亂數(shù)假文: 沒有任何實際含義的文字
span
-
無語義, 僅用于樣式的設(shè)計
-
某些元素(塊級元素)顯示時會獨(dú)占一行, 某些元素(行級元素)不會
pre
-
pre:預(yù)格式化文本元素, (無語義)
-
空白折疊: 在源代碼中的空白字符包含: 空格, 換行, 制表, 在頁面顯示時會被折疊為一個空格
-
在pre元素中的內(nèi)容不會出現(xiàn)空白折疊
-
在pre元素中的內(nèi)容會按照源代碼展示, 通常用于顯示一些代碼在網(wǎng)頁上
-
pre元素功能本質(zhì): 有一個默認(rèn)的CSS屬性
-
code元素: 表示代碼區(qū)域, 一般套在 pre元素外面
HTML 實體
- 實體字符, HTML Entity
- 實體字符通常用于在頁面中顯示一些特殊符號
- &單詞
- &#數(shù)字
-
- 小于: < <
- 大于: > >
- 空格:
- 版權(quán)符號:© ?
- 分?jǐn)?shù): ¾ ?
- &符號: &&
a元素
- 超鏈接
href 屬性
-
hyper reference : 通常用于表示跳轉(zhuǎn)地址
- 普通鏈接: 跳轉(zhuǎn)地址 <a href="http://www.baidu.com">百度</a>
- 錨鏈接: 跳轉(zhuǎn)到某個錨點 <a href="#chapter1">章節(jié)1</a> <h2 id="chapter1">章節(jié)1</h2><p>Lorem ipsum dolor sit amet cons<p>
-
id屬性: 全局屬性, 表示元素在文檔中的唯一編號
- 功能鏈接
-
點擊后觸發(fā)某種功能
-
執(zhí)行js代碼
-
- <a href="javascript:alert('hello')">探出:你好</a>
-
發(fā)送郵件(要求有郵件發(fā)送軟件e.g.:exchange)
-
- <a href="mailto:1965503815@qq.com">點擊給我發(fā)送郵件</a>
-
撥號(要求計算機(jī)上安裝有撥號軟件, 或者是移動端訪問)
-
- <a href="tel:183075884">點擊給我打電話</a>
target屬性
- 表示跳轉(zhuǎn)窗口位置
- target屬性取值:
- _self: default, 在當(dāng)前頁面打開
- _blank: 在新窗口中打開
路徑的寫法
站內(nèi)內(nèi)資源和站外資源
- 站內(nèi)資源: 當(dāng)前網(wǎng)站資源
- 站外資源: 別人網(wǎng)站的資源
絕對路徑和相對路徑
-
站外資源: 絕對路徑, 直接復(fù)制粘貼
-
站內(nèi)資源: 相對路徑
-
絕對路徑書寫格式: url地址:
-
- 協(xié)議名://主機(jī)名:端口號/路徑 schema://host:port/path協(xié)議名: http, https, file 主機(jī)名: 域名, IP地址 端口號: http, 默認(rèn)端口號為80https, 默認(rèn)端口號443e.g.: https://www.bilibili.com/video/BV1yx411d7Rc http://www.renren.com:80/ https://www.baidu.com:443/ http://127.0.0.1:5500/HTMLcore/4.%20a%E5%85%83%E7%B4%A0/target%E5%B1%9E%E6%80%A7.html
-
當(dāng)跳轉(zhuǎn)目標(biāo)和當(dāng)前頁面的協(xié)議相同時, 可以省略
-
相對路徑書寫格式:
-
以./開頭, 表示當(dāng)前資源所在目錄
-
以../開頭, 表示返回上一級目錄
-
相對路徑中, ./可以省略
- <a href="./subhtmls/xx.html">tst</a><a href="./../1. 第一個網(wǎng)頁/index.html">我的第一個網(wǎng)頁</a>
總結(jié)
以上是生活随笔為你收集整理的HTMLCSS 超简单的前端设计入门-1!的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电脑怎么实现定时自动开关机定时自动开关机
- 下一篇： HTMLCSS 超简单的前端设计入门-2