HTML 5 学习笔记

最新推荐文章于 2024-10-31 15:47:09 发布

7c-海天

最新推荐文章于 2024-10-31 15:47:09 发布

阅读量77

点赞数

分类专栏：文档区文章标签： html

本文链接：https://blog.csdn.net/u014732849/article/details/116790485

版权

文档区专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Html 5 学习笔记

声明 HTML 的文档类型

# <!DOCTYPE html> 对应的就是 HTML5。
# ! 和大写的 DOCTYPE 是很重要的，尤其是对那些老的浏览器。 但 html 无论大写小写都可以。
<!DOCTYPE html>
<html>

<h1>cai</h1>

</html>

定义 HTML 文档的 head 和 body

# html 的结构主要分为两大部分：head 和 body。 
# 网页的描述应放入 head 标签， 网页的内容（向用户展示的）则应放入 body 标签。
# 比如 link、meta、title 和 style 都应放入 head 标签。

<!DOCTYPE html>
<html>
  <head>
    <meta />
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

input

# input 占位符
  <input type="text" placeholder="cat photo URL">

占位符效果

# form 表单发送数据。
# input 占位符属性。
# required 属性是“必填属性”。
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <input type="text" required placeholder="cat photo URL">
    <button type="submit">Submit</button>
</form>

单选框

# radio 定义单选框， 相同的name产生联系
# 在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同。 
# 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。
<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">indoor 
</label>
<label for="outdoor"> 
  <input id="outdoor" type="radio" name="indoor-outdoor">outdoor
</label>

复选框

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>

选中单选框和复选框

# checked 属性表示默认选中
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>

<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>