Head first html 筆記

阿新 • • 發佈：2018-12-16

一、書籍原始碼

bethrobson/Head-First-HTML

二、學習筆記

chapter1

基本格式和組織結構

<html>
    <head>
        <title>Document</title>  //網頁標題
    </head>
    <body>
        I am mossbaoo !  //網頁內容
    </body>
</html>

文字顯示

<html 
>
  <head>
    <title>Starbuzz Coffee's Mission</title>
  </head> 
  <body>
    <h1>Starbuzz Coffee's Mission</h1>
    <p>To provide all the caffeine that you need to power your life.</p>
    <p>Just drink it.</p>
  </body>
</html 
>

其中<h1> </h1>表示一級標題，同理<h2> </h2>則表示二級標題，<p> </p>表示新的一個段落

head 說明
- head：包含頁面有關的一些資訊，其中只能放置<title>、<meta>、<style>元素，必須包含<title>元素

chapter2

顯示圖片
- 可藉助
  <img src="lightblue.jpg">
  
  實現
- 當<img src="*.jpg">在<p> </p>裡面時則圖片和文字在同一段落
- 換行可藉助</br>來實現
插入超連結:

 <a href="url">Link text</a>

<html>
  <head>
    <title>Head First Lounge Elixirs</title>
  </head>
  <body>
    <h1>Our Elixirs</h1>

    <h2>Green Tea Cooler</h2>
    <p>
      <img src="../images/green.jpg">
	  </br>  // 實現換行
      Chock full of vitamins and minerals, this elixir
      combines the healthful benefits of green tea with
      a twist of chamomile blossoms and ginger root.
    </p>
	<p>
		<a href="../lounge.html">Back to the Lounge</a>
	</p>
  </body>
</html>

另外可設定圖片的尺寸，也可在css中設定，一般不推薦設定成固定尺寸

<img src="../images/green.jpg" width="48" height="100">

字型加粗、傾斜
- 通過<strong> </strong>來實現加粗
- 通過<em> </em>實現傾斜
```
<em>Dance Dance Revolution</em>
```
設定字型大小和顏色
- 可以通過style對整個段落文字進行設定
```
<p style="color:red;font-size:16px;">挺好</p>
```
- 效果如下
  
  挺好
- 採用<span> </span>也可對段落中部分文字進行大小和顏色設定
```
<p>
只有
<span style="color:red;background-color:gray;">幾個字</span>
有背景顏色跟字的顏色</p>
```
- 設定字元的編碼格式:web中常用 utf-8
```
<meta charset="utf-8">
```

chapter 3

文字前專案符號

數字編號(不需在<p> </p>裡面)

<ol>
  <li>Walla Walla, WA</li> 
  <li>Magic City, ID</li> 
</ol>

圈點專案編號

<ul>
  <li>cellphone</li> 
  <li>and a protein bar</li>
</ul>

chaper4

設定文字為css格式

