前端學習之路html基礎(01)——常用標籤
HTML：是用來描述網頁的一種語言
- HTML 指的是超文字標記語言: HyperText Markup Language
- HTML 不是一種程式語言，而是一種標記語言
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
- HTML 文件包含了HTML 標籤及文字內容
- HTML文件也叫做 web 頁面 -
HTML 標籤：通常被稱為 HTML 標籤 (HTML tag)
- HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標籤通常是成對出現的，比如<b> 和 </b>
- 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱為開放標籤和閉合標籤
宣告和編碼
- 在檔案中引用<!DOCTYPE html>宣告有助於瀏覽器正確地顯示網頁，宣告中其所有字母均不區分大小寫；
- 為了防止在瀏覽器中的中文出現亂碼，我們一般需要在頭部宣告為UTF-8；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
<p>hello world</p>
</body html編輯器
html頭部<head>
- <head>元素包含了所有的頭部標籤元素。在 元素中你可以插入指令碼（scripts）, 樣式檔案（CSS），及各種meta資訊。
- 可以在頭部新增的元素標籤為：<title>、<style>、<meta>、<link>、<script>、<noscript>、<base>；
<title>元素
- 定義了不同文件的標題，它在html文件中是必不可少的；
- 它定義了瀏覽器工具的標籤、收藏夾時的標題、顯示在搜尋引擎結果頁的標題；
<!DOCTYPE html>
<html>
<head>
<title>this is title</title>
</head>
<body>
this is body
</body>
</html>
<base>元素
- 描述了基本的連結地址、連結目標，該連結作為html文件中所有連結的預設連結地址。
- 如果html文件中<a>沒有設定具體的值，則使用該預設連結。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<body>
<img src="logo.png"><br>
- 注意這裡我們設定了圖片的相對地址,圖片的訪問地址為 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="http://www.baidu.com">百度一下</a><br>
- 注意這個連結會在新視窗開啟，因為在 base 標籤裡我們已經設定了 target 屬性的值為 "_blank"。
</body>
</html><link>元素
- 標籤定義了文件與外部資源之間的關係。
- 標籤通常用於連結到樣式表:
- ink 元素是空元素，它僅包含屬性。
- 此元素只能存在於 head 部分，不過它可出現任何次數。
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head><style>元素
- 標籤定義了HTML文件的樣式檔案引用地址.
- 在 <style> 元素中，您可以規定在瀏覽器中如何呈現 HTML 文件。
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1 {color: red;}
p {color: blue;}
</style>
<title>頁面標題</title>
</head>
<body>
<h1>demo標題</h1>
<p>hello world</p>
</body>
</html><meta>元素
- 描述了一些基本的元資料；
- 瀏覽器會解析元資料，但是在頁面上不會體現出來
- 一般元資料都定義在<head>部分；
- 為搜尋新增關鍵字
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
<!-- 為搜尋新增關鍵字 -->
<meta name="keywords" content="html, css, html5">
<!-- 為網頁新增描述性內容 -->
<meta name="description" content="this is the tag named meta">
<!-- 定義網頁作者 -->
<meta name="author" content="qidl">
<!-- 每個n秒重新整理頁面 -->
<meta http-equiv="refresh" content="5">
</head>
<body>
<h1>demo標題</h1>
<p>hello world</p>
</body>
</html><scrip>元素
- 用於載入指令碼檔案，如JavaScript，以後會加以學習。
html標題、段落、文字格式化
<h1>-<h6>標題
- <h1>表示最大標題，<h6>表示最小標題。
<p>段落
- 資料分段顯示，預設換行，會忽略其中多餘的空格和換行。
<br>換行
- 標籤插入一個簡單的換行符。
<hr />水平線
- 標籤在 HTML 頁面中建立水平線，用於分隔內容。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
<h1>demo標題1</h1>
<hr />
<h2>demo標題2</h2>
<h3>demo標題3</h3>
<h4>demo標題4</h4>
<h5>demo標題5</h5>
<h6>demo標題6</h6>
</body>
</html>
<b>粗體
<em>著重文字
<i>斜體
<small>小號字
<big>大號字
<strong>加重語氣
<sub>下標字
<sup>上標字
<ins>插入字
<del>刪除字
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
<b>粗體</b><br>
<em>著重文字</em><br>
<i>斜體</i><br>
<small>小號字</small><br>
<big>大號字</big><br>
<strong>加重語氣</strong><br>
<sub>下標字</sub><br>
<sup>上標字</sup><br>
<ins>插入字</ins><br>
<del>刪除字</del><br>
<b><i>加粗斜體字</i></b><br>
</body>
</html>
<code>計算機程式碼
<kbd>鍵盤碼
<samp>計算機程式碼樣本
<var>變數
<pre>預格式文字
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
<code>計算機程式碼</code>
<kbd>鍵盤碼</kbd>
<samp>計算機程式碼樣本</samp>
<var>變數</var>
<pre>
日照香爐生紫煙
下一句話是啥忘了 ......
</pre>
</body>
</html>
<abbr>縮寫，在瀏覽器顯示縮寫內容，滑鼠放置此處顯示隱藏內容；
<address>地址
<bdo>文字方向
<blockquote>長的引用
<q>短的引用語
<cite>引用、引證，定義作品（比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題。
<dfn>一個定義專案
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
合肥有個<abbr title="中國科學技術大學">科大</abbr>
<address>
qdl, china<br>
2017.02.21
</address>
<p>正常的文字顯示方向</p>
<p><bdo dir="rtl">正常的文字顯示方向</bdo></p>
<blockquote>今天天氣不錯，氣溫有所回升，但是霧霾還在...</blockquote>
<p>一位偉人曾經說過<q>人餓了就要吃飯</q></p>
<p>這部偉大的作品叫<cite>金瓶梅</cite></p>
</body>
</html>
html中的連結
- 我們用標籤<a>來設定超文字連結。超連結可以是一個字、一個詞、一組詞、一幅畫等等。
- <a>中使用了href屬性來描述連結的地址。
- 一個未訪問過的連結顯示為藍色字型並帶有下劃線。
- 訪問過的連結顯示為紫色並帶有下劃線。
- 點選連結時，連結顯示為紅色並帶有下劃線。
- 如果為這些超連結設定了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。
target屬性
- 使用target屬性可以定義被連結的文件在何處顯示；
- target=”_blank”會顯示新的視窗；；
id屬性
- 可用於建立在一個HTML文件書籤標記。
- 書籤是不以任何特殊的方式顯示，在HTML文件中是不顯示的，所以對於讀者來說是隱藏的。
- 請始終將正斜槓新增到子資料夾。假如這樣書寫連結：href=”http://www.baidu.com”，就會向伺服器產生兩次 HTTP 請求。這是因為伺服器會新增正斜槓到這個地址，然後建立一個新的請求，就像這樣：href=”http://www.baidu.com/”。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
<p>建立圖片連結:</p>
<a href="http://www.baidu.com/">
<img src="girl01.jpg" alt="妹子哇" width="200" height="200">
</a>
<p>
<a href="#C1">檢視第一部分</a>
<br>
<a href="#C2">檢視第二部分</a>
</p>
<p id="C1">這就是第一部分</p>
</body>
</html>
相關推薦
前端學習之路html基礎(01)——常用標籤
HTML：是用來描述網頁的一種語言 HTML 指的是超文字標記語言: HyperText Markup Language HTML 不是一種程式語言，而是一種標記語言 標記語言是一套標記標籤 (m
我的web前端學習之路-HTML-form
val jpg web前端 ted cti 之路 radi pass idt 1 <form name="register" method="post" action="servlet等可處理請求的東西"> 2 單行文本框<inpu
前端學習之路----javascript基礎
今天繼續我們的javascript---初級 陣列 ### 為什麼要學習陣列 之前學習的資料型別，只能儲存一個值(比如：Number/String。我們想儲存班級中所有學生的姓名，此時該如何儲存？ ### 陣列的概念 所謂陣列，就是將多個元素（
【前端】【html/css】前端學習之路（五）：標籤顯示模式（display）
標籤的型別(顯示模式) HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。1.塊級元素（block-level） 每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。總而言之就是比較霸
【前端】【html/css】前端學習之路（十四）（製作京東專案心得）（完）
1.事前準備 （1）工具使用的是 Webstrom的最新版 和 Fireworks 8 作為切圖的輔助工具。 （2）準備CSS Reset類庫（normalize.css），為跨瀏覽器相容做準備（也可以直接使用京東網站的初始化） normalize.css
我的web前端學習之路-CSS-引入
com imp port 之路 es2017 內嵌 學習 常用 方式 多用連接導入方式 優先級：內聯>內嵌>@import方式>link方式（常用） 我的web前端學習之路-CSS-引入
我的web前端學習之路-CSS-選擇器
選擇 產生 之路 css 註意 images nbsp 前端 ges 選擇器指定了要作用的標簽 直接指定一個準確元素名，對其產生作用 指定標簽元素class屬性的值，可選指定特定的標簽元素，不要忘記“點”！ （註意！！）class屬性的值可以用空格隔開表示多個cla
我的web前端學習之路-CSS-字體和文本
技術 你是 let cor meta round ack san one 1 <head> 2 <meta charset="utf-8"> 3 <title>css字體和文本</title> 4
我的web前端學習之路-CSS-列表和表格
表示 hang idt char rac 一個 ddr web前端 9.png list-style-image和list-style-type只能選擇一個使用 border-collapse和border-spacing不能同時使用 1 <head>
《Python學習之路 -- Python基礎之叠代器及for循環工作原理》
pre 循環 next 是我 我們 png 捕獲 模擬 檢查 提到叠代器不得不說叠代器協議，叠代器協議是指：對象必須提供一個__next__()方法，執行該方法要麽返回叠代中的下一項，要麽就拋出一個StopIteration異常（相當於報錯的意思）以終止叠代。然而遵循這
《Python學習之路 -- Python基礎之裝飾器》
接收 學習之路 代碼 內部 AS OS 如果 col PE 裝飾器，本質上是一個函數，更加直觀的說，裝飾器就是等於 高階函數 + 函數嵌套 + 閉包 ，裝飾器是具有某個基礎功能的函數，這種功能可以加成到其他函數上，使得其他函數的功能更加強大。除此以外，裝飾器還有兩個重要
《Python學習之路 -- Python基礎之切片》
nas col 結束 了解 默認值 對象 學習 好的 tuple 切片從字面上的意思也能很好的了解，就是將某個東西切成一個片段。也就是說，切片是一種對數據的操作，截取數據中的一個片段，字符串，列表和元組都支持切片。 # 語法： 操作對象[起始位置：結束位置：步長] #
小白學習之路，基礎三（函數）
但是 iter 使用 問題 個數 函數作為參數 無限 中間 ble 一，函數的基本介紹 首先談到函數，相信大家都不陌生，不管是其他語言都會用到，可能就是叫法不一樣。就我知道的跟python中函數類似的，在C中只有function，在Java裏面叫做method，在js中也是
小白學習之路，基礎四（函數的進階）
strong 部分 iter 讀者 結果 http 內部 mod 取數 一，內置函數 前面已經認識了函數，對函數都有所了解了，其實呢，在Python中提供了很多內置的函數方便給我們調用。下面會給大家提到一些常用的常用內置函數的用法，當然還有一些其他沒講到的，你也可以看參考文
python學習之路（基礎篇）——列表，字典，集合
cef mes 所有 聽說 基本 變量 .so tdi 作用 一、列表，元組操作 定義列表 names = [‘Alex‘,"Tenglan",‘Eric‘] 查看 >>> names[0] ‘Alex‘ >>> names[2]
python學習之路（基礎篇）——函數
pri inux 形參 定義變量 dev 函數計算 學生 span 指定 一、簡單介紹 三種編程： 面向對象 class 面向過程 def 函數式編程 def 過程是沒有返回值的函數 定義: 函數是指將一組語句的集合通過一個名字(函數名)封裝起來，
Centos 學習之路：基礎（1）
格式 鍵盤 平臺 處理 eight ctrl+ 環境 rehel 主機 馮·諾伊曼計算機模型： 采用二進制數表示程序和數據； 能存儲程序和數據，並能自動控制程序的執行； 具備運算器、控制器、存儲器、輸入設備和輸出設備5個基本部分。 CPU：是控制器及運算器 CPU的架
前端學習之路
jquer scrip html 學習 asc javascrip rap 之路 boot html css javascript jquery bootstrap 前端學習之路
Python學習之路——Linux基礎之Vim編輯器
Vim編輯器 1. 常用的刪除與複製的常用按鍵 1) dd : 刪除游標所在的一行，剪下游標所在的一行 2) ndd（如 3dd）：刪除游標所在的向下的n行。3dd則刪除3行 3) yy : 複製游標所在的一行
Python學習之路——Linux基礎之文件系統管理
不能 查看分區 RoCE ESS 更新 註意 python sha 文件系統管理 硬盤分區 fdisk /dev/sdb : 新建分區 fdisk -l /dev/sdb ：查看磁盤信息 df （-h）:查看分區信息 新建主分區 新建擴展分區 partprobe :新建