二、Basic HTML5 知识整理

一、需要记下的html5知识

1.html5网页文本框架

<!DOCTYPE html>
<html>
    <head></head>

    <body></body>

    <foot></foot>

</html>

2.简单标签

<!-- h标签，表示标题，h1-h5 -->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题二</h3>
<h4>标题二</h4>
<h5>标题二</h5>

<!-- p标签，表示文本段落 -->
<p>今天是个好天气啦啦啦啦啦啦啦啦啦啦</p>

<!-- a标签，表示链接-->
<a href="www.baidu.com">打开百度</a>
<!-- 打开新的标签页 -->
<a href="www.baidu.com" target="_blank">打开百度</a>

<!-- img标签，表示图片, alt属性表示对图片的解释 -->
<img src="./cat.jpg" alt="一只猫"/>

<!-- 无序列表 -->
<ul>
　　<li>无序列表1</li>
　　<li>无序列表2</li>
      <li>无序列表3</li>
</ul>

<!-- 有序列表, type类型有1,A,a,I,i，start为开始值 -->
<ol type="1" start="2">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

3.表单标签

<!-- form表单标签，action代表表单跳转的位置 -->
<form action="#" method="get">
<!-- 单选框，注意label的for属性和input的id属性对应，另外注意一组单选框的name值一致  -->
<!-- checked 表示默认选中 -->
<label for="indoor">
    <input type="radio" id="indoor" value="indoor" name="in-out" checked>indoor
</label>
<label for="outdoor">
    <input type="radio" id="outdoor" value="outdoor" name="in-out">outdoor
</label>

<!-- 多选框 -->
<label for="happy">
    <input type="checkbox" id="happy" name="personality" checked>happy
</label>
<label for="thin">
    <input type="checkbox" id="thin" name="personality">thin
</label>
<label for="smart">
    <input type="checkbox" id="smart" name="personality">smart
</label>

<!-- 输入框 -->
<!-- placeholder为占位提示信息，required 属性表示必填项 -->
<input type="text" placeholder="请输入姓名" required>

<!-- 提交按钮 -->
<button type="submit">提交表单</button>
</form>

4.结构标签

<!-- main标签可以优化seo -->
<main>
    <p>主要文本1</p>
    <p>主要文本2</p>
</main>

<!-- div为块标签，后续会大量应用 -->
<div>
    <div>div1</div>
    <div>div2</div>
</div>