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