HTML详解 - 技术栈

初识HTML
*

初识HTML

什么是HTML

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

W3C标准

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

HTML基本结构

html 复制代码

<!DOCTYPE html>                   <!--告诉浏览器，我们要使用什么规范 -->
<html lang="en">
<head>							  <!--head标签代表网页头部 -->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>						      <!--body标签代表网页主体 -->
<p>我的第一个网页</p>

</body>
</html>

网页基本标签

标题标签

html 复制代码

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

段落标签
html 复制代码
```
<p>我是SBC</p>
```
换行标签
html 复制代码
```
我是SBC<br/>
```
水平线标签
复制代码
```
<hr/>
```

字体样式标签

html 复制代码

粗体：<strong>I Love You</strong>
斜体：<em>I Love You</em>

注释和特殊符号

html 复制代码

空&nbsp格
&gt;  <!--大于号-->
&lt;  <!--小于号-->
&copy;版权符

图像标签

常见图像格式：

html 复制代码

<img src="../resources/img/1.jpg" alt="text" title="悬停文字" width="200" height="300">

链接标签

页面间链接

html 复制代码

<!-- a 标签
href：必填；表示要跳转哪个界面
target:表示窗口在哪打开
	_blank  在新网页中打开
	_self   在自己网页中打开
-->

<a href="我的第一个网页.html" target="_blank">点我跳转</a>

html 复制代码

<!--图片跳转-->
<a href="我的第一个网页.html">
    <img src="../resources/img/1.jpg" alt="text" height="300" width="300">
</a>

锚链接

html 复制代码

<a name="top">顶部</a>
.
.
.
<a href="#top">回到顶部</a>

功能性链接

html 复制代码

<!--功能性链接
邮件链接：mailto-->
<a href="mailto:2416671931@qq.com">点击联系我</a>

块元素和行内元素

块元素
- 无论内容多少，该元素独占一行
- （p、h1-h6...)
行内元素
- 内容撑开宽度，左右都是行内元素的可以在排在一行
- （a、strong、em ...）

列表

什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式展示出来，以方便浏览者能更快捷地获得相应信息

列表的分类

无序列表

html 复制代码

<!--无序列表-->
<ul>
    <li>数学</li>
    <li>语文</li>
    <li>英语</li>
    <li>C语言</li>
    <li>政治</li>
</ul>

有序列表

html 复制代码

<!--有序标签-->
<ol>
    <li>数学</li>
    <li>语文</li>
    <li>英语</li>
    <li>C语言</li>
    <li>政治</li>
</ol>

自定义列表

html 复制代码

<!--自定义列表-->
<!--    dl:标签
        dt:列表名称
        dd:列表内容
-->
<dl>
    <dt>学科</dt>
    
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dd>政治</dd>
    <dd>C语言</dd>
</dl>

表格

html 复制代码

<!--table 表格
 行 tr 
 列 td
 -->
<table border="1px"width="500">
    <tr>
                                   <!--  colspan：跨列-->
        <td colspan="3">1-1</td>
        <td>1-2</td>

    </tr>
    <tr>
                                  <!--  rowspan 跨行  -->
        <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>

    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>

视频和音频

视频元素
- video
音频元素
- audio

html 复制代码

<!--
src:资源路径
controls：控制条
autoplay：自动播放
-->
<audio src="../resources/audio/2.mp3" controls autoplay></audio>
<video src="../resources/video/1.mp4" controls autoplay></video>

iframe内联框架

html 复制代码

<iframe src="http://www.baidu.com" frameborder="0" width="1200px" height="600px"></iframe>

或者

html 复制代码

<iframe src=""name="hello" frameborder="0" width="1200px" height="600px"></iframe>
<a href="http://www.baidu.com"target="hello">点我跳转</a>

表单语法

html 复制代码

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

-->
<form action="我的第一个网页.html" method="get">	
<p>名字：<input type="text" name="User"></p>
<p>密码：<input type="password" name="Pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

单选框

html 复制代码

<!--    单选框标签
input type="radio"
value：单选框的值
name：表示组
checked：默认选中
-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>

多选框

html 复制代码

<!--  多选框标签
input type="checkbox"
checked：默认选中
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏

    </p>

按钮

html 复制代码

<!--    按钮
input type="button"   普通按钮
input type="image"     图像按钮
input type="submit"    提交按钮
input type="reset"     重置按钮
-->
    <p>
        按钮：
        <input type="button" value="点击" name="btn1">
        <input type="image" src="../resources/img/1.jpg">
    </p>

下拉框

html 复制代码

<!--    下拉框，列表框
selected:默认选中
-->
    <p>国家:
        <select name="列表名称">
            <option value="选项中的值">中国</option>
            <option value="选项中的值">美国</option>
            <option value="选项中的值" selected>印度</option>
            <option value="选项中的值">日本</option>
        </select>

    </p>

文本域

html 复制代码

<!--    文本域-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
	</p>

文件域

html 复制代码

<!--    文件域-->
    <p>
        <input type="file" name="files" id="">
        <input type="button" value="上传" name="upload">
    </p>

其他验证

html 复制代码

<!--    邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
<!--	URL验证-->
    <p>URL：
        <input type="url" name="url">
    </p>
<!--    数字验证-->
    <p>数字：
        <input type="number" name="number" max="100" min="0" step="10">
    </p>
<!--    滑块-->
    <p>
        <input  type="range" name="voice" min="0" max="100" step="2">
    </p>
<!--    搜索框-->
    <p>
        <input type="search" name="search">
    </p>

表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

表单的初级验证

常用方式

placeholder（提示信息）

html 复制代码

<p>名字：<input type="text" name="User"placeholder="请输入姓名"></p>

required（非空判断）
pattern（正则表达式）

参考网址：正则表达式速查表_脚本之家