html 标签学习归纳笔记

一、简单标签

0、注释

1、p 段落

• 说明：段前段后都有空白
• 举例：

    ------------
    
我的第一个段落。
    
我的第二个段落。
    
我的第三个段落。
    ------------

• 【运行结果】
  

2、hx 标题

• 说明：标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级。

• 举例

一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

• 运行结果
  

3、strong 、em 强调

• 说明：em 表示强调，默认用 斜体 表示。strong 表示更强烈的强调， 用 粗体 表示。
  （目前国内前端程序员更喜欢使用 strong 表示强调。)

• 举例

有一个名叫尼克•卡拉威
（托比•马奎尔Tobey Maguire饰）的作家。

• 运行结果
  

4、span 设置单独样式

• 说明：span没有语义，就是为了设置单独的样式用的

• 举例：

    
    



为了实现他的美国梦，他搬入纽约附近一海湾居住。

• 运行结果：
  

5、q 短文本引用

• 说明：注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。用 q 标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。

• 举例：

周瑜是历史上的英雄人物！配的上那句聪明秀出为之英，胆略过人为之雄。

• 运行结果
  

6、blackqoute 长文本引用

• 说明：浏览器对 blockquote 标签的解析是缩进样式

• 举例：

大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？
暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。
这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适。

• 运行结果
  

7、br 换行

• 说明：
  xhtml1.0写法：

  html4.01写法：

  现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
  
  br标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有 br 、hr 和 img 。
  
  在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入br。

• 举例：

暗淡轻黄体性柔，
情疏迹远只香留。

• 运行结果
  

8、 nbsp 空格

• 说明：若代码中单纯输入空格符，无论输入n个，都只会显示一个空格。
• 举例：
  （1）输入n个空格符

今天       星期五。

• 运行结果
  

• （2）输入4个  

今天 ; ; ; ;星期五。

• 运行结果
  

9、hr 水平横线

• 说明：
  html4.01版本：

  ---

  
  xhtml1.0版本：

  ---

  一般使用 xhtml1.0 的版本。
  
  

  ---

  标签和
一样也是一个空标签，只有一个开始标签，没有结束标签。
• 举例：

火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。

每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。

• 运行结果：线是无限延长的。
  

10、address 地址

• 说明：可以定义地址（比如电子邮件地址）、签名或者文档的作者身份。在浏览器上显示的样式为斜体，会自动另起一行。
• 举例：

我家住在
北京市白云区同德5号


    本文的作者："mailto:[email protected]">月半

• 运行结果：

11、code 插入一行代码

• 说明：当代码为一行代码时方可使用。
• 举例：

我们可能知道水平渐变的实现，类似这样：{background-image:linear-gradient(left, red 100px, yellow 200px);}

• 运行结果：
  

12、pre 插入多行代码

• 说明：可插入大段代码
• 举例：

var message="欢迎";
for(var i=1;i<=10;i++)
{
    alert(message);
}

• 运行结果：
  

二、多个标签

1、ul-li 无序列表

• 说明：ul-li 标签是无前后顺序的，默认样式为每个 li 项前有一个原点。一般多用于列举新闻信息。

• 语法：

	
信息
	
信息
	......

• 举例：

    
香港将向18随以上永久居民发放1万港币
    
美国口罩出现2亿7千万缺口
    
日本回应东京奥运可能取消

• 运行结果：
  

2、ol-li 有序列表

• 说明：ul-li 标签是有前后顺序的，默认样式为1.2.3.……

• 语法：

   
信息
   
信息
   ......

• 举例：

    
香港将向18随以上永久居民发放1万港币
    
美国口罩出现2亿7千万缺口
    
日本回应东京奥运可能取消

• 运行结果：
  

3、div 容器

• 说明：
  · div 相当于一个容器，可以把一些独立的逻辑部分划分出来。
  ·可以为这一个独立的逻辑部分设置一个名称，用 id 属性来为 div 提供唯一的名称。

• 举例：

"hotList">
    
热门新闻
    

        
美国口罩出现2亿7千万缺口
        
日本回应东京奥运可能取消
    

"sportNews">
    
体育新闻
    

        
湖人118-109鹈鹕 
        
詹姆斯赛季首个40+湖人三杀鹈鹕取6连胜
    

• 运行结果：
  

4、table 表格

• 说明：包含五个元素：table、tbody、tr、th、td

·

…：整个表格以标记开始、标记结束。

· …：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

· …：表格的一行，所以有几对tr 表格就有几行。

· …：表格的一个单元格，一行中包含几对...，说明一行中就有几列。

· …：表格的头部的一个单元格，表格表头。

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

[ 2 ] . 表头，也就是th标签中的文本默认为粗体并且居中显示。

• 举例：

  

    

      
班级
      
学生数
      
平均成绩
    
    

      
一班
      
30
      
89
    
    

      
二班
      
35
      
85
    
    

        
三班
        
32
        
80
    
  

• 运行结果：
  

5、caption、summary 为表格添加标题和摘要

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

