首先來認識html:
作用是可以用來製作網頁,但是html編寫的網頁都是通過瀏覽器訪問的。
想要編寫HTML網頁,直接在本地創建一個txt文件,然後把後綴名改成 .html 或者.htm都可以。
編寫網頁的標準規範是W3C組織制定的。
HTML 結構標準
<! DCOTYPE HTML> 聲明文檔類型
<html> 根標籤
<head> 頭標籤
<title></title> 標題標籤
</head>
<body> 主題標籤
</body>
</html>
HTML語言的語法就是標籤,學會了標籤的使用,那麼就學會了html語言,並且這麼標籤是預定義的,不可以擴展。
標籤分類有兩種:1.單標籤 <! DCOTYPE HTML>
2. 雙標籤 <html></html>
前端的開發工具:
webstorm:很強大實際開發主流選擇
DW:歷史很悠久了
sublime :也是主流的企業級首選開發工具。
hbuider:號稱最快的前端開發工具。
(單標籤)換行標籤 <br />和 水平線標籤<hr />
<p></p>段落標籤,上下自動生成空白行。
<h1></h1>從h1-h6 字體逐漸變小,h1一個網頁中只能出現一次。(標題標籤)
<font></font>字體標籤
文本格式化標籤:
<strong></strong>表示加粗
<b></b>:加粗
<em></em><i></i>傾斜
<del></del><s></s>刪除線
<ins></ins> <u></u>下劃線
使用前面的,因爲標籤名稱更加有意義。
圖片標籤:
相對路徑:imgs/anta.PNG
絕對路徑:D:/HBuilder/hworksapce/html01/imgs/anta.PNG
列表分爲有序列表、無需列表、和自定義列表:
無序列表
<!-- 無序列表 --> <ul type="circle" > <li>蘋果</li> <li>香蕉</li> <li>桃子</li> <li>火龍果</li> </ul>
<ul type="disc" > <li>蘋果</li> <li>香蕉</li> <li>桃子</li> <li>火龍果</li> </ul>
<ul type="square" > <li>蘋果</li> <li>香蕉</li> <li>桃子</li> <li>火龍果</li> </ul> |
有序列表
<!-- 有序列表 --> <ol type="1" start="10" > <li>蘋果</li> <li>香蕉</li> <li>桃子</li> <li>火龍果</li> </ol>
<ol type="A"> <li>蘋果</li> <li>香蕉</li> <li>桃子</li> <li>火龍果</li> </ol>
<ol type="i"> <li>蘋果</li> <li>香蕉</li> <li>桃子</li> <li>火龍果</li> </ol> |
自定義列表
<!-- 自定義列表 --> <dl> <dt>遊戲</dt> <!-- 小標題--> <dd>LOL</dd> <!-- 解釋標題--> <dd>農藥</dd> <dd>吃雞</dd> </dl> |
<meta charset="utf-8">指定編碼集
<meta name="keywords"content="武漢宏鵬java培訓,PHP培訓,web前端培訓,UI培訓,人工智培訓" />有利於被搜索到。Seo
<meta name="description"content="武漢宏鵬java培訓,PHP培訓,web前端培訓,UI培訓,人工智培訓" />網站的介紹
<meta http-equiv="refresh"content="5;http://www.whhpjt.cn" />網頁重定向
<link rel="stylesheet"type="text/css"href="css/1.css"/>
引入樣式表
<link rel="icon" href="" />引入小圖標
<table></table> 表格
<tr></tr>行
<td></td>列
border="1" 邊框
width="500" 寬度
height="300" 高度
cellspacing="0"單元格與單元格之間的距離
cellpadding="15"內容與邊框的距離
align="center"align="left"align="right"可以設置表格在網頁中的位置。
如果給tr或者td使用,tr或者td的內容居中。
bgcolor="pink":設置背景顏色
表格的標準結構:
<thead></thead>表頭
<tbody></tbody>身體默認在網頁中會加上
<tfoot></tfoot>腳部
colspan 行合併
rowspan 列合併
valign="bottom" topcenter 垂直對齊方式