前端基礎之 html
---恢復內容開始---
web服務本質
html
定義
超文本標記語言。是通過標簽語言來標記要顯示的網頁中的各個部分。一套瀏覽器認識的規則。
結構
1.<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個HTML文檔
在它們之間是文檔的頭部<head>和主體<body>.
2.它們之間的內容不會在瀏覽器的文檔窗口顯示，但是期間的元素有特殊重要的意義。
3.<title></title> 定義網頁標題，在瀏覽器標題欄顯示
4.<body></body> 之間的文本是可見的網頁主體內容
html標簽格式
1.由尖括號包圍的關鍵詞
2.通常是成對出現的（雙邊標記），比如<div>和</div>
3.標簽不區分大小寫
4.標簽分為開始和結束兩部分標簽之間的內容我們叫做標簽體<a> </a>。有些標簽功能比較簡單，使用一個標簽即可，這種標簽叫做自閉和標簽。<br/><hr/><img/>
5.標簽可以嵌套但是不能交叉嵌套；
標簽的語法
<標簽名 屬性1=‘屬性值1’屬性2=‘屬性值2’……>內容部分</標簽名>
<標簽名 屬性1=‘屬性值1’屬性2=‘屬性值2’……/>
常用標簽
1.<!DOCTYPE>標簽
聲明位於文檔中的最前面的位置，處於<html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML或XHTML規範
1.BackCompat:怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
2.CSS1Compat: 標準模式，瀏覽器使用W3C的標準解析渲染頁面
2.<head>內常用標簽 頭部
<meta>標簽位於文檔的頭部，不包含任何內容，提供的信息是用戶不可見的
meta 標簽共有兩個屬性，它們分別是http-equiv 屬性和 name 屬性，不同的屬性有不同的參數值，這些不同的參數值實現了不同的網頁功能。
name屬性主要用於描述網頁，與之對應的屬性值為content,content中的內容主要是便於搜索收獲機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="老男孩培訓機構是由一個很老的男孩創建的">
http-equiv 屬性：相當於http 的文件頭作用，它可以向瀏覽器傳回一些有用的信息以幫助正確地顯示網頁內容與之相對的屬性值為content,content中的內容其實就是各個參數的變量值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(註意後面的引號，分別在秒數的前面和網址的後面)
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
3.<body>內常用標簽 主體
<hn>: n 的取值範圍是1-6 ; 從大到小。用來表示標題
<p> : 段落標簽。包裹的內容被換行。並且也上下內容之間有一行空白
<b> <strong> :加粗標簽
<em>: 文字變成斜體
<sup> 和 <sub> ：上角標 和 下角標
<br> : 換行
<hr> : 水平線
特殊字符：< > " © ®
4.<div>和<span>
<div></div> 只是一個塊級元素，並無實際意義 主要通過CSS 樣式為其賦予不同的表現
<span></span> 為內聯行（行內元素），同上。
5.<img>
src: 要顯示圖片的路徑
alt: 圖片沒有加載成功時的提示
title : 鼠標懸浮時的提示信息
width : 圖片的寬
height ：圖片的高
列表標簽
無序列表<ul> :[type屬性：disc(實心圓點)(默認). circle(空心圓圈).square(實心方塊)]
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol>
有序列表<ol>
<li> :列表中的每一項
<dl> :定義列表
<dt> : 列表標題
<dd> : 列表項
<dl> <dt>計算機</dt> <dd>用來計算的儀器 ... ...</dd> <dt>顯示器</dt> <dd>以視覺方式顯示信息的裝置 ... ...</dd> </dl>
表格標簽
<table>
<tr>
<td>標題</td>
<td>標題</td>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
</tr>
</table>
<tr> :table row
<th> :table head cell
<td>: table data cell
border :表格邊框
cellpadding : 內邊距
cellspacing: 外邊距
width :像素百分比。
rowspan :單元格豎跨多少行
colspan : 單元格橫跨多少列（即合並單元格）
---恢復內容結束---
前端基礎之 html