Github代码地址

html01基本标签

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/>
  5&gt;4 <br/>
  4&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.表单的使用

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>form表单练习</title>
 6 </head>
 7 <body>
 8 <!--
 9 disabled="disabled":  禁用属性
10 readonly="readonly" :只读属性
11 -->
12  <h1>用户登录</h1>
13 <form action="login.html" method="post">
14   用户名:<input type="text" name="userName" value="admin" readonly="readonly"><br/>
15     密码:<input type="password" name="pwd"><br/>
16    <input type="radio" name="a">简约版
17    <input type="radio" name="a">豪华版<br/>
18    <input type="checkbox" name="b">记住密码
19    <input type="checkbox" name="b">安全登录<br/>
20    <button type="submit" disabled="disabled">提交</button>
21    <button type="reset">重置</button>
22 </form>
23 
24 
25 </body>
26 </html>
11.表单小练习

 

posted @ 2016-12-06 15:57  @小葱拌豆腐  阅读(853)  评论(0编辑  收藏  举报

霸气