HTML笔记
认识
<!--DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页的头部-->
<head>
<!--mate描述性标签，它用来描述我们网站的一些信息-->
<!--mate一般用来做SEO-->
<meta charset="UTF-8">
<!-- title 网页标题-->
<title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
hello，word！
</body>
</html>
基本标签
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>动态语言</p>
<p>是一类在运行时可以改变其结构的语言:例如新的函数、对象、甚至代码可以被引进,</p>
<p>已有的函数可以被删除或是其他结构.上的变化。通俗点说就是在运行时代码可以根据某些条件改变自身结构。</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
动态语言<br/>
是一类在运行时可以改变其结构的语言:例如新的函数、对象、甚至代码可以被引进,<br/>
已有的函数可以被删除或是其他结构.上的变化。通俗点说就是在运行时代码可以根据某些条件改变自身结构。<br/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong><br/>
斜体；<em>i love you </em><br/>
<!--特殊符号-->
空 格 <br/>
空 格 <br/>
</body>
图像标签
</head>
<body>
<!--img
src ：图片地址
相对地址（推荐使用），绝对地址
../ 上一级目录（右击 + copy path）
alt 替代名 如果图片路径错误或者加载不出，会显示alt
title 悬停文字
-->
<img src="../resources/image/logo.png" alt="loge图像" title="loge" width="300" height="300">
</body>
列表标签
<body>
<!--有序列表
应用范围：试卷 问答，，，
-->
<ol>
<li>java</li>
<li>python</li>
<li>C/c++</li>
<li>前端</li>
</ol>
<br/>
<!--无序列表
应用范围：导航，侧边栏。。。
-->
<ul>
<li>java</li>
<li>python</li>
<li>C/c++</li>
<li>前端</li>
</ul>
<br/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：网站底部介绍
-->
<dl>
<dt>位置</dt>
<dd>南阳</dd>
<dd>郑州</dd>
<dd>上海</dd>
<dd>北京</dd>
</dl>
</body>
表格标签
</head>
<body>
<!--表格table
行 tr rows
列 td
-->
<table border="1" width="200"cellpadding="20"bgcolor="#f0ffff" >
<tr>
<!-- colspan 跨列 -->
<td colspan="4"> 表格介绍</td>
</tr>
<tr>
<td rowspan="2">合并</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>
媒体元素
<body>
<!--音频和视频 aduio video
src ：资源路径
controls：控制条
autoplay ：自动播放
-->
<img src="../resources/image/logo.png" alt="loge图像" width="300" height="300"><br/>
<audio src="../resources/aduio/山楂树之恋.mp3" controls title="山楂树之恋"
autoplay ></audio>
<a href="../resources/aduio/山楂树之恋.mp3" download="山楂树之恋">点击下载音乐</a>
</body>
内联框架
在一个网页中打开另一个网页
<body>
<!--iframe内联框架
src: 地址
-->
<!--<iframe src="https://www.badu.com" frameborder="0" width="1000px" height="200px"></iframe>-->
<iframe src=""name="hello" frameborder="0" width="1000px" height="200px"></iframe>
<a href="媒体元素.html"target="hello"><br>
点击跳转播放</a>
</body>
链接标签
<body>
<!-- 锚链接 使用name做标记-->
<a name="top"></a>
<!-- a 标签
href : 必填 ，表示要跳转到哪个网页，或者地址
target ： 表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="第一个网页.html" target="_blank"> 点击我跳转第一个网页</a><br/>
<a href="https://www.baidu.com"target="_self">点击我跳转百度</a><br/>
<a href="图像标签.html" target="_blank">
<img src="../resources/image/logo.png" alt="loge图像" title="loge" width="300" height="300">
</a><br/>
<p>
<a href="第一个网页.html" target="_blank">
<img src="../resources/image/logo.png" alt="loge图像" title="loge" width="300" height="300">
</a><br/>
</p>
<p>
<a href="第一个网页.html" target="_blank">
<img src="../resources/image/logo.png" alt="loge图像" title="loge" width="300" height="300">
</a><br/>
</p>
<p>
<a href="第一个网页.html" target="_blank">
<img src="../resources/image/logo.png" alt="loge图像" title="loge" width="300" height="300">
</a><br/>
</p>
<p>
<a href="第一个网页.html" target="_blank">
<img src="../resources/image/logo.png" alt="loge图像" title="loge" width="300" height="300">
</a><br/>
</p>
<!--锚链接
1，需要一个锚标记
2，跳转到标记
#
-->
<a href="#top">跳转顶部</a><br>
<a href="图像标签.html#down" target="_blank">跳转到图像标签</a><br>
<!--
功能性链接
邮件链接 ：mailto
下载 ：<a href="../resources/image/logo.png" download="logo图片">下载图片</a>
-->
<a href="../resources/image/logo.png"target="_blank">
<img src="../resources/image/logo.png" alt="logo图片" title="loge" width="300" height="300">
</a>
<a href="../resources/image/logo.png" download="logo图片">
下载图片</a>
<a href="maitlo:1723535176@qq.com">点击联系我</a>
</body>
表单学习
<body>
<!--表单from
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post , get 提交方式
get 方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
post
-->
<h1>注册</h1>
<form action="媒体元素.html" method="post">
<!-- 文本输入框 ：input type “test”
value="请填写账号" value 默认初始值
maxlength="8" 最长能填写几个字符
size="20" 文本框长度
required 表示必须填写
placeholder="请输入账号" 提示信息
-->
<p>账号: <input type="text" name="username"required placeholder="请输入账号"></p>
<!-- 密码框：input type = “password”-->
<p>密码: <input type="password" name="pwd"required="required"></p>
<!-- 单选按钮 type="radio"
在单选框中添加一样的name属性，表示在一个组中单选
-->
<p>性别: <input type="radio"name="sex"value="男">男
<input type="radio"name="sex"value="女">女</p>
<!-- 多选框
input type="checkbox"
chevked 默认选中
-->
<p>爱好:
<input type="checkbox"value="sleep" name="hobby">睡觉
<input type="checkbox"value="shopping" name="hobby">购物
<input type="checkbox"value="game" name="hobby">游戏
<input type="checkbox"value="code" name="hobby"checked>聊天
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>
<input type="button"name="btl1"value="点击进入">
<!-- <input type="image"src="../resources/image/logo.png">-->
</p>
<!-- 下拉框
select
option
selected 默认选中
-->
<p>国家
<select name="国籍" >
<option value="China"selected>中国</option>
<option value="us">美国</option>
<option value="eth">瑞士</option>
<option value="es">英国</option></select>
</p>
<!--文本域
cols="50" rows="10" 行 列
-->
<p>意见反馈 <br/>
<textarea name="t" cols="50" rows="10">请输入</textarea>
</p>
<!-- 文件域
提交文件 input type="file"name="flies"
-->
<p>
<input type="file"name="flies">
</p>
<p>邮箱:
<input type="email"name="email">
</p>
<p>URL:
<input type="url"name="url">
</p>
<!-- 数字-->
<p>商品数量:
<input type="number"name="number" max="1000"min="0"step="10">
</p>
<!-- 滑块input type="range"-->
<p>音量:
<input type="range"name="voice"min="0"max="100"step="1">
</p>
<!-- 搜索框-->
<p>搜索:
<input type="search"name="search">
</p>
<!-- 增强鼠标可用性
隐藏域，hidden
只读 ， readonly
禁用 ， disabled
-->
<p>
<label for="mark">点一点</label>
<input type="text"id="mark">
</p>
<p><input type="submit" value="登录">
<input type="reset"></p>
</form>
</body>
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
