html
HTML
简介
-
HTML
-
Hyper Text Markup Language
-
超文本标记语言，超文本指文字图片音频视频等等
-
W3C 万维网联盟
第一个HTML
<!--DOCTYPE 告诉浏览器要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--标签分为自闭合标签，和开放，闭合标签-->
<!--head 代表网页头部-->
<head>
<!--meta 描述性标签，描述网站信息-->
<meta charset="UTF-8">
<meta name="keywords" content="java,learn">
<meta name="description" content="how to learn Java">
<!--title 网页标题-->
<title>Title</title>
</head>
<!--body 代表网页主体-->
<body>
Java
</body>
</html>
网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<!--水平线标签-->
<hr/>
<!--换行标签-->
还有多线程进阶之JUC并发编程，没兴趣直接跳下一阶段，后面回来看！<br/>
08:36:29<br/>
【狂神说Java】JUC并发编程最新版通俗易懂<br/>
96.1万观看 2.9万弹幕<br/>
好的，到这里，Java入门就算OK了！阶段一结束！<br/>
<hr/>
<!--段落标签,每一个标签一段-->
<p>还有多线程进阶之JUC并发编程，没兴趣直接跳下一阶段，后面回来看！</p>
<p>08:36:29</p>
<p>【狂神说Java】JUC并发编程最新版通俗易懂</p>
<p>96.1万观看 2.9万弹幕</p>
<p>好的，到这里，Java入门就算OK了！阶段一结束！</p>
<hr/>
<!--字体样式-->
粗体：<strong>i love you</strong> <br/>
斜体：<em>i love Java</em>
<hr/>
<!--特殊符号-->
空 格 <br/>
><>< <br/>
©xx2
</body>
</html>
图像标签
- 绝对路径和相对路径
- 绝对路径 F:\ava\project\HTML\resources\img\57.jpg
- 相对路径 ../resources/img/57.jpg
- / 根目录
- ../ 上级目录
- ./ 当级目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--绝对路径和相对路径-->
<!--../代表上一级-->
<!--src代表路径，alt代表找不到图片显示的文字，有图片不显示-->
<img src="../resources/img/57.jpg" alt="xaax" title="悬停显示" width="447" height="672" >
<!--<img src="http://localhost:63342/HTML/resources/img/57.jpg" alt="xaax">-->
</body>
</html>
链接标签
- target代表在哪里打开这个链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习链接标签</title>
</head>
<body>
<!--1 普通链接
2 锚链接 先定义一个name="name1" 再在链接href=#"name1"
3 邮件链接 href="mailto:邮箱地址"
-->
<a name="top">top</a> <br>
<a href="3图片标签.html" target="_self">到三</a> <br>
<a href="https://www.baidu.com" target="_blank">
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu" > <br>
</a>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<img src="../resources/img/57.jpg" alt="出错" width="448" height="672" title="baidu"> <br>
<a href="#top" target="_blank">回到顶部</a> <br>
<a href="mailto:1554793262@qq.com">联系我</a>
</body>
</html>
块元素和行内元素
- 块元素（标签）会新起一行
- p段落标签和h标题标签都是块标签，每一个是单独的块
- 行内元素会接着一行写
- 斜体，粗体都是行标签
- 上面一整个是一块，下面每一行是一块
列表标签
- 分为有序列表，无序列表，和自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ol>
<li>Java</li>
<li>Java</li>
<li>Java</li>
<li>Java</li>
</ol>
<ul>
<li>wcnm</li>
<li>wcnm</li>
<li>wcnm</li>
<li>wcnm</li>
</ul>
<dl>
<dt>不许说脏话</dt>
<dd>我说脏话怎么了</dd>
<dd>我说脏话太好了</dd>
<dt>我是第二个分类</dt>
<dd>我是第二个分类的一个选项</dd>
<dd>我是第二个分类的一个选项</dd>
<dd>我是第二个分类的一个选项</dd>
</dl>
</body>
</html>
表格标签
- table表示表格 row是行 column是行 rowspan代表跨行（占几行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1px">
<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>
</body>
</html>
媒体元素
- audio和video标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<video src="../resources/video/1621710536-1-192.mp4" controls width="1000" height="500" autoplay muted></video> <br>
<audio src="../resources/audio/1621710536-1-30280.mp3" controls autoplay></audio>
</body>
</html>
页面结构分析
- 结构清晰 配合js
<!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>
iframe内联框架
- 配合链接标签可以当成一个容器
- iframe的name写名字，a的target写name的名字，点击就会在iframe生成跳转的链接页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架，嵌套网站</title>
</head>
<body>
<!--<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=78501130&bvid=BV1MJ411v7tJ&cid=134314948&p=1"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" -->
<!-- width="800" height="500"></iframe>-->
<iframe src="" frameborder="0" name="hello" width="1000" height="800"></iframe>
<a href="https://www.runoob.com/java/java-tutorial.html" target="hello">点击跳转</a>
</body>
</html>
表单提交
- method 表示提交方式，分为get和post
- get 不安全 高效 不能传大文件
- post 安全 不高效 可以传输大文件
- action 表示提交表单到的位置，可以是网站也可以是一个请求处理地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<form action="1我的第一个html.html" method="post">
<p>账户：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p> <input type="submit" name="sub"> <input type="reset" name="reset"> </p>
</form>
</body>
</html>
- 补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<form action="1我的第一个html.html" method="get">
<!--value初始值 在单选框里是单选框的值
radio单选框
name代表分类名，在单选框中相同name为一组，只能选一个-->
<p>账户：<input type="text" name="username" maxlength="10" size="21" value="admin" readonly ></p>
<p>密码：<input type="password" name="pwd" hidden></p>
<p>
<input type="radio" value="boy" name="sex" checked disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<input type="checkbox" value="sleep" name="hobby" checked>睡觉
<input type="checkbox" value="code" name="hobby">写代码
<input type="checkbox" value="learn" name="hobby">学习
<input type="checkbox" value="girl" name="hobby">女人
</p>
<p>
<input type="button" name="btn1" value="按我变长" disabled>
</p>
<!-- <p>-->
<!-- <input type="image" src="../resources/img/57.jpg">-->
<!-- </p>-->
<p>
国家
<select name="country">
<option value="china" >中国</option>
<option value="english" selected>英国</option>
<option value="usa">美国</option>
</select>
</p>
<p>
反馈：
<textarea name="textarea" cols="30" rows="10" required placeholder="填写反馈"></textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" name="btn2" value="提交">
</p>
<p>
邮件
<input type="email" name="email">
</p>
<p>
url
<input type="url" name="url">
</p>
<p>
数字
<input type="number" name="num" max="100" min="10" step="3">
</p>
<p>
滑块(音量)（）()
<input type="range" name="voice" max="100" min="20" step="3">
</p>
<p>
搜索框
<input type="search" name="search" id="search">
</p>
<label for="search">点我试试</label>
<p>
<input type="text" pattern="^[0-9]*$">
</p>
<p> <input type="submit" name="sub"> <input type="reset" name="reset" value="清空表单"> </p>
</form>
</body>
</html>
正则表达式
浙公网安备 33010602011771号