开州网站建设网络销售的工作内容
文章目录
- 01 什么是HTML？
- 02 HTML的基本结构
- 03 网页基本标签
- 04 图像标签
- 05 链接标签
- 06 块元素和行内元素
- 07 列表
- 07 表格
- 08 视频和音频
- 09 页面结构
- 10 iframe内联框架
- 11 表单语法
- 👉 表单元素格式
- 👉 表单的应用
- 👉 表单初级验证
01 什么是HTML？
👉 Hyper Text Markup Language ( 超文本标记语言 )
超文本包括：文字、图片、音频、视频、动画等；
以前常见的 Flash 等插件，如今 HTML5 可以轻松实现
HTML5 的优势：
制定HTML5的：
02 HTML的基本结构
<!-- DOCTYPE声明:告诉浏览器，使用什么规范 -->
<!DOCTYPE html><!-- 下面是HTML总标签 -->
<html lang="en"><!-- 这是注释：IDEA快捷键CRTL+/ --><!-- head标签代表网页头部 -->
<head><!-- meta描述性标签，用来描述网站的一些信息 --><!-- meta一般来做搜索引擎优化SEO --><meta charset="UTF-8"><meta name="keywords" content="苗半里的博客"><meta name="description" content="来学Java"><!-- 网页标签 --><title>我的第一个网页</title>
</head><!-- body标签代表网页主体 -->
<body>
Hello World !
</body></html>
<!-- 以上是 HTML 标签 -->
03 网页基本标签
div 标签：div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。
<div> 可定义文档中的分区或节（division/section）。
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。
可以将 div 标签看作一个自由标签，可以把众多标签封装起来
- 标题标签 ：<h1> </h1>
- 段落标签 ：<p> </p>
- 换行标签 ：<br/>
- 水平线标签 ：<hr/>
- 字体样式标签 ：<strong/> 粗体 </strong> <em/> 斜体 </em>
- 注释和特殊符号 ：<!-- 注释，可多行 --> 特殊符号&
~~~<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><!-- 段落标签 -->
<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
<p>这是第四段</p><!-- 换行标签 -->
接下来是换行<br>再换行<br>再换<br><!-- 水平线标签 -->
<hr/><!-- 粗体和斜体 -->
<h1>字体样式标签</h1>
<strong>粗体</strong>
<em>斜体</em><!-- 注释 -->
<!--多行注释
-->
<!-- 特殊符号 -->
<!--代表空格-->
哈 哈
<br/>><!--大于符号-->
<br/><<!--小于符号-->
©<!--版权符号-->苗半里版权所有
<!--
特殊符号记忆方式：(IDEA)
打一个&就可以看着选了
--></body>
</html>
04 图像标签
- 常见的图像格式：
- JPG
- GIF
- PNG
- BMP
- …
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body>
<!--img标签学习
src：图片地址分相对地址（存储在当前目录之下），绝对地址（存储的盘符地址）../ 表示上一级目录
src 和 alt 必须，其他可以省略 -->
<img src="../../resource/image/1.png" alt="图像标签使用讲解">
<img src="../../resource/image/1.png" alt="图像标签使用讲解" title="悬停文字" width="1000">
</body>
</html>
05 链接标签
有 文本超链接 和 图像超链接 ：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title>
</head>
<body>
<!--a标签
href:必填，表示跳转到哪个页面
target：表示窗口在哪里打开_blank 新标签页打开_self 自己覆盖打开
-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
<br>
<a href="http://www.baidu.com"><img src="https://baidu.png" alt="百度">
</a><a name="top">顶部</a><!-- 锚链接
1.需要一个锚标记
2.跳转到标记
3.实现页面间跳转 -->
<a href="#top">回到顶部</a><!-- 功能性链接
邮件链接 ： mailto -->
<a href="mailto:839316435@qq.com">点击给我发邮件</a></body>
</html>
06 块元素和行内元素
- 块元素
- 无论内容多少，该元素独占一行
- 如：段落 、 标题 …
- （ p 、 h1 - h6 ）
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- 如：粗体、斜体 …
- （ a 、strong 、 em … ）
- 块元素可以包含行内元素，行内元素不能包含块元素
07 列表
什么是列表？
列表就是信息资源的一种展示形式，可以使信息结构化和条理化，以便浏览者快捷地获取相应信息。
列表的分类：
- 无序列表：<ul> </ul>
- 有序列表：<ol> </ol>
- 自定义列表：<dl> </dl>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title>
</head>
<body><!--无序列表-->
<ul><li>网页</li><li>数据库</li><li>算法</li>
</ul><hr/><!--有序列表-->
<ol><li>Java</li><li>C++</li><li>Python</li>
</ol><hr/><!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl><dt>编程</dt><dd>Java</dd><dd>C++</dd><dd>Python</dd><dt>业务</dt><dd>前端</dd><dd>后端</dd>
</dl></body>
</html>
07 表格
为什么使用表格？
- 简单通用
- 结构稳定
基本结构：
- 单元格
- 行 ：tr
- 列 ：td
- 跨行 ：rowspan
- 跨列 ：colspan
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body><!--表格table
行 tr rows 行
列 td
-->
<table border="1px"> <!--border边框--><tr> <!--第一列--><td> 1-1 </td><td> 1-2 </td><td> 1-3 </td><td> 1-4 </td></tr><tr> <!--第二列--><td> 2-1 </td><td> 2-2 </td><td> 2-3 </td><td> 2-4 </td></tr><tr> <!--第三列--><td rowspan="2"> 3-1 </td><!-- rowspan 跨行 --><td> 3-2 </td><td> 3-3 </td><td colspan="3"> 3-4 </td><!-- colspan 跨列 --></tr><tr> <!--第四列--><td> 4-1 </td><td> 4-2 </td><td> 4-3 </td><td> 4-4 </td></tr>
</table></body>
</html>
运行可得下表：
08 视频和音频
video 和 audio 标签 （可自由加属性）：
<!DOCTYPE html>
<hmtl>
<head><meta charset="UTF-8"><title>媒体元素</title>
</head>
<body>
<!--音频和视频
stc 资源路径
controls 控制条
autoplay 自动播放
-->
<video src="../../resource/video/VID_20221226_195327.mp4" controls autoplay></video>
<audio src="../../resource/audio/bbox.wav" controls autoplay></audio>
</body>
</hmtl>
09 页面结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面结构</title>
</head>
<body><header><h2>网页头部</h2></header><section><h2>网页主体</h2></section><footer><h2>网页脚部</h2></footer>
</body>
</html>
10 iframe内联框架
👉 就是一个网页里面嵌套另一个网页
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架</title>
</head>
<body>
<!--iframe内联框架
src 地址
width height 宽度高度-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe><iframe src="https://www.csdn.net/" frameborder="0" width="100px" height="200px"></iframe><iframe src="" name="hello" frameborder="0"></iframe>
<a href="第一个网页.html" target="hello">点击跳转</a> <!--target="hello"表示以内联窗口打开--></body>
</html>
11 表单语法
👉 例如网页里的用户登录窗口就是一个表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录注册</title>
</head>
<body><h1>注册</h1><!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式get方式提交：可以在url中看到提交的信息，不安全但是高效post：比较安全，可以传输大文件
--><form action="第一个网页.html" method="get"><!-- 文本输入框：input type="text" --><p>名字：<input type="text" name="username"></p><!-- 密码框：input type="password" --><p>密码：<input type="password" name="pwd"></p><p><input type="submit"><input type="reset">
</p></form></body>
</html>
👉 表单元素格式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录注册</title>
</head>
<body><h1>注册</h1><!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式get方式提交：可以在url中看到提交的信息，不安全但是高效post：比较安全，可以传输大文件
--><form action="第一个网页.html" method="get"><!-- 文本输入框：input type="text" --> <!--value为初始默认值 maxlength最大字符数 size初始宽度--><p>名字：<input type="text" name="username" value="请输入用户名" maxlength="8" size="30"></p><!-- 密码框：input type="password" --><p>密码：<input type="password" name="pwd"></p><!--单选框标签 radio value为单选框的值 name表示组--><p>性别：<input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl" name="sex"/>女</p><!-- 多选框 checkbox--><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">游戏<input type="checkbox" value="sport" name="hobby">运动</p><!-- 按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
--><p>按钮:<input type="button" name="btnl" value="点我验证"><input type="image" src="../../resource/image/img.png"> <!--图片按钮--></p><!-- 下拉框 列表框 --><p>国家<select name="列表名称" ><option value="china" selected>中国</option> <!--默认值--><option value="us">美国</option><option value="uk">英国</option></select></p>
<!-- 文本域 --><p>反馈:<textarea name="textarea" cols="40" rows="3" >文本内容</textarea></p><p><input type="submit"><input type="reset">
</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" step="1"></p><!-- 搜索框 --><p>搜索:<input type="search" name="search"></p></form></body>
</html>
👉 表单的应用
- 只读： input 标签里加上 readonly
- 禁用：input 标签里加上 disabled
- 隐藏：input 标签里加上 hidden
拓展：
<!-- 增强鼠标可用性 -->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
点击文字部分，会自动跳转到右边的文本框：
👉 表单初级验证
常用方式：
- placeholder 提示信息
- required 非空判断
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p><p>密码：<input type="password" name="pwd"></p>
- pattern 正则表达式
<p>自定义邮箱:<input type="text" name="diymail" pattern="[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?">
</p>