• 语法：
  摘要：

  
  标题：

  举例：

  标题文本

  "本表格记录2012年到2013年库存记录，包括U盘和耳机库存量">

  2012年到2013年库存记录

  产品名称	品牌	库存量（个）	入库时间
  耳机	联想	500	2013-1-2
  U盘	金士顿	120	2013-8-10
  U盘	爱国者	133	2013-3-25

  • 运行结果：
    

  三、超链接、图片

  1、a 超链接

  • 说明：title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色，可通过css更改。

  • 语法：链接显示的文本

  • 举例：

  
  我最近看的一本很好看的书叫"#">漫长的告别。
  

  • 运行结果： 点击前：
    
    点击后：
    

  [1.1] 在新建浏览器窗口打开链接：加入target="_blank"

  
  语法：click here!
  
  

  [1.2] 在网页中链接Email地址： mailto

  • 说明：如果mailto后面同时有多个参数的话，第一个参数必须以 ? 开头，后面的参数每一个都以 & 分隔。（下列参数注意观察参数最后的符号）
    
    邮箱地址：mailto：
    抄送地址：cc=
    密件抄送地址：bcc=
    多个收件人、（密件）抄送人：用分号；分开
    邮件主题：subject=
    邮件内容：body=
    

  • 举例：

  
  "mailto:[email protected][email protected];[email protected]&subject=html笔记&body=标签">发送
  

  • 运行结果：点击发送后，浏览器自动调用默认客户端的电子邮件程序，并填上相应信息。
    
    

  2、img 图片

  • 语法：

  • 说明：
    src：标识图像的位置；
    
    alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
    
    title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
    图像可以是GIF，PNG，JPEG格式的图像文件。

  • 举例：

  "http://img.mukewang.com/52da54ed0001ecfa04120172.jpg"
  title="电影介绍"> 

  • 运行结果：鼠标移动到该图片上时，会显示相应的提示文本。
    

  四、from 表单标签

  1、与用户交互

  • 语法：

  • 说明：
    标签是成对出现的，以开始，以结束。所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在

    标签之间，否则用户输入的信息可提交不到服务器上！
    
    action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
    
    method ： 数据传送的方式（get/post）

  • 举例：

  2、输入框 input - text / password

  • 语法：

  
     "text/password" name="名称" value="文本" />
  

  • 说明：
    type：type=“text”，文本输入框；
    type=“password”, 密码输入框。
    
    name：为文本框命名，以备后台程序ASP 、PHP使用。
    
    value：为文本输入框设置默认值。(一般起到提示作用) password类型的输入框，默认值将显示为黑色圆点。

  • 举例：

  
  
      账号："text" name="账号" value="请输入账号">
  
      密码："password" name="密码" value="请输入密码">
  
  

  • 运行结果：
    

  3、文本域-多行 textarea

  • 语法：文本
    
    

  • 说明：</code>标签是成对出现的，以<code><textarea></code>开始，以<code>结束。
    
    cols ：列数
    rows ：行数

  • 举例：

  
  
      "50"</span> rows=<span class="token string">"10"</span>>请输入你的简介
  
  

  • 运行结果：
    

  4、单选框、复选框 input - radio / checkbox

  • 语法：
    

  • 说明：
    
    type：type=“radio时，为单选框；type="checkbox"时，为复选框。
    
    value：提交数据到服务器的值（后台程序PHP使用）。
    
    name：为控件命名，以备后台程序 ASP、PHP 使用。
    
    checked：当设置 checked=“checked” 时，该选项被默认选中。
    
    同一组的单选按钮，name 取值一定要一致。

  • 举例：

  
  
      请选择性别：
  
      "radio" name="sex" value="女" checked="checked">女
      "radio" name="sex" value="男">男
      
  
  请选择你学过的科目：
  
      "checkbox" value="数学">数学
      "checkbox" value="英语">英语
      "checkbox" value="语文">语文
      "checkbox" value="物理">物理
  
  

  • 运行结果：
    

  5、下拉列表框 select - option

  [1] 单选

  • 语法：

  
      提示文字
      
          "1" >选项1
          "2" selected="selected">选项2
          ……
      
  

  • 说明：
    
    value：要向服务器提交的值。
    selected: 当selected="selected"时，该选项被默认选中。
    

  • 举例：

  
  
      性别：
      
          "1" >男
          "2" selected="selected">女
      
  
  

  • 运行结果：
    

  [2] 多选 select - multiple=“multiple”

  • 语法：

  
      提示文字
      "multipe">
          "1" >选项1
          "2" selected="selected">选项2
          ……
      
  

  • 说明：在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

  • 举例：

  
  
      书：
      "multiple">
          "1" selected="selected">安妮的日记
          "2" selected="selected">漫长的告别
          "3" >摆渡人
          "4" >我喜欢你
      
  
  

  • 运行结果：
    

  6、按钮 input - submit / reset

  [1] 提交 submit

  • 语法：

  • 说明：
    · 只有当type="submit"时，按钮才有提交的作用
    ·value：按钮上显示的值

  • 举例：

  
  
      "submit" value="提交" name="sumbit">
  
  

  • 运行结果：
    

  [2] 重置 reset

  • 语法：

  • 说明：
    
    · 只有当type="reset"时，按钮才有重置的作用
    ·value：按钮上显示的值

  • 举例：

  
  
      "reset" value="重置" name="reset">
  
  

  • 运行结果：
    

  7、label 控件

  • 语法：
    
    ※ 标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

  • 说明：label 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（即自动选中和该label标签相关连的表单控件上）。
    

  • 举例：

  
  
      性别：
      "male">男
      "radio" name="gender" id="male" />
      "female">女
      "radio" name="gender" id="female" />
  
  

  • 运行结果：