前言
观前提醒:擅用
Ctrl+F
,笔记不求详细,但求理解,部分难以理解的内容我给了实例或者文档的链接,还有一些我推荐的小游戏可以加深对前端一些属性的理解,希望能点个小小的赞💕
HTML 是一种标记语言,使用特殊的语法或标记来向浏览器描述网页的结构。
HTML 元素由开始和结束标签构成,标签之间是文本内容。
不同的标签可以让文本内容以标题、段落、列表等形式展现。
DOCTYPE
<!DOCTYPE html> <html> <head> <!-- 网页描述 --> </head> <body> <!-- 网页内容(向用户展示),以下内容全部写在body中 --> </body> </html> 复制代码
h1~h6 p img br comment
<h1>Hello</h1> <h2>CatPhotoApp</h2> <p>I'm a p tag!</p> <img src="https://www.bit.ly/fcc-relaxing-cat" alt="a cat"> <br> <!-- 注释 --> <!-- main, header, footer, nav, video, article and others --> <main> <h1>Hello World</h1> <p>Hello Paragraph</p> </main> 复制代码
a
<!-- 页面间的跳转 --> <a href="https://www.freecatphotoapp.com">cat photos</a> <!-- 页面内的跳转 --> <a href="#contacts-header">Contacts</a> ... <h2 id="contacts-header">Contacts</h2> <!-- #作为占位符,图片作为链接 --> <p>Click here to view more <a href="#"> <img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat."> cat photos </a> . </p> 复制代码
list
<!-- 无序及有序列表 --> <ul> <li>milk</li> <li>cheese</li> </ul> <ol> <li>Garfield</li> <li>Sylvester</li> </ol> 复制代码
input
input
为输入文本框,有不同的type
属性,placeholder
作为占位符在未输入时显示内容。
<input type="text"> <input type="text" placeholder="cat photo URL"> 复制代码
form button
form
为发送数据给服务器的表单。
required
表明必须填写后才能提交。
<form action="https://www.freecatphotoapp.com/submit-cat-photo"> <input type="text" placeholder="cat photo URL" required> <button type="submit">submit</button> </form> 复制代码
label radio checkbox div value
按钮用
label
包裹,需用for
指明按钮id
radio
代表单选,checked
代表默认选中
<label for="indoor"> <input type="radio" id="indoor" name="indoor-outdoor" checked> Indoor </label> <label for="outdoor"> <input type="radio" id="outdoor" name="indoor-outdoor"> Outdoor </label> 复制代码
checkbox
为多选框
div
为内容划分元素,是一个包裹其他元素的通用容器。
<div> <label for="1"> <input type="checkbox" name="personality" id="1"> 1 </label> <label for="2"> <input type="checkbox" name="personality" id="2"> 2 </label> <label for="3"> <input type="checkbox" name="personality" id="3"> 3 </label> </div> 复制代码
按钮被选中时,会在表单内提交
indoor-outdoor=indoor
, 即value
的数据
<label for="indoor"> <input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor </label>