HTML的学习

一  meta 描述性标签，用来描述网站的一些信息

     <meta name=“keywords” contents=“贝贝的，网站”>

     <meta name=“description” content=“在这里学习html”>

二 网页基本标签

    1  标题标签<h1>一级标签</h1>  <h2>二级标签</h2>

   2  段落标签 <p>内容</p>

   3  换行 <br/> 自闭和标签

  4  水平线  <hr/>

  5 字体样式<strong>粗体</strong>  <em>斜体</em>

 6 注释和特殊符号  

                &gt ；>  

               &lt；<    

              &copy；  版权符号

              &nbsp;  空格

三 图像标签

  常见图像格式  jpg  gif  png  bmp

   <img src=“path” alt=“text” title=“text” width=“x” height=“y”/>    

src图像地址  alt图像的替代文字  titlt鼠标悬停提示文字 width图像宽度 height图像高度

src  图片地址(必填) 包括相对地址（推荐使用）绝对地址（带盘符）
alt  图片加载不出来时显示的字(必填)
    ../上级目录

四 链接标签  <a></a>

 1 超链接   <a href="https://www.baidu.com"target="_self">点击进入百度</a>

    href 必填

   target 表示窗口在哪里打开

   _blank 在新标签中打开

   _self 在自己标签中打开

 2 图片超链接

  <a href="H1.html" target="_self"><img src="../img/01.jpg" alt="草莓熊图片" title="love you"     width="350" height="400" > </a>

 3 锚链接  

   <a href="#top">回到顶部 </a>      回到当前页面top位置

   <a href="H2.html#down">回到H2的底部</a>      回到另一页面的down位置

  1 需要一个锚标记 使用name作为标记 <a name="top">顶部</a>

  2 跳转到标记

  3 #+标记的名字 <a href="#top">回到顶部 </a>

4 功能性链接

五 列表

 列表是信息资源的一种展现形式，使信息以列表的形式展示出来，方便浏览者更快捷获得相应信息

1 无序列表          应用：试卷，问答，，，

<ol>
  <li>java</li>
  <li>c/c++</li>
  <li>运维</li>
</ol>                    
 

2 有序列表

<ul>
  <li>java</li>
  <li>c/c++</li>
  <li>运维</li>
</ul>

3 定义列表

dl:标签
dt:列表标题
dd:列表内容

<dl>
  <dt>名字</dt>
  <dd>小红</dd>
  <dd>小明</dd>
  <dd>小李</dd>
</dl>
<dl>
  <dt>分数</dt>
  <dd>00</dd>
  <dd>90</dd>
  <dd>98</dd>
</dl>

六 表格标签 <table></table>

行:tr
列:td

<table border="1px">
  <tr>
    <!--colspan 跨列-->
    <td colspan="3">1-1</td>

  </tr>
  <tr>
    <!--rowspan跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>

  </tr>
</table>

七 音频视频标签<video></video> <audio></audio>

controls:显示控制进度条

<video src="../resource/video/v1.png" controls></video>

八 页面结构分析

九 iframe内联框架

src:地址
width/height:宽 高

<iframe src="https://www.baidu.com" frameborder="0">

</iframe>
<iframe src="" name="love" frameborder="0"></iframe>
<br/>
<a href="图像标签.html" target="love" >点击跳转</a>

十 表单 form

action:表单提交的位置，可以是网页也可以是一个请求处理地址
method:get post 提交方式
get方式提交:不安全，我们可以在url中看到我们提交的信息，但是比较高效
post方式提交:比较安全，可传输大文件

<form action="H2.html" method="get">
  <!--input 表格框
  p 分段
  input type="text"文本输入框-->
  <p>名字:<input type="text" name="username"></p>
  <!--input type="password"密码框-->
  <p>密码:<input type="password" name="psd"></p>

  <p>
    <input type="submit">
    <input type="reset">
  </p>

<P>名字:<input type="text" name="username" value="金是猪" maxlength="20" size="19"></P>
<p>密码:<input type="password" name="psd"></p>

单选框标签

input type="radio"
value 单选框的值
name 表示组，同一个组只能选一个

<p>性别:
  <input type="radio" value="boy" name="sex">男
  <input type="radio" value="girl" name="sex">女
</p>

多选框标签        input type="checkbox"

<p>爱好:
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="buy" name="hobby">购物
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
</p>

按钮

input type="button" 普通按钮
input type="image" 图片按钮
input type="reset" 重置按钮
input type="submit" 提交按钮

下拉框 列表框

selected 默认选中

<p>国家:
  <select name="列表名称">
    <option value="china" >中国</option>
    <option value="yinndu">印度</option>
    <option value="ruishi" selected>瑞士</option>
    <option value="taiguo">泰国</option>

  </select>
</p>

文本域 文件域

<p>反馈:
  <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
</p>

<p>
<input type="file" name="files">
</p>

 验证和滑块

邮件验证

<p>邮箱:
  <input type="email" name="email">
</p>
<p>url:
  <input type="url" name="url">
</p>
<p>数字:
  <input type="number" name="num" max="9" min="0" step="1">
</p>

滑块       input type="range"   搜索框     input type="search"

<p>音量: <input type="range" name="voice" min="0" max="100" step="10"> </p>

<p>搜索框: <input type="search" name="search"> </p>

表单的应用:隐藏域  只读  禁用

只读 readonly

<p>名字:<input type="text" name="username" value="郝软软" readonly>

  不能修改

 禁用:disabled

<p>性别:<input type="radio" value="boy" name="sex" disabled>男

  只能选择女

 隐藏域:hidden

<p>密码:<input type="password" name="psd" hidden></p>

增强鼠标可用性     label标签

<p>
  <label for="mark">你点我试试</label>
  <input type="text">
</p>

<p>搜索框:
  <input type="search" name="search" id="mark">
</p>

id放在哪里，点击你点我试试就会跳到哪个文本框

placeholder 提示语     required 不能为空

<p>名字:<input type="text" name="username" placeholder="请输入用户名">

<p>名字:<input type="text" name="username" placeholder="请输入用户名" required>

</p>