02_前端HTML5

文档：HTML5 简介 (w3school.com.cn)

1.h标签定义网页中的标题，h1-h6

2.p标签用于表示网页中的段落，一般会把一段文字放在p标签内

3.span标签一般用于表示网页中的行业元素，或者是对一部分内容生效，通常和css一起使用

3.strong标签用来加粗

4.em标签用于斜体

5.ul li标签表示无序列表

6.ol li 标签宝石有序列表(一般用于排名)，属性reversed(倒序) ，start(从数字几开始)

7.dl dt dd标签标识描述列表

<dl>
        <!-- dt: 用于表示被描述的名称 -->
        <dt>HTML</dt>
        <!-- dd: 用于表示描述信息 -->
        <dd>超文本比较语言，用于写网页</dd>
    </dl>

8.table标签表示一个表格

 <!-- 使用table制作一个表格 -->
    <!-- tr 表示行 -->
    <!-- th 表示表头 -->
    <!-- td 表示数据单元格 -->
    <table width="100%" border="1">
        <caption>水果价格表</caption>
        <!-- 表头 不是必须的 -->
        <tr>
            <th></th>
            <th>商品</th>
            <th>价格</th>
            <th>剩余</th>
        </tr>
        <!-- 一个tr表示一行 -->
        <tr>
            <th>水果</th>
            <td>苹果</td>
            <td>6</td>
            <td>60kg</td>
        </tr>
    </table>

9.a标签表示一个超链接

    <!-- target=_blank 打开一个新的标签页 -->
    <!-- target=_self 在当前标签页打开网址 -->
    <a href="https://www.baidu.com" target="_blank">跳转到百度</a>
    <!-- 内部链接  外部链接 锚点链接 -->
    <!-- 内部链接一般写的都是相对路径 -->
    <a href="./05 表格.html" target="_blank">打开表格页面</a>
    <a href="#07">调整到07</a>

10.img表示一张图片

 <img src="xxx.jpg">

11.form表示一个表单

    <form action="#" method="get" id="login">
    用户名: <input readonly autocomplete="off" type="text" id="username" name="username" value="dukuan"/>
    密码: <input type="password" id="password" name="password" />
    手机号: <input type="text" maxlength="11" autocomplete="off" />
    <input type="submit" value="提交内容"/>
    性别： 
    <label><input type="radio" name="sex" checked  value="1"/>男</label>
    <label><input type="radio" name="sex" value="0"/>女</label>
    爱好： 
    <label><input type="checkbox" name="hobby" checked  value="basketball"/>篮球</label>
    <label><input type="checkbox" name="hobby" value="football"/>足球</label>
    多行输入框: <textarea></textarea>
    </form>

12.DIV可以将html的文档划分成多个区块或者进行一个逻辑的分组

    <!-- div用途： 分组或者划分区块 -->
    <!-- div用途： 样式控制 -->
    <!-- div用途： 网页布局 -->
    <div style="display: inline-block;">
        <p>这是网站的头部1</p>
    </div>