Day10:html和css
生活随笔
收集整理的這篇文章主要介紹了
Day10:html和css
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Day10:html和css
<html> <body> <h1>標(biāo)題</h1> <p>段落</p> </body> </html>HTML 是用來描述網(wǎng)頁的一種語言，超文本標(biāo)記語言，不是一種編程語言，而是一種標(biāo)記語言，是一套標(biāo)記標(biāo)簽，使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。
HTML 標(biāo)簽
HTML 文檔描述網(wǎng)頁
<html> 與 </html> 描述網(wǎng)頁 <body> 與 </body> 頁面內(nèi)容 <h1> 與 </h1> 標(biāo)題 <p> 與 </p> 段落HTML 標(biāo)題
<h1> - <h6>HTML 段落
<p> 標(biāo)簽HTML 鏈接
<a> 標(biāo)簽HTML 圖像
<img> 標(biāo)簽HTML 元素語法
以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止，某些 HTML 元素具有空內(nèi)容，大多數(shù) HTML 元素可擁有屬性。
<html> <body> <p></p> </body> </html> <p> 元素 <body> 元素 <html> 元素 <h1> 定義標(biāo)題的開始 <body> 定義 HTML 文檔的主體 <table> 定義 HTML 表格 class 規(guī)定元素的類名 id 規(guī)定元素的唯一 id style 規(guī)定元素的行內(nèi)樣式 <center> 定義居中的內(nèi)容。 <font> 和 <basefont> 定義 HTML 字體。 <s> 和 <strike> 定義刪除線文本 <u> 定義下劃線文本 align 定義文本的對齊方式 bgcolor 定義背景顏色 color 定義文本顏色 <code> <pre></pre> </code>HTML 鏈接 - target 屬性
target="_blank"name 屬性規(guī)定錨（anchor）
<img> 是空標(biāo)簽
<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 定義文檔或節(jié)的頁眉 nav 定義導(dǎo)航鏈接的容器 section 定義文檔中的節(jié) article 定義獨(dú)立的自包含文章 aside 定義內(nèi)容之外的內(nèi)容 footer 定義文檔或節(jié)的頁腳 details 定義額外的細(xì)節(jié)iframe 的語法
<iframe src="URL"></iframe>HTML 頭部元素
<title> 標(biāo)簽定義文檔的標(biāo)題 <title>Title of the document</title><base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)（target） <base target="_blank" /><link> 標(biāo)簽定義文檔與外部資源之間的關(guān)系 <link rel="stylesheet" type="text/css" href="mystyle.css" /><style> 標(biāo)簽用于為 HTML 文檔定義樣式信息 <style type="text/css"> body {background-color:yellow} p {color:blue} </style><meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù) <meta name="description" content="" /><script> 元素統(tǒng)一資源定位器
URL 稱為網(wǎng)址
http 超文本傳輸協(xié)議 https 安全超文本傳輸協(xié)議 ftp 文件傳輸協(xié)議<!DOCTYPE> 聲明幫助瀏覽器正確地顯示網(wǎng)頁
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head><body></body></html>什么是 Canvas？
// 使用 JavaScript 在網(wǎng)頁上繪制圖像 <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新標(biāo)簽
<!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 { /*選擇文字時候的狀態(tài)*/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>學(xué)生檔案</legend><label>姓名: <input type="text" placeholder="請輸入學(xué)生名字"/></label> <br /><br /><label>手機(jī)號: <input type="tel" /></label> <br /><br /><label>郵箱: <input type="email" /></label> <br /><br /><label>所屬學(xué)院: <input type="text" placeholder="請選擇學(xué)院" list="xueyuan"/><datalist id="xueyuan"><option>學(xué)院</option><option>學(xué)院</option><option>學(xué)院</option><option>學(xué)院</option></datalist><br /><br /><label>出生日期: <input type="date" /></label> <br /><br /><label>成績: <input type="number" /></label> <br /><br /><label>畢業(yè)時間: <input type="date" /></label> <br /><br /><input type="submit" /> <input type="reset" /></fieldset></form></body> </html>如果看了覺得不錯
點(diǎn)贊！轉(zhuǎn)發(fā)！
達(dá)叔小生：往后余生，唯獨(dú)有你
You and me, we are family !
90后帥氣小伙，良好的開發(fā)習(xí)慣；獨(dú)立思考的能力；主動并且善于溝通
簡書博客： 達(dá)叔小生
https://www.jianshu.com/u/c785ece603d1
結(jié)語
- 下面我將繼續(xù)對 其他知識 深入講解 ，有興趣可以繼續(xù)關(guān)注
- 小禮物走一走 or 點(diǎn)贊
轉(zhuǎn)載于:https://www.cnblogs.com/dashucoding/p/11140364.html
總結(jié)
以上是生活随笔為你收集整理的Day10:html和css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql浅拷贝_深拷贝与浅拷贝
- 下一篇： Opencv3与Opencv2的区别，及