整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          怎么把Word轉換為網頁html格式

          、html的介紹

          1.1 html的定義

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

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

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

          1.2 html的作用

          html是用來開發網頁的,它是開發網頁的語言。

          1.3 小結

          • html是開發網頁的語言
          • html中的標簽大多數都是成對出現的, 格式: <標簽名>

          二、html的基本結構

          2.1 結構代碼

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

          2.2 瀏覽網頁文件

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

          2.3 小結

          三、vscode的基本使用

          3.1 vscode 的基本介紹

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

          3.2 vscode 的安裝

          1. 下載網址: https://code.visualstudio.com/Download
          2. 選擇對應的安裝包進行下載:


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

          3.3 vscode 的插件安裝

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

          1. 漢化插件安裝

          1. open in browser插件安裝


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

          3.4 vscode 的插件卸載

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

          3.5 vscode 的使用

          1. 打開文件夾創建文件


          1. 快速創建html文檔的基本結構


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


          3.6 設置字體大小


          3.7 設置顏色主題


          3.8 設置默認瀏覽器[可選]

          1. 可以根據自己的需要設置默認使用的瀏覽器


          3.9 小結

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

          格元素詳解與練習

          提到表格,大家最先想到的就是EXCEL這款軟件,實際上在對表格的操作上,HTML與EXCEL非常相似。

          在展示數據,統計數據方面,表格比文字描述更具表達優勢,在網頁中,表格也經常被用來展示數據、計劃日常安排等內容。如圖所示:

          今天我們就來學習一下如何向頁面中添加表格元素。

          首先來介紹一下表格元素中的基本標簽。

          NO.1:<table></table>

          這個標簽是書寫表格的第一個標簽,它本身在頁面上看不出什么內容,但是它的屬性可以控制表格顯示的全局樣式。這個標簽的開始標簽寫在表格元素的開頭,結尾標簽寫在表格元素的結尾。

          NO.2:<caption></caption>

          這個標簽是表格的標題標簽。

          NO.3:<tr></tr>

          這個標簽定義表格的列標簽

          NO.4:<th></th>

          這個標簽是列表標題標簽,例如,男生、女士、姓名等。

          NO.5:<td></td>

          這個標簽定義表格的行標簽

          OK,這些基本標簽就可以構建一個基礎的表格元素。示例代碼如下:

          <table><!-- 寫在表格元素的開頭 --><caption>表格標題</caption><!-- 表格標題 --><tr>標題標簽<th>姓名</th><!-- 標題標簽 --><th>年齡</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 寫在表格元素的結尾 -->

          頁面效果如圖所示:沒有表格的外邊框。

          如何添加外邊框呢?在<table>標簽中修改border屬性即可,示例代碼如下:border="1"是給表格添加寬為1的邊界線。

          <table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->

          效果如圖所示:

          這時,您會發現表格在頁面上的尺寸非常小,可不可以按照頁面尺寸來顯示表格嗎?當然可以,這就需要為<table>標簽修改第二個屬性width,示例代碼如圖所示:width = "100%"指的是表格寬度與平面寬度一致。

          <table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->

          效果如圖所示:

          ok!今天的講解先到這里,明天我會繼續為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個標簽,以及合并單元格操作。

          今天的完整代碼示例如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>第一個網頁</title>
          </head> 
          <body><h1>第一個網頁</h1><hr>
          <h2>表格元素</h2><hr>
          <table border = "1" width = "100%">
            <caption>表格標題</caption>
          <tr>
            <th>姓名</th>
          <th>年齡</th>
          </tr>
          <tr><td>一列一行</td>
          <td>一列二行</td>
          </tr>
          <tr>
            <td>二列一行</td>
          <td>二列二行</td>
          </tr>
          </table>
          </body> 
          </html>

          正所謂萬丈高樓平地起,html技術雖然簡單,但是內容相對繁瑣,也是以后進一步學習網頁制作的基礎,希望大家動手寫每一段代碼,把每一步踩堅實。

          喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作


          主站蜘蛛池模板: 亚洲一区二区三区播放在线| 综合久久久久久中文字幕亚洲国产国产综合一区首 | 相泽南亚洲一区二区在线播放 | 国产AⅤ精品一区二区三区久久 | 亚洲一区二区三区在线网站| 一区在线观看视频| 亚洲午夜在线一区| 久久久久99人妻一区二区三区| 一区二区中文字幕在线观看| 国产成人综合一区精品| 99精品一区二区三区| 另类免费视频一区二区在线观看| 亚洲国产精品第一区二区三区 | 任你躁国语自产一区在| 国产一区二区三区在线看| 一区二区高清视频在线观看| 日韩在线视频一区| 爱爱帝国亚洲一区二区三区| 久久一区二区三区精华液使用方法| 亚洲电影国产一区| 精品无码av一区二区三区| 日韩免费无码视频一区二区三区| 国产另类TS人妖一区二区| 国精产品一区二区三区糖心| 国产在线不卡一区二区三区| 亚洲AV日韩精品一区二区三区| 一区二区精品视频| 国产亚洲一区区二区在线| 国产在线一区二区综合免费视频| 丝袜人妻一区二区三区| 亚洲AV日韩AV天堂一区二区三区| 国产在线精品一区二区在线观看| 另类一区二区三区| 91大神在线精品视频一区| 99久久无码一区人妻a黑| 国内精品视频一区二区三区八戒| 无码日本电影一区二区网站| 日韩免费视频一区| 中文字幕在线一区二区三区| 秋霞午夜一区二区| 亚洲一区二区三区在线|