HTML
超文本標記語言，是一種用于創建網頁的標記語言
萬事開頭難：
我使用的是sublim_test編輯器，ctrl+n 新建檔案，ctrl+s 保存檔案（記得修改檔案后綴名為.html)
輸入html:5 用table補全感受一下快樂吧
- <!DOCTYPE>宣告有助于瀏覽器中正確顯示網頁，用來告知 Web 瀏覽器頁面使用了哪種 HTML 版本
- <html>元素是 HTML 頁面的根元素
- <head>元素包含了檔案的元（meta）資料，如<meta charset="UTF-8">定義網頁編碼格式為 utf-8，title就是標題，比如現在的標題就是document
- <title>元素描述了檔案的標題
- <body>元素包含了可見的頁面元素
標題
碎碎念：大部分命令使用table補全都能省時省力
使用 ctrl+/ 可以注釋代碼
將檔案拖入瀏覽器就可以查看效果了
記得ctrl+s保存不然你啥也看不著
對了，f12就可以看別的網站的源代碼啦
效果圖
可以發現標題字號會越來越小類似于一級標題，二級標題，三級標題
加一條水平線看看吧<hr>
段落
鏈接
通過標簽<a>實作（就是敲個a然后table）
使用 target 屬性，你可以定義被鏈接的檔案在何處顯示
下面的這行會在新視窗打開檔案
影像
通過標簽<img>定義
如果出不來圖片就改為文字“圖片”，設定圖片的寬高
換個行<br>
屬性
- 屬性和屬性值，盡量小寫，本來這樣做也方便些，
- class 屬性可以多用 class=" " （引號里面可以填入多個class屬性）
- id 屬性只能單獨設定 id=" "（只能填寫一個，多個無效）
沒啥可說的
文本格式化
<b> 與<i> 定義粗體或斜體文本，<strong> 或者 <em>意味著你要呈現的文本是重要的
css
就很帥
可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式
使用 text-align（文字對齊）屬性指定文本的水平與垂直對齊方式
表格
表格由 <table> 標簽來定義，每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）
資料單元格可以包含文本、圖片、串列、段落、表單、水平線、表格等
碎碎念：輸入 tr*3 和 td*3 然后 table 試試吧
border=0或border=10有什么區別呢，試試吧，反正我還是喜歡它等于1
給他加個頭吧
串列
有序<ol>，無序<ul>
<div> 和<span>
<div>就是個小盒子，可以盒子套盒子，盒子里能裝東西
span就是個塊，可以存東西，一般一出來就是好幾個，自動換行
布局
有點燃
就很棒！("w")
表單和輸入
表單使用表單標簽 <form> 來設定
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉串列、單選框(radio-buttons)、復選框(checkboxes)等
好啦，就學到這里啦，這是我一天的學習成果僅用于自己復習和沒學過html的小白看著玩玩，有任何錯誤不足歡迎指出，拜拜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color:yellow;">
<h1>這是第一個標題</h1>
<hr>
<h2>這是第二個了</h2>
<hr>
<h3>第三個了！</h3>
<hr>
<p>這是一個段落</p>
<p>這是另一個段落</p>
<a href="https://www.baidu.com" target="_blank">baidu</a><br>
<img src="E:\礦大\圖層 2.jpg" alt="圖片" width="239" height="10">
<hr><strong>這是加粗</strong>
<br><b>這也是</b>
<br><em>這是斜體</em>
<br><i>被棄用的斜體</i>
<h2 style="background-color:red;">這是一個標題</h2>
<p style="background-color:green;">這是一個段落，</p>
<h1 style="font-family:verdana;">一個標題</h1>
<p style="font-family:arial;color:red;font-size:20px;">一個段落，</p>
<h1 style="text-align:center;">居中對齊的標題</h1><table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table><ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul><ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol><div style="background-color: red; width: 300px; height: 40px">
這是一個盒子
<div>
盒中盒
</div>
</div></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鐵樹開花</title>
</head>
<body>
<div id="container" style="width: 500px">
<div id="header" style="background-color: red">
<h1 style="margin-bottom: 0;text-align: center;">鐵樹開花了</h1>
</div>
<div id="menu" style="background-color: yellow;height: 200px;width: 100px;float: left;">
<b>豬豬</b><br>
<b>乘加乘</b><br>
<b>marry</b><br>
<b>18之光</b>
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">完結撒花</div>
<div id="footer" style="background-color:pink;clear:both;text-align:center;">著作權 ? oyxa ("w") qxy</div>
</div>
</div>
</body>
</html>
<form action="">
姓名：<input type="text" name="" id="">
郵箱：<input type="email" name="" id="">
password: <input type="password" name="password" id=""><br>
<input type="radio" name="gender" id="">男
<input type="radio" name="gender" id="">女<br>
<input type="checkbox" name="name" id="">學校名稱<br>
<input type="checkbox" name="area" id="">學校大小<br>
<input type="submit" value="提交"></form>
撒花~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/247167.html
標籤：其他