<style type="text/css">
    body { //在此設定這個css的特性，並應用於後面的body}
</style>

另外css樣式的屬性中可有：

    background-color: #d2b48c;  //背景顏色
    margin-left: 20%;  //margin 設定外邊距
    margin-right: 20%;
    border: 1px dotted gray;  //依次設定邊框的width，style，color
    padding: 10px 10px 10px 10px; //從邊界再往內縮排的尺寸，這部分不顯示內容
    font-family: sans-serif; //字型設定，屬性也可設定為:"宋體"

另外也可將css屬性設定為一個類，其後用於其他

<html>
    <head> 
      <style type="text/css"> 
        .ceshi {font-size:14px;              
        color:#FF0000;}/*這裡是設定CSS的樣式內容*/ 
      </style> 
    </head> 
    
    <body> 
      <div class="ceshi"> 我是div css測試內容</div>
    </body> 
</html>

chapter5

多張圖片並排放置:一個段落放置多張圖片

<p>
    <img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA"> //alt表示圖片無法顯示的時候，替換顯示的文字
    <img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA">
</p>

給圖片插入超連結，實現點選圖片跳轉
- herf後面接著的是超連結，後面<img…>是添加了超連結的圖片

<a href="html/britain.html">
    <img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box">
</a>

chapter 7

css檔案初步

在html檔案的屬性中新增<link type，這代替了原來的style設定，將設定放置到了css檔案中，具體如下：

  <head>
    <meta charset="utf-8">
    <title>Head First Lounge</title>
	<link type="text/css" rel="stylesheet" href="lounge.css"> // stylesheet表示這要連結到樣式表，所以取此屬性
  </head>

在其中呼叫了lounge.css檔案中的格式配置資訊，該檔案的內容如下,其中包含標題和文字段落的格式：

body {
	font-family: sans-serif;  // body 為內容主體，其設定被body中的所有元素（如H1,H2,P）繼承
}

h1, h2 {    
	color: gray;
}
// 一個元素可以有很多規則，上面是合簡寫相同的規則
h1 { 
	border-bottom: 1px solid black;  // 在文字下面加入下劃線
}

p {
	color: maroon; // 將段落文字設定為茶紅色
}

Html中的元素

// 格式：
// 元素名 { 屬性名：屬性值}
// p表示段落文字，類似的有：H1表示一級標題
P {
    backgound-color: red;
    border: 1px solid gray;   //表示有一個邊框
}

html中的組成結構圖如下：
```
        html
         |      
        body
/   /    |   \   \
h1  p    p   h2   p
    |   /  \      |
   img  a  em     a
```
- 當設定了上層（如body）屬性，其子類均會繼承；但也可以對子類重新對同一屬性進行賦值，修改其屬性
在css檔案中可再增加類，例如給段落文字元素p增加一個類greentea
```
// 格式為：元素名.類名 { 屬性：屬性值}
p.greentea {
    color: green;
}
```
- 在css檔案中設定好樣式之後，使用如下
```
<p class="greentea">   // 設定文字屬性
    You'll find us right in the center 
    of downtown Webville. 
</p>
```
- 另外，可以不在類名前面加元素名稱，則可被所有元素使用,如下所示：
```
.greentea {
    color: green;
}
```
- 另外，一個元素也可以具有多個類的屬性：
```
// 假設建立了三個類： greentea raspberry blueberry
// 則在html中被一個元素擁有，可寫為：
<p class = "greentea raspberry blueberry">
```
- 當繼承的多個類，對同一屬性的取值存在不一致時:
  - 首先考慮哪個規則比其他規則更特定，例如某一個類值屬於該元素，相對於其他類屬於所有元素則更特定
  - 特定等級相同，則考慮html中放置的先後順序，取最後一個類的屬性值

css中的常見屬性

color  //設定文字元素的顏色
background-color  //設定背景顏色
top  // 控制元素頂部的位置
left // 指定元素左邊所在的位置
padding //內邊距：元素邊緣和內容之間的空間
font-size //設定文字大小
font-weight //設定文字的粗細，例如粗體
font-style  //可設定文字為斜體
border  //在元素周圍加表框，可以是實現邊框，凸起邊框，虛線邊框等
text-align  //設定文字對其方式
letter-spacing  //設定字母之間的間距
list-style  //可改變列表項的外觀
background-image  //在元素後面放置一個影象

chapter 8

字型型別

可設定不同型別，當第一種找不到則往後找

body{
    font-family: Verdana, Genava, Arial, sans-serif
}

獲取web字型

// 規則以：@font-face開頭
@font-face {
	font-family: "Emblema One";  // 為字型建立一個名字
	src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),  
	     url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");  // 字型下載的兩個連結，從前往後，一旦找到一個即可 
}

使用web字型方式：

h1 {
  font-family:     "Emblema One", sans-serif;
}

字型大小：

可設定body中的字型大小，然後其他問題相對其一個大小尺寸倍數

body {
    font-size: 14px
    //font-size: small
}

h1 {
    font-size: 220%  //相對繼承的父本字型2.2倍大小
}

h2 {
    font-size: 1.2em  //表示1.2倍大小，等同於120%
}

其他字型屬性

斜體

blockquote {
    font-style: italic; //斜體風格
}

粗細

 font-weight: bold; //粗體
font-weight: normal; //繼承父本的字型格式

裝飾

h1 {
    text-decoration: underline  //設定下劃線
    // text-decoration: line-through;  //文字中間有穿過的橫線
    // text-decoration: underline overline; //具有 一個上劃線和一個下劃線
    // 或者設定屬性值為: none
}

指定背景或字型顏色

按名稱制定顏色

body {
    background-color: silver
    // 其他顏色還可為：
    // Black, Blue, Gray, Navy
    // Yellow, White, Red, Maroon
    // Green,Purple,Olive,Lime
}

按紅綠藍分量來指定顏色

body {
    background-color: rgb(80%, 40%, 0%);
    //background-color: rgb(200, 100, 0); 指定0-255的數值
}

使用十六進位制碼錶示顏色：可通過: 線上顏色表查詢

    body {
        background-color: #cc6600;
        //分別用兩位十六進位制數表示紅綠藍取值大小
    }

chapter 9

盒模型

內邊距：通過padding先設定，再用padding-left等可對單一方向進行設定
外邊距：通過margin進行設定，在用margin-left對單一方形進行設定
設定背景圖片：

background-image: url(images/background.gif);  //前面加url()

設定背景圖片位置和是否重複：

background-position: top left; //置於左上角 ，也可按畫素指定
background-repeat： no-repeat; //不重複，也可：repeat-x等

邊框樣式

border-style: groove;  //槽線式
// outset (外凸)
// dashed、dotted、solid、double、ridge

邊框寬度

border-width: thin; // 5px
// border-top-width: thin  //指定某一邊的邊框寬度

邊框顏色

border-color: red; // #ff0000
border-right-color: red; //指定某一邊的顏色

指定邊框圓角

border-radius: 15px;
// border-top-left-radius: 15px; //設定左上角邊框為15個畫素圓角

id: 與class類似，但id具有唯一特性

// 唯一特性說明：
// 一個元素不能有多個id，另外頁面上不孕系多個元素具有相同的id

//css中id建立方法：類似class
#footer {
    color: red
}

