HTML学习笔记

1 HTML 介绍

1.1 什么是 HTML

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

1.2 W3C 标准

W3C ：即万维网联盟（World Wide Web Constortium）

W3C 标准包括：

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

1.3 基本结构

自闭合标签，只出现一个；其他标签，均是成对出现
<!DOCTYPE html> 声明：一般来指定要使用的协议
<title> 标签：网站标题
<meta> 标签：一般为描述性信息
<head> 标签：网页头部信息
<body> 标签：网页主体信息

<!--告诉浏览器，要使用的协议-->
<!DOCTYPE html>
<html lang="en">
<!--头部信息-->
<head>
    <!--  meta 标签：描述性信息  -->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--网页内容主体-->
<body>
</body>
</html>

2 网页基本元素

2.1 基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签 1 ~ 7 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<!--水平线标签-->
<hr>

<!--段落标签-->
<p>春眠不觉晓</p>
<p>处处闻啼鸟</p>
<p>夜来风雨声</p>
<p>花落知多少</p>

<!--换行标签-->
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>

<!--字体样式标签-->
粗体：<strong>Hello World!</strong><br>
斜体：<em>Hello World!</em><br>

<!--特殊符号-->
空格:空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br>
版权:&copy;<br>
大于:&gt;<br>
小于:&lt;
</body>
</html>

2.2 图像标签

标签名称：<img>
标签属性
- src ：图片的路径（相对和绝对），推荐使用相对路径
- alt ：图片加载失败后所显示的文字
- title ：鼠标悬停在图片上时所显示的文字
- width ：图片宽度
- height ：图片高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<img src= "../resources/image/Background.jpg" alt="测试背景图" title="背景图" width="1080" height="720">
</body>
</html>

2.3 链接标签

2.3.1文本图像链接

标签名称：<a>
标签属性
- herf ：必填项，为要跳转的网页链接
- target ：网页打开方式（_balnk_ ：新标签页打开，_self_ ：本页面打开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--文本超链接-->
<a href="../resources/image/Background.jpg" target="_blank">点击我跳转</a>
<!--图像超链接-->
<a href="https://www.bilibili.com" target="_self">
    <img src="../resources/image/Background.jpg" title="背景图" alt="" width="1080" height="720">
</a>
</body>
</html>

2.3.2 锚链接

标签名称：<a>
标签属性
- name ：锚链接的名称
- herf ：# + 要跳转的锚链接名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>

<a name="top">顶部</a>
<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>
春眠不觉晓<br>处处闻啼鸟<br>夜来风雨声<br>花落知多少<br>

<!--锚链接-->
<a href="#top">点我回到顶部</a>
</body>
</html>

2.3.3 功能性链接

邮箱链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--邮件链接-->
<a href="mailto:1667191252@qq.com">点击联系我</a>
</body>
</html>

2.4 列表标签

2.4.1 有序列表

标签：<ol> + <li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
</ol>
</body>
</html>

2.4.2 无序列表

标签：<ul> + <li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
</ul>
</body>
</html>

2.4.3 自定义列表

标签名称：<dl> + <dt> + <dd>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--自定义列表-->
<dl>
    <dt>列表</dt>
    <dd>Python</dd>
    <dd>Java</dd>
    <dd>PHP</dd>
</dl>
</body>
</html>

2.5 表格标签

2.5.1 基本表格

标签名称：<table>
标签属性
- <tr> ：行
- <td> ：列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>
</body>
</html>

2.5.2 跨行跨列

跨行：rowspan
跨列：colspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td colspan="3">1-1</td>
        <td rowspan="2">1-4</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>
</body>
</html>

2.6 视频和音频

2.6.1 视频

标签名称：<video>
标签属性
- src ：视频链接
- height ：视频高度
- width ：视频宽度
- autoplay ：自动播放
- controls ：播放控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频和音频</title>
</head>
<body>
<!--视频-->
<video src="../resources/video/video.mp4" controls autoplay width="360" height="540"></video>
</body>
</html>

2.6.2 音频

标签名称：<audio>
标签属性
- src ：音频链接
- autoplay ：自动播放
- controls ：播放控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频和音频</title>
</head>
<body>
<!--音频-->
<audio src="../resources/audio/《云与海》.mp3" controls></audio>
</body>
</html>

3 页面结构

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

4 iframe 内联框架

作用：一个网页中嵌入另一个网页
格式

<iframe src="path" name="mainFrame"></iframe>

标签名称：<iframe>
src ：地址
width ：框架界面宽度
height ：框架界面高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="https://www.bilibili.com" frameborder="0" width="540" height="360"></iframe>
<iframe src="" frameborder="0" name="my-blog" width="720" height="540"></iframe>
<a href="https://www.bilibili.com" target="my-blog">点击跳转小破站</a>=
</body>
</html>

