01.

<!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>     &nbsp; 作者：<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>

张三&nbsp;李四   <br/>&gt;4 <br/>&lt;5 <br/>

   &quot;字符串&quot; <br/>

  版权符号&copy; <br/>

Tm  :  ™ alt+153（小键盘上输入） <br/>

R   :  &reg; <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基本标签的更多相关文章

  1. HTML之body标签中的相关标签

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

  2. 前端 -----02 body标签中相关标签

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  3. 02-body标签中相关标签

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  4. python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  5. body中相关标签

    一.字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  6. 02-body标签中相关标签-1

    主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  7. 前端基础-html 字体标签,排版标签,超链接,图片标签

    主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  8. 前端 HTML body标签相关内容 常用标签 图片标签 <img/>

    图片标签 <img/> 一个网页除了有文字,还会有图片.我们使用<img/>标签在网页中插入图片. <img/> 是单闭合标签 语法:<img src=&qu ...

  9. 前端之body标签中相关标签（一）

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

随机推荐

  1. 用BroadcastReceiver监听网络状态的变化

    在用户浏览网络信息时,如果网络突然断开,可以及时的提醒用户网络已断开.要实现这个功能,我们可以实现一个广播接收者来接收网络状态改变的广播,当由连接状态变为断开状态时,系统会发送一条广播,广播接收者接收 ...

  2. 优化HTTP前端请求构建高性能ASP.NET站点

    HTTP请求的优化  在一个网页的请求过程中,其实整个页面的html结构(就是页面的那些html骨架)请求的时间是很短的,一般是占整个页面的请求时间的10%-20%.在页面加载的其余的时间实际上就是在 ...

  3. System.InvalidOperationException: 无法加载协定为“ServiceReference1.XXXXXXXXXXXXXXXX”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。

    <system.serviceModel> <bindings> <basicHttpBinding> <binding name="testWeb ...

  4. Delphi-UpperCase 函数

    函数名称 UpperCase 所在单元 System.SysUtils 函数原型 function UpperCase(const S: string): string; 函数功能 将字符串中所有的小 ...

  5. net Random 随机数重复的问题

    在实际项目中不仅需要随机产生密码字符串,还要一次生成多个.我把生成随机字符串的方法放到for循环中,问题出现了. 生成的字符串,会重复. 经过多方查证,原因在代码. //使用与系统时间相关的种子 Ra ...

  6. border做箭头的例子

    <style> .test{ margin:0 auto; width:100px; height:100px; background:lightskyblue; position:rel ...

  7. IOS 笔试

    iOS基础教程之Objective-C:Objective-C笔试题 作者:蓝鸥科技 发布于:2012-12-14 14:38 Friday 分类:iOS中级-OC开发 iOS基础教程之Objecti ...

  8. protractor protractor.conf.js [launcher] Process exited with error code 1 undefined:1190

    y@y:karma-t01$ protractor protractor.conf.js [launcher] Process exited with error code undefined: vl ...

  9. 不用预计算切向空间的Normal mapping

    先贴出shader 吧 等有时间了 来阐述原理 // vertex shader //varying vec3 ViewPosition; //varying vec3 Normal; varying ...

  10. Hash查找法在Keil C51中的实现

    摘要:散列(hash)是一种重要的存储方法,也是一种常见的查找方法.它是指在记录的存储位置和它的关键字之间建立一个确定的对应关系.本文以射频卡门禁控制器为例,说明用射频卡卡号作为关键字,用Hash查找 ...