1我的第一个网页
<!-- DOCTYPE 告诉浏览器我们使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签用来描述我们网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="我说JAVA">
<meta name="description" content="学习">
<!--title标签代表网页标题-->
<title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World!
</body>
</html>
<!--
W3C 万维网联盟
Hyper Text Markcup Language
-->
2基本标签
1
<!--标题标签-->
<h1>一集标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
2
<!--段落标签-->
<p>歌词如下：</p>
3
<!--水平线标签-->
<hr/>
4
<!--换行标签-->
歌词如下：<br/>
5
<!--粗体 斜体-->
<h1>字体样式标签</h1>
粗体： <strong>我爱你</strong><br>
斜体： <em>我爱你</em><br>
6
<!--注释和特殊符号-->
<strong><em>空 格:</em></strong>
空 格: <br/>
><br> 大于
<<br> 小于
©版权符号<br>
3图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
常见图片格式
JPG GIF PNG BMP
图标悬停提示文字 图像高度
<img src="path" alt="text" title"text" width="x" height="y" />
图像地址 图像的代替文字 图像宽度
相对地址： ../ 代表上一级目录
绝对地址：D:\idea\HTML\resources\image\1.jpg
-->
<img src="../resources/image/1.jpg" alt="头像"title="悬停文字"width="300"height="300" >
<a href="4.链接标签.html#dowm">跳转</a>
</body>
</html>
4链接标签
1 a标签
<!--a标签
<a href="path"target="目标窗口位置">链接文本或图像</a>
链接路径 链接在哪个窗口打开“常用值_self _blank”
_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/1.jpg" alt="头像"title="悬停文字"width="300"height="300" >
</a>
2 锚标签
<!--锚链接
1.需要一个锚标记:<a href="#top">回到顶部</a>
2.跳转到标记:<a name="dowm">底部</a>
-->
<a href="#top">回到顶部</a>
<a name="dowm">底部</a>
3 功能性标签
<!--
功能性链接
邮件链接：mailto:
-->
<a href="mailto:1361242150@qq.com">点击联系我</a>
<!--qq实现联系我-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1361242150&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1361242150:53" alt="点击领取钓点鱼" title="点击领取钓点鱼"/></a>
5行内元素和块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
行内元素和块元素
块元素：无论元素多少 该元素独占一行 （p,h1~h6）
行内元素： 内容撑开高度 左右都是行内元素的可以排成一行（a. strong. em）
-->
</body>
</html>
6列表
1
什么是列表
列表就是信息资源的一种展现形式 他可以使信息结构化和条理化 并以列表的形式展现出来 以便浏览者能更快捷的获得相应的信息
列表的分类
无序列表 有序列表 定义列表
2
<!--有序列表 ol
应用范围 试卷 问答
-->
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>C#</li>
</ol>
3
<!--无序列表 ul
应用范围 导航 侧边栏
-->
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>C#</li>
</ul>
4
<!--自定义列表 dl:标签 dt：列表名称 dd:列表内容
应用范围：网站底部
-->
<dl>
<dt>学科</dt>、
<dd>java</dd>
<dd>python</dd>
<dd>运维</dd>
<dd>前端</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>重庆</dd>
<dd>东北</dd>
<dd>新疆</dd>
</dl>
7表格标签
<!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">1-1</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="3">2-1</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>
<td>3-4</td>
</tr>
<tr><td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
<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>
</table>
</body>
</html>
8音频和视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频和音频</title>
</head>
<body>
<!--视频
controls:控制条
autoplay:自动播放
-->
<!--<video src="" controls autoplay></video>-->
<!--
音频
-->
<audio src="../resources/audio/笑看人生-李本恩%20-%20夜萤火虫和你.mp3" controls autoplay></audio>
</body>
</html>
9页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<!--
页面结构分析
header 标题头部区域的内容 用于页面或页面中的一块区域
footer 标记脚部区域内容 用于整个页面或者页面的一块区域
section Web中的一块独立区域
article 独立文章内容
aside 相关内容或应用 常用于侧边栏
nav 导航类辅助内容
-->
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主题</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
10iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--<iframe src="path" name="mainFrame" frameborder="0"></iframe>
-->
<!--<iframe src="//player.bilibili.com/player.html?aid=717886724&bvid=BV1GQ4y1y7hy&cid=407135466&page=1" -->
<!--scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>-->
<!--<iframe src="https://www.4399.com" frameborder="0" width="1080" height="1080"></iframe>-->
<iframe src=""name="hello" frameborder="0"></iframe>
<a href="https://www.bilibili.com/video/BV1GQ4y1y7hy?spm_id_from=333.934.0.0" target="hello">点击跳转</a>
</body>
</html>
11表单语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单 form
action 表单提交的位置 可以是网站 也可以是一个请求处理地址
method post get 提交方式
get方式提交 我们可以在url中看到我们的提交信息 不安全 高效
post 方式提交 比较安全 传输大文件
value 默认初始值
maxlength 最长能写几个字符
size 文本框的长度
radio 单选框 value 单选框的值 name 表示组 一样 不然能选两个
-->
<form action="1.我的第一个网页.html"method="get">
<!--文本输入框 input type="text"-->
<!--密码输入框 input type="password"-->
<!--readonly 只读-->
<!--hidden 隐藏-->
<!--placeholder 提示信息-->
<!--required 不能为空-->
<!--pattern 正则表达式 百度-->
<p>名字：<input type="text" name="username" value="我好帅" maxlength="8" size="30" readonly placeholder="请输入用户名"></p>
<p>密码：<input type="password" name="pwd" ></p>
<p>性别
<!--单选框-->
<!--disabled 禁用-->
<input type="radio" value="boy" name="sex" disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框
checked 默认选中
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="game" name="hobby">打游戏
<input type="checkbox" value="chat" name="hobby">聊天
</p>
<!--按钮-->
<p>按钮
<input type="button" name="btn1" value="点击边长">
<input type="image" src="../resources/image/1.jpg">
</p>
<!--增强鼠标可用性
点击后 跳转到标记的地方
-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark" >
</p>
<p>
<!--提交-->
<input type="submit">
<!--重置-->
<input type="reset">
</p>
<!--
下拉框 列表框
-->
<p>下拉框：
<select name="列表名称" >
<option value="china">中国</option>
<option value="jp">日本</option>
<option value="eth" selected>瑞士</option>
<option value="us">美国</option>
</select>
</p>
<!--文本域
cols 行
rows 列
-->
<p>反馈：
<textarea name="textarea" id="1" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="uploaod">
</p>
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL-->
<p>URL：
<input type="url" name="url">
</p>
<!--数字-->
<p>数字：
<input type="number" name="num" max="100" min="0" step="4">\
</p>
<!--滑块-->
<p>音量：
<input type="range" max="100" min="0" name="voice">
</p>
<!--搜索框-->
<p>搜索：
<input type="search" name="search">
</p>
</form>
</body>
</html>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
