HTML
HyperTextMarkupLanguage(超文本标记语言)
标记语言:标签
超文本语言:包括文字、图、音频、视频、动画等
所有浏览器都支持,纯天然的跨平台
W3C
- WorldWideWebConsortium(万维网联盟)
- 成立于1994年,Web技术领域最权威和最具有影响力的国际中性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括:
- 结构标准化语言(HTML、XML)
- 表现标注语言(CSS)
- 行为标准(DOM、ECMAScript)
常见IDE
- 记事本
- Dreamweaver
- IDEA
- WebStrom
1、网页基本信息
<!--DOCTYPE告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head网页头部-->
<head>
<!--meta描述网站信息。一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="我的第一个网页">
<meta name="description" content="这里可以学习Java">
<!--title网页标题-->
<title>我的第一个网页</title>
</head>
<!--body网页主体-->
<body>
</body>
</html>
2、网页基本标签
输入标签名 按 TAB 自动填上预选的第一个,跟Java一样,只不过Java是按回车
<!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>
<p>在平地书刻你房间上的飘影</p>
<p>就当我为遇见你伏笔</p>
<p>天正在等烟雨</p>
<p>而我在等你</p>
<p>月色被打捞起</p>
<p>掩盖了结局</p>
<p>如传世的青花瓷在独自美丽你眼的笑意</p>
<!--换行标签-->
天正在等烟雨 <br>
而我在等你<br>
炊烟袅袅升起<br>
隔江千万里<br>
在平地书刻你房间上的飘影<br>
就当我为遇见你伏笔<br>
天正在等烟雨<br>
而我在等你<br>
月色被打捞起<br>
掩盖了结局<br>
如传世的青花瓷在独自美丽你眼的笑意<br>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--注释和特殊符号-->
空格:
空 格
空 格
大于号:>
小于号:<
版权:©
需要某个符号,只要你记得第一个,IDEA会有提示。或者网上搜索。
</body>
</html>
3、图像标签
在标签中,按空格,IDEA也会有填入标签的提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3,图像标签</title>
</head>
<body>
<img src="图像地址" alt="图像替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度">
<img src="../img/1.png" alt="CloverLOGO" title="这是悬停文字" width="300" height="300">
<!--
src:图片地址(必填)
推荐使用相对地址,相对当前html文件的地址,如果在html这个文件的上级目录
../上一级目录
不推荐使用绝对地址,绝对地址是从磁盘根目录开始的
alt:图片名字(选填)
空格可以有提示
-->
</body>
</html>
4、链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4,链接标签</title>
</head>
<body>
<a href="#top">顶部</a>
<a href="链接路径" target="在哪个窗口打开">链接文本</a>
<!--
href:必填
_blank 在新标签页打开
_self 在当前页面打开
-->
<a href="1,我的第一个网页.html" target="_blank">点击跳转到页面一</a>
<a href="https://baidu.com" target="_self">点击跳转到百度</a>
<br>
<!--标签嵌套-->
<a href="1,我的第一个网页.html">
<img src="img/1.png" alt="CloverLOGO" title="这是悬停文字" width="300" height="300">
</a>
<!--锚链接-->
<a href="#top">回到顶部</a>
<a href="2,基本标签.html#down">跳转</a>
<!--功能性链接
邮件链接:mailto
-->
<a href="mailto:JueMing666@outlook.com">点击联系我</a>
</body>
</html>
5、行内元素和块元素
- 块元素
- 无论内容多少,该元素独占一行
- (p、h1-h6…)
- 行内元素
- 内容撑开宽度,左右都是行内元素的可以排在一行
- (a.strong.em…)
6、列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6,列表标签</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>python</li>
<li>前端</li>
<li>运维</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>Java</li>
<li>python</li>
<li>前端</li>
<li>运维</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>python</dd>
<dd>前端</dd>
<dd>运维</dd>
<dt>位置</dt>
<dd>廊坊</dd>
<dd>合肥</dd>
<dd>惠州</dd>
</dl>
</body>
</html>
7、表格标签
为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7,表格标签</title>
</head>
<body>
<!--表格table
行 tr rows
列 td
-->
<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-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
7、媒体元素
- 视频元素
- video
- 音频元素
- audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7,媒体元素</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../resource/video/1.mp4" controls autoplay></video>
<audio src="../resource/audio/白三叶-Lone.mp3" controls autoplay></audio>
</body>
</html>
8、页面结构分析
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8,页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
9、iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<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:地址
w-h:宽高
frameborder:边框属性,一般不设置。1有边框,0没有边框。
name:框架表示名
-->
<iframe src="https://cn.bing.com/" frameborder="1" width="1000" height="800"></iframe>
<a href="https://blog.csdn.net/qq_33865785/article/details/131751551"
name="我的博客" target="hello">点击跳转</a>
</body>
</html>
10、表单元素格式
表单、post、get、提交、文本框、单选框、多选框、按钮
列表框、文本域、文件域、简单验证、滑块、搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置,可以是网站,也可以是一个请求的处理地址
method:post,get提交方式
get:在url中看到提交信息,不安全。
post:比较安全,可以传输大文件。
name:必填,给后端Java传递参数
value:默认初始值
maxlength:最多可以填入多少长度的字符
size:文本框长度
这两种方式都可以在控制台Network > Headers中看到请求信息
-->
<form action="1,我的第一个网页.html" method="get">
<!--文本输入框:input type="text-->
<p>名字:<input type="text" name="username" value="your name" maxlength="9" size="30"></p>
<p>密码:<input type="password" name="PWD"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示组(组的名字是同一个说明这些组是同一个组,因为type中声明为radio单选所以只能选择一个)
checked:默认选中
-->
<p>性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
input type="checkbox"
name:表示组(说明叫hobby都是爱好这个组,因为type中声明为radio单选所以只能选择一个)
-->
<p>爱好:
<input type="checkbox" value="listenMusic" name="hobby">听音乐
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="sleep" name="hobby">睡大觉
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮:
<input type="button" name="btn1" value="点击边长">
<input type="image" src="img/1.png">
</p>
<!--下拉框(列表框)
selected:默认选中
-->
<p>下拉框:
<select name="列表名称" id="">
<option value="cn">中国</option>
<option value="jp">日本</option>
<option value="eth" selected>瑞士</option>
<option value="in">印度</option>
</select>
</p>
<!--文本域
cols="30" rows="10" 行 列
-->
<p>反馈:
<textarea name="textarea" cols="30" rows="10"></textarea>
</p>
<!--文件域
input type="file" name="files"
-->
<p>文件提交:
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证-->
<p>邮箱:
<input type="email" name="emial">
</p>
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块
input type="range"
-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
11、表单的应用
隐藏域 hidden
只读 readonly
禁用 disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的应用</title>
</head>
<body>
<p>搜索:<input type="text" id="mark2"></p>
<p>用户名:
<!--readonly 只读,不可修改-->
<input type="text" name="username" value="Administrator" readonly>
</p>
<p>密码框:
<!--hidden 隐藏。隐藏只是不显示,但依然存在。可以用来传输默认值。例如默认密码-->
<input type="password" name="PWD" hidden value="123456">
</p>
<p>单选框:
<!--disabled 禁用-->
<input type="radio" value="boy" name="sex" checked disabled>男
<input type="radio" value="girl" name="sex" checked>女
</p>
<p>提交按钮:
<!--也可以用来禁用按钮(好不容易填好的表单不让你提交)-->
<input type="submit" disabled>
</p>
<!--增强鼠标可用性-->
<label for="mark">点击锁定到对应id</label>
<input type="text" id="mark">
<label for="mark2">可以是页面的其他位置</label>
</body>
</html>
12、表单初级验证
输入框提示信息 placeholder
非空判断 required
正则表达式 pattern
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12,表单初级验证</title>
</head>
<body>
<!--placeholder 输入框的输入的提示(提示信息)
required 不能为空(非空判断)
-->
<p>用户名:
<input type="text" name="username" placeholder="请输入用户名" required>
</p>
<!--pattern 正则表达式
https://www.jb51.net/tools/regexsc.htm
-->
<p>自定义邮箱:
<input type="text" name="diymail" 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>
</body>
</html>
editor date : 230821am 01:58