//或者表述某個元素專屬類
p#footer {
    color: red
}

//id在html檔案中的使用
<p id="footer">
    our guarantee: 
</p>

混合樣式表

為了滿足不同的需要（例如不同顯示裝置，不同個性化需求），可以用多個樣式表

<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css" 
      media="screen and (min-width: 481px)">
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" 
      media="screen and (max-width: 480px)">
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">
</head>

其中media後面帶著是查詢的條件，表示輸出的裝置和裝置平面寬度等，媒體查詢規則在 css檔案中也有定義：

@media screen and (max-width: 480px) {
    #guarantee {
        line-height:         1.9em;
    }
}

Head first html 筆記

一、書籍原始碼 bethrobson/Head-First-HTML 二、學習筆記 chapter1 基本格式和組織結構 <html> <head> <title>D

《Head First HTML與CSS 》筆記-0x7

目錄區塊<section>和文章<article>的區別 <vedio> <table>表格列表定製樣式 list-style-image <form>表單 End

《Head First HTML與CSS 》筆記-0x6

目錄流（Flow）用float浮動元素用clear解決重疊問題流體佈局（liquid layouts）凍結佈局（frozen layouts）凝膠布局（Jello）絕對定位absolute CSS表格固定定位四種定位方式

《Head First HTML與CSS 》筆記-0x5

目錄使用<div>標記邏輯區子孫選擇器使用<span>建立內聯字元和元素的邏輯分組 <a>元素狀態樣式設定偽類（Pseudo-class）層疊使用&ltdiv&gt標記邏輯區

HTML Head First學習筆記

在掌贏科技實習期間，組內有每週的頭腦風暴環節。所謂的頭腦風暴，就是大家每週在會議室開個小會，然後講解說一下自己有什麼好的想法，能夠為團隊的效率提升作出貢獻。因為我們的BUG單都是提交到mantis上面，而每一個版本的迭代都是要求BUG解決率的，當BUG解決率達到

Python(Head First)學習筆記：四

raise b- before hat contents -- supported between data loss 4 持久存儲：文件存儲、讀寫　　數據保存到文件：在學習的過程中出現了一個問題，老是報一個錯：SyntaxError: invalid syntax；

Notes of Head.First.HTML.and.CSS.2nd.Edition

uil ssl nal notice because str over quest OS What does the web server do? tirelessly waiting for requests from webbrowsers What do

