html入門(一)css樣式及html標(biāo)簽

最近閑來無事,看看很多關(guān)于html入門的一些書籍,在此我將此整理了一下寫一個整理大綱出來,希望對初學(xué)者有所幫助。

  1. 軟件主要分兩種架構(gòu)C/S和B/S
  2. B/S中的B指的是browsers,是瀏覽器的意思,S值Server指服務(wù)器的意思
  3. 根據(jù)W3C標(biāo)準(zhǔn),一個網(wǎng)頁主要由三部分組成:結(jié)構(gòu)(html)、表現(xiàn)(css)還有行為(JavaScript)。
  4. 一個最基本的HTML頁面:
<!DOCTYPE  html>
<html>
<head>
    <meta  charset="UTF-8">
    <title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
    <h1>網(wǎng)頁正文</h1>
</body>
</html>
  1. <標(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>

  1. <p>我是一個<em>段落</em></p>
    p也是一個元素,em是p的子元素,p是em的父元素。
    <em>斜體
  2. <h1 title="我是一個標(biāo)題">標(biāo)題</h1>
    <img src="網(wǎng)絡(luò)連接或者本地路徑" alt="名字描述" />
  3. 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)提示文字。
  4. html的注釋方法
  5. <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)站
  6. <head>標(biāo)簽用來表示網(wǎng)頁的元數(shù)據(jù),head中包含了瀏覽器和搜索引擎使用的其他不可見信息。head標(biāo)簽作為html標(biāo)簽的子元素的出現(xiàn),一個網(wǎng)頁中只能有一個head。
  7. <title>標(biāo)簽表示網(wǎng)頁的標(biāo)題,一般會在網(wǎng)頁的標(biāo)題欄上顯示。 title標(biāo)簽中的文字,是頁面優(yōu)化的最重要因素。在搜索引擎的搜索時最先看到的、最醒目的內(nèi)容。
  8. <body>標(biāo)簽用來設(shè)置網(wǎng)頁的主體,所有在頁面中能看到的內(nèi)容都應(yīng)該編寫到body標(biāo)簽中。
  9. <br />標(biāo)簽表示一個換行標(biāo)簽,使用br標(biāo)簽可以使br標(biāo)簽后的內(nèi)容另起一行。
  10. <hr />標(biāo)簽是水平線標(biāo)簽,使用hr標(biāo)簽可以在頁面中打印一條水平線,水平線可以將頁面分成上下兩個部分。
  11. <a>標(biāo)簽是超鏈接標(biāo)簽,通過a標(biāo)簽,可以快速跳轉(zhuǎn)到其他頁面。
    href 指向一個鏈接地址
    target 設(shè)置打開目標(biāo)頁面的位置,可選值:_blank新窗口、_self當(dāng)前窗口。
  12. 字體顏色
    <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>
  13. <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è)置樣式.

  1. 行內(nèi)樣式
    <p style="color: red;font-size: 30px"></p>
  2. 內(nèi)部樣式表
    <style>
    p{color:red; font-size: 30px;}
    </style>
    這樣使css獨立于html代碼,而且可以同時為多個元素設(shè)置樣式,這是我們使用的比較多的一種方式。
  3. 外部樣式表
    可以將所有的樣式保存到一個外部的css文件中,然后通過<link>標(biāo)簽將樣式表引入到文件中。
    <link rel="stylesheet" type="text/css" href="style.css">
    這種方式將樣式表放入到了頁面的外部,可以在多個頁面中引入,同時瀏覽器加載文件時可以使用緩存,這是我們開發(fā)中使用的最多的方式。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,118評論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,802評論 1 45
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,930評論 0 0
  • 不知道從什么時候開始,心里竟然牽掛著你,總想著你在另一個城市過得怎么樣。生命中有人牽掛是幸福的,不管是你牽掛...
    司空逸羽閱讀 1,081評論 1 4
  • 英語學(xué)習(xí)在我們的學(xué)校生涯中一直占了很大的比例,但始終是“重讀寫,輕聽說”,導(dǎo)致許多人學(xué)了多年英語,口語還是很渣。 ...
    零瓏心閱讀 12,664評論 0 5

友情鏈接更多精彩內(nèi)容