H5

•   有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。

         但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

  语法：<em>需要强调的文本</em>  <strong>需要强调的文本</strong>
•  <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。
   <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
• <style>
• span {
•    color:blue;
• }
• </style>
• 注释： <!--注释-->
• 图片： <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
• 标题：h1 －h6 层级递减
• 引用：<q>引用文本</q>端文本

  <blockquote>标签，长文本引用 引用自动显示“”
• 使用<br>标签分行显示文本
• &nbsp; 空格
• 认识<hr>标签，添加水平横线
• <address>标签，为网页加入地址信息

• 在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：

  <code>var i=i+300;</code>

  注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。

  语法：

  <code>代码语言</code>

  注：如果是多行代码，可以使用<pre>标签。
• 使用ul，添加新闻信息列表
• 使用ol，添加图书销售排行榜
• table标签，认识网页上的表格

• 创建表格的四个元素：

  table、tbody、tr、th、td

  1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

  2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

  3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

  4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

  5、<th>…</th>：表格的头部的一个单元格，表格表头。

  6、表格中列的个数，取决于一行中数据单元格的个数。
• 总结：

  1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

  2、表头，也就是th标签中的文本默认为粗体并且居中显示
• 用css样式给表格填写横线：
• <style type="text/css”>
• table tr td,th{border:2px solid #000;}
• </style>

• caption标签，为表格添加标题和摘要

  表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：

  摘要

  摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

      语法：<table summary="表格简介文本">

  标题

  用以描述表格内容，标题的显示位置：表格上方。

       语法：

  <table>
      <caption>标题文本</caption>
      <tr>
          <td>…</td>
          <td>…</td>
          …
      </tr>
  …
  </table>
• <a href="目标网址" target="_blank">click here!</a> 在新的浏览器窗口中打开加target。

• <a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：

  注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

  下面是一个完整的实例:

• 在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。

  语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
  举例：<img src = "myimage.gif" alt = "My Image" title = "My Image" />
  讲解：
• 1、src：标识图像的位置；
• 2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
• 3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
• 4、图像可以是GIF，PNG，JPEG格式的图像文件。

• 当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

  语法：

  <form>
     <input type="text/password" name="名称" value="文本" />
  </form>
  
  

  1、type：

     当type="text"时，输入框为文本输入框;

     当type="password"时, 输入框为密码输入框。

  2、name：为文本框命名，以备后台程序ASP 、PHP使用。

  3、value：为文本输入框设置默认值。(一般起到提示作用)

  举例：

  <form>
    姓名：
    <input type="text" name="myName">
    <br/>
    密码：
    <input type="password" name="pass">
  </form>

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

<textarea  rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

举例：

<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>

</form>

 

 

 

 

 

 

 

 

 

 

语法：

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

   当 type="radio" 时，控件为单选框

   当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

如下面代码：