最近閑來無事,看看很多關(guān)于html入門的一些書籍,在此我將此整理了一下寫一個整理大綱出來,希望對初學(xué)者有所幫助。
- 軟件主要分兩種架構(gòu)C/S和B/S
- B/S中的B指的是browsers,是瀏覽器的意思,S值Server指服務(wù)器的意思
- 根據(jù)W3C標(biāo)準(zhǔn),一個網(wǎng)頁主要由三部分組成:結(jié)構(gòu)(html)、表現(xiàn)(css)還有行為(JavaScript)。
- 一個最基本的HTML頁面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
<h1>網(wǎng)頁正文</h1>
</body>
</html>
- <標(biāo)簽名>標(biāo)簽內(nèi)容<\標(biāo)簽名>
6.<h1>一級標(biāo)題<\h1>
<h2>二級標(biāo)題<\h2>
<h3>三級標(biāo)題<\h3>
<h4>四級標(biāo)題<\h4>
<h5>五級標(biāo)題<\h5>
<h6>六級標(biāo)題<\h6>
- <p>我是一個<em>段落</em></p>
p也是一個元素,em是p的子元素,p是em的父元素。
<em>斜體 - <h1 title="我是一個標(biāo)題">標(biāo)題</h1>
<img src="網(wǎng)絡(luò)連接或者本地路徑" alt="名字描述" /> - id屬性作為標(biāo)簽的唯一標(biāo)識,在同一個網(wǎng)頁中不能出現(xiàn)相同的id屬性值。
class屬性用來為標(biāo)簽分組,擁有相同class屬性的標(biāo)簽我們認(rèn)為就是一組,可以出現(xiàn)相同的class屬性,可以為一個元素指定多個class。
title屬性用來指定標(biāo)簽的標(biāo)題,指定title以后,鼠標(biāo)移入到元素上方時,會出現(xiàn)提示文字。 - html的注釋方法
- <meat> 標(biāo)簽
<meta charset="utf-8"> 設(shè)置頁面的字符集
<meta name="description" content=""> 設(shè)置網(wǎng)頁的描述
<meta name="keywords" content="H5,JaveScript,前端,python">
<meta name="keywords" content=""> 設(shè)置網(wǎng)頁的關(guān)鍵字
<meta name="description" content="發(fā)布H5,js,python等前后端相關(guān)信息">
<meta http-equiv="refresh" content="5;url=地址"/>請求的重定向
例如
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
設(shè)置網(wǎng)頁關(guān)鍵字有利于用戶快速搜索到你的網(wǎng)站 - <head>標(biāo)簽用來表示網(wǎng)頁的元數(shù)據(jù),head中包含了瀏覽器和搜索引擎使用的其他不可見信息。head標(biāo)簽作為html標(biāo)簽的子元素的出現(xiàn),一個網(wǎng)頁中只能有一個head。
- <title>標(biāo)簽表示網(wǎng)頁的標(biāo)題,一般會在網(wǎng)頁的標(biāo)題欄上顯示。 title標(biāo)簽中的文字,是頁面優(yōu)化的最重要因素。在搜索引擎的搜索時最先看到的、最醒目的內(nèi)容。
- <body>標(biāo)簽用來設(shè)置網(wǎng)頁的主體,所有在頁面中能看到的內(nèi)容都應(yīng)該編寫到body標(biāo)簽中。
- <br />標(biāo)簽表示一個換行標(biāo)簽,使用br標(biāo)簽可以使br標(biāo)簽后的內(nèi)容另起一行。
- <hr />標(biāo)簽是水平線標(biāo)簽,使用hr標(biāo)簽可以在頁面中打印一條水平線,水平線可以將頁面分成上下兩個部分。
- <a>標(biāo)簽是超鏈接標(biāo)簽,通過a標(biāo)簽,可以快速跳轉(zhuǎn)到其他頁面。
href 指向一個鏈接地址
target 設(shè)置打開目標(biāo)頁面的位置,可選值:_blank新窗口、_self當(dāng)前窗口。 - 字體顏色
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font> - <a target="_blank">百度一下</a> 跳轉(zhuǎn)到新的頁面
css
層疊樣式表 (Cascading Style Sheets)
css可以用來為網(wǎng)頁創(chuàng)建樣式表,通過樣式表可以對網(wǎng)頁進(jìn)行裝飾。所謂層疊,可以將整個網(wǎng)頁想象成是一層一層的結(jié)構(gòu),層次高的將會覆蓋層次低的。而css就可以分別為網(wǎng)頁的各個層次設(shè)置樣式.
- 行內(nèi)樣式
<p style="color: red;font-size: 30px"></p> - 內(nèi)部樣式表
<style>
p{color:red; font-size: 30px;}
</style>
這樣使css獨立于html代碼,而且可以同時為多個元素設(shè)置樣式,這是我們使用的比較多的一種方式。 - 外部樣式表
可以將所有的樣式保存到一個外部的css文件中,然后通過<link>標(biāo)簽將樣式表引入到文件中。
<link rel="stylesheet" type="text/css" href="style.css">
這種方式將樣式表放入到了頁面的外部,可以在多個頁面中引入,同時瀏覽器加載文件時可以使用緩存,這是我們開發(fā)中使用的最多的方式。