Head First Python 筆記總結——第一章

Python術語 “BIF"——內建函式 “組”（suite）——Python程式碼塊，會通過縮排來指示分組。 “功能齊全（Vatteries included）”——這是指Python提供了快速高效完成工作所需的大多數功能。 IDLE說明 IDLE shell允許你在編

《Head First Html&Css》學習心得

第一章瞭解Html(hyperText Markup Language) web伺服器原理伺服器是一臺連結到物聯網的計算機，用於處理使用者的各種請求，存有html檔案，圖片，聲音以及其他型別檔案瀏覽器傳送需要html網頁或其他資源的請求伺服器接

書籍之 Head First HTML與CSS

看到同事寫web伺服器，決心也要學習一下，技多不壓身，先從html和css入門吧。 1、Web語言：開始瞭解HTML1 開發工具：Sublime Text （外掛Zen Coding + View In Browser），快速執行：首選項->快捷鍵-

【Head First Servlets and JSP】筆記1

http header 多線程轉換 throw 接收找到 write ide 1、把Java放到HTML中，JSP應運而生。 2、Servlet本身並沒有main()方法，所以必須要有其他Java程序去調用它，這個Java程序就是Web容器（Container）

【Head First Servlets and JSP】筆記7：如何創建一個全局的dog？

函數 response servlet對象用戶技術而是 ... first int 重定向與請求分派 “局部”參數——ServletConfig——servlet初始化參數 “全局

【Head First Servlets and JSP】筆記8：監聽者

ref 是我之間發生 cnblogs tom col rst lan 1、你不用了解所有監聽者API，並不多，一共有8個。不過，你需要知道你能監聽什麽，以便在需要的時候可以查。 2、關於Session和Cookie。參見JavaWeb學習總結(十二

Head First Servlets and JSP】筆記9：屬性的作用域、線程安全

string details attr target 部分 ring 瀏覽器什麽是作用什麽是屬性？屬性和參數屬性的3個作用域屬性API 屬性不好的一面 1、到底什麽是屬性（Attribute）？屬性就是一個對象，可以被設置（bound，也可以

【Head First Servlets and JSP】筆記11：cookie

tag etc app util 一個重啟 max 什麽是 string 容器如何知道客戶是誰？（這並不是HTTP能實現的！IP地址不能唯一的標識用戶，另外，非必要不采用HTTPS 繼續mark孤傲蒼狼的博客，百科全書 cookie——Head

【Head First Servlets and JSP】筆記13：session & cookie

res 語句 code submit Coding 定制 -a patch -c session的接口殺死會話 cookie的性質 cookie的接口再總結——cookie、session的前世今生簡單的定制cookie示例

【Head First Servlets and JSP】筆記23：Expression Language(EL) 完全攻略

首部基本 light == 命名 shm sign pack index 基本上是《Head First Servlets and JSP》內容的整理、擴充。順便推薦一個供參考的JSP教程：JSP Tutorial 內容很全面，還有一些有趣的實例。完整代碼參考

《Head First 設計模式》學習筆記——復合模式

listener 解讀 out 部件 register != file 窗體 event 模型-視圖-控制器（MVC模式）是一種很經典的軟件架構模式。在UI框架和UI設計思路中扮演著很重要的角色。從設計模式的角度來看，MVC模式是一種復合模式。它將多個設計模式在

Head First Python 學習筆記-Chapter3：文件讀取和異常處理

獲取 for循環文件處理 pyhton find ont ren app 第三章中主要介紹了簡單的文件讀取和簡單的異常處理操作。首先建立文件文件夾：HeadFirstPython\chapter3，在Head First Pythong官方站

【Head First Servlets and JSP】筆記 26： web 應用部署

ins servlet schema servlets pre cati www 錯誤 b- 【須知】物理目錄結構與虛擬目錄結構的差異 WAR 實際上就是 JAR 什麽東西應該放在 WEB-INF 文件夾下？【了解】 <mime-mappin

Head first html 筆記

一、書籍原始碼

二、學習筆記

chapter1

chapter2

chapter 3

chaper4

chapter5

chapter 7

chapter 8

chapter 9

相關推薦