持续性学习-Day14（前端基础HTML5）

参考教学视频：秦疆

 

HTML（Hyper Texct Markup Language）超文本标记语言

W3C：World Wide Web Consortium 万维网联盟

W3C标准包括：

1. 结构化标准语言（HTML、XML）

2. 表现标准语言（CSS）

3. 行为标准（DOM、EXMAScript）

1.基本标签

<!--标题标签-->
<!-- h1 - h5 -->
<!--段落标签-->
<p></p>
<!--换行标签-->
<br/>
<!--水平线标签-->
<hr/>
<!--粗体-->
<strong></strong>
<!--斜体-->
<em></em>
<!--特殊符号-->
空格:&nbsp;
大于号:&gt;
小于号:&lt;
版权符号:&copy;

2.图像标签、超链接标签

<img src="../resources/image/线程操作流程.jpg" alt="测试" title="悬停内容">
<br/>
<!--_self当前页面打开-->
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a name="top"></a>
<!--锚链接
1.需要一个标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a href="mailto:879506287@qq.com">邮件</a>

3.列表、表格、媒体元素

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
</ol>
​
<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
</ul>
​
<dl>
    <dt>自定义列表1</dt>
    <dd>自定义列表二级目录1</dd>
    <dt>自定义列表2</dt>
    <dd>自定义列表二级目录2</dd>
</dl>

<table border="1px">
    <tr>
        <td>一行一列</td>
        <td>一行二列</td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center;">跨列</td>
    </tr>
    <tr>
        <td rowspan="2">跨行</td>
        <td>空行</td>
    </tr>
    <tr>
        <td>测试</td>
    </tr>
</table>

<!--autoplay 自动播放-->
<video src="" controls ></video>
<audio src="" controls ></audio>

4.页面结构分析

元素	描述
header	标题头部的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面中的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

5.内联框架

<iframe src="../resources/image/线程操作流程.jpg" frameborder="0"></iframe>

6.表单的post和get

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post、get提交方式
    get方式提交：可以在url中看见提交的信息，不安全，但是高效
    post方式提交：比较安全，传输大文件
-->

7.文件域&邮箱&数字验证

<p>
    <input type="file">
    <input type="email">
    <input type="number" max="100" min="0" step="10"> <!--数字验证-->
</p>

8.滑块&搜索框&label

<input type="range" min="0" max="100" step="2">
<input type="search">

<!--增强鼠标可用性-->
<p>
    <label for="mark">点击</label>
    <input type="text" id="mark">
</p>

9.表单初级验证

<input type="text" placeholder="输入提示信息" required pattern="[0-9]*[1-9][0-9]*">
<!--pattern正则表达式-->
<!--required非空判断-->