Day10:
html和css
<html>
<body>
<h1>標題</h1>
<p>段落</p>
</body>
</html>
HTML 是用來描述網頁的一種語言，超文本標記語言，不是一種編程語言，而是一種標記語言，是一套標記標簽，使用標記標簽來描述網頁。
HTML 標簽
HTML 文檔描述網頁
<html> 與 </html> 描述網頁
<body> 與 </body> 頁面內容
<h1> 與 </h1> 標題
<p> 與 </p> 段落
HTML 標題
<h1> - <h6>
HTML 段落
<p> 標簽
HTML 鏈接
<a> 標簽
HTML 圖像
<img> 標簽
HTML 元素語法
以開始標簽起始，以結束標簽終止，某些 HTML 元素具有空內容，大多數 HTML 元素可擁有屬性。
<html>
<body>
<p></p>
</body>
</html>
<p> 元素
<body> 元素
<html> 元素
<h1> 定義標題的開始
<body> 定義 HTML 文檔的主體
<table> 定義 HTML 表格
class 規定元素的類名
id 規定元素的唯一 id
style 規定元素的行內樣式
<center> 定義居中的內容。
<font> 和 <basefont> 定義 HTML 字體。
<s> 和 <strike> 定義刪除線文本
<u> 定義下劃線文本
align 定義文本的對齊方式
bgcolor 定義背景顏色
color 定義文本顏色
<code>
<pre></pre>
</code>
HTML 鏈接 - target 屬性
target="_blank"
name 屬性規定錨（anchor）
<img> 是空標簽
<img src="url" />
表格
<table border="1">
<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>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
無序列表
<ul>
<li>1</li>
<li>2</li>
</ul>
有序列表
<ol>
<li>1</li>
<li>2</li>
</ol>
<div> 和 <span>
header 定義文檔或節的頁眉
nav 定義導航鏈接的容器
section 定義文檔中的節
article 定義獨立的自包含文章
aside 定義內容之外的內容
footer 定義文檔或節的頁腳
details 定義額外的細節
iframe 的語法
<iframe src="URL"></iframe>
HTML 頭部元素
<title> 標簽定義文檔的標題
<title>Title of the document</title><base> 標簽為頁面上的所有鏈接規定默認地址或默認目標（target）
<base target="_blank" /><link> 標簽定義文檔與外部資源之間的關系
<link rel="stylesheet" type="text/css" href="mystyle.css" /><style> 標簽用于為 HTML 文檔定義樣式信息
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style><meta> 標簽提供關于 HTML 文檔的元數據
<meta name="description" content="" /><script> 元素
統一資源定位器
URL 稱為網址
http 超文本傳輸協議
https 安全超文本傳輸協議
ftp 文件傳輸協議
<!DOCTYPE> 聲明幫助瀏覽器正確地顯示網頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head><body></body></html>
什么是 Canvas？
// 使用 JavaScript 在網頁上繪制圖像
<canvas id="myCanvas" width="200" height="100"></canvas><script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
html5新標簽
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title><style>header {width: 200px;height: 100px;background-color: red;}nav {width: 300px;height: 100px;background-color: pink;}</style>
</head>
<body><header></header><nav>上</nav><aside></aside><article></article><time>12</time>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title><style>fieldset {width: 300px;}</style>
</head>
<body><input type="text" value="請輸入" list="star"/><datalist id="star"><option value=""></option><option value=""></option><option value=""></option><option value=""></option><option value=""></option></datalist><fieldset><legend>登錄</legend>用戶名： <input type="text"> <br>密碼： <input type="password"></fieldset>
</body>
</html>
// 表單
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title>
</head>
<body><form action="">用戶名： <input type="text" placeholder="請輸入用戶名" autofocus> <br />上傳頭像： <input type="file" name="" id="" multiple > <br />昵稱： <input type="text" required accesskey="s"> <br /><input type="submit" value="提交按鈕"></form>
</body>
</html>
// 視頻
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title>
</head>
<body><iframe height=200 width=200 src='' frameborder=0 'allowfullscreen'></iframe>
</body>
</html>
// 視頻
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title>
</head>
<body><audio controls loop><source src=".mp3"/><source src=".ogg"/></audio><video autoplay controls><source src=".ogg"/><source src=".mp4"/></video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title><style>p::selection { /*選擇文字時候的狀態*/background-color: pink;color: yellow;}</style>
</head>
<body><p>中國</p>
</body>
</html>
// 表單
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"></head><body><form action=""><fieldset><legend>學生檔案</legend><label>姓名: <input type="text" placeholder="請輸入學生名字"/></label> <br /><br /><label>手機號: <input type="tel" /></label> <br /><br /><label>郵箱: <input type="email" /></label> <br /><br /><label>所屬學院: <input type="text" placeholder="請選擇學院" list="xueyuan"/><datalist id="xueyuan"><option>學院</option><option>學院</option><option>學院</option><option>學院</option></datalist><br /><br /><label>出生日期: <input type="date" /></label> <br /><br /><label>成績: <input type="number" /></label> <br /><br /><label>畢業時間: <input type="date" /></label> <br /><br /><input type="submit" /> <input type="reset" /></fieldset></form></body>
</html>
如果看了覺得不錯
點贊！轉發！
達叔小生：往后余生，唯獨有你
You and me, we are family !
90后帥氣小伙，良好的開發習慣；獨立思考的能力；主動并且善于溝通
簡書博客： 達叔小生
https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
- 小禮物走一走 or 點贊
