html01基本标签
<!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>
meta标签实现网页的自动跳转
<!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>
02.清平乐诗词
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>特殊字符</title>
</head>
<body>
<h1>特殊字符</h1>
张三 李四 <br/>>4 <br/><5 <br/>
"字符串" <br/>
版权符号© <br/>
Tm : ™ alt+153（小键盘上输入） <br/>
R : ® <br/>
</body>
</html>
03.特殊字符
<!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>
04.img标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>播放歌曲</title>
</head>
<body>
<audio controls="controls" autoplay="autoplay">
<source src="musics/mm.mp3">
<source src="musics/dstw.mp3">
</audio> </body>
</html>
MP3播放
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>播放视频</title>
</head>
<body>
<video src="musics/QQ.mp4" controls="controls" autoplay="autoplay"/>
</body>
</html>
MP4播放
<!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>
05.a标签的使用
<!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>
06.锚链接的使用自身界面的跳转
<!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>
06.锚链接的使用两个界面的跳转
<!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>
</body>
</html>
07.无序列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<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>
08.有序列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<!--
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 : 表单重置 清空用户所有的输入 不会清空默认值 必须在form表单中 才有意义
06.radio :单选按钮 必须设置name属性值 而且属性值必须一致
07.hidden :隐藏域 页面上不会显示 但是如果提交到服务器 肯定会获取这个隐藏域的值 属性：
checked="checked" 只能在单选和复选框中 使用
size：文本框的显示长度
maxlength:限制用户输入的长度
-->
<form action="#" method="post">
用户名：<input type="text" name="userName" placeholder="请输入您的用户名"><br/> 密码：<input type="password" name="pwd"><br/> 性别：<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女 <br/> 爱好：<input type="checkbox" name="love" checked="checked">足球
<input type="checkbox" name="love">篮球
<input type="checkbox" name="love">乒乓球 <br/> 请选择文件：<input type="file"><br/> 月份:<select size="2">
<option>请选择</option>
<option selected="selected">1月份</option>
<option>2月份</option>
<option>3月份</option>
</select><br/>
协议:<textarea rows="5" cols="5">
</textarea><br/> 隐藏域:<input type="hidden" name="age" value="5"><br/> <input type="submit"><br/>
<input type="button" value="普通按钮"><br/>
<input type="reset"><br/> </form>
</body>
</html>
10.表单的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>form表单练习</title>
</head>
<body>
<!--
disabled="disabled": 禁用属性
readonly="readonly" :只读属性
-->
<h1>用户登录</h1>
<form action="login.html" method="post">
用户名：<input type="text" name="userName" value="admin" readonly="readonly"><br/>
密码：<input type="password" name="pwd"><br/>
<input type="radio" name="a">简约版
<input type="radio" name="a">豪华版<br/>
<input type="checkbox" name="b">记住密码
<input type="checkbox" name="b">安全登录<br/>
<button type="submit" disabled="disabled">提交</button>
<button type="reset">重置</button>
</form> </body>
</html>
11.表单小练习
html01基本标签的更多相关文章
- HTML之body标签中的相关标签
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...
- 前端 -----02 body标签中相关标签
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 02-body标签中相关标签
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)
一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...
- body中相关标签
一.字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 02-body标签中相关标签-1
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 前端基础-html 字体标签,排版标签,超链接,图片标签
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 前端 HTML body标签相关内容 常用标签 图片标签 <img/>
图片标签 <img/> 一个网页除了有文字,还会有图片.我们使用<img/>标签在网页中插入图片. <img/> 是单闭合标签 语法:<img src=&qu ...
- 前端之body标签中相关标签（一）
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...
随机推荐
- PHP进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Memcached-1.4.4启动参数——手动设置chunk大小的上限
最近在看memcached的源代码,源码包是memcached-1.4.22,一开始看memcached.c的main函数的时候发现了和1.2.8的不同之处. 可能在1.4.22版本之前就已经添加了这 ...
- Xcode升级导致插件失效的解决办法-b
作为iOS界的攻城师,每一次水果发布新的Xcode开发版本时,我们都会跟进,然而那些好用的Xcode插件都会莫名的失灵...对此我各种百度,在这里,我将跟大家分享我是如何解决这些问题的.当然,我的方案 ...
- Nginx系列~概念与windows下环境搭建
概述 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sys ...
- 在安装包运行时指定Component的安装路径
Basic MSI工程类型中如果实现动态指定安装路径的功能,下面介绍的方法也适用于InstallScript MSI工程. 1. 在Setup Design中找到相对应的Component. 2. 点 ...
- mvc 的 OutputCache
有人问.有没有类似asp.net web form 一样的那种标头 缓存 [OutputCache(Duration=1000)]public async Task<ActionResult&g ...
- VS2013程序打包部署（图解），vs2013部署
VS2013程序打包部署(图解),vs2013部署 首先要说明的是VS解决方案配置下的Debug模式和Release模式有什么区别.Debug模式通常称为调试模式,它包含调试信息,未对代码进行优化,方 ...
- ISO7816协议的几个关键时间特性
PPS: PPS是在PCK起始延后12个etu后完成,这个在2004版中是16etu 进行错误提示时,错误提示的延时时间是1etu到2etu 当D=64时,终端必须确保当前发出的第一个字符和最后一个接 ...
- Qt自定义事件的实现（军队真正干活，但要增加监军，大平台通知事件，事件内容自定义）
初学Qt,用了Qt自带的事件,然后想怎么才能定义自己的事件呢?又如何使用自定义事件呢?看了篇文章,说先要子类化QEvent,然后定义自己的QEvent::Type,然后重写QWidget::event ...
- scheme lambda表达式 形参
lambda表达式 (Lambda (arg1 …) exp1 exp2)从演算来看,(let ((var value) …) exp1 exp2…) == ((lambda (var …) exp ...