5 表单

5.1 表单元素

标签名称：<form>
标签属性
- action ：表单提交的位置，可以使网站，也可以是一个请求处理地址
- method ：提交方式，一共有 post/get 两种
  - get ：可以在 url 中看到提交的信息，虽然高效，但是不安全
  - post ：安全性高，用来传输大文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="基本标签.html" method="post">
    <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>

5.2 input 标签

input 基本属性

属性值	说明
`type`	指定元素的类型，有 `text、password、checkbox、radio、submit、reset、file、hidden、image、button`
`name`	指定表单元素的名称
`value`	元素的初始值，`type` 为 `radio` 时必须指定
`size`	指定表单元素的初始宽度，当 `text、password` 类型时，以字符为单位，其余以像素为单位
`maxlength`	为 `text、password` 时，输入的最大字符数
`checked`	为 `radio、checkbox` 时，指定按钮是否被选中

5.2.1 文本框

type="text ：默认的、最基本的文本框格式

5.2.2 密码框

type="password" ：密码框，输入密码会变成 * 号

5.2.3 单选框

type="radio" ：单选框必须指定同一个 name，表示为一组，否则与多选框一样

5.2.4 复选框

type="checkbox" ：一般也将 name 指定为一样，表示同一组（加上 checked 表示默认选中）

5.2.5 按钮

type=button ：可以使文字按钮，也可以是图片按钮，其中 value 值代表按钮上显示的文字值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="index.html" method="post">
    <!--输入框-->
    <p>姓名：<input type="text" name="username"></p>

    <!--密码框-->
    <p>密码：<input type="password" name="pwd"></p>

    <!--单选框-->
    <p>性别：
        <!--单选框必须指定同一个 name，表示为一组，否则与多选框一样-->
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!--复选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="girl" name="hobby" checked>女孩
        <input type="checkbox" value="code" name="hobby">程序
    </p>

    <!--按钮-->
    <p>按钮
        <!--普通按钮-->
        <input type="button" name="btn-1" value="点击我">
        <!--图片按钮-->
        <input type="image" src="../resources/image/Background.jpg">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

5.3 下拉列表

标签形式：<select> + <option>
checked ：表示默认选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
</head>
<body>
<!--下拉列表-->
<p>城市:
    <select name="city" id="1">
        <option value="shanghai">上海</option>
        <option value="beijing" selected>北京</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
    </select>
</p>
</body>
</html>

5.4 文本域

标签名称：textarea
标签属性
- name ：用于后台交互，必须有
- cols ：列数
- rows ：行数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
</head>
<body>
<form action="列表.html" method="get">
    <!--文本域-->
    <p>反馈及建议:
        <textarea name="textarea" id="2" cols="30" rows="10">建议...</textarea>
    </p>
    <input type="submit">
</form>
</body>
</html>

5.5 文件域

标签名称：<input type="file">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
</head>
<body>
<form action="列表.html" method="get">
    <p>上传文件
        <input type="file" name="user-files">
        <input type="button" value="点击上传" name="upload">
    </p>
    <input type="submit">
</form>
</body>
</html>

5.6 其他组件

5.6.1 验证功能

邮箱验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="index.html" method="post">
    <!--邮箱验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>
</form>
</body>
</html>

URL 验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="index.html" method="post">
    <!--链接验证-->
    <p>网页:
        <input type="url" name="url">
    </p>
</form>
</body>
</html>

数字验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="index.html" method="post">
    <!--数字验证-->
    <p>
        <input type="number" name="number">
    </p>
</form>
</body>
</html>

5.6.2 滑块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="列表.html" method="post">
    <!--滑块-->
    <p>滑块:
        <input type="range" name="voice" min="0" max="100" step="1">
    </p>
</form>
</body>
</html>

5.6.3 搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="列表.html" method="post">
    <!--搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>
</form>
</body>
</html>

5.7 表单初级验证

提示信息：placeholder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="列表.html" method="post">
	<!--提示信息-->
    <p>
        <input type="text" placeholder="请输入用户名...">
    </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

不能为空：required

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="列表.html" method="post">
	<!--提示信息-->
    <p>
        <input type="text" placeholder="请输入用户名..." required>
    </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

正则表达式：patten

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="列表.html" method="post">
    <!--正则邮箱验证-->
    <p>自定义邮箱:
        <input type="text" name="diy-email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

posted @ 2022-04-06 09:54 悟道九霄阅读(29) 评论(0) 编辑收藏举报

刷新页面返回顶部

悟道九霄