JavaWeb——HTML,CSS

小魚0914發表於2020-12-21
JavaWebHTMLCSS

一、HTML

超文字標記語言(HTML)，是一種用於建立網頁的標準標記語言。你可以使用 HTML 來建立自己的 WEB 站點，HTML 執行在瀏覽器上，由瀏覽器來解析。

一個完整的html標籤的組成：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好</title>
</head>
<body>
	。。。要寫的的內容
</body>
</html>

它的標籤是樹形結構的，在建立html時預設的的結構是：
在這裡插入圖片描述

示例中標籤解釋如下：

  • < !DOCTYPE html> 宣告為 HTML5 文件
  • < html> 元素是 HTML 頁面的根元素
  • < head> 元素包含了文件的元（meta）資料，如 定義網頁編碼格式為 utf-8。
  • < title> 元素描述了文件的標題
  • < body> 元素包含了可見的頁面內容

常用標籤主要分為以下幾類：

  1. 標題語義：<h1> <h2> ...
  2. 正文語義：<p1> <p2> ...
  3. 圖片標籤：<img src = "相對路徑" alt="圖片出錯時,替代文字"/>
  4. 容器標籤： 1.<div> 塊級容器 2.<span> 行級容器
  5. 列表語義：有序列表:<ol> 無序列表:<ul>
  6. 超連結語義：a href ="跳轉的頁面"
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>個人名片</title>
        <!--CSS：
        1.可以外部引入<link rel...相對路徑>
        2.可以在html文件中 <style標籤>
        3.html元素的屬性中-->
        <link rel="stylesheet" href="css/style.css">
        <!--CSS的格式
        選擇器：
        1.元素選擇器 2.id選擇器 3.類選擇器-->
        <!--內容：
        color：字型顏色
        background-color：背景顏色
        font-size：字型大小
        ...
        會有覆蓋關係-->
        <style>
            h1 {
                color:gray;
            }
            #hello{
                color: aqua;
            }
            li.play{
                color: crimson;
            }，
        </style>
    </head>
    <!--瀏覽器中可以看到的內容-->
    <body>
    <!--標題語義:
            h1 h2 h3...-->
        <h1>餘沛航</h1>
    <!--正文語義:p -->
        <p>學生</p>
    <!--圖片標籤:
            img src = "相對路徑" alt="圖片出錯時,替代文字"-->

        <img src="image/huasheng.jpg" alt="沒了嘿嘿"/>

    <!--容器標籤:
            1.<div>  塊級容器
            2.<span> 行級容器-->
        <div>
            <h2>愛好</h2>
    <!--列表語義:
             1.有序列表:ol
             2. -->
            <ul>
                <li id="hello">寫程式碼</li>
                <li class="play">打遊戲</li>
                <li class="play">看動漫</li>
            </ul>
        </div>

        <div>
            <h2>學習經歷</h2>
     <!--超連結語義：
             <a href ="跳轉的頁面" -->
            <ol>
                <li><a href="https://blog.csdn.net/sduihoal">西安工業</a></li>
                <li>哈佛</li>
            </ol>
        </div>
    </body>
</html>

二、CSS

主要用來改變html中的樣式。

有如下方法引入html檔案中：

  1. 可以外部引入：<link rel="相對路徑">
  2. 可以在html文件中 ：<style>裡面寫
  3. html元素的屬性中

它的書寫格式是： 選擇器 +{property}形式
選擇器：

  1. 元素選擇器
    直接指定哪個標籤：h1{…}
  2. id選擇器
    用#鎖定某個id：#id{…}
  3. 類選擇器
    指定類別：.class{…}

幾種使用方法可以混用，且有覆蓋關係

相關文章