Day10:html和css
生活随笔
收集整理的這篇文章主要介紹了
Day10:html和css
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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 點贊
轉載于:https://www.cnblogs.com/dashucoding/p/11140364.html
總結
以上是生活随笔為你收集整理的Day10:html和css的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql浅拷贝_深拷贝与浅拷贝
- 下一篇： Opencv3与Opencv2的区别，及