1. ขั้นตอนแรก: เปิดเครื่องมือการพัฒนาและเปิดโฟลเดอร์ที่ระบุ
2. ขั้นตอนที่ 2: บันทึกไฟล์ index.html ไปยังดิสก์, .html เป็นคำต่อท้ายเว็บ;
3. ขั้นตอนที่ 3: เริ่มเขียนรูปแบบพื้นฐานของ HTML5
<! doctype html> // การประกาศประเภทเอกสาร <html lang = zh-cn> // ระบุว่าเอกสาร HTML เริ่มต้นขึ้น 1. <head> // รวมถึงข้อมูลเมตาเริ่มต้นที่จะเริ่ม <meta charset = utf-8> // declars การเข้ารหัสอักขระ </title> // ตั้งชื่อเอกสาร </head> // <body> // หมายถึงเนื้อหาของ เอกสาร html <a href = http://www.baidu.com> baidu </a> // องค์ประกอบไฮเปอร์ลิงก์ (แท็ก) </body> // ระบุ html </html> ///แสดงจุดสิ้นสุดของ html เอกสารสอง. การวิเคราะห์โครงสร้างเอกสาร 1.Doctype
การประกาศประเภทเอกสาร (การประกาศประเภทเอกสารหรือที่รู้จักกันในชื่อ doctype) ส่วนใหญ่จะบอกเบราว์เซอร์
ประเภทไฟล์มุมมอง ใน HTML4.01 และ XHTML 1.0 ก่อนหน้านี้จะระบุเวอร์ชันและสไตล์ HTML ที่เฉพาะเจาะจง
ตอนนี้ HTML5 ไม่จำเป็นต้องเป็นตัวแทนของเวอร์ชันและสไตล์
<!
2. องค์ประกอบ htmlก่อนอื่นองค์ประกอบหมายถึงฉลากและองค์ประกอบ HTML คือฉลาก HTML องค์ประกอบ HTML เป็นองค์ประกอบที่เริ่มต้นและสิ้นสุดเอกสาร มันเป็นฉลากคู่สะท้อนและหางรวมถึงเนื้อหา
องค์ประกอบนี้มีแอตทริบิวต์และค่า: lang = zh-cn
หมายความว่าเอกสารใช้ภาษา: ภาษาจีนง่ายๆ
<html lang = zh-cn> // ถ้าเป็นภาษาอังกฤษมันเป็น en '
หน้าจีนง่าย: html lang = zh-cmn-hans
หน้าจีนดั้งเดิม: html lang = zh-cmn-hant
หน้าภาษาอังกฤษ: html lang = en
3. องค์ประกอบศีรษะใช้เพื่อรวมเนื้อหาข้อมูลเมตาข้อมูลข้อมูลเมตารวมถึง: <link>, <meta>, <Noscript>, <Script>, <Script>, <Script>,
<style>, <title> เนื้อหาเหล่านี้ใช้เพื่อให้ข้อมูลสำหรับเบราว์เซอร์เช่นลิงค์ให้ข้อมูล CSS, สคริปต์
ให้ข้อมูล JavaScript ชื่อเรื่องให้ชื่อหน้า
<head> ... </head> // ข้อมูลนี้ไม่สามารถมองเห็นได้ในหน้าเว็บ
<noscript> องค์ประกอบถูกใช้เพื่อกำหนดเนื้อหาทางเลือก (ข้อความ) เมื่อสคริปต์ไม่ได้ดำเนินการ
แท็กนี้สามารถใช้ในการจดจำเบราว์เซอร์ที่สามารถจดจำฉลาก <Script> แต่ไม่สามารถรองรับสคริปต์ได้
4. องค์ประกอบเมตาองค์ประกอบนี้ใช้เพื่อให้ข้อมูลเกี่ยวกับเอกสาร ด่วน
บอกหน้าเบราว์เซอร์ว่ามีการใช้รหัสใด แน่นอนไฟล์จะถูกเก็บรักษาไว้
UTF8 และเบราว์เซอร์ยังตั้ง UTF8 เพื่อแสดงภาษาจีนอย่างถูกต้อง
<meta charset = utf-8> // นอกเหนือจากการตั้งค่ารหัสแล้วยังมีอื่น ๆ
5. ธาตุองค์ประกอบนี้ง่ายมากตามชื่อที่แนะนำ: ตั้งชื่อที่มุมบนซ้ายของเบราว์เซอร์
<title> โครงสร้างพื้นฐาน </title>
6. องค์ประกอบของร่างกายองค์ประกอบที่ใช้ในการมีเนื้อหาเอกสารนั่นคือส่วนพื้นที่ของเบราว์เซอร์ เนื้อหาที่มองเห็นได้ทั้งหมดควรอยู่ที่นี่
เพิ่มองค์ประกอบภายใน
<body> ... </body>
7. องค์ประกอบการเชื่อมโยงหลายมิติจะหารือในรายละเอียดในภายหลัง
<a href = http://www.baidu.com> baidu </a>
สาม. การอภิปรายฉลากองค์ประกอบHTML เป็นภาษามาร์คและเราได้พูดคุยกันอย่างละเอียดเกี่ยวกับโครงสร้างตอนนี้ ที่นี่มาวิเคราะห์สิ่งเหล่านี้อีกครั้ง
ป้ายกำกับหรือฉลากมักจะเรียกมันว่าสิ่งที่ประกอบด้วยสิ่งต่าง ๆ เป็นองค์ประกอบในการเขียน
1. องค์ประกอบองค์ประกอบเป็นชุดของป้ายกำกับที่บอกเบราว์เซอร์ว่าจะจัดการเนื้อหาบางอย่างได้อย่างไร แต่ละองค์ประกอบมีคำหลักเช่น
<body>, <title>, <meta> เป็นองค์ประกอบ ชื่อฉลากที่แตกต่างกันแสดงถึงความหมายที่แตกต่างกันและจะเกี่ยวข้องกับฉลากย่อหน้า, แท็กข้อความ, ป้ายลิงค์, ฉลากรูปภาพ ฯลฯ
โดยทั่วไปองค์ประกอบจะแบ่งออกเป็นสองประเภท: แท็กเดี่ยว (องค์ประกอบอากาศ) และแท็กคู่ โดยทั่วไปฉลากเดียวใช้เพื่อประกาศหรือแทรกหยวนบางตัว
ตัวอย่างเช่นการเข้ารหัสอักขระของคำสั่งใช้ <meta> และ <img> ถูกแทรกลงในรูปภาพ P> ... </p>
2. คุณสมบัติและค่านอกเหนือจากการแบ่งเดี่ยวและคู่แล้วคุณลักษณะภายในและค่าขององค์ประกอบสามารถตั้งค่าได้ ค่าแอตทริบิวต์เหล่านี้ใช้เพื่อเปลี่ยนองค์ประกอบ
กระทำ. ตัวอย่างเช่นไฮเปอร์ลิงก์: <a> แอตทริบิวต์ HREF แทนที่ URL ที่คุณสามารถเชื่อมโยงไปยังเว็บไซต์อื่น
สี่. กิจการเอนทิตี HTML จะแสดงโดยอักขระความหมายพิเศษผ่านรหัสกายภาพ
แสดงผลลัพธ์ของชื่อเอนทิตีของคำอธิบายหมายเลขเอนทิตี
ช่องว่าง
<<<<<<< 2
>> มากกว่าจำนวน
& & & และจำนวน
อัญประกาศ
-
镑镑££
圆圆¥¥¥¥
元€ยูโร
§§§เทศกาลเล็ก ๆ
权权©ลิขสิทธิ์
®®®เครื่องหมายการค้าจดทะเบียน
เครื่องหมายการค้า™™™
×××จำนวนการคูณ
÷÷ยกเว้นหมายเลข
5. ฉลากโครงสร้างใหม่องค์ประกอบบทความ
แสดงถึงเนื้อหาอิสระที่ไม่เกี่ยวข้องกับบริบทในหน้า ตัวอย่างเช่นบทความโพสต์บล็อกโพสต์ฟอรัมคุณสามารถใช้งานได้
องค์ประกอบส่วน
แสดงถึงบล็อกเนื้อหาในหน้าเช่นบทส่วนหัวส่วนท้ายหรือส่วนอื่น ๆ ของหน้า มันสามารถใช้ร่วมกับ H1, H2 ... และองค์ประกอบอื่น ๆ เพื่อระบุโครงสร้างเอกสาร ตัวอย่าง: <section> ... </ส่วน>; <div> ... </div> ใน HTML4
นอกเหนือจากองค์ประกอบ
แสดงข้อมูลเสริมที่เกี่ยวข้องกับเนื้อหาขององค์ประกอบบทความนอกเหนือจากเนื้อหาขององค์ประกอบบทความ
องค์ประกอบส่วนหัว
แสดงถึงชื่อของบล็อกเนื้อหาหรือหน้าจริงในหน้า
องค์ประกอบ hgroup
ระบุการรวมกันของบล็อกชื่อเรื่องของหน้าจริงหรือหน้า
องค์ประกอบส่วนท้าย
ระบุเชิงอรรถของบล็อกเนื้อหาในหน้าหรือหน้าทั้งหมด โดยทั่วไปเขาจะรวมชื่อผู้สร้างวันที่สร้างสรรค์และข้อมูลการติดต่อของผู้สร้าง
องค์ประกอบนาวี
แสดงถึงส่วนหนึ่งของลิงค์การนำทางในหน้า
องค์ประกอบ
ระบุส่วนของเนื้อหาสตรีมอิสระซึ่งโดยทั่วไปหมายถึงหน่วยอิสระในเนื้อหาของเอกสาร ใช้องค์ประกอบ Figcaption เพื่อเพิ่มชื่อไปยังกลุ่มองค์ประกอบรูป ตัวอย่างเช่น:
<รูปที่> <Potcaption> PRC </potcaption> <p> สาธารณรัฐจีนของประเทศจีนเกิดในปี 1949 </p> </pige>ห้า. ข้อมูลเมตา
<meta> องค์ประกอบสามารถกำหนดข้อมูลเมตาต่าง ๆ ในเอกสารและหน้า HTML หนึ่งหน้าสามารถมีหลาย <meta>
องค์ประกอบ.
1. ระบุคู่ข้อมูลเมตาชื่อ/ค่า<meta name = เนื้อหาผู้เขียน = bnbbs> <meta name = คำอธิบายเนื้อหา = นี่คือหน้า html5> <meta name = keywords content = html5, css3, การตอบสนอง> <meta name = gen = เนื้อหา erator = sublime text 3>
คำอธิบายชื่อข้อมูลนครหลวง
ผู้แต่งของผู้แต่งหน้าปัจจุบัน
คำอธิบายของหน้าคำอธิบายปัจจุบัน
คำหลักคีย์เวิร์ดหน้าปัจจุบัน
เครื่องมือเข้ารหัสของหน้าปัจจุบันเครื่องกำเนิดไฟฟ้า
2. ประกาศการเข้ารหัสอักขระ<meta charset = utf-8>
3. การจำลองฟิลด์ส่วนหัว HTTP// 5 วินาทีข้ามไปยัง URL ที่ระบุ <meta http-equiv = เนื้อหารีเฟรช = 5; >
คำอธิบายค่าแอตทริบิวต์
รีเฟรชโหลดหน้าปัจจุบันใหม่หรือระบุ URL หน่วยวินาที
ประเภทเนื้อหาอีกวิธีหนึ่งในการประกาศการเข้ารหัสอักขระ
หก. แอตทริบิวต์ทั่วโลกก่อนหน้านั้นองค์ประกอบที่เราเกี่ยวข้องอธิบายข้อมูลท้องถิ่นและแน่นอนว่าเรายังรู้คุณสมบัติระดับโลกเช่น
id. แอตทริบิวต์ทั่วโลกเป็นพฤติกรรมทั่วไปขององค์ประกอบทั้งหมด
1. แอตทริบิวต์<p id = abc> ย่อหน้า </p>
คำอธิบาย: แอตทริบิวต์ ID จัดสรรตัวระบุที่ไม่ซ้ำกันให้กับองค์ประกอบ ตัวระบุนี้มักจะใช้เพื่อให้ CSS และ JavaScript
เรียกองค์ประกอบการเลือก มีเพียงชื่อ ID เดียวกันเมื่อหน้า
2. แอตทริบิวต์คลาส<p class = abc> ย่อหน้า </p> <p class = abc> ย่อหน้า </p> <p class = abc> ย่อหน้า </p>
คำอธิบาย: แอตทริบิวต์คลาสถูกใช้เพื่อจำแนกองค์ประกอบ ตั้งค่า CSS -like ในเวลาเดียวกันผ่านองค์ประกอบหนึ่งหรือมากกว่าในเอกสาร
โหมด.
3. แอตทริบิวต์ AccessKey<ประเภทอินพุต = ชื่อข้อความ = ผู้ใช้บัญชีคีย์ = n>
คำอธิบาย: การดำเนินการทางลัด, คีย์ ALT+ที่ระบุภายใต้ Windows, หลักฐานว่าเบราว์เซอร์ ALT ไม่ขัดแย้งกัน
4. แอตทริบิวต์<p contenteditable = true> ฉันสามารถแก้ไข </p> ได้ไหม
คำอธิบาย: ให้ข้อความอยู่ในสถานะที่แก้ไขได้ หรือโดยตรง
ตั้งค่าแอตทริบิวต์
5. DIR คุณลักษณะ<p dir = rtl> ข้อความไปทางขวา </p>
คำอธิบาย: ให้ข้อความจากซ้ายไปขวา (LTR) หรือจากขวาไปซ้าย (RTL)
6. แอตทริบิวต์<p ซ่อน> ข้อความไปทางขวา </p>
คำอธิบาย: ซ่อนองค์ประกอบ
7. แอตทริบิวต์ llang<p lang = en> html5 </p>
คำอธิบาย: คุณสามารถตั้งค่าภาษาได้ในพื้นที่
8. แอตทริบิวต์<p type = application/x-shockwave-flash> </jobch>3. ช่วง 4.Autofocus 5. ทำเครื่องหมาย
<mark> ส่วนใหญ่จะใช้เพื่อนำเสนอคำเหล่านั้นที่ต้องมีความโดดเด่นด้วยสายตา แอปพลิเคชันทั่วไปของฉลาก <mark> คือการแสดงคำค้นหาการค้นหาให้กับผู้ใช้ในผลการค้นหา
html5: <mark> </kark>
html4: <span> </span>
6. สรุปแท็ก <summary> มีชื่อขององค์ประกอบรายละเอียดและองค์ประกอบรายละเอียดจะใช้เพื่ออธิบายรายละเอียดของเอกสารที่เกี่ยวข้องหรือส่วนเอกสาร องค์ประกอบสรุปควรเป็นองค์ประกอบย่อยแรกขององค์ประกอบรายละเอียด
html5: <beties> <summary> html 5 </summary> เอกสารนี้สอนทุกสิ่งที่คุณต้องทิ้ง HTML 5. </รายละเอียด>
HTML4: ไม่มี
7. Detalist<datalist> ฉลากกำหนดรายการข้อมูลที่เป็นตัวเลือก ด้วยองค์ประกอบอินพุตคุณสามารถสร้างรายการลดลงของค่าอินพุต
Datalist และตัวเลือกของมันจะไม่ปรากฏขึ้นมันเป็นเพียงรายการค่าอินพุตทางกฎหมาย
โปรดใช้คุณสมบัติรายการขององค์ประกอบอินพุตเพื่อผูก Datalist
<input list = cras /> <datalist id = cars> <value ตัวเลือก = BMW> <ค่าตัวเลือก = form> <optural value = volvo> </tatalist>9. คำสั่ง
แสดงปุ่มคำสั่ง
เฉพาะเมื่อองค์ประกอบคำสั่งอยู่ในองค์ประกอบเมนูองค์ประกอบจะมองเห็นได้ มิฉะนั้นองค์ประกอบนี้จะไม่ปรากฏขึ้น แต่คุณสามารถใช้มันเพื่อระบุปุ่มลัดแป้นพิมพ์
<เมนู> <คำสั่ง onclick = การแจ้งเตือน ('Hello World')> คลิกฉัน! แปด. ฉลากที่ถูกทิ้งองค์ประกอบการแสดงออก
basefont
ใหญ่
ศูนย์
แบบอักษร
S
โจมตี
TT
คุณ
ขอแนะนำให้แทนที่ด้วยความหมายที่ถูกต้องและใช้ CSS เพื่อให้แน่ใจว่าผลกระทบหลังจากการแสดงผล
องค์ประกอบเหมือนเฟรม
เนื่องจากความพร้อมใช้งานมากมายและการเข้าถึงเฟรมเวิร์กข้อกำหนด HTML5 จะลบองค์ประกอบต่อไปนี้
กรอบ
เฟรมชุด
noframes
แต่ HTML5 รองรับ IFRAME
คลาสคุณลักษณะ
คุณลักษณะที่แสดงออกหลายอย่างจะถูกลบออกโดยข้อกำหนดใหม่ดังต่อไปนี้:
จัดแนว
ลิงค์, vlink, alink, แอตทริบิวต์ข้อความบนแท็กตัวถัง
สี bgcolor
ความสูงและความกว้าง
การเลื่อนคุณสมบัติบนองค์ประกอบ iframe
นำไปสู่
HSPACE และ VSPACE
CellPadding, CellSpacing และ Border Attributes บนฉลากตาราง
แอตทริบิวต์โปรไฟล์บนฉลากส่วนหัว
แอตทริบิวต์เป้าหมายบนแท็กลิงค์ก
แอตทริบิวต์ longdesc ขององค์ประกอบ IMG และ iframe
ABBR แทนที่ตัวย่อ (ใช้เป็นตัวแทนตัวย่อ)
แอปเพล็ตเปลี่ยนวัตถุ
UL แทนที่ Dir
อื่น
ที่อธิบายไว้ข้างต้นเป็นโครงสร้างเอกสารและฉลากใหม่ของ HTML5 ที่แนะนำโดยบรรณาธิการให้คุณ ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!