HTML笔记
01、初学
<!-- 注释的快捷键是CTRL加/ -->
<!-- DOCTPE告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html>
<!-- head标签代表网页的头部 -->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息 -->
<meta charset="utf-8">
<meta name = "keywords" content="狂神说java" />
<meta name="description" content="来这个地方可以学习java"/>
<title>这是一个网页</title>
</head>
<!-- boby标签代表网页的主体 -->
<body>
Hello website!
</body>
</html>
注意：注释的快捷键是ctrl+/
02、基本标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>这是一段</p>
为你 翘课的那一天
花落 的那一天
教室 的那一间
我怎么看不见
消失的下雨天
我好想再淋一遍
这样解析出来会在网页的一行内显示，显示如下：
为你 翘课的那一天 花落 的那一天 教室 的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍
加上段落标签后：
<p>下面是使用段落标签后</p>
<p>为你翘课的那一天</p>
<p>花落的那一天</p>
<p>教室的那一间</p>
<p>我怎么看不见</p>
<p>消失的下雨天</p>
<p>我好想再淋一遍</p>
显示如下：
下面是使用段落标签后
为你翘课的那一天
花落的那一天
教室的那一间
我怎么看不见
消失的下雨天
我好想再淋一遍
<hr/>
显示在网页就是一条分割线
下面是换行标签<br/>
为你 翘课的那一天<br/>
花落 的那一天<br/>
教室 的那一间<br/>
我怎么看不见<br/>
消失的下雨天<br/>
我好想再淋一遍<br/>
解析在网页中是：
下面是换行标签
为你 翘课的那一天
花落 的那一天
教室 的那一间
我怎么看不见
消失的下雨天
我好想再淋一遍
就是简单的换行，可以理解为还是一段
<h1>字体样式标签</h1>
粗体: <strong>i love you</strong>
斜体: <em>i love you</em>
解析在网页中为：
空 格:
空 格
<br>
>
<br>
<
<br>
©版权所有
显示如下：
03、图像标签
原代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址(必填)
相对地址(推荐使用),绝对地址
../ --上一级目录
alt:图片名字(必填)
-->
<img src="../image/一日游.jpg" alt="一日游" title="悬停照片">
</body>
</html>
title:鼠标让在照片上即显示title的文字
04、超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接标签学习</title>
</head>
<body>
<!-- a标签
href：必填，表示要跳转到哪个页面
target：表示在哪个窗口打开
——blank 在新标签中打开
——self 在自己的网页中打开
-->
<a name="top"></a>
<a href="02基本标签.html"target="_blank">点我跳转到页面一</a>
<a href="http://www.baidu.com"target="_self">点我跳转到百度</a>
<br>
<a href="01初学.html"><img src="../image/一日游.jpg" alt="一日游" title="悬停照片"></a>
<a href="01初学.html"><img src="../image/一日游.jpg" alt="一日游" title="悬停照片"></a>
<a href="01初学.html"><img src="../image/一日游.jpg" alt="一日游" title="悬停照片"></a>
<!-- 锚链接
1.需要一个标记
2.跳转至标记
#
-->
<br>
<a href="#top">回到顶部</a>
</body>
</html>
超链接可以点文字，也可以点照片。
还有锚链接可以用于回到顶部
05、列表
1、有序列表
<ol>
<li>java</li>
<li>python</li>
<li>linux</li>
<li>C</li>
</ol>
效果如图：
2、无序列表
<ul>
<li>java</li>
<li>python</li>
<li>linux</li>
<li>C</li>
</ul>
效果如图：
3、自定义列表
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
效果如图：
06、表格
表格是table标签
内容有行列学习还有跨行跨列的学习
<!-- 表格table
行 tr
列 td-->
<table border="10px" >
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>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>
</table>
跨行跨列学习：
<table border="10px">
<tr>
<!-- 跨行colspan -->
<td colspan="4">1.1</td>
</tr>
<tr>
<!-- 跨列 rowspan -->
<td rowspan="2">2.1</td>
<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>
效果如图：
07、视频和音频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>媒体元素学习</title>
</head>
<body>
<!-- 音频和视频
src:路径
controls:控制条
autoplay:自动播放-->
<video src="../resource/环绕-C.mp4"controls autoplay></video>
<audio src="../resource/audio/Transition%2001.wav"controls></audio>
</body>
</html>
08、网页结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页尾部</h2>
</footer>
</body>
</html>
09、内联框架
简单说就是自己做的这个网站里套着一个网站
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联框架</title>
</head>
<body>
<!-- iframe内联框架
src:地址
w-h:宽度高度-->
<iframe src=""name="hello" width="1000px" height="800px"></iframe>
<a href="http://www.baidu.com"target="hello">点击跳转</a>
</body>
</html>
可以理解为iframe做了一个名为hello的内联框架，超链接在内联框架中打开
10、表单学习
特别重要
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单form
action：表单提交的位置，可以是网站。也可以是一个请求处理的地址
method: post,get提交方式
get方式提交：我们可以在url中看到提交的信息，不安全，但是高效
post：比较安全，传出大文件
-->
<form action="01初学.html"method="get">
<!-- 文本输入框：input type="text"
value ="想不出来" 默认初始值
maxlength="8" 最长能写几个字符
size="30"文本框的长度-->
<p>名字：<input type="text"name="username"></p>
<!-- 密码框：input type="password" -->
<p>密码：<input type="password" name="psd"></p>
<p>
<!-- 单选框标签
input type="radio"
value：单选框的值
name：表示组
-->
性别：
<input type="radio"value="boy"name="sex">男
<input type="radio"value="girl"name="sex">女
</p>
<p>
<!-- 多选框
input="checkbox"-->
爱好：
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox"value="code"name="hobby">敲代码
<input type="checkbox"value="chat"name="hobby">聊天
<input type="checkbox"value="game"name="hobby">游戏
</p>
<p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<input type="button"name="btni"value="点击变长">
<!-- <input type="image"src="../resource/image/一日游.jpg"> -->
</p>
<!-- 下拉框，列表框 -->
<p>
国家：
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="uk"selected>英国</option>
<option value="india">印度</option>
</select>
</p>
<!-- 文本域 -->
<p>
反馈:
<textarea name="textarea"rows="10" cols="50">文本内容
</textarea>
</p>
<!-- 文件域 -->
<p>
<input type="file" name="files" />
<input type="button" name="upload" value="上传" />
</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="1" />
</p>
<!-- 滑块 -->
<p>
音量：
<input type="range" name="voice"max="100"min="0"step="2" />
</p>
<!-- 搜素框-->
<p>
搜素：
<input type="search" name="search" />
</p>
<!-- 增强鼠标的可用性 -->
<label for="mark">你点我试试</label>
<input type="text" id="mark" />
<p>
<input type="submit">
<input type="reset"value="清空表单">
</p>
</form>
</body>
</html>
效果如图：
3454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
