HTML5學習：基礎入門01

標簽： HTM5

一：基礎入門

第一個HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是第一個HTML文件！！！
</body>
</html>

!<!-- 英文狀態下，shift+1  然后再按tab鍵 -->
<!-- 注釋：    英文狀態下，ctrl+/就可以了 -->

基本結構

<!DOCTYPE html>    <!-- 聲明文檔類型的 -->
<html lang="en">   <!-- 根標簽  lang="en"語言形態-->
    <!-- 頭部  -->
    <head>
        <meta charset="UTF-8">  <!-- 全球所有語言統一編碼 -->
        <!-- 視口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 標題 -->
        <title>度娘</title>
    </head>
    <!-- 內容 -->
    <body>
        
    </body>
</html>

語法及其構成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
</html>


<!-- 
    html的語法：
        標簽分類：
            <標簽名 屬性="屬性值"></標簽名>         雙標簽、常規標簽
            <標簽名 屬性="屬性值">                 單標簽、空標簽

        語法構成：
           標簽是長在尖括號里面
           屬性和標簽名用空格隔開，屬性和屬性值用等號和引號進行連接   
 -->

常用標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        span{
            color:red;
            font-size:66px;
        }
    </style> -->
</head>
<body>
    

    <!-- 標題標簽 -->
    <h1> 我是標題1   </h1>
    <h2>我是標題2</h2>
    <h3>我是標題3</h3>
    <h4>我是標題4</h4>
    <h5>我是標題5</h5>
    <h6>我是標題6</h6>

    <!-- 加粗 -->
    <b>我加粗了嗎</b>
    <strong>哈哈哈哈哈</strong>


    <!-- 傾斜 -->
    <i>我傾斜了嗎</i>
    <em>我呢</em>

    <!-- 下劃線 -->
    <u>我有下劃線嗎~~</u>

    <!-- 換行 -->
    哈哈哈哈<br>                          嘻嘻嘻嘻嘿嘿呵呵呵~~~

    <!-- 水平線 -->
    <hr>


    <!-- 上標和下標 -->
    2<sup>3</sup>   
    h<sub>2</sub>o

    <!-- 段落標簽 -->
    <p>段落標簽</p>
    

    <!-- span -->
    你看！對面游過來<span>一群鴨子~~~</span>

    <!-- div -->
    <div>我是結構性標簽</div>

    <!-- 轉義字符 -->
    啊哈哈哈哈哈&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;啊哈哈哈哈
    &gt;.&lt;~~~
    &copy;
</body>
</html>

<!-- 
    一、標題標簽
        <h1></h1>    唯一性：在一個網頁中只能用一次，用于放網頁的logo
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h5></h5>
        <h6></h6>
    特點：默認有自己的文字大小，默認加粗效果


    二、加粗標簽
        <b></b>
        <strong></strong>
        特點：默認加粗效果
        區別：strong有語氣強調的作用

    三、傾斜標簽
        <i></i>
        <em></em>
        特點：默認傾斜
        區別：em有語氣強調的作用

    四、下劃線
        <u></u>

    五、強制換行
        <br>

    六、水平線
        <hr>

    七、上標  下標
        <sup></sup>
        <sub></sub>

    八、段落標簽
        <p></p>

    九、裝小段文字或者幾個字符
        <span></span>

    十、<div></div>
        用于網頁的結構性標簽

    十一、轉義字符
        &nbsp;   空格
        &gt;      大于
        &lt;       小于
        &copy;     版權符號
        
 -->

網站建站流程、知識點梳理

1.網站的建站流程：

 注冊域名

 租用服務器

 項目研發：

 項目規劃

 UI

 web前端

 后端

 聯調

 測試

 網站推廣

 維護

 2.網頁的組成

 結構 html

 表現 css

 行為 js

 w3c:html css

 ecma:js

 3.計算機語言的發展：

 機器語言 匯編語言 高級語言

 4.html:超文本標記語言

 xhtml:可拓展超文本標記語言

 html5:第五個版本

 h5：學科

 5.站點

 以英文字母開頭

 不能有中文、空格、特殊符號

 小寫英文、數字、下劃線的組合

 6.

 需要安裝的插件：chinese.. open in bro...

 快捷方式：

 快速生成模板：shift+1 然后tab

 注釋：ctrl+/

 cv大法：ctrl+c 復制 ctrl+v 粘貼 ctrl+x 剪切



 7. html語法和分類：

 分類：

 雙標簽： <標簽名屬性="屬性值"></標簽名>

 單標簽： <標簽名屬性="屬性值">

 語法：

 標簽名寫在尖括號里面的

 標簽名和屬性用空格隔開，屬性和屬性值用等號和引號連接

 8.常用標簽

 h1-h6 標題標簽

 加粗

 傾斜

 下劃線

 sup 上標 sub 下標

 <hr> 水平線

 強制換行

 段落

 

 <div></div>

 轉義字符：

  空格

 > 大于

 < 小于

 © 版本符號

本文鏈接：https://blog.csdn.net/weixin_44202489/article/details/109889327

智能推薦

HTML5基礎學習（1）

一、什么是HTML5？ HTML5是HTML（超文本標記語言 HyperText Markup Language）網頁標準的5.0版本。5.0版本比4.0版本多出了很多內容，它的誕生帶動了很多技術領域的發展，尤其是在移動端設備上面。我們所談論的HTML5這個詞它已經產生了一些變化，它代表的已經不再是簡單的HTML網頁設計標準，而是圍繞著HTML這個東西以及它周邊一系列網...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...

HTML5學習：基礎入門01

一：基礎入門

智能推薦

猜你喜歡