01、meta标签实现网页的自动跳转
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--设置网页的自动跳转功能-->
<meta http-equiv="refresh" content="3;url=http://www.jd.com"/>
<title>这是第一个网页</title>
</head>
<body>
3秒钟之后自动跳转到 京东首页！
</body>
</html>
02、清平乐诗词
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<title>清平乐诗词</title>
</head>
<body>
<h1>清平乐·年年雪里</h1><em>朝代:宋代</em> 作者：<strong>李清照</strong><hr/><p>
原文：<br/>
年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！<br/>
今年海角天涯，萧萧两鬓生华。<br/>
看取晚来风势，故应难看梅花。<br/></p>
<!--
h1 - h6都是 标题标签
em:斜体
strong:字体加粗
p:段落 会自动换行
自身闭合标签
<br/>：换行
<hr/>:水平线-->
</body>
</html>
03、特殊字符
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>特殊字符</title></head><body>
<h1>特殊字符</h1>
张三 李四 <br/>
5>；4 <br/>
4<；5 <br/>
"；字符串" ；<br/>
版权符号©； <br/>
Tm : ? alt+153（小键盘上输入） <br/>
R : ® ；<br/>
</body>
</html>
04、img标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片</title>
</head>
<body><!--
src：图片的位置 使用的相对路径
width：图片的宽度
height:图片的高度
title:鼠标悬停在图片上 显示的文字 如果没有设置alt属性，图片不显示时也会替代图片
alt：图片不显示时也会替代图片显示文字
../ 代表返回上次目录-->
<img src="../images/cat.jpg" width="300" height="300"
title="这是一只可爱的小猫咪" alt="小猫咪不见了"/>
</body>
</html>
05、a标签 超链接
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片</title>
</head>
<body><!--
href:需要访问的界面 超链接跳转的路径
a ：超链接标签
target:访问的界面在哪个窗口显示 _self 是默认值 在本页面 显示 _blank 重新打开一个新的窗口显示-->
<a href="http://www.baidu.com" target="_blank">百度首页</a>
<a href="http://www.jd.com" target="_blank">京东首页</a>
<a href="http://www.taobao.com" target="_blank">淘宝首页</a>
</body>
</html>
06、锚链节的使用自身跳转
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body><!--
锚链接的场景1：
01.从本页面中的A位置 跳转到本页面的B位置 一个界面内的跳转 使用 #标记名称-->
<a href="#cat">跳转到锚链接的标记位置</a>
<img src="../images/cat.jpg" width="700">
<img src="../images/cat.jpg"><img src="../images/cat.jpg"width="700">
<img src="../images/cat.jpg">
<!--定义一个标记 -->
<a name="cat">这是锚链接的标记</a>
</body>
</html>
07、锚链节的使用两个界面跳转
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body><!--
锚链接的场景2：
02.从本页面的A位置 跳转到另一个页面的B位置 两个界面内的跳转 使用 另一个网页的名称#标记名称-->
<a href="html锚链接06.html#cat">跳转到锚链接的标记位置</a>
</body>
</html>
08、无序列表 有序列表 自定义列表
<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body><!--
01.没有顺序 每个li独占一行
02.默认的li标签之前有 实心的小圆点 后面我们学css的时候 可以去掉或者改变样式
03.适用于新闻栏以及导航界面！-->
<ul>
<li>无序列表内容1</li>
<li>无序列表内容2</li>
<li>无序列表内容3</li>
<li>无序列表内容4</li>
</ul>
<title>有序列表</title></head><body><!--
01.有顺序 每个li独占一行
02.默认的li标签之前有数字 后面我们学css的时候 可以去掉或者改变样式
03.适用于 问卷调差，试卷。。。。-->
<ol>
<li>有序列表内容1</li>
<li>有序列表内容2</li>
<li>有序列表内容3</li>
<li>有序列表内容4</li>
</ol></body></html>
<title>自定义列表</title>
<!--
01.没有顺序 每个dt dd独占一行
02.默认没有任何标记-->
<dl>
<dt>C盘</dt>
<dd>文件夹1</dd>
<dd>文件夹2</dd>
<dt>D盘</dt>
<dd>文件夹1</dd>
<dd>文件夹2</dd>
</dl>
</body>
</html>
09、表单的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<!--
form中的属性
action:表单中的元素被提交的位置
method：
01.get 我们输入的元素内容会在url中显示 不安全
02.post url中不会显示我们的输入 相对来说安全
input 表中中
name的值：是在我们服务器获取用户输入的时候使用的
根据name的值 获取value属性的值
placeholder：占位符 如果用户没有输入 就会出现默认的值
type的值
01.text:文本输入框
02.password：密码输入框
03.submit: 提交的按钮
04.button：普通的按钮，不具有提交的功能
05.reset : 表单重置 清空用户所有的输入 不会清空默认值
06.radio :单选按钮 必须设置name属性值 而且属性值必须一致-->
<form action="#" method="post">
用户名：<input type="text" name="userName" placeholder="请输入您的用户名"><br/>
密码：<input type="password" name="pwd"><br/>
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女 <br/>
<input type="submit"><br/>
<input type="button" value="普通按钮"><br/>
<input type="reset"><br/>
</form>
</body>
</html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/12182.html