綠水青山·美麗中國”
首屆“原山杯”全國短視頻大賽
國家林草局宣傳中心、中國綠色時(shí)報(bào)社主辦
山東原山林場協(xié)辦
大賽宗旨
活動(dòng)面向社會征集聚焦綠水青山的微視頻原創(chuàng)佳作,展示林草事業(yè)高質(zhì)量發(fā)展歷程與成果,呈現(xiàn)美麗中國建設(shè)者的奮斗精神與精彩故事,記錄綠水青山中的美好生活和自然生態(tài)之美,打造新媒體時(shí)代林草傳播新品牌。
大賽主題
“綠水青山·美麗中國”
圍繞主題,分人、物、景、績、事、識六大版塊。
人
贊一贊最美林草人
無論泥巴裹滿褲腿的種樹人,還是寂寞高塔上的瞭望員,抑或是扎根田野的科技特派員……平凡崗位上的他們,就是最可愛的主角。
物
抖一抖森林小萌主
展示神奇的野生動(dòng)植物。頑皮的猴子,歡快的鳥兒,奇特的植物……打動(dòng)你心的,都是超級“流量主”。
景
秀一秀身邊美風(fēng)光
遼闊原野,蒼莽森林,城市綠蔭,清涼湖畔,只要有關(guān)森林草原濕地荒漠生態(tài)系統(tǒng),有關(guān)各類自然保護(hù)地,森林城市、森林鄉(xiāng)村,統(tǒng)統(tǒng)都是林草的景兒。
績
亮一亮林草成績單
國家公園、自然保護(hù)地、退耕還林還草、天保工程、草原生態(tài)修復(fù)……你眼中的林業(yè)和草原核心職能、重點(diǎn)工作、重大生態(tài)工程,成效如何,亮點(diǎn)何在?
事
曬一曬綠色好生活
家鄉(xiāng)綠化是否可圈可點(diǎn)?走進(jìn)森林、親近草原、游山玩水,心情可好?自然教育體驗(yàn)如何?你的感受,大家都想知道。
識
講一講自然小知識
通過鏡頭傳播森林草原防火、國家公園、濕地保護(hù)、野生動(dòng)植物保護(hù)等知識,你,就是最美綠水青山代言人。
時(shí)間進(jìn)程
征集展播:8月中下旬-10月31日
作品評審:11月上旬
頒獎(jiǎng)儀式:11月中下旬
參賽方式
作品上傳:參賽主體在自主注冊的平臺展播作品的同時(shí),主辦方擬在微信公眾號等平臺擇優(yōu)展播。作者需將作品上傳至騰訊視頻網(wǎng)站,記錄下作品的鏈接地址(以html結(jié)尾)。
作品報(bào)送:視頻文件及報(bào)送表格發(fā)至lsqsmlzg84239931@163.com郵箱。視頻作品文件大于1G的,可將視頻文件上傳至百度云盤,并將下載鏈接(含提取文件密碼并將分享設(shè)為永久有效)發(fā)至該郵箱。
報(bào)送截止日期為10月31日。
作品展播
征集過程與展播過程同步。每個(gè)參賽主體通過自主注冊的抖音、騰訊微視/視頻、西瓜視頻、b站、央視頻、火山小視頻、新浪微博、等視頻傳播平臺賬號自行上傳參賽作品。上傳抖音平臺時(shí)需加入 “綠水青山DOU來拍”話題(例:#綠水青山DOU來拍《xx》xxxxx),其他平臺需加入“綠水青山·美麗中國”話題(例:#綠水青山·美麗中國《xx》xxxxx),否則不計(jì)入?yún)①愖髌贰?/p>
作品評審
由主辦方邀請專家進(jìn)行專業(yè)終評。參賽作品在自行展播過程中獲得的點(diǎn)擊量、點(diǎn)贊量、轉(zhuǎn)發(fā)量作為終評的參考因素之一。
大賽激勵(lì)
金獎(jiǎng)2個(gè),獎(jiǎng)金各20000元
銀獎(jiǎng)5個(gè),獎(jiǎng)金各10000元
銅獎(jiǎng)8個(gè),獎(jiǎng)金各5000元
優(yōu)秀獎(jiǎng)15個(gè),獎(jiǎng)金各2000元
另設(shè)4個(gè)單項(xiàng)獎(jiǎng)
最佳創(chuàng)意獎(jiǎng)、最具人氣獎(jiǎng)
最佳技術(shù)獎(jiǎng)、最佳故事獎(jiǎng)
獎(jiǎng)金分別為5000元
優(yōu)秀組織獎(jiǎng)若干,不設(shè)獎(jiǎng)金
主辦方將為獲獎(jiǎng)?wù)哳C發(fā)榮譽(yù)證書
作品要求
報(bào)送單位和個(gè)人作品原則上不超過3部,題材和形式不限。
1.作品必須嚴(yán)格遵守國家法律法規(guī),弘揚(yáng)社會主義核心價(jià)值觀和生態(tài)文明理念,傳播正能量。
2.作品內(nèi)容要求突出主題,構(gòu)思巧妙,設(shè)計(jì)新穎,感染力強(qiáng),角色表現(xiàn)真實(shí)自然,畫面音效制作精美,剪輯流暢,兼具科學(xué)性、知識性、藝術(shù)性、趣味性,人物故事應(yīng)接地氣、生活化,體現(xiàn)人性光輝。
3.短視頻時(shí)長在3分鐘以內(nèi),微電影、微紀(jì)實(shí)時(shí)長不超過8分鐘,作品不低于720p(小高清),格式為mp4。
4.參賽作品必須是原創(chuàng),要求配發(fā)視頻簡介(300字以內(nèi))、主創(chuàng)人員、封面圖等基本信息。
活動(dòng)聲明
1.所有參賽作品的版權(quán)均歸原版權(quán)所有人所有,主辦方尊重并保障參賽作品的著作權(quán),視頻所涉名譽(yù)權(quán)、肖像權(quán)、著作權(quán)等法律責(zé)任,均由參賽者負(fù)責(zé)。
2.主辦方擁有參賽視頻的使用權(quán)(不另付稿酬),保留對視頻的后期技術(shù)處理權(quán),使用方式包括用于公益宣傳或提供給相關(guān)媒體播放等。
3.本次活動(dòng)不收取任何參賽費(fèi)用,所有參賽作品均不退還。
無論你是鏡頭萌新,還是資深戲精
只要你全身上下都是戲
腦洞開到銀河系
那么,現(xiàn)在、立刻、馬上
拿起鏡頭拍下不一樣的綠水青山
你!就是導(dǎo)演~
9月1日-10月31日
“綠水青山·美麗中國”
首屆“原山杯”全國短視頻大賽
在線等你!
點(diǎn)擊了解更多 下載報(bào)名表
HTML:htper text markup language超文本標(biāo)記(標(biāo)簽)語言
由各種標(biāo)簽組成,用來制作網(wǎng)頁,告訴瀏覽器如何顯示頁面
w3c:world wide web consortium萬維網(wǎng)聯(lián)盟,制定web技術(shù)相關(guān)標(biāo)準(zhǔn)和規(guī)范的組織,HTML技術(shù)hi由w3c制定的標(biāo)準(zhǔn)
兩個(gè)版本:HTML4.0.1、HTML5.0-----通常H5
官網(wǎng):http://www.W3shcool.com.cn
HTML文檔是以.html或.htm結(jié)尾
記事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等
使用步驟:
使用技巧:
常見的瀏覽器:IE瀏覽器微軟、chrome谷歌瀏覽器、fifirefox火狐、safari蘋果
瀏覽器的作用是讀取html文件,并以網(wǎng)頁的形式來顯示
瀏覽器不會直接顯示html標(biāo)簽,而是使用標(biāo)簽來解釋網(wǎng)頁的內(nèi)容
一個(gè)完整的html標(biāo)簽的組成:
<標(biāo)簽名 屬性名="屬性值">內(nèi)容</標(biāo)簽名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)簽</title>
</head>
<body bgcolor="red" text="blue">
html從入門到精通!
</body>
</html>
12345678910
屬性值要用雙撇號括起來,一般用雙引號
根據(jù)標(biāo)簽是否關(guān)閉,分為,關(guān)閉型和非關(guān)閉型
<html></html>
<head></head>
<title></title>
非關(guān)閉型:沒有結(jié)束標(biāo)簽
<meta>
<br>
<h1>....<h6>
根據(jù)標(biāo)簽是否獨(dú)占一行,分為塊級標(biāo)簽和行級標(biāo)簽
塊級標(biāo)簽:顯示為塊狀,獨(dú)占一行
<h1>大家好</h1>
<hr>
行級標(biāo)簽:在行內(nèi)顯示,可與其他內(nèi)容在同一行顯示
<span></span>
注釋在瀏覽器中不會顯示,是用來標(biāo)注解釋html語句,但通過查看源代碼的方式可以看到
語法:
<--注釋內(nèi)容-->
也稱為特殊字符,用于顯示一些特殊符號,如<>&空格等
語法:
<&實(shí)體字符的名稱>
在html文檔的第一行,使用<!DOCTYPE html>
聲明HTML文檔的類型用來告訴瀏覽器頁面的文檔嘞型,用來制定html版本的規(guī)范
目前基本上最常用的html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
12345678910
1.基本標(biāo)簽
1.1 有序列表
ol:ordered listli:list item默認(rèn)使用阿拉伯?dāng)?shù)字、從1開始標(biāo)記,可以通過屬性進(jìn)行修改
· type屬性:設(shè)置列表的符號標(biāo)記、取值;數(shù)字1(默認(rèn))、字母(a或A)、羅馬數(shù)字(i或I) · start屬性:設(shè)置起始值,值必須是數(shù)字
1.2 無序列表
ul:unodered list
li:list item
默認(rèn)情況下使用實(shí)心圓表作為符號標(biāo)記,可以通過屬性進(jìn)行修改
· type屬性:設(shè)置列表的符號標(biāo)記、取值:disc實(shí)心圓(默認(rèn))、circle空心圓、square正方形、none不 顯示項(xiàng)目符號
1.3 定義列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平線標(biāo)簽
hr:horizontal
常用屬性:
· color:顏色
兩種方式:
顏色名稱:如red、green、blue、white、black、pink、orange等
16進(jìn)制的RGB表示法:Red、Green、Blue用法:#RRGGBB 每種顏色的取值范值0-255,轉(zhuǎn)換為16 進(jìn)制00-FF
如: #FF0000 紅色 #00FF00綠色 #0000FF藍(lán)色 #FFFFFF白色、#CCCCCC #FF7300桔色
· size:粗細(xì),數(shù)值
· width寬度
兩種寫法:
? 像素:絕對值(固定值)
? 百分比:相對值,相對于水平線標(biāo)簽所在父容器寬度的百分比
· align對齊
? 取值:center居中 left right
1.5圖像標(biāo)簽
img:image
常見的圖片格式:.jpg .png .gif .bmp
常見的屬性:
· src:source指定圖片的路徑(來源),必選叁數(shù)
如果圖片與html源代碼在同一個(gè)文件夾中,可以直接在src中寫圖片名稱即可
習(xí)慣上,我們會將多個(gè)圖片與html代碼文檔分別放在同一個(gè)文件夾project中的不同目錄下,此時(shí)需要 在src中指定圖片的路徑為相對路徑
路徑的分類:
? · 相對路徑
? 表示: ./當(dāng)前路徑
…/當(dāng)前位置的上一級文件夾
? 提示:…/image
? · alt:當(dāng)圖片無法顯示時(shí)顯示的提示信息
? · title:當(dāng)鼠標(biāo)放到圖片上時(shí)顯示的提示信息
? · width和 height:設(shè)置圖片的寬度和高度
默認(rèn)圖片以原始尺寸顯示
? 如果只設(shè)置其中一個(gè),則另一個(gè)會按比例縮放
? 如果同時(shí)設(shè)置寬和高,可能導(dǎo)致圖片變形
? 兩種寫法:
? 像素:絕對值(固定值)
? 百分比:相對值,相對于父容器的尺寸的百分比
2.其他標(biāo)簽
為了更好語義化
3.頭部標(biāo)簽
· meta定義網(wǎng)頁的摘要信息,如字符編碼,關(guān)鍵詞,描述,作者等
· title定義網(wǎng)頁的標(biāo)題
· style定義內(nèi)容css樣式
· link引用外部css樣式
· script定義或引用腳本
· base定義基礎(chǔ)路徑
默認(rèn)以當(dāng)前頁面文件所在的位置為相對路徑參照
4.標(biāo)簽嵌套
一個(gè)標(biāo)簽中嵌套另外一個(gè)標(biāo)簽
標(biāo)簽不能亂嵌套
瀏覽器渲染后顯示的頁面代碼與編碼時(shí)有所不同
chrome瀏覽器提供的開發(fā)工具:幫助開發(fā)人員查看和調(diào)試頁面的
如何打開:
· Elements:從瀏覽器的角度來看頁面,瀏覽器渲染頁面時(shí)內(nèi)部的結(jié)構(gòu)
· console:控制臺,顯示各種警告和錯(cuò)誤信息
· network:查看網(wǎng)絡(luò)請求信息,瀏覽器向服務(wù)器請求了哪些資源,資源大小,
加載資源所消耗的時(shí)間
四、超鏈接
1.簡介
使用超鏈接可以從一個(gè)頁面跳轉(zhuǎn)到另外一個(gè)頁面,實(shí)現(xiàn)頁面之間導(dǎo)航
當(dāng)鼠標(biāo)移動(dòng)到超鏈接文本或圖片時(shí),鼠標(biāo)箭頭會變成一只小手
超鏈接有三種類型:
普通鏈接/頁面間的鏈接,跳轉(zhuǎn)到另一個(gè)頁面 錨鏈接:鏈接到錨點(diǎn)(鏈接到同一個(gè)頁面的指定位置) 功能鏈接:實(shí)現(xiàn)特殊功能(發(fā)郵件,下載)
2.基本用法
使用 標(biāo)簽來創(chuàng)建超鏈接
語法格式:
常用屬性:
href:鏈接地址或路徑,鏈接地址
world
鏈接文本或圖片
1 2 3 4 5 1 target:鏈接打開的位置,取值
路徑分類:
絕對路徑 以根開始的路徑
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相對路徑 相對于當(dāng)前頁面文件所在的路徑,不是以根開始的路徑 ./ 當(dāng)前路徑 …/ 當(dāng)前位置上一級目錄
3.錨鏈接
3.1簡介
點(diǎn)擊鏈接后跳轉(zhuǎn)到某一個(gè)頁面的指定位置(錨點(diǎn)anchor)
錨鏈接的分類:
頁面內(nèi)的錨鏈接 頁面間的錨鏈接
3.2 頁面內(nèi)的錨鏈接
步驟:
3.3 頁面間的錨鏈接
4.功能鏈接
5.URL
5.1 簡介
URL:Uniform Resource Locator 統(tǒng)一資源定位器,用來定位資源所在的位置,最常見的就是網(wǎng)址
5.2 組成
一個(gè)完整的URL由8個(gè)部分組成:
協(xié)議:prococol 如 http:超文本傳輸協(xié)議,用來訪問WEB網(wǎng)站Hyper text Transfer protocal https:更加安全的協(xié)議 SSL安全套接子層 ftp文件傳輸協(xié)議,用來訪問服務(wù)器上的文件,實(shí)現(xiàn)文件的上傳和下載File Transfer protocol file:文件協(xié)議,用來訪問本地文件 主機(jī)名hostname服務(wù)器地址或服務(wù)器Netbios名稱,如www.baidu.com ftp://10.255.254.254 端口:port位于主機(jī)名的后面,使用冒號進(jìn)行分隔 不同的協(xié)議使用不同的端口,如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默認(rèn)端口,則端口可以省略 如果使用的不是默認(rèn)端口,則必須指定端口http://59.49.32.213:7070/ 路徑:path目標(biāo)文件所在的路徑結(jié)構(gòu),如:www.baidu.com/img/ 資源resource要訪問的目標(biāo)文件,如bd_logo1.png 查詢字符串:query string 也稱為參數(shù) 在資源后面使用?開頭的一組名稱/值
鏈接文本
鏈接文本
https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
1
1
1 2 3
4 5
名稱和值之間以=分隔,多個(gè)之間用&分隔,如:name=tom&age=2&sex=male 錨點(diǎn)anchor,在資源后面使用#開頭的文本,如#6 身份認(rèn)證authentication,指定身份信息,如:ftp://賬戶:密碼@ftp.bbshh010.com
五、表格
1.簡介
表格是一個(gè)規(guī)則的行列結(jié)構(gòu),每個(gè)表格是由若干行組成,每行由若干個(gè)單元格組成
table row column
2.基本結(jié)構(gòu)
2.1 table標(biāo)簽
用來定義表格
常用屬性:
border:表格邊框 默認(rèn)為0 width/height:寬度/高度 bordercolor:邊框的顏色 align:對齊方式,取值:left(默認(rèn)) center居中 right居右 bgcolor:背景顏色 background:背景圖片 cellspacing間距:單元格與單元格之間的距離 cellpadding邊距:單元格中的內(nèi)容到邊界之間的距離
2.2 tr標(biāo)簽
用來定義行:table row
常用屬性:
align:水平對齊 取值:left(默認(rèn)) center right valign垂直對齊 取值:top center bottom bgcolor:背景顏色 background:背景圖片
2.3 td標(biāo)簽
用來定義單元格,table data
常用屬性:align、valign、bgcolor、background
注意:表格必須是由行組成,行必須由單元格來組成,數(shù)據(jù)必須放到單元格中
3.合并單元格
合并單元格也稱為單元格的跨行跨列
兩個(gè)屬性:
rowspan 設(shè)置單元格所跨的行數(shù) colspan 設(shè)置單元格所跨的列數(shù)
步驟:
六、表單
1.簡介
表單是一個(gè)包含若干個(gè)表單元素的區(qū)域,用于獲取瑣類型的用戶數(shù)據(jù)
表單元素是允許用戶在表單輸入信息的元素,如文本框、密碼框、單選按鈕、復(fù)選框、下拉列表、按鈕等
2.表單結(jié)構(gòu)
2.1表單語法
1
2.2form標(biāo)簽
用來定義表單,可以包含多個(gè)表單元素
常用屬性:
action:提交數(shù)據(jù)給誰處理,即處理數(shù)據(jù)的程序,默認(rèn)為當(dāng)前頁面 method:提交數(shù)據(jù)的方式或方法,取值:get(默認(rèn)),post get和post的區(qū)別: get:以查詢字符串的形式提交,在地址欄中能看到,長度有限制,不安全 post以表單數(shù)據(jù)組的形式進(jìn)行提交,在地址欄中看不到,長度無限制,安全 enctype(encode type)編碼類型:提交數(shù)據(jù)的編碼,取值:application/X-www-form-urlencoded(默 認(rèn))、multipart/form-data(文件上傳)
3.表單元素
大多數(shù)的表單元素都是使用 標(biāo)簽來定義的,通過設(shè)置屬性type來定義不同的表單元素
1
3.1單行文本框
常用屬性:
·name名稱,很重要,如果沒有定義name屬性,則該表單元素的數(shù)據(jù)是無法提交的
·value初始值
·size顯示寬度
·maxlength:大字符數(shù),默認(rèn)是沒有限制
·readonly只讀:readonly=“readonly”,可簡寫readonly,即只寫屬性名
·disabled禁用:disabled=“disabled”, 可簡寫disabled完全禁用
表單元素被提交的兩個(gè)條件,1.有name屬性2.非disabled
3.2 單選按鈕
常用屬性:
·name名稱:多個(gè)radio的name屬性必須相同,才能實(shí)現(xiàn)互斥(單選)
·value值
·checked:是否被選中,兩種狀態(tài),選中,未選中 checked=“checked” 簡寫 checked
3.3 復(fù)選框
常用屬性與單選按鈕radio類似
3.4 文件選擇器
常用屬性:
·name:名稱
·accept設(shè)置可選擇的文件類型,用來限制上傳的文件類型
使用MIME格式字符串對資源類型進(jìn)行限制
常見的MIME類型:
·純文本:text/plain text/xml text/html
· 圖像:image/png image/jpeg image/gif
4.特殊表單元素
4.1下拉列表
select常用屬性:
·name名稱
·size行數(shù),同時(shí)顯示多個(gè)選項(xiàng)
·multiple允許同時(shí)選擇多個(gè)
option常用屬性:
·value選項(xiàng)值
·selected設(shè)置默認(rèn)選中項(xiàng)
optgroup常用屬性:
·label分組的標(biāo)簽
4.2文本域
·name名稱
·rows行數(shù)
·cols列數(shù)
5、其他標(biāo)簽
5.1 label標(biāo)簽
為表單元素提供標(biāo)簽,當(dāng)選中l(wèi)abel標(biāo)簽中的文本內(nèi)容時(shí)會自動(dòng)將光標(biāo)切換到與之相關(guān)聯(lián)的表單元素。
常用屬性:
·for必須將該屬性值設(shè)置為與相關(guān)聯(lián)的表單元素的Id屬性值相同。
注:幾乎所有HTML標(biāo)簽都具有id屬性,且id值必須唯一。
5.2 button標(biāo)簽
也表示按鈕,與input按鈕類似
語法:
1按鈕文字或圖像
常用屬性:
·type按鈕的類型,取值: submit(默認(rèn))、reset、button
5.3 fieldset和legend標(biāo)簽
fieldset標(biāo)簽,對表單元素進(jìn)行分組
legend標(biāo)簽,對分組添加標(biāo)題
七、內(nèi)嵌框架
1、簡介
使用iframe可以在一個(gè)頁面中引用另一個(gè)頁面,實(shí)現(xiàn)復(fù)用、靈活
2、基本用法
語法:
1
常用屬性:
· src:引用的頁面
· width/height寬度/高度 ,像素或百分比
· frameborder是否顯示邊框,取值:1(yes) 0(no)—默認(rèn)
· scrolling是否顯示滾動(dòng)條,取值:yes no auto
· name屬性 為框架定義名稱
3、在框架中打開鏈接
1
2
3鏈接的文本或圖像
八、HTML5簡介
1、發(fā)展
W3C于1992年12月發(fā)布了HTML4.0.1標(biāo)準(zhǔn)
W3C于2014年10月發(fā)布了HTML5標(biāo)準(zhǔn)
2、特點(diǎn)
· 取消了過時(shí)的標(biāo)簽,如font、center等,它們僅具有展示外觀的功能
· 增加了一些更具有語義化的標(biāo)簽,如header、footer、aside等
· 增加了一些新功能標(biāo)簽,如canvas、audio、video
· 增加了一些表單控件,如email、date、time、url、search等
· 可以直接在瀏覽器中繪畫(canvas),無需flash
· 增加了本地存儲的支持
3、兼容性
http://caniuse.com
提供了各種瀏覽器版本對HTML5和CSS規(guī)范的支持度
九、HTML5新增內(nèi)容
1、結(jié)構(gòu)相關(guān)的標(biāo)簽
用來進(jìn)行頁面結(jié)構(gòu)布局,本身無任何特殊樣式,需要使用CSS進(jìn)行樣式設(shè)置
· article定義一個(gè)獨(dú)立的內(nèi)容,完整的文章
· section定義文檔的章節(jié)、段落
· header文章的頭部、頁眉、標(biāo)題
· footer文章的底部、頁腳、標(biāo)注
· aside定義側(cè)邊欄
· figure圖片區(qū)域
· figcaption為圖片區(qū)域定義標(biāo)題
· nav定義導(dǎo)航菜單
結(jié)構(gòu)標(biāo)簽只是表明各部分的角色,并無實(shí)際的外觀樣式,與普通div相同
2、語義相關(guān)的標(biāo)簽
2.1 mark標(biāo)簽
標(biāo)注,用來突出顯示文本,默認(rèn)添加黃色背景
2.2 time標(biāo)簽
定義日期和時(shí)間,便于搜索引擎智能查找
2.3 details和 summary標(biāo)簽
默認(rèn)顯示summary中的內(nèi)容,點(diǎn)擊后顯示details中的內(nèi)容
注:并不是所有的瀏覽器都兼容,chrome、opera支持、Firefox、IE瀏覽器不支持
2.4 meter標(biāo)簽
計(jì)數(shù)儀,表示度量
常用屬性:
· max定義大值,默認(rèn)為1
· min定義小值,默認(rèn)為0
· value定義當(dāng)前值
· high定義限定為高的值
· low定義限定為低的值
· optimum定義佳值
規(guī)則:
當(dāng)value大于high時(shí)為綠色
當(dāng)value在low與high之間時(shí)為黃色
當(dāng)value小于low時(shí)為紅色
當(dāng)value小于low時(shí)為綠色
當(dāng)value在low與high之間時(shí)為黃色
當(dāng)value大于high時(shí)為紅色
2.5 progress標(biāo)簽
進(jìn)度條,表示運(yùn)行中的進(jìn)度
常用屬性:
· value定義當(dāng)前值
· max定義完成的值
3.表單相關(guān)
3.1 新增表單元素
新增以下type類型:
· email接收郵箱
· url接收URL
· tel接收電話號碼,目前僅在移動(dòng)設(shè)備上有效
· search搜索文框
· number/range接收數(shù)字/數(shù)字滑塊,包含min,max,step屬性
· date/month/week/time/datetime日期時(shí)間選擇器,兼容性不好
· color顏色拾取
作用:
· 具有格式校驗(yàn)的功能
· 可以與移動(dòng)設(shè)備的鍵盤相關(guān)聯(lián)
3.2新增表單屬性
form標(biāo)簽的屬性:
· autocomplete是否啟動(dòng)表單的自動(dòng)完成功能, 取值:on(默認(rèn))、o?
· novalidate提交表單時(shí)不進(jìn)行校驗(yàn),默認(rèn)會進(jìn)行表單校驗(yàn)
3.3 新增表單元素的屬性
新增表單元素屬性:input/select/textarea等
· placeholder提示文字
· required是否必填
· autocomplete是否啟用該表單元素的自動(dòng)完成功能
· autofocus設(shè)置初始焦點(diǎn)元素
· pattern使用正則表達(dá)式(RegExp后面會講解),進(jìn)行數(shù)據(jù)校驗(yàn)
· list使文本元素具有下拉列表的功能,需要配合datalist和option標(biāo)簽一起使用
· form可以將表單元素寫在form標(biāo)簽外面,然后通過該屬性關(guān)聯(lián)指定的表單
4、多媒體標(biāo)簽
4.1audio標(biāo)簽
在頁面中插入音頻,不同的瀏覽器對音頻格式的支持不一樣
audio常用屬性:
· src音頻文件的來源
· controls是否顯示控制面板,默認(rèn)不顯示
· autoplay是否自動(dòng)播放,默認(rèn)不自動(dòng)播放
· loop是否循環(huán)播放
· muted是否靜音
· preload是否預(yù)加載,取值:none不預(yù)加載、auto預(yù)加載(默認(rèn))、metadata只加載元數(shù)據(jù)
如果設(shè)置了autoplay屬性,則該屬性無效
可以結(jié)合source標(biāo)簽使用,指定多個(gè)音頻文,瀏覽器會檢測并使用第一個(gè)可用的音頻文件
4.2 video標(biāo)簽
在頁面中插入視頻,不同的瀏覽器對視頻格式的支持不一樣
用法與audio標(biāo)簽基本相同,增加屬性:
· widht/height視頻播放器的寬度/高度
· poster在視頻加載前顯示的圖片
<html>
<body>
<tiele>HTML技術(shù)</tiele>
</body>
<body>
大家好,歡迎學(xué)習(xí)html技術(shù)!
</body>
</html>1234567
效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例1.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)簽</title>
</head>
<body text="blue">
標(biāo)簽的組成
<br>
html從入門到精通!
<hr>
<h1>標(biāo)簽的分類</h1>
<hr>
<h2>標(biāo)簽的分類</h2>
<hr>
<h6>標(biāo)簽的分類</h6>
<hr>
<span>哈哈</span>嘿嘿
</body>
</html>1234567891011121314151617181920212223
效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例2.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
圖書:<<HTML從入門到精通<<
<hr>
北京 上海 廣州
<hr>
在HTML中用<表示<小于號
<hr>
“HTML語言” 或 &qout;HTML語言&qout;
<hr>
版權(quán)所有? 2000-2020 高教培訓(xùn)
<hr>
×關(guān)閉符號
</body>
</html>123456789101112131415161718192021222324
效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例3.png)]
(剩下的下期出)
原文鏈接:https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html
作者:WanXuang
出處:從CSDN
<html></html>雙標(biāo)簽 開頭結(jié)尾 HTML標(biāo)簽為最大的標(biāo)簽 稱為根標(biāo)簽
<head></head> 文檔頭部標(biāo)簽 且必須設(shè)置title
<title></title> 頁面標(biāo)題
<body></body> 文檔的主體 包含頁面的內(nèi)容
<h1>-<h6> HTML提供6個(gè)等級的頁面標(biāo)題 有大到小
<p></p> p標(biāo)簽用于定義段落 可以將頁面分為若干個(gè)段落 根據(jù)窗口大小自動(dòng)換行
<br/>單標(biāo)簽 換行標(biāo)簽 (break打斷)
加粗 <strong></strong>or<b></b>
斜線 <em></em>or<i></i>
刪除線 <del></del>or<s></s>
下劃線 <ins></ins>or<u></u>
沒有語義 屬于一種盒子 來裝內(nèi)容
<div></div> 表示分割分區(qū) 用來布局 一行一個(gè) 大盒子
<span></span>意為跨度,跨距 一行可以哦有多個(gè) 小盒子
<img src="圖像路徑(url)"/> 定義頁面中的圖像
圖像標(biāo)簽包含多個(gè)屬性
src 圖片路徑 必須屬性
alt 文本 替換文本 圖像不能顯示的文字
title 文本 鼠標(biāo)放到圖像上顯示文字
width 像素 寬度
height 高度
border 邊框
相對路徑和絕對路徑
相對路徑:以引用文件所在位置為參考基礎(chǔ),而建立出的目錄路徑
分類:下級路徑/ 上級路徑../
絕對路徑:是指目錄下的絕對位置,如硬盤中的路徑或網(wǎng)路地址
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
href用于指定鏈接目標(biāo)的url地址(必須屬性)
target用于指定鏈接打卡方式 _self為默認(rèn)值 _blank為在新窗口打開方式
錨點(diǎn)鏈接:可以快速到頁面某個(gè)位置
在鏈接文本中的href屬性中,設(shè)置屬性值為#名字的形式,如<a href="#two">目標(biāo)</a>
找到目標(biāo)位置標(biāo)簽,里面添加一個(gè)id屬性=名字,如:<h3 id="two">目標(biāo)</h3>
<!-- 注釋語句 --> 快捷鍵CTRL + /
HTML 原代碼 | 顯示結(jié)果 | 描述 |
< | < | 小于號或顯示標(biāo)記 |
> | > | 大于號或顯示標(biāo)記 |
& | & | 可用于顯示其它特殊字符 |
" | “ | 引號 |
? | ? | 已注冊 |
? | ? | 版權(quán) |
? | ? | 商標(biāo) |
半個(gè)空白位 | ||
一個(gè)空白位 | ||
不斷行的空白 |
<table></table> 是用于定義表格的標(biāo)簽
<tr></tr> 標(biāo)簽用于定義表格中的行,必須嵌套在<table></table>標(biāo)簽中
<tb></tb> 用于定義表格的單元格,必須嵌套在<tr></tr>標(biāo)簽中
<td> 元素中的文本通常是普通的左對齊文本。字母td指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容
表頭單元格標(biāo)簽:
<th>標(biāo)簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現(xiàn)為粗體并且居中。
表格屬性:
align left center right 規(guī)定表格相對于周圍元素的對齊方式
border 1or"" 規(guī)定表格單元是否擁有邊框默認(rèn)為"",表示沒有邊框
cellpadding 像素值 規(guī)定單元邊沿與其內(nèi)容的空白,默認(rèn)1像素
cellspacing 像素值 規(guī)定單元格直接的空白 默認(rèn)2像素
with 像素值or百分比 規(guī)定表格的寬度
合并單元表格方式:
跨行合并:rowspan="合并單元格的個(gè)數(shù)"
跨列合并:colspan="合并單元格的個(gè)數(shù)"
<ul>標(biāo)簽表示無序列表 里面只能包含li
<ol>有序標(biāo)簽 里面只能包含li
<li>相當(dāng)于一個(gè)容器定義列表項(xiàng) 與<ui>or<li>嵌套使用 li里面可以包含任何標(biāo)簽
<dl>標(biāo)簽用于定義描述列表(或自定義列表),該標(biāo)簽會與<dt>(定義項(xiàng)目和名字)和<dd>(描述每一個(gè)項(xiàng)目名字)一起使用
標(biāo)簽 | 描述 |
<form> | 定義供用戶輸入的表單 |
<input> | 定義輸入域 |
<textarea> | 定義文本域 (一個(gè)多行的輸入控件) |
<label> | 定義了 <input> 元素的標(biāo)簽,一般為輸入標(biāo)題 |
<fieldset> | 定義了一組相關(guān)的表單元素,并使用外框包含起來 |
<legend> | 定義了 <fieldset> 元素的標(biāo)題 |
<select> | 定義了下拉選項(xiàng)列表 |
<optgroup> | 定義選項(xiàng)組 |
<option> | 定義下拉列表中的選項(xiàng) |
<button> | 定義一個(gè)點(diǎn)擊按鈕 |
<datalist> New | 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表 |
<keygen> New | 定義了表單的密鑰對生成器字段 |
<output> New | 定義一個(gè)計(jì)算結(jié)果 |
<input>標(biāo)簽用于收集用戶信息 包含一個(gè)type屬性 可以有多種樣式
<input type="value">
<input type="屬性值" />
屬性值:
button | 定義可點(diǎn)擊按鈕(多數(shù)情況下,用于通過 JavaScript 啟動(dòng)腳本)。 |
checkbox | 定義復(fù)選框。 |
file | 定義輸入字段和 "瀏覽"按鈕,供文件上傳。 |
hidden | 定義隱藏的輸入字段。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼字段。該字段中的字符被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會清除表單中的所有數(shù)據(jù)。 |
submit | 定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器。 |
text | 定義單行的輸入字段,用戶可在其中輸入文本。默認(rèn)寬度為 20 個(gè)字符。 |
<label> 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記)。 label是標(biāo)注的意思
label 元素不會向用戶呈現(xiàn)任何特殊效果。不過,它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本,就會觸發(fā)此控件。就是說,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器就會自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同
詳情可參考
https://www.runoob.com/ 菜鳥教程
https://www.w3school.com.cn/ w3c
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。