整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          html開發(fā)筆記01-HTML基本格式

          html開發(fā)筆記01-HTML基本格式

          言:

          本人最近打算開始學(xué)習(xí)web開發(fā)了,每天寫一點筆記,如果需要的話可以留個參考,如果沒有人需要,我就當自己記筆記了,如果哪里有問題 歡迎各位高手評論區(qū)留言指點,感謝。


          筆記正文:

          1、基本格式:

          書寫文本有文本格式,編寫網(wǎng)頁的時候,html 也有自己的基本結(jié)構(gòu)或基本格式,它是這樣的:↓

          大標簽包含小標簽,小標簽內(nèi)對應(yīng)不同的內(nèi)容,而這些標簽的分級結(jié)構(gòu)就是 父、子 關(guān)系,并且層級之間是靠縮進來區(qū)分,越靠外的為父。

          作各種各樣的網(wǎng)頁,為了更好地實現(xiàn)網(wǎng)頁效果,需要為網(wǎng)頁制作CSS樣式表。如何使用 CSS 同時控制多重網(wǎng)頁的樣式和布局。

          (1)編輯代碼

          打開記事本,編寫代碼,并保存為HTML格式文件。代碼如下。


          (2)在瀏覽器中瀏覽效果

          在瀏覽器中瀏覽效果如圖所示。

          什么是 CSS?

          1.CSS 指層疊樣式表 (Cascading Style Sheets)

          2.樣式定義如何顯示 HTML 元素

          3.樣式通常存儲在樣式表中

          4.把樣式添加到 HTML 4.0 中,是為了解決內(nèi)容與表現(xiàn)分離的問題

          5.外部樣式表可以極大提高工作效率

          6.外部樣式表通常存儲在 CSS 文件中

          7.多個樣式定義可層疊為一個

          CSS 規(guī)則由兩個主要的部分構(gòu)成:選擇器,以及一條或多條聲明:


          選擇器通常是您需要改變樣式的 HTML 元素。

          每條聲明由一個屬性和一個值組成。

          屬性(property)是您希望設(shè)置的樣式屬性(style attribute)。每個屬性有一個值。屬性和值被冒號分開。

          CSS聲明總是以分號(;)結(jié)束,聲明總以大括號({})括起來:代碼如下

          p{

          font-family: "Times New Roman";

          font-size: 20px;

          }

          為了讓CSS可讀性更強,你可以每行只描述一個屬性。

          CSS 注釋

          注釋是用來解釋你的代碼,并且可以隨意編輯它,瀏覽器會忽略它。

          CSS注釋以 "/*" 開始, 以 "*/" 結(jié)束, 實例如下:

          、html的介紹

          1.1 html的定義

          HTML 的全稱為:HyperText Mark-up Language, 指的是超文本標記語言。標記:就是標簽, <標簽名稱></標簽名稱>,比如:<html></html>、<h1></h1>等,標簽大多數(shù)都是成對出現(xiàn)的。

          所謂超文本,有兩層含義:

          1. 因為網(wǎng)頁中還可以圖片、視頻、音頻等內(nèi)容(超越文本限制)
          2. 它還可以在網(wǎng)頁中跳轉(zhuǎn)到另一個網(wǎng)頁,與世界各地主機的網(wǎng)頁鏈接(超鏈接文本)

          1.2 html的作用

          html是用來開發(fā)網(wǎng)頁的,它是開發(fā)網(wǎng)頁的語言。

          1.3 小結(jié)

          • html是開發(fā)網(wǎng)頁的語言
          • html中的標簽大多數(shù)都是成對出現(xiàn)的, 格式: <標簽名>

          二、html的基本結(jié)構(gòu)

          2.1 結(jié)構(gòu)代碼

          <!DOCTYPE html>
          <html>
             <head>            
                 <meta charset="UTF-8">
                 <title>網(wǎng)頁標題</title>
             </head>
             <body>
                  網(wǎng)頁顯示內(nèi)容
             </body>
          </html>
          1. 第一行<!DOCTYPE html>是文檔聲明, 用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔。
          2. <html>...</html>標簽是開發(fā)人員在告訴瀏覽器,整個網(wǎng)頁是從<html>這里開始的,到html結(jié)束,也就是html文檔的開始和結(jié)束標簽。
          3. <head>...</head>標簽用于定義文檔的頭部,是負責(zé)對網(wǎng)頁進行設(shè)置標題、編碼格式以及引入css和js文件的。
          4. <body>...</body>標簽是編寫網(wǎng)頁上顯示的內(nèi)容。

          2.2 瀏覽網(wǎng)頁文件

          網(wǎng)頁文件的后綴是.html或者.htm, 一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內(nèi)容將文件渲染成網(wǎng)頁。

          2.3 小結(jié)

          三、vscode的基本使用

          3.1 vscode 的基本介紹

          全拼是 Visual Studio Code (簡稱 VS Code) 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器,目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具。

          3.2 vscode 的安裝

          1. 下載網(wǎng)址: https://code.visualstudio.com/Download
          2. 選擇對應(yīng)的安裝包進行下載:


          1. 根據(jù)下載的安裝包雙擊進行安裝即可,當然為了更好的使用 vscode 還可以安裝對應(yīng)的插件。

          3.3 vscode 的插件安裝

          插件名說明Chinese (Simplified) Language Pack for VS Code中文(簡體)漢化包open in browser右擊在瀏覽器打開html

          1. 漢化插件安裝

          1. open in browser插件安裝


          1. 注意: 如果在vscode打開的html文檔中右擊沒有出現(xiàn) open in browser 類型的選項,需要把當前打開的文件關(guān)掉,重新打開這個文件就好了。

          3.4 vscode 的插件卸載

          點擊對應(yīng)安裝的插件,然后再點擊卸載按鈕即可。

          3.5 vscode 的使用

          1. 打開文件夾創(chuàng)建文件


          1. 快速創(chuàng)建html文檔的基本結(jié)構(gòu)


          1. 右擊在瀏覽器打開html文檔


          3.6 設(shè)置字體大小


          3.7 設(shè)置顏色主題


          3.8 設(shè)置默認瀏覽器[可選]

          1. 可以根據(jù)自己的需要設(shè)置默認使用的瀏覽器


          3.9 小結(jié)

          • vscode 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器
          • 通過資源管理器打開文件夾創(chuàng)建HTML文件,編寫 HTML 代碼
          • 可以根據(jù)需要安裝對應(yīng)的插件
          • 可以設(shè)置字體大小和顏色主題

          主站蜘蛛池模板: 亚洲国产精品一区二区三区在线观看 | 女人和拘做受全程看视频日本综合a一区二区视频 | 激情内射亚州一区二区三区爱妻| 精品久久国产一区二区三区香蕉| 国产精品福利一区二区| 国产精品无码一区二区三区电影| 国产成人精品无码一区二区老年人 | 久久精品国产一区二区三区| 欧美激情一区二区三区成人| 亚洲一区二区影院| 国产亚洲福利精品一区| 国产婷婷一区二区三区| 国产成人精品一区在线| 亚洲av乱码一区二区三区按摩| 亚洲成在人天堂一区二区| 中文字幕人妻丝袜乱一区三区| 一区二区高清在线| 无码人妻精品一区二区蜜桃AV| 日韩精品一区二区三区毛片 | 国产精品一区二区四区| 国产一区二区好的精华液 | 国产精品一区三区| 亚洲一区二区精品视频| 一区二区三区91| 亚洲视频在线一区二区| 在线观看免费视频一区| 无人码一区二区三区视频| 国产伦精品一区二区三区免.费| 一区二区三区视频在线播放| 波霸影院一区二区| 国产福利电影一区二区三区| 中文字幕一区二区在线播放| 国产伦精品一区二区三区不卡 | 3D动漫精品啪啪一区二区下载| 免费看无码自慰一区二区| 亚洲AV福利天堂一区二区三| 亚洲国产日韩一区高清在线| 在线观看日本亚洲一区| 国产精品一区二区在线观看| 狠狠色婷婷久久一区二区三区 | 精品3d动漫视频一区在线观看|