html学习
- 我的第一个网页`
<!--DOCTYPE:告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta：描述性标签，它用来描述网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="安卓开发，网页学习">
<meta name="description" content="学习网页的构成，在联网获取资源更加清晰">
<!--title 网页标题 -->
<title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
你好呀，未来安卓高级程序员
</body>
</html>
- 基本标签的学习
<!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>
<!--水平线标签-->
<hr/>
<!--换行标签-->
什么人？<br/>
马冬梅<br/>
什么冬梅？<br/>
马冬梅<br/>
什么马？<br/>
马冬梅<br/>
<!--粗体，斜体-->
<h1>字体样式</h1>
粗体：<strong>我要学安卓开发</strong>
斜体：<em>我要学安卓开发</em>
<!--特殊符号-->
<br/>
空格
空 格
<br>
>
<
<br/>
©版权所有
<!--特殊符号记忆
& ;
查百度！！！！！
-->
</body>
</html>
- 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>安卓基础</li>
<li>安卓进阶</li>
<li>安卓高级开发</li>
<li>安卓大师</li>
</ol>
<hr/>
<!--无序列表
应用：导航，侧边栏。。
-->
<ul>
<li>安卓基础</li>
<li>安卓进阶</li>
<li>安卓高级开发</li>
<li>安卓大师</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>物理</dd>
<dd>化学</dd>
<dd>地理</dd>
<dd>生物</dd>
<dt>时间</dt>
<dd>上午</dd>
<dd>下午</dd>
<dd>晚上</dd>
</dl>
</body>
</html>
- 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--img标签学习
src:图片地址（必填）
相对地址（推荐使用）:返回上一级找到目标地址 ： ../xx/xx.文件后缀 ../代表当前地址返回上一级地址
绝对地址：在电脑中的详细地址
alt（必填）: 若图片路径失效，则用alt内的文字代替要显示的图片
title：悬停文字（鼠标停在图片位置的显示的文字）
width:长度 height：高度
-->
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</body>
</html>
- 链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="Top">顶部</a>
<!--
a 标签：
href(必填)：表示要跳转到哪个界面
target:表示窗口在哪里打开
_blank在新标签打开
_self在自己的网页中打开
-->
<a href="1.我的第一个网页.html"target="_blank"> 我的第一个网页</a>
<a href="https://www.baidu.com"target="_self">百度 </a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</a>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/delete.png" alt="删除" title="开始了" >
</a>
</p>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#Top">回到顶部</a>
<!--功能性链接
邮件链接：mailto
-->
<a href="mailto:236542386.com">点击跳转到邮件发送到</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>
</html>
- 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table：
行:tr
列:td
-->
<table border="1px">
<tr>
<!--colspan：跨行 -->
<td colspan="4">我们是一行</td>
</tr>
<tr>
<!--rowspan:跨列 -->
<td rowspan="2">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
</html>
- 媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频和视频(audio & video)
src:资源路径
controls：控制条
autoplay：自动播放
-->
<!--video src="../resources/video/LOL.mp4"controls autoplay></video-->
<audio src="../resources/radio/钢琴之物_Freesound.wav"controls autoplay></audio>
</body>
</html>
- 页面结构
<!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>
- 内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架iframe</title>
</head>
<body>
<!--
iframe内联框架：
src:地址
w-h:宽度和高度
-->
<!--iframe src="https://www.baidu.com" frameborder="0" width="800px" height="1000px"></--iframe-->
<iframe src="" frameborder="0" name="你好"></iframe>
<a href="1.我的第一个网页.html" target="你好">点击跳转</a>
</body>
</html>
10.表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form:
action:表单提交的位置，可以是网站，也可以是一个请求处理位置
method: post,get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post方式提交：比较安全，传输大文件
-->
<!--一些额外的功能
PLACEHOLDER 输出提示
readonly 只读类型
disable 禁用
checked 默认选用 适用于按钮
selected 默认选用 适用于下拉框
required 非空判断-->
<form action="1.我的第一个网页.html"method="get" >
<!-- 文本输入框：input type="text"：
value="安卓" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<p>名字:<input type="text"name="username" value="admin" readonly></p>
<p>密码:<input type="password" name="password"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name：表示组
-->
<p>性别：
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio"value="girl"name="sex"/>女
</p>
<!--多选框标签
input type="checkbox"
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="read" name="hobby"/>阅读
<input type="checkbox" value="study" name="hobby" checked/>学习
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<!-- 按钮:
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮：
<input type="button" value="点击学习">
<input type="image" src="../resources/image/delete.png">
</p>
<!--下拉框，列表框 -->
<p>国家:
<select name="列表名称" id="country">
<option value="选项的值">中国</option>
<option value="选项的值">美国</option>
<option value="选项的值"selected>俄罗斯</option>
<option value="选项的值">日本</option>
</select>
</p>
<!--文本域 :textarea
cols="50" rows="10"
-->
<p>反馈:
<textarea name="textarea" id="feedback" cols="50" rows="10"></textarea>
</p>
<!--
文件域
input type="file" name="files
-->
<p>
<input type="file" name="files">
</p>
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email"id="mark"PLACEHOLDER="输入提示" required>
</p>
<!--Url-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>成绩：
<input type="number" name="number" max="100" min="0" step="1">
</p>
<input type="submit">
<!--滑块-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="2" >
</p>
<!-- 搜索-->
<p>
<input type="search">
</p>
<!--增强鼠标可用性-->
<lable for="mark">你点我试试</lable>
<input type="text" >
<!-- 正则表达式-->
<!--常用正则表达式
https://blog.csdn.net/ZYC88888/article/details/98479629
-->
<p>自定义邮箱
<input type="text" name="myemile" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></p>
<P>
<input type="submit">
<input type="reset" value="清空表单">
</P>
</form>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
