Html學習筆記（二）

時間 2020-01-06

標籤 html 學習筆記欄目 HTML 简体版

原文原文鏈接

Html頭部

HTML `<link>`元素

<link> 標籤訂義了文檔與外部資源之間的關係。css

<link> 標籤一般用於連接到樣式表:html

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML `<style>` 元素

<style> 標籤訂義了HTML文檔的樣式文件引用地址。
在<style> 元素中也能夠直接添加樣式來渲染 HTML 文檔。瀏覽器

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML`<meta>`元素

meta標籤描述了一些基本的元數據。佈局

<meta> 標籤提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。搜索引擎

META 元素一般用於指定網頁的描述，關鍵詞，文件的最後修改時間，做者，和其餘元數據。spa

元數據可使用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘Web服務。code

<meta> 通常放置於<head>區域htm

HTML head 元素

標籤	描述
`<head>`	定義了文檔的信息
`<title>`	定義了文檔的標題
`<base>`	定義了頁面連接標籤的默認連接地址
`<link>`	定義了一個文檔和外部資源之間的關係
`<meta>`	定義了HTML文檔中的元數據
`<script>`	定義了客戶端的腳本文件
`<style>`	定義了HTML文檔的樣式文件

記住了哈。blog

Html CSS

style元素

這裏有個實例：索引

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>經常使用網址</title>
        <style type="text/css">
            p{
                color:blue;
            }
        </style>
    </head>

<body>
    <a href="https://www.baidu.com">
    <img border="2" src="https://pic.downk.cc/item/5e0de0b076085c3289681048.png" width="425" height="300"/></a>
    <p>這是一個段落，主人尚未想好寫什麼</p>
</body>

</html>

效果圖：

CSS 能夠經過如下方式添加到HTML中:
內聯樣式- 在HTML元素中使用"style" 屬性
內部樣式表 -在HTML文檔頭部<head> 區域使用<style> 元素來包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是經過外部引用CSS文件.

P.S. 說句題外話
style屬性:
text-decoration決定文本有沒有下滑線
background-color決定背景顏色
text-align:center可使文本居中對齊

內聯樣式

當特殊的樣式須要應用到個別元素時，就可使用內聯樣式。使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性能夠包含任何 CSS 屬性。如下實例顯示出如何改變段落的顏色和左外邊距。

<p style="color:blue;margin-left:20px;">這是一個段落。</p>

內部樣式表

當單個文件須要特別樣式時，就可使用內部樣式表。你能夠在<head> 部分經過 <style>標籤訂義。

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部樣式表

當樣式須要被應用到不少頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就能夠經過更改一個文件來改變整個站點的外觀。

<head>
<link rel="stylesheet" type="text/css" href="地址">
</head>

圖片

HTML 圖像- Alt屬性

alt 屬性用來爲圖像定義一串預備的可替換的文本。
替換文本屬性的值是用戶定義的。

你知道的，我是不會學表格的。

HTML `<div>` 和`<span>`

HTML 能夠經過 <div> 和<span>將元素組合起來。

HTML 區塊元素

大多數 HTML 元素被定義爲塊級元素或內聯元素。

塊級元素在瀏覽器顯示時，一般會以新行來開始（和結束）。

實例: <h1>, <p>, <ul>, <table>

HTML 內聯元素

內聯元素在顯示時一般不會以新行開始。

實例: <b>, <td>, <a>, <img>

HTML `<div>` 元素

HTML <div> 元素是塊級元素，它可用於組合其餘 HTML 元素的容器。

<div> 元素沒有特定的含義。除此以外，因爲它屬於塊級元素，瀏覽器會在其先後顯示折行。

若是與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。

<div> 元素的另外一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用<table>元素進行文檔佈局不是表格的正確用法。<table> 元素的做用是顯示錶格化的數據。

HTML `<span>` 元素

HTML <span> 元素是內聯元素，可用做文本的容器

<span> 元素也沒有特定的含義。

當與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性。

HTML 分組標籤

標籤	描述
`<div>`	定義了文檔的區域，塊級 (block-level)
`<span>`	用來組合文檔中的行內元素，內聯元素(inline)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。