1.作業
1.分別說出什么是HTML,XHTML,HTML5?
答:HTML為超文本標記語言,它不是一種編程語言而是一種標記語言,使用標記標簽來描述網頁;
XHTML為一種編碼更加規范,對于機器的識別更為友善,可以說是HTML的繼承者,但要比其更加規范,例如行頭加<!doctype html>這就是一種聲明,瀏覽器會根據你的定義來解釋頁面代碼;
HTML5是對HTML的第五次修訂,其主要的目標是將互聯網語義化,以便更好地被人類和機器閱讀,并同時提供更好地支持各種媒體的嵌入。
2.寫出HTML的語法
答:以下為最基本的HTML的語法結構,其還可以與css和javascript配合使用。
<html>
<head>
<title>名字</title>
</head>
<body>
內容
</body>
</html>
3.HTML中的注釋和CSS中的注釋
答:
HTML:<!--注釋內容 -->
CSS:/*注釋內容*/
4.CSS中的引入方式有哪些?說出他們的區別和語法
答:CSS有三種引入方式根據樣式表的位置可分為行間樣式表,內部樣式表,外部樣式表。行間樣式表是直接寫在<body>與</body>之間的,編寫較為麻煩繁瑣,無法一次性更改所有變量,給寫程序的人帶來了極大
的不便。而內部樣式表是把<style></style>放入head部分,通過ID來將樣式表引入,此方法較方便快捷,程序更加鮮明整齊。外部樣式表是通過一個鏈接來將外部的CSS文件直接作用在HTML文件上,對內容進行定義。外部樣式表:
引入外部CSS文件
<link rel="stylesheet" type="text/css" href="my.css"/>
內部樣式表:
<style>
#id {width:100px height:100px background:red }
</style>
行間樣式表:
<div style="weidth:100px height:100px background:red "></div>
5.背景圖片有哪些子屬性?
答:背景圖片則子屬性分別為background image為圖片的鏈接位置,background color為背景的顏色,background repeat為背景圖片的重復,background position為背景圖片的定位,Background-attachment為背景圖片的固定。
6.Border有哪些子屬性 其中border-style的屬性值有哪些?
答:border-style:solid; 邊框樣式
border-width:1px 2px 3px 4px; 邊框的線條寬度
border-color 邊框的線條顏色
solid:單實線。
double:雙實線。
dashed:虛線。
dotted:點線。
groove:溝線(groove)。
ridge:脊線(ridge)。
inset:內陷邊框。
outset:外凸邊框。
none:無邊框。
7.什么是CSS ?
答:CSS就是一種叫做層疊樣式表(Cascading Stylesheet)的技術。 在主頁制作時采用CSS技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。 只要對相應的代碼做一些簡單的修改,就可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。 CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力。
8.你知道的CSS屬性有哪些?
答:字體屬性(Font) font-style font-weight font-size 顏色和背景屬性Background-color Background-image Background-repeat Background-attachment Background-position 邊框屬性 Border-top-width Border-right-width Border-bottom-width Border-left-width Border-width Border-color Border-style Border-top Border-right Border-bottom Border-left 。以上是我目前為止通過視頻學習到的,大部分我都動手敲過驗證其作用。
9.什么是W3C標準?
答:W3C是英文 World Wide Web Consortium 的縮寫,中文意思是W3C理事會或萬維網聯盟。W3C于1994年10月在麻省理工學院計算機科學實驗室成立。創建者是萬維網的發明者TiM。W3C組織(是對網絡標準制定的一個非贏利組織,像HTML、XHTML、CSS、XML的標準就是由W3C來定制。W3C會員(大約500名會員)包括生產技術產品及服務的廠商、內容供應商、團體用戶、研究實驗室、標準制定機構和政府部門,一起協同工作,致力在萬維網發展方向上達成共識。(此段引用百度)
10.常見的瀏覽器都有哪幾種,五大瀏覽器內核分別是什么?
答:IE瀏覽器,火狐瀏覽器,谷歌瀏覽器,蘋果瀏覽器等。
1.Chromium內核,以Chrome為代表
2.Gecko內核,以Firefox為代表
3.Presto內核,以老版本的Opera為代表
4.Webkit內核,以Sarfari為代表
5.Trident內核,以IE為代表
2.感想
這短短兩天的學習讓我感受到自從我上大學以來再也沒有過得學習的熱情以及對于學習的滿足感。我知道了什么是HTML,什么是CSS,什么是Javascript,什么是網頁設計師,我懂得了樣式表與腳本的神奇,我知道那花花綠綠的網頁設計與制作的不易,我終于用到了慕名已久的Photoshop,學會了摳圖。這兩天,特別是第二天,我一直坐在電腦前,我終于知道我眼前的被稱為計算機的機器真的不只是我用來打游戲的游戲機,這兩天我甚至連我一直不間斷的首勝也停了,因為我意識到這臺機器對我的意義,他很可能就是我以后吃飯的工具,是我發揮人生價值的平臺。坐在電腦前我深刻感受到要想學習程序,學習web開發最必不可少的就是練習,老師講的再好自己不多練兩遍,東西還是老師的,你只是認可了老師的思維與知識并沒有真正學成自己的東西,坐在板凳前望著屏幕上大段大段等著你去填寫的空白,終究也只是一臉茫然。只有經過無數次的練習才能有那剎那間靈感的迸發。
對于這兩天的學習我有一些疑問:
1,我一直學的是圖片,邊框之類的設計,對于網頁上稀奇古怪的文字效果有沒有一些特別的技術來完成?
2.在我進行視頻學習的時候,聽老師說了一句網頁里的flash動畫,我想知道網頁內的光怪陸離的廣告FLASH動畫是不是也要掌握,應該如何學習?
3.我在使用Photoshop摳圖時發現在虛線框選中之后按住Alt鍵進行放大操作時,虛線框偏離了之前的選中范圍,我知道他其實沒動,但給人的感覺是圖片在放大而選中其中一部分的虛線框卻并沒有隨之放大,我不知道是不是我操作上有什么問題,但對我造成了很大的困擾。
4.我在使用Photoshop時發現有些圖片其邊框顏色極淡,很難分辨出來并進行選中,我的眼睛都瞅流淚了,有什么辦法可以輕松將圖片的各個部位展現出來,而不是用眼睛很辛苦的看。
最后對于一直幫助我解答問題的十七點網的同學與老師表示感謝,其中一個還幫我檢查出;與:的錯誤,我自己檢查了一個多小時都沒檢查出來,都快放棄了,再次感謝!
附上一個我做的百度側邊欄。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
#box
{
width: 134px;
height: 1015px;
}
#title
{
width:134px;
height:79px;
border-bottom:solid #f0f0f0 2px;
background: url(0.gif) #f9f9f9 no-repeat 15px 19px
}
#content-1
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(1.gif) #f9f9f9 no-repeat 27px 41px;
}
#content-2
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(d2.gif) #f9f9f9 no-repeat 36px 27px;
}
#content-3
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(3.gif) #f9f9f9 no-repeat 31px 20px;
}
#content-4
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(4.gif) #f9f9f9 no-repeat 36px 20px;
}
#content-5
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(5.gif) #f9f9f9 no-repeat 31px 25px;
}
#content-6
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(6.gif) #f9f9f9 no-repeat 34px 23px;
}
#content-7
{
width:134px;
height:10px;
background:#f9f9f9;
}
</style>
</head>
<body>
<div id="box">
<div id="title"> </div>
<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>
<div id="content-4"></div>
<div id="content-5"></div>
<div id="content-6"></div>
<div id="content-7"></div>
</div>
</body>
</html>
鏈接: http://pan.baidu.com/s/1jHF7LNC 密碼: 83fr