HTML

什么是HTML

Hyper Text Markup Language 超文本标记语言

它是一种标示性语言，非编程语言，不能使用逻辑运算，通过标签将网络上的文档格式进行统一
使分散网络资源链接为一个逻辑整体

HTML功能

展示在线的文档，其中包含了标题，文本，表格，列表以及照片等内容。
通过超链接检索在线信息。
为获取远程服务而设计表单。客用于检索信息，定购产品等。
在文档直接包含电子表格，视频剪辑，声音剪辑以及其他的一些应用。

动态网页和静态网页

静态网页：HTML代码和内容书写完毕后，页面的内容和显示效果基本上不会发生变化

动态网页：页面代码没有变，显示内容却可以随着时间，环境，数据库操作的结果而发生改变

前端开发工具

DCloud HBuilder
Sublime Text3
Visual Studio Code
WebStorm

网页基本结构

<!--DOCTYPE：告诉浏览器，我们要用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部,主要用来完成一个网页的相关设置-->
<head>
    <!--  meta描述性标签，它用来描述我们网站的一些信息  -->
    <meta charset="UTF-8" content=""> <!--  设置一个网站的编码格式  -->
    <meta charset="keywords" content=""> <!--  设置一个网站的搜索关键字  -->
    <meta charset="UTF-8"> <!--  设置一个网站的描述内容  -->
    <!--  title网页标题  -->
    <title>Title</title>
    <link rel="shortcut icon" href="" type="image/png"> <!--  设置一个网站的小图标  -->
    <!-- style标签代表书写样式的地方 -->
    <style>
    </style>
</head>
<!--  body标签代表网页主体  -->
<body>
</body>
<!--  script标签用于放脚本代码  -->
<script>
</script>
</html>

基本标签

标题标签

从1级到6级，1级标题最大，6级标题最小，会自动加粗，有默认字号

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

段落标签

表示段落，相当于一个回车

<p>段落标签</p>

换行标签
```
<br/>
```
水平标签
```
<hr/>
```

字体样式标签

<strong>粗体标签</strong>
<em>斜体标签</em>

注释和特殊符号

空&nbsp;&nbsp;&nbsp;格
大于：&gt;
小于：&lt;
版权：&copy;

图像标签

常见的图像格式

<img src="" alt="气球" title="悬停文字" width="600" height="600"/>

src:图片地址

alt：图像加载不成功的替代文字

title：鼠标悬停提示文字

width：图像宽度

height：图像高度

链接标签

文本超链接
图像超链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

href：链接路径

target：链接在哪个窗口打开 slef:在当前标签，blank在新窗口打开

页面链接

从一个页面链接到另一个页面

<a href="基本信息.html" target="_blank">点击进入基本信息页面</a>
<a href="https://www.baidu.com">点击跳转到百度</a>

锚链接

应用场景：回到顶部

<a name="top">顶部</a>
<!--锚链接-->
<a href="#top">回到顶部</a>

功能性链接
1. 邮件链接：
2. QQ链接：

块元素和行内元素

块元素：无论内容多少，该元素独占一行（p，h1-h6）

行内元素：内容撑开宽度，左右都是行内元素的可以在排在一行（a，strong，em）

列表标签

有序列表

<!--有序列表-->
<ol>
    <li>java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ol>

无序列表

<!--无序列表-->
<ul>
    <li>java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ul>

自定义列表

<!--自定义列表-->
<!--一般用于公司底部-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
</dl>

表格标签

<table border="1px">
    <tr>
<!--    colspan跨列    -->
       <td colspan="4">1-1</td>
    </tr>
    <tr>
<!--    colspan跨行    -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

视频和音频

video

audio

页面结构

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

iframe内联框架

<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px">
    
</iframe>

表单get和post提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<form action="基本信息.html" method="get">
    <p>名字：<input type="text" name="username"/></p>
    <p>密码：<input type="password" name="pwd"/></p>
    <p>
        <!--    提交    -->
        <input type="submit"/>
        <!--    重置    -->
        <input type="reset"/>
    </p>
</form>
</body>
</html>

form表单

input框

属性	说明
type	指定元素类型（text，password，checkbox，radio，submit，reset，file，hidden，image，button）默认为text
name	指定表单元素的名称
value	元素初始值。type为radio必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为redio或checkbox时，按钮是否是被选中

表单基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<form action="基本信息.html" method="get">
    <!--  文本输入框  -->
    <p>名字：<input type="text" name="username"/></p>
    <!--  密码框  -->
    <p>密码：<input type="password" name="pwd"/></p>
    <!--  单选框  -->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="boy" name="sex"/>女
    </p>
    <!--  多选框  -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="code" name="hobby"/>敲代码
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </p>
    <!--  按钮  -->
    <p>按钮：
        <input type="button" name="btn1" value="按钮"/>
    </p>
    <!--  下拉框  -->
    <select name="国家名称">
        <option value="china">中国</option>
        <option value="usa">美国</option>
        <option value="indu">印度</option>
        <option value="els">俄罗斯</option>
    </select>
    <!--  文本域  -->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    <!--  文件域  -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <!--  邮件验证  -->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!--  url  -->
    <p>url
        <input type="url" name="url">
    </p>
    <!--  数字  -->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
    <!--  滑块  -->
    <p>音量：
        <input type="range" name="voice" min="0" max="100">
    </p>
    <!--  搜索框  -->
    <p>搜索:
        <input type="search" name="search">
    </p>
    <p>
        <!--    提交    -->
        <input type="submit"/>
        <!--    重置    -->
        <input type="reset"/>
    </p>
</form>
</body>
</html>

表单应用

隐藏域 hidden
只读 readonly
禁用 disabled

表单初级验证

placeholder 提示信息
required 非空判断
pattern 正则表达式

前端学习HTML