- 设置运行时的浏览器
- html基本结构
- html 注释:快捷键ctrl+/
<!--注释-->
- 网页基本标签
<!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>
<!--段落标签-->
<!--如果直接像下面那样写 在网页中显示时并不显示换行 而是全部写在一行-->
我看见 夜空的帆
星星为什么 簇拥月亮
灿烂的波浪 嘿哟呀依嘢
<!--水平线标签-->
<hr/>
<!--段落标签:在页面中显示时 每段之间有较大的间距-->
<p>我看见 夜空的帆</p>
<p>星星为什么 簇拥月亮</p>
<p>灿烂的波浪 嘿哟呀依嘢</p>
<hr/>
<!--换行标签：每段之间间距较小-->
我看见 夜空的帆<br/>
星星为什么 簇拥月亮<br/>
灿烂的波浪 嘿哟呀依嘢<br/>
<hr/>
<!--字体样式标签-->
粗体：<strong>哈哈哈</strong>
斜体：<em>哈哈哈</em>
<hr/>
<!--特殊符号:&+字母+；-->
空格：我们在idea中打很多空格 但是在页面中都只显示一个 若想显示多个 方法如下<br/>
空 格
<hr/>
大于号：><br/>
小于号：<<br/>
版权符号：©版权归本人所有
</body>
</html>
- 图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--快速补全：输入标签名字+tab键-->
<!--
src：图片路径 一般使用相对路径
../表示上一级目录
alt：图像损坏时 显示的文字
src和alt是必须要有的
-->
<img src="..\resources\image\1.jpg" alt="我的墙头" title="悬浮文字就是鼠标放在图片上显示的文字" width="268" height="402">
</body>
</html>
- 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签学习</title>
</head>
<body>
<!--使用name作为锚标记-->
<a name="top">这里是顶部</a>
<!--a标签
href：超链接网址
a标签中间的文字是在网页中一个链接的显示
target:表示链接的窗口在哪里打开
_blank：在新窗口打开
_self：在当前这个窗口打开
-->
<a href="图像标签.html" target="_blank">这是一个图像连接</a><br>
<a href="https://www.baidu.com" target="_self">网页连接</a>
<hr>
<!--图像链接:把文字换成图片 点击图片就可以跳转到对应的页面-->
<p>
<a href="基本标签.html" target="_blank">
<img src="..\resources\image\1.jpg" alt="我的墙头" title="悬浮文字就是鼠标放在图片上显示的文字" width="268" height="402"></a>
</p>
<!--锚标签：一个页面内部进行跳转 比如从底部跳转回顶部
1.需要一个锚标记
2.需要跳转到标记
-->
<a href="#top">返回顶部</a>
<a name="down">这里是底部</a>
<!--功能链接
邮箱链接:mailto：+邮箱地址
qq链接
-->
<a href="mailto：857535327@qq.com">邮箱链接</a>
</body>
</html>
-
块标签和行内标签
-
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序列表:orderlist-->
有序列表
<ol>
<li>java</li>
<li>python</li>
<li>c</li>
</ol>
<!--无序列表:unorderlist-->
无序列表
<ul>
<li>java</li>
<li>python</li>
<li>c</li>
</ul>
<!--自定义列表:definelist
dt:列表名称
dd:列表名字-->
自定义列表
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>c</dd>
</dl>
</body>
</html>
- 表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签学习</title>
</head>
<body>
<!--表格标签 table
行 tr
列 td
跨行
跨列 colspan
border 表格的边框
-->
<table border="1px">
<tr>
<td colspan="3">我的表格</td>
</tr>
<tr>
<td rowspan="3">表格</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
</table>
</body>
</html>
- 媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--视频和音频
src:资源路径
controls ：播放控制器 即进度条 开始暂定键等
autoplay;自动播放
-->
<audio src="../resources/audio/两只老虎.wav" controls ></audio>
<!--<video src="../resources/video/波妞.mp4" controls autoplay></video>-->
</body>
</html>
-
页面结构分析
-
iframe内联框架：在一个页面内嵌套一个页面
- form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单学习</title>
</head>
<body>
<!--form表单：类似于登陆注册
action:表单提交的位置 会实现页面跳转到提交到位置 可以是一个网页 也可以是一个请求处理地址
method:提交方式 get post
get:会将提交的信息在url中显示出来 不安全 但是高校 不可以传输大文件
post:url中不显示 安全 可以传输大文件
-->
<h1>注册</h1>
<form action="第一个页面.html" method="post">
<!--文本输入框input type="text" name是为这个文本框 取一个名字 将来取里面的数据就用这个名字 -->
<p>名字：<input type="text" name="username"></p>
<!-- 密码输入框 input type="password" -->
<p>密码：<input type="password" name="psd"></p>
<p><input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
- 单选框：传过去的数据sex=boy
- 多选框：传过去的数据形式 hobby=sleep
-
按钮
-
下拉框：传过去的数据形式为list=france 法国只是展示的样式 具体的值是value
-
文本域
-
文件域：传过去的数据files=…
-
其他
-
表单初级验证
5175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
