HTML
HTML
1、什么是HTML
Hyper Text Markup Language（超文本标记语言）
2、W3C标准
2.1、W3C
-
World Wide Web Consortium（万维网联盟）
2.2、W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
3、网页基本信息
<!-- DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="狂神说Java">
<meta name="description" content="学习Java">
<!-- title网页标题 -->
<title>我的第一个网页</title>
</head>
<!-- body标签代表网页主体 -->
<body>
Hello,Java!
</body>
</html>
4、网页基本标签
-
标题标签
<h1>标题标签</h1> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> -
段落标签
<h1>段落标签</h1> <p>结构化标准语言（HTML、XML）</p> <p>表现标准语言（CSS）</p> <p>行为标准（DOM、ECMAScript）</p> -
换行标签
<h1>换行标签</h1> 结构化标准语言（HTML、XML <br/> 表现标准语言（CSS）<br/> 行为标准（DOM、ECMAScript）<br/> -
水平线标签
<h1>水平线标签</h1> <hr/> -
字体样式标签
<h1>字体样式标签</h1> 未加样式：多多 <br/> 粗体：<strong>多多</strong> <br/> 斜体：<em>多多</em>-
粗体
粗体：<strong>多多</strong> <br/> -
斜体
斜体：<em>多多</em>
-
-
注释和特殊符号
- 空格
空格：多 多 <br/>- 大于
大于：A>B <br/>- 小于
小于：A<B <br/>- 版权
版权所有：©多多所有
特殊符号记忆方式
& ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!-- 标题标签 -->
<h1>标题标签</h1>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<hr/>
<!-- 段落标签 -->
<h1>段落标签</h1>
<p>结构化标准语言（HTML、XML）</p>
<p>表现标准语言（CSS）</p>
<p>行为标准（DOM、ECMAScript）</p>
<!-- 水平线标签 -->
<h1>水平线标签</h1>
<hr/>
<!-- 换行标签 -->
<h1>换行标签</h1>
结构化标准语言（HTML、XML <br/>
表现标准语言（CSS）<br/>
行为标准（DOM、ECMAScript）<br/>
<hr/>
<!-- 粗体，斜体-->
<h1>字体样式标签</h1>
未加样式：多多 <br/>
粗体：<strong>多多</strong> <br/>
斜体：<em>多多</em>
<hr/>
<!-- 特殊符号 -->
<h1>特殊符号标签</h1>
多 多 <br/>
空格：多 多 <br/>
大于：A>B <br/>
小于：A<B <br/>
版权所有：©多多所有
<!--
特殊符号记忆方式
& ;
-->
</body>
</html>
5、图像标签
5.1、常见的图像格式
- JPG
- GIF
- PNG
- BMP
- ......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!-- img学习
src：图片地址
相对地址，绝对地址
../ 上一级目录
alt：图片名字
title：鼠标悬停显示文字
-->
<img src="../resources/image/1.jpg" alt="Leborn" title="James" width="827px" height="615px">
</body>
</html>
title鼠标悬停效果：
找不到图片：
6、链接标签
6.1、文本超链接
<!-- a标签href：表示要跳转到哪个页面target：表示窗口在哪里打开 _blank 在新标签中打开 _self 在当前网页中打开--><a href="1.这是第一个网页.html" target="_self">点击跳转到第一个网页</a>
6.2、图像超链接
<a href="http://www.baidu.com" target="_blank" title="点击图片跳转到百度"> <img src="../resources/image/1.jpg"></a>
6.3、超链接
-
页面间链接
- 从一个页面链接到另一个页面
-
锚链接
<!-- 使用name作为标记 --><a name="top">顶部</a><!-- 锚链接1.需要一个锚标记2.跳转到标记--><a href="#top">回到顶部</a><a name="down">底部</a><a href="4.链接标签.html#down">跳转到链接标签的底部</a> -
功能性链接
<!-- 功能性链接邮件链接：mailto;QQ链接：--><a href="mailto:1468241627@qq.com">点击发送邮件</a> <br/><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1468241627&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:1468241:51" alt="加我领取Java资料" title="加我领取Java资料"/></a>![image-20210617123059223]()
7、行内元素和块元素
7.1、块元素
- 无论内容多少，该元素独占一行
- （p、h1-h6...）
7.2、行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a . strong .em ...）
8、列表
8.1、什么是列表
列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
8.2、列表的分类
-
无序列表
<!-- 无序列表 --><ul> <li>Java</li> <li>Python</li> <li>C</li> <li>C++</li> <li>H5</li></ul>![image-20210617125308060]()
-
有序列表
<ol> <li>Java</li> <li>Python</li> <li>C</li> <li>C++</li> <li>H5</li></ol>
- 自定义列表
<!-- 自定义列表dl：标签dt：列表名称dd：列表内容--><dl> <dt>编程语言</dt> <dd>Java</dd> <dd>Python</dd> <dd>C++</dd> <dd>C</dd> <dd>H5</dd></dl>
9、表格
9.1、为什么使用表格
- 简单通用
- 结构稳定
9.2、基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!-- 表格table行：tr rows列：td--><table border="1px"> <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>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr></table>
<table border="1px"> <tr> <!-- colspan 跨列 --> <td colspan="4">1-1</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-2</td> <td>3-3</td> <td>3-4</td> </tr></table>
练习：
<table border="5px"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">多多</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">少少</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr></table>
10、视频和音频
10.1、视频元素
- video
<!-- 音频和视频src：资源路径controls：控制条autoplay：自动播放--><video src="../resources/video/golden-dark.mp4" controls autoplay></video>
10.2、音频元素
- audio
<audio src="../resources/audio/sound.mp3" controls autoplay></audio>
11、页面结构分析
<header> <h2>网页头部</h2></header><section> <h2>网页主体</h2></section><footer> <h2>网页脚部</h2></footer>
12、iframe内联框架
<!-- iframe内联框架src：地址w-h：宽度 高度--><iframe src="https://www.baidu.com" width="1000px" height="800px"></iframe>
<iframe src="" name="baidu" width="1000px" height="800px"></iframe><a href="http://www.baidu.com" target="baidu">点击跳转</a>
13、表单语法
<!-- 表单formaction：表单提交的位置method：post ， get 提交方式 get方式提交：我们可以在url中看到我们提交的信息，不安全，高效 post方式提交：比较安全，传输大文件--><h1>注册</h1><form action="1.这是第一个网页.html" method="get"> <!-- 文本输入框：input type="text" --> <p>姓名：<input type="text" name="username"></p> <!-- 密码框：input type="password" --> <p>密码：<input type="password" name="password"></p> <p> <input type="submit"> <input type="reset"> </p></form>
<!-- 文本输入框：input type="text" value：默认初始值 maxlength：最长能写几个字符 size：文本框的长度 --> <p>姓名：<input type="text" name="username" value="cc" maxlength="4" size="30"></p>
单选框
<!-- 单选框标签 input type="radio" value：单选框的值 name：表示组 --> <p>性别： <input type="radio" value="boy" name="sex">男 <input type="radio" value="girl" name="sex">女 </p>
多选框
<!-- 多选框 input type="checkbox" --> <p>爱好： <input type="checkbox" name="hobby" value="game">游戏 <input type="checkbox" name="hobby" value="sleep">睡觉 <input type="checkbox" name="hobby" value="code">敲代码 </p>
按钮
<!-- 按钮 input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 --> <p>按钮： <input type="button" name="btn" value="点击提交"> <br/> <input type="image" src="../resources/image/1.jpg">点击图片提交 <br/> <input type="submit" value="提交"> <input type="reset" value="重置"> </p>
下拉框，列表框
<!-- 下拉框，列表框 --> <p>国家： <select name="country"> <option value="china" selected>中国</option> <option value="usa">美国</option> <option value="india">印度</option> <option value="uk">英国</option> </select> </p>
文本域
<!-- 文本域 cols：列 rows：行 --> <p>反馈： <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p>
文件域
<!-- 文件域 input type="file" --> <p> <input type="file" name="files"> <input type="button" value="上传"> </p>
邮箱验证
<!-- 邮件验证 --> <p>邮箱： <input type="email" name="email"> </p>
URL
<!-- URL --> <p>URL: <input type="url" name="url"> </p>
数字
<!-- 数字 --> <p>商品数量： <input type="number" name="num" max="100" min="0" step="1"> </p>
滑块
<!-- 滑块 input type="range" --> <p>音量： <input type="range" name="voice" max="100" min="0" step="2"> </p>
搜索框
<!-- 搜索框 --> <p>搜索： <input type="search" name="search"> </p>
14、表单的应用
14.1、隐藏域
hidden
<p>密码：<input type="password" name="password" hidden></p>
14.2、只读
readonly
<p>姓名：<input type="text" name="username" value="admin" readonly></p>
14.3、禁用
disabled
<p>性别： <input type="radio" value="boy" name="sex">男 <input type="radio" value="girl" name="sex" disabled>女 </p>
14.4、增强鼠标可用性
<!-- 增强鼠标可用性 --> <p> <label for="mark">你点我试试</label> <input type="text" id="mark"> </p>
15、表单初级验证
15.1、常用方式
-
placeholder
提示信息
<p>姓名：<input type="text" name="username" placeholder="请输入姓名"></p>![image-20210617214915678]()
-
required
非空判断
<p>密码：<input type="password" name="password" required></p>![image-20210617215006700]()
-
pattern
正则表达式
<p>自定义邮箱： <input type="email" name="diyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$//^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"> </p>![image-20210617215333778]()
查询正则表达式网址：
https://www.jb51.net/tools/regexsc.htm
16、总结
浙公网安备 33010602011771号