百度前端技術學院 零基礎學院 Day2

2021-08-20 21:32:01 字數 2016 閱讀 7435

第二天,我們希望你能夠通過簡單的實踐,更加清楚地了解html是什麼,html5是什麼。學習基本的html標籤,理解html語義化概念

今天我們先暫時不用第一天讓你安裝的ide,我們先暫時使用codepen作為我們的開發工具,開啟 codepen,建立乙個新的頁面(create->new pen)。它有三個**編寫的視窗,分別是html,css,js,下方是乙個預覽效果的視窗。我們今天只會涉及到htmlcss

你可以參考自己的簡歷內容,也可以參考網上一些熱門簡歷內容,比如 羨轍 的簡歷(她簡歷的樣式每年校招簡歷總能看見很多人在復用,所以,希望大家以後做簡歷的時候換個樣式吧,哪怕是換個顏色也是極好的)。

接下來,我們要把這些內容組裝進乙個html裡面,這時候,你先不要考慮這個簡歷會長什麼樣,你重點要放在乙個哲學問題上,就是簡歷裡面的每個內容,它是什麼。也許你還沒太懂啥意思,所以,先看看下面幾個內容。

首先閱讀 w3school的html教學 把html的各個標籤再學習一遍,當然看 mdn 或者能力強的同學直接看 w3c 也是沒問題的。

在整個閱讀過程中,你可以一邊看,一邊想想,你之前準備的簡歷的每個內容,應該用什麼樣的html元素、標籤比較合適。

html是超文字標記語言,html5是html的最新標準。

(1) 元素:

html 元素指的是從開始標籤(start tag)到結束標籤(end tag)的所有**。html 文件是由 html 元素定義的。

元素的內容是開始標籤與結束標籤之間的內容,某些 html 元素具有空內容(empty content)。空元素在開始標籤中進行關閉(以開始標籤的結束而結束),大多數 html 元素可擁有屬性。

(2) 標籤:

標籤就是、、等被尖括號「<」和「>」包起來的物件,絕大部分的標籤都是成對出現的,如、。當然還有少部分不是成對出現的,如

、等。標籤就是用來標記html元素的。位於起始標籤和結束標籤之間的文字就是html元素的內容。

(3)屬性:

為html元素提供各種附加資訊的就是html屬性,它總是以"屬性名=屬性值"這種名值對的形式出現,而且屬性總是在html元素的開始標籤中進行定義。屬性值

描述class

classname

規定元素的類名(classname)

idid

規定元素的唯一 id

style

style_definition

規定元素的行內樣式(inline style)

title

text

規定元素的額外資訊(可在工具提示中顯示)

文件型別即常見的 !doctype ,是用來宣告並幫助瀏覽器正確識別網頁。因為html發展至今有許多的不同版本,所以宣告不同的文件型別可以讓瀏覽器完全正確地顯示出 html 頁面。

meta標籤是html語言head區的乙個輔助性標籤,它位於html文件頭部的標記和標記之間,它提供使用者不可見的資訊。meta標籤通常用來為搜尋引擎robots定義頁面主題,或者是定義使用者瀏覽器上的cookie;它可以用於鑑別作者,設定頁面格式,標註內容提要和關鍵字;還可以設定頁面使其可以根據你定義的時間間隔重新整理自己,以及設定rasc內容等級,等等。

簡單說來就是讓機器可以讀懂內容。由編寫者對網頁內容進行語義化主要可以讓不同的人和機器對這段內容的作用和所屬有清晰的認識,從而檢視或者找到自己需要的內容。

html 使用超級鏈結與網路上的另乙個文件相連。對應a標籤。

標籤描述

標籤描述

為使用者輸入建立 html 表單。

根據不同的 type 屬性值,輸入字段可以是文字字段、核取方塊、掩碼後的文字控制項、單選按鈕、按鈕等等。

定義多行的文字輸入控制項。

定義按鈕

定義選擇列表中的選項。

定義下拉列表。

ol為有序列表,即為乙個需要排序的列表內容進行排列;

ul為無序列表,即為乙個需要列表但不需要排順序的內容排列;

li為列表的內容;

dl為定義列表;

dt為定義列表內的標題或專案名稱;

dd為定義定義列表中專案的描述。

百度前端技術學院 零基礎學院(7,8)

設計圖如下 步驟 一 分出幾個塊 首部,中間包括乙個960px寬的劇中div,div裡包括logo和三個鏈結 宣傳欄,含有乙個輪顯數字 主要內容區,包括乙個導航欄和寬度自適應的內容塊 底部,包含水印 二 遇到的問題 1 首先是沒有固定在頁面底部,而是處於了的下方,主要是由於部分還沒有寫好內容未撐開導...

百度前端技術學院 零基礎學院 Day5

通過閱讀及乙個小型練習,掌握 css 盒模型及通過float進行簡單的布局 今天我們要學習非常重要的一些知識,這些知識會伴隨著你的前端生涯.首先我們先學習一下盒模型的概念 接下來我們了解一下浮動 今天的任務,我們將不在codepen上來實現,開啟你電腦本地的 編輯器 如vscode,sublime或...

百度前端技術學院 基礎學院 學習筆記(一

1 html是什麼,html5是什麼 答 html 超文字標記語言 html5最新的html標準,擁有更豐富的語義 圖形 以及多 元素等內容 2 html元素標籤 屬性都是什麼概念?答 html不是程式語言,是標記語言,所以要使用標記標籤來描述網頁。屬性是用來提供html標籤更多的資訊。3 文件型別...