HTML教程.md

Posted on | In

HTML常用标签和属性参考

HTML定义

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML简介

HTML实例

网页中需要展示出来的内容都在<body>标签中，整体结构如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
  </head>
  <body>
    <p>.....</p>
    <a href='www.baidu.com'>........</a>
  </body>
</html>

实例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>
  • <!DOCTYPE html>：表示为HTML5文档，这个声明不区分大小写
  • <html>：是HTML页面的根元素
  • <head>元素包含了文档的元<meta>数据
  • <title>元素表示文档的标题
  • <body>元素包含了可见的页面内容
  • <h1>元素定义了一个大标题
  • <p>元素定义了一个段落
  • <meta charset="utf-8">：可以使得输出中文时正常显示
  • <q>：表示引用
  • <br/>：换行符，回车在html文件中是无效的
  • &nbsp;：空格符号
  • <hr/>：横线
  • <code>：代码，<pre>:多行代码
  • ​

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，**比如：name=”value”**。

HTML 链接 由 标签定义。链接的地址在 href 属性中指定：

1
<a href="http://www.runoob.com">这是一个链接</a>

HTML常用标签和属性参考

标签 描述
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1>-<h6> 定义 HTML 标题
<hr> 定义水平线
<!--...--> 定义注释

HTML 文本格式化标签

标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

HTML 链接语法

标签<a>加上属性href

1
<a href="www.baidu.com">百度</a>

如果需要在新标签中打开网页，需要加上：target="_blank"

1
<a href="www.baidu.com" target="_blank">百度</a>

邮件语法

在连接中使用mailto，第一个符号使用？分隔，后面用&分隔

1
<a href = "mailto:xxxx@qq.com? & cc=xxx@qq.com & bcc=xxx@qq.com & subject="主题" & body="内容">发送按钮</a>

表格实例

由table标签开始，然后用tbody使表可以加载多少显示多少，th：table head表示表头，tr表示table row表行，td表示table data单元格

加入边框的方式有2种；第一种是直接加入border 属性，第二种是在<head>标签中加入style标签，具体如下：

1
2
3
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

表格标题caption

表格摘要用属性表示，<table summary=“xxxxx”

1
2
3
4
5
6
7
8
9
10
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

表格标签是<tr>，每一个单元格的标签是<td>，边框的属性是border

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

  • 无序列表使用
      标签，每个列表项始于
    • 标签。
    1
    2
    3
    4
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
    • 有序列表始于
        标签。每个列表项始于
      1. 标签。
    1
    2
    3
    4
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

    图片

    图片使用<img sec="sss.jpg">来表示，如果要改变鼠标滑过时的文字，加入title属性

    1
    <img src="aa.jpg" title="xxxx">

    HTML 表单

    表单用于把用户输入的数据传送到服务端

    表单语法

    语法：

    1
    <form   method="传送方式"   action="服务器文件">

    1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
    2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)

    3.method ： 数据传送的方式（get/post）。

    1
    2
    3
    4
    5
    6
    <form    method="post"   action="save.php">
            <label for="username">用户名:</label>
            <input type="text" name="username" />
            <label for="pass">密码:</label>
            <input type="password" name="pass" />
    </form>

    输入大段多行文字

    用到texarea

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

    复选框

    ratio：圆框

    checkbox：方框

    如果要做到单选效果，就需要名字相同

    语法：

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

    下拉框

    select标签，每个选项使用<option>标签

    value为向系统提交的值，后面的文字为显示的内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form action="save.php" method="post" >
        <label>爱好:</label>
        <select>
          <option value="看书">看书</option>
          <option value="旅游">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
        </select>
    </form>
    • 提交按钮：<input type="submit" value="提交"/>
    • 重置按钮：<input type="reset" value="重置">

    label

    <label>：作用是点击文字时也可以选定复选框，不需要移动到框那里