网页基本信息
<!--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>
放假了！
</body>
</html>
网页基本标签(h,p,hr,br,stronger,em, )
标签快捷键： ()+tab
1.标题标签
<h1>一级标签</h1>
...
<h6>六级标签</h6>
2.段落标签
<p>久未放晴的天空</p>
<p>依旧留着你的笑容</p>
3.水平线标签
<hr/>
4.换行标签
久未放晴的天空<br/>
依旧留着你的笑容<br/>
5.字体样式标签
粗体：<strong>I love you</strong>
斜体：<em>I love you</em>
6.空格标签
7.注释标签
<!--注释标签-->
图像标签img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>picture</title>
</head>
<body>
<!--src 路径（绝对路径，相对路径（推荐）../上一级目录）-->
<!--alt 显示不出时，显示的文字-->
<!--src 和 alt 必须有-->
<!--title 悬停文字-->
<!--width -->
<!--height -->
<img src="../resource/1.png" alt="加载错误" title="graph" width="600" height="600">
</body>
</html>
超链接标签
<!--1.文本超链接
href 指的是要跳转的页面(必填)
target 打开方式
_blank 新标签页打开
_self 本标签页打开(不写则默认为这个)
也可以是另一标签页的name（内联框架）-->
<a href="https:\\www.baidu.com" target="_blank">点击</a>
-
图片超链接
<!--图片超链接(嵌套) href 指的是要跳转的页面(必填) target 打开方式 _blank 新标签页打开 _self 本标签页打开(不写则默认为这个)--> <a href="https:\\www.baidu.com"> <img src="../resource/1.png" alt="加载失败"> </a> -
锚链接
<!--锚链接 需要一个锚标记 name=""(self-define) 跳转用#加name即可(另一标签页也可以用)--> <a name="top">顶端</a> <!--大量标签再此--> <a href="#top">点击此到顶端</a> -
功能性链接
<!--功能性链接(邮箱,qq,等,可以看不同软件的官方推广) 邮箱mailto:--> <a href="mailto:20722043@bjtu.edu.cn">点击联系邮箱</a>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>c</li>
<li>c++</li>
</ol>
</body>
</html>###
-
无序列表
<!--无序列表--> <ul> <li>java</li> <li>python</li> <li>c</li> <li>c++</li> </ul> -
自定义列表
<!--自定义列表 dl 标签 dt 列表名称 dd 列表内容--> <dl> <dt>语言</dt> <dd>java</dd> <dd>python</dd> <dd>c</dd> <dd>c++</dd> <dt>学科</dt> <dd>math</dd> <dd>english</dd> <dd>chinese</dd> </dl>
表格标签
-
行列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <!--表格标签table border(宽度) 行 tr 列 td--> <table border="1px"> <tr> <td>1/1</td> <td>1/2</td> <td>1/3</td> </tr> <tr> <td>2/1</td> <td>2/2</td> <td>2/3</td> </tr> <tr> <td>3/1</td> <td>3/2</td> <td>3/3</td> </tr> </table> </body> </html> -
跨行跨列
<!--跨行跨列
colspan 跨列(横着合并)
rowspan 跨行(竖着合并)-->
<table border="1px">
<tr>
<td colspan="3">跨列</td>
</tr>
<tr>
<td rowspan="2">跨行</td>
<td>2/2</td>
<td>2/3</td>
</tr>
<tr>
<td>3/2</td>
<td>3/3</td>
</tr>
</table>
媒体元素标签
<!--音频与视频
video:视频标签
audio:音频标签
src: 资源路径(推荐相对路径)
controls: 控制条
muted autoplay: 静音自动播放
autoplay 自动播放-->
<video src="../resources/video/安静.mp4" controls autoplay></video>
<audio src="../resources/audio/java.aac" controls autoplay></audio>
页面结构标签（简洁明了）
内敛框架标签
-
内敛框架iframe
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <!--内联框架（bilibili视频网址等会自动生成标签，复制即可） src 网址 name 框架标识名(可通过target跳转) frameborder 边框宽度 width height --> 2 <iframe src="https:\\www.bing.com" frameborder="1px" ></iframe> </body> </html> -
有趣应用
<!--有趣应用 目标：在指定位置点击得到内联网址 target 填写name--> <iframe src="" name="hello" frameborder="1px"></iframe> <a href="https:\\www.bing.com" target="hello">点击跳转</a>
表单form
一.初识表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--表单form
action 表单提交位置，可以是网址，也可以是请求处理地址
method get 可以在url中看到，不安全，高效
post 安全，可以提交大文件
-->
<form action="list.html" method="post">
<p>用户名：
<!--文本输入框 input type="text"
最好/一定加个name，便于后续操作-->
<input type="text" name="username">
</p>
<p>密 码：
<!--密码输入框 input type="password"
最好/一定加个name，便于后续操作-->
<input type="password" name="password">
</p>
<p>
<!--提交按钮 input type="submit"
重置按钮 input type="reset"-->
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
二.表单元素
任何表单元素都必须加name，便于提交处理
文本框input
<!--文本输入框 input type="text"
最好/一定加个name，便于后续操作(必加)
value 默认初始值
maxlength 最大字符长度
size 显示文本框长度-->
<input type="text" name="username" value="无" maxlength="8" size="4">
<p>密 码：
<!--密码输入框 input type="password"
最好/一定加个name，便于后续操作
value 默认初始值
maxlength 最大字符长度
size 显示文本框长度-->
<input type="password" name="password">
</p>
-
搜索框input-search
<p>搜索： <!--搜索框input-search name必须有--> <input type="search" name="search"> </p> -
简单验证
<!--email 验证--> <input type="email" name="email"> <!--url验证--> <input type="url" name="url"> <!--数字number验证 min max step 步长--> <input type="number" name="number" min="0" max="100" step="1">
单选框input-radio
<p>性别：
<!--单选框radio
value 必须填 是单选框的值
name 组名必须填，只有相同组名才能只选一个，便于后续操作
checked 默认选上-->
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
多选框input-checkbox
<p>爱好：
<!--多选框checkbox
value 必须填 是单选框的值
name 组名必须填，只有相同组名才能只选一个，便于后续操作
checked 默认选上
数组形式-->
<input type="checkbox" value="java" name="happy">java
<input type="checkbox" value="c" name="happy">c
<input type="checkbox" value="python" name="happy">python
<input type="checkbox" value="c++" name="happy">c++
</p>
按钮input
-
普通按钮button
<p> <!--普通按钮button value 是默认值,显示在按钮上 name 一定要写，便于后续操作--> <input type="button" value="点击" name="btn1" > </p> -
图片按钮image（可提交）
<!--图片按钮image src 路径 name 一定要写，便于后续操作 注意：点击会提交--> <input type="image" src="../resource/1.png" name="img1"> -
提交按钮submit
<!--提交按钮 input type="submit"--> <input type="submit" value="提交" name="submit"> -
重置按钮reset
<!--重置按钮 input type="reset"--> <input type="reset" value="重置" name="reset">
下拉框/列表框select-option
<!--下拉框/列表框select，name（必须有） id
选项 option ， value 必须有-->
<select name="country" >
<option value="china">中国</option>
<option value="Indea">印度</option>
<option value="America">美国</option>
</select>
文本域textarea
<!--文本域
name 必须有
id
cols 列数
rows 行数-->
<textarea name="comment" cols="30" rows="10"></textarea>
文件域input-file
<!--文件域input-file-->
<input type="file" name="file">
滑块input-range
<p>音量：
<!--滑块input-range
name必须有
min
max
step 步长-->
<input type="range" name="voice" min="0" max="100" step="1">
</p>
三.表单应用
-
隐藏域 hidden
-
只读 readonly
-
禁用 disabled
小tips（增强鼠标可用性）：
<!--label for 指向id 可以用来点击文字就光标定位到for元素--> <label for="marktext">点我试试</label> <input type="text" id="marktext" name="testlabel">
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
