一. 引言
1.1 HTML概念
- 网页, 是网站中的一个页面, 是构成网站的基本元素, 是承载各种网站应用的平台. 通俗的说, 网站就是由网页组成的, 通常我们看到的网页都是以html或html后缀结尾的文件, 俗称HTML文件
1.2 HTML5
- 目前网页常用
- 提供了一些新的元素和一些有趣的新特性, 同时也建立了一些新的规则. 这些元素, 特性和规则的建立 提供了许多新的网页功能, 如使用网页实现动态渲染图形, 图表, 图像和动画, 以及不需要安装任何插件直接使用网页播放视频等
- 优势:
- 世界知名浏览器厂商对HTML5的支持
- 微软, Google, 苹果, Opera, Mozilla
- 市场的需求
- 跨平台
1.3 W3C标准
二. HTML简介
2.1 什么是HTML
- HTML全称: Hyper Text Markup Language(超文本标记语言)
- 超文本: 包括文字, 图片, 音频, 视频, 动画等
- 标记: 标签, 不同的标签实现不同的功能
- 语言: 人与计算机的交互工具
2.2 HTML能做什么
2.3 HTML书写规范
- HTML标签是以尖括号包围的关键字
- HTML标签通常是成对出现的, 有开始就有结束
- HTML通常都有属性, 格式: 属性="属性值"(多个属性之间空格隔开)
- HTML标签不区分大小写, 建议全小写
2.4 IDEA快捷键
- 生成注释: Ctrl + Shift + / 或者 Ctrl + /
- 生成标签: Tab
三. HTML基本标签
3.1 结构标签
| <html>: 根标签 |
| <head>: 网页头标签 |
| <title>: 网页的标题</title> |
| </head> |
| <body>: 网页正文</body> |
| </html> |
| <body text="#f00"></body> text: 设置网页正文中所有文字的颜色 |
| <body bgcolor="#00f"></body> bgcolor:设置网页的背景色 |
| <body background="1.png"></body> background:设置网页的背景图 |
- 颜色的表示方式:
- 方式一: 用表示颜色的英文单词, 例: red, green, blue
- 方式二: 用16进制表示颜色, 例: #000000, #ffffff, #325687, #377405
- 文件路径
- ./ 表示当前目录下
- ../ 表示父目录
- / 表示根目录
3.2 排版标签
- 可用于实现简单的页面布局
- 注释标签: < !--注释-->
- 换行标签: < br>
- 段落标签: < p>文本文字< /p>
- 特点: 段与段之间有空行
- 属性: align对齐方式(left, center, right)
- 水平线标签: < hr/>
- 属性:
- width: 水平线的长度(两种: 第一种, 像素表示; 第二种, 百分比表示)
- size: 水平线的粗细(像素表示, 例如: 10px, 或者数字表示)
- color: 水平线的颜色
- align: 水平线的对齐方式
| |
| 换<br>行 |
| |
| <p>段落1</p> |
| <p align="center">段落2</p> |
| <p align="right">段落3</p> |
| |
| <hr width="50%" align="left" color="#f00" size="7"> |
3.3 块标签
- 使用CSS+DIV是目前流行的一种布局方式
- 块标签
- 无论内容有多少, 该标签独占一行
- (p, h1-h6...)
- 行内标签
- 内容撑开宽度, 左右都是行内标签的可以排在一行
- (a, strong, em...)
3.4 基本文字标签
| <font size="7"></font>用于设置字体的大小, 最小1号, 最大7号 |
| <font color="#f00"></font>用于设置字体的颜色 |
| <font face="宋体"></font>>用于设置字体的样式 |
3.5 文本格式化标签
| <b>粗体</b> |
| <br> |
| <strong>加粗</strong> |
| <br> |
| <em>强调字体</em> |
| <br> |
| <i>斜体</i> |
| <br> |
| <small>小号字体</small> |
| <br> |
| <big>大号字体</big> |
| <br> |
| 5<sup>2</sup>(上标) |
| <br> |
| H<sub>2</sub>O(下标) |
| <br> |
| <del>删除线</del> |
3.6 标题标签
- 随着数字增大字体逐渐变小, 字体是加粗的, 内置字号, 默认占据一行
| <h1>h1标题(最大)</h1> |
| <h2>h2标题</h2> |
| <h3>h3标题</h3> |
| <h4>h4标题</h4> |
| <h5>h5标题</h5> |
| <h6>h6标题(最小)</h6> |
3.7 列表标签(清单标签)
- 无序列表: 使用一组无序的符号定义, < ul>< /ul>
| |
| |
| |
| 无序列表<br> |
| <ul> |
| <li>无序列表</li> |
| <li>无序列表</li> |
| <li>无序列表</li> |
| </ul> |
| |
| <ul type="circle"> |
| <li>空心圆</li> |
| </ul> |
| <ul type="disc"> |
| <li>实心圆</li> |
| </ul> |
| <ul type="square"> |
| <li>黑色方块</li> |
| </ul> |
| |
- 有序列表: 使用一组有序的符号定义, < ol>< ol>
| |
| |
| |
| 有序列表<br> |
| <ol> |
| <li>有序列表</li> |
| <li>有序列表</li> |
| <li>有序列表</li> |
| </ol> |
| |
| <ol type="1"> |
| <li>数字类型</li> |
| </ol> |
| <ol type="A"> |
| <li>大写字母类型</li> |
| </ol> |
| <ol type="a"> |
| <li>小写字母类型</li> |
| </ol> |
| <ol type="I"> |
| <li>大写古罗马</li> |
| </ol> |
| <ol type="i"> |
| <li>小写古罗马</li> |
| </ol> |
| <ul> |
| <li>嵌套列表</li> |
| <ol> |
| <li>嵌套列表</li> |
| </ol> |
| </ul> |
| |
| |
| |
| <dl> |
| <dt>语言</dt> |
| |
| <dd>Java</dd> |
| <dd>python</dd> |
| <dd>C</dd> |
| <dd>Linux</dd> |
| <dt>位置</dt> |
| |
| <dd>北京</dd> |
| <dd>上海</dd> |
| <dd>广州</dd> |
| <dd>深圳</dd> |
| </dl> |
3.8 图形标签
| src: 引入图片的地址 |
| alt: 提示信息, 如果图片未能正确显示, 则显示提示信息 |
| title: 鼠标悬停图片上提示的信息 |
| width: 图片的宽度 |
| height: 图片的高度 |
| border: 图片的边框 |
| align: 与图片对齐显示方式 |
| hspace: 在图片左右设定空白 |
| vspace: 在图片的上下设定空白 |
| |
| <p align="center"> |
| 前一行<br> |
| 前面的文字<img src="./picture/002.png" alt="text" title="text" width="235" align="top" border="10" vspace="40" hspace="40">后面的文字 |
| <br>后一行 |
| </p> |
3.9 链接标签
-
href: 在页面中使用链接标签跳转到另一页面
- 标签: < a href="">< /a>
- 属性: href跳转页面的地址(跳转到外网需要添加协议)
-
target属性: 设置跳转页面时的页面打开方式
-
锚链接: 跳转到指定位置
- 定义位置: < a name="名称">< /a>, 使用name作为标记
- 指向: < a href="#名称">< /a>, #+name属性值 跳转到name标记所在位置
-
功能链接:
| <font color="red" size="5"><a name="top">顶部</a></font><a href="Demo06.html" target="_blank">跳转到另一个页面</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> |
| <font color="blue" size="5"><a name="middle">中部</a></font><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> |
| <h4><a href="#top">回到顶部</a></h4> |
| <h4><a href="#middle">回到中部</a></h4> |
3.10 表格标签
- 普通表格 (table, tr(行), td(列))
| <table border="1" width="200"> |
| <tr> |
| <td>第一列</td> |
| <td>第二列</td> |
| <td>第三列</td> |
| </tr> |
| <tr> |
| <td>第一列</td> |
| <td>第二列</td> |
| <td>第三列</td> |
| </tr> |
| </table> |
| <table border="1" width="200"> |
| <tr> |
| <th>第一列</th> |
| <th>第二列</th> |
| <th>第三列</th> |
| </tr> |
| <tr> |
| <th>第一列</th> |
| <th>第二列</th> |
| <th>第三列</th> |
| </tr> |
| </table> |
- 表格的列合并属性(colspan): 在同一行内同时合并多个列
| <table border="1" width="200"> |
| <tr> |
| <th colspan="2"></th> |
| <th></th> |
| </tr> |
| </table> |
- 表格的行合并属性(rowspan): 在同一列内同时合并多个行
| <table border="1" width="200"> |
| <tr> |
| <th rowspan="2">第一列</th> |
| <th>第二列</th> |
| <th>第三列</th> |
| </tr> |
| </table> |
3.11 媒体标签
| |
| |
| |
| |
| |
| |
| |
| <video src="./resource/video/min.mp4" controls autoplay></video> |
| |
| <audio src="./resource/audio/Empire%20Of%20Angels.mp3" controls autoplay></audio> |
3.12 页面结构分析
- header: 标记头部区域的内容(用于页面或页面中的一块区域)
- footer: 标记脚部区域的内容(用于页面或页面中的一块区域)
- section: Web页面中的一块独立区域
- article: 独立的文章内容
- aside: 相关内容或应用(常用于侧边栏)
- nav: 导航类辅助内容
| <header> |
| <h2>网页头部</h2> |
| </header> |
| |
| <section> |
| <h2>网页主体</h2> |
| </section> |
| |
| <footer> |
| <h2>网页脚部</h2> |
| </footer> |
四. 综合案例
| |
| |
| |
| |
| <table border="1"> |
| <tr> |
| |
| <th colspan="3">学生成绩</th> |
| </tr> |
| <tr> |
| |
| <td rowspan="3">张三</td> |
| <td>语文</td> |
| <td>100</td> |
| </tr> |
| <tr> |
| <td>数学</td> |
| <td>100</td> |
| </tr> |
| <tr> |
| <td>英语</td> |
| <td>100</td> |
| </tr> |
| <tr> |
| |
| <td rowspan="3">李四</td> |
| <td>语文</td> |
| <td>100</td> |
| </tr> |
| <tr> |
| <td>数学</td> |
| <td>100</td> |
| </tr> |
| <tr> |
| <td>英语</td> |
| <td>100</td> |
| </tr> |
| </table> |
五. html表单标签
- action表示动作, 值为服务器的地址, 把表单的数据提交到该地址上处理
- method请求方式: get和post
- get:
- 地址栏: 请求参数都在地址后拼接path?name="张三"&password="123456"
- 不安全
- 效率高
- get请求大小有限制, 不同浏览器有不同, 但是大约是2KB; 一般情况用于查询数据
- post:
- 地址栏: 请求参数单独处理
- 安全可靠些
- 效率低
- post请求大小理论上无限; 一般用于插入删除修改等操作
- enctype: 表示是表单提交的类型
- 默认值: application/x-www-form-urlencoded 普通表单
- multipart/form-data 多部分表单 (一般用于文件上传)
- 作为表单中的重要元素, 可根据不同type值呈现为不同状态
| <form action="success.html" method="get"> |
| 单行文体框: <input type="text" name=""><br> |
| 密码框: <input type="password" name=""><br> |
| 单选按钮: <input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女<br> |
| 多选框: <input type="checkbox" name=""><br> |
| 日期框: <input type="date" name=""><br> |
| 时间框: <input type="time" name=""><br> |
| 日期和时间框: <input type="datetime" name=""><br> |
| 电子邮件输入: <input type="email" name=""><br> |
| 数值输入: <input type="number" name=""><br> |
| 文件上传: <input type="file" name=""><br> |
| 隐藏域: <input type="hidden" name=""><br> |
| 取值范围: <input type="range" name=""><br> |
| 取色按钮: <input type="color" name=""><br> |
| <hr> |
| 表单提交按钮: <input type="submit" name=""><br> |
| 普通按钮: <input type="button" name="" value="普通"><br> |
| 重置按钮: <input type="reset" name=""><br> |
| 图片提交按钮: <input type="image" src="./picture/002.png" name=""><br> |
| </form> |
5.3 select元素(下拉列表)
- 单选下拉列表: < select>< /select>
- 默认选中属性: selected
| <form action="success.html" method="get"> |
| 学历: |
| <select name="edu"> |
| <option value="1">小学</option> |
| <option value="2">初中</option> |
| <option value="3">高中</option> |
| <option value="4">专科</option> |
| <option value="5" selected>本科</option> |
| <option value="6">硕士</option> |
| </select> |
| </form> |
- 多选下拉列表属性: < select>< /select>
- 多选列表: multiple="multiple"
| <form> |
| <select name="hobby" multiple="multiple" size="2"> |
| <option value="1">编程</option> |
| <option value="2">音乐</option> |
| <option value="3">运动</option> |
| <option value="4">美食</option> |
| <option value="5">游戏</option> |
| <option value="6">电影</option> |
| </select> |
| </form> |
5.4 textarea元素(文本域)
- 多行文本框: < textarea cols="列" rows="行">< /textarea>
| <textarea name="ta" cols="10" rows="2">HTML 学习</textarea> |
5.5 表单初级验证
- 常用方式
- placeholder: 提示信息
- required: 非空判断
- pattern: 正则表达式 (网址: )
| <p>用户: |
| <input type="text" name="username" placeholder="请输入用户名" required> |
| </p> |
| <p>自定义邮箱: |
| <input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> |
| </p> |
5.6 综合案例
| <h1>注册</h1> |
| |
| |
| |
| |
| |
| |
| <form action="1.我的第一个网页.html" method="get"> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <p>用户: |
| <input type="text" name="username" placeholder="请输入用户名" required> |
| </p> |
| |
| |
| <p>密码: |
| <input type="password" name="pwd" placeholder="请输入密码"> |
| </p> |
| |
| |
| |
| |
| |
| |
| <p>性别: |
| <input type="radio" name="sex" value="male" checked>男 |
| <input type="radio" name="sex" value="female">女 |
| </p> |
| |
| |
| |
| |
| <p>爱好: |
| <input type="checkbox" name="hobby" value="study">学习 |
| <input type="checkbox" name="hobby" value="music">音乐 |
| <input type="checkbox" name="hobby" value="movie" checked>电影 |
| <input type="checkbox" name="hobby" value="sport">运动 |
| </p> |
| |
| |
| <p> |
| <input type="button" name="btn1" value="按钮"> |
| </p> |
| |
| |
| <p> |
| |
| </p> |
| |
| |
| <p> |
| <input type="file" name="files"> |
| <input type="button" name="upload" value="上传"> |
| </p> |
| |
| |
| |
| |
| |
| |
| <p>国家: |
| <select name="country"> |
| <option value="US">美国</option> |
| <option value="China" selected>中国</option> |
| <option value="UK">英国</option> |
| <option value="GM">德国</option> |
| </select> |
| </p> |
| |
| |
| |
| |
| |
| <p> |
| <textarea name="textarea" cols="20" rows="5" placeholder="请输入内容"></textarea> |
| </p> |
| |
| |
| <p>邮箱: |
| <input type="email" name="email" placeholder="请输入邮箱"> |
| </p> |
| |
| |
| <p>网址: |
| <input type="url" name="url" placeholder="请输入网址"> |
| </p> |
| |
| |
| <p>分数: |
| <input type="number" name="number" max="100" min="0" step="1" placeholder="请输入分数"> |
| </p> |
| |
| |
| <p>音量: |
| <input type="range" name="range" max="100" min="0" step="2"> |
| </p> |
| |
| |
| <p>搜索: |
| <input type="search" name="search" placeholder="请输入要搜索的内容"> |
| </p> |
| |
| |
| <p> |
| <label for="mark">点我输入留言: </label> |
| <input type="text" id="mark" placeholder="请输入您的留言"> |
| </p> |
| |
| |
| |
| |
| |
| <p>自定义邮箱: |
| <input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" placeholder="请输入正确格式的邮箱"> |
| </p> |
| |
| |
| <input type="submit" > |
| |
| |
| <input type="reset" value="清空表单"> |
| |
| |
| </form> |
六. HTML框架标签
- 通过使用框架, 你可以在同一个浏览器窗口中显示不止一个页面, 每份HTML文档称为一个框架, 并且每个框架都独立于其他的框架
- 使用框架的缺点:
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
6.1 框架结构标签frameset
- 框架结构标签: 用于定义如何将窗口分割为框架
- 每个frameset定义了一系列行或列
- rows/columns的值规定了每行或每列占据屏幕的面积
- < frameset rows="">< /frameset>
- < frameset columns="">< /frameset>
6.2 框架标签frame
| <frameset cols="*,*,*"> |
| <frame src="Demo01.html" /> |
| <frame src="Demo02.html" /> |
| <frameset rows="10%,*"> |
| <frame src="Demo03.html"> |
| <frame src="Demo04.html"> |
| </frameset> |
| </frameset> |
6.3 基本的注意事项
- HTML5不支持frameset标签
- 不能将body标签和frameset标签同时使用
- 假如一个框架有可见边框, 用户可以拖动边框来改变它的大小, 为了避免这种情况发生, 可以在< frame>标签中加入: noresize="noresize"
6.4 iframe(HTML5支持)
| |
| |
| |
| |
| |
| <iframe src="" name="baidu" frameborder="0" width="1000" height="800"></iframe> |
| <a href="https://www.baidu.com" target="baidu">点击跳转</a> |
| |
七. HTML的其他标签和特殊字符
7.1 其他标签
| <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> |
| |
| <meta http-equiv="descripton" content="this is my page"> |
| |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| |
| <link rel="stylesheet" type="text/css" href="./style.css"> |
| |
| <script type="text/javascript" src=""></script> |
7.2 特殊字符
| 占位符: 空格 空 格 |
| 大于号: > > |
| 小于号: < < |
| 版权: 版权信息 ©HTML学习 |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步