HTML语言学习笔记（会更新）

一个html文件是由一系列的元素和标签组成的。

标签：

1.<html></html>

表示该文件为超文本标记语言（HTML）编写的。成对出现，位于文件的最前面和最后面。

2.<head></head>&<body></body>

表示文件头和文件主体，成对出现。

（1）文件头是规定该文件标题和一些属性的，例如标题、编码方式、URL等，不出现在网页中，若为无需提供相关信息可省略。

（2）文件主体，及在网页中显示的内容。

3.<title></title>

HTML文件的名称，在浏览器中显示在窗口中，一般嵌套在<head></head>中。

4.<strong></strong>

加粗

5.<em></em>

斜体

6.<br /> & &nbsp;

前者换行，相当于回车，后者空格。

7.<p></p>

段落

8.<span></span>

这是一个可以灵活运用的标签，例如如果对于文字进行处理，先用<span>目标</span>把目标括起来，再对其设置CSS（设置它的表现样式）。

9.<q></q>&<blockquote></blockquote>

引用标签，前者为较短文本的引用，后者是较长文本的引用，其核心在与它所表达的“引用”的意思。

10.<hr />

用于分隔的横线。

11.<address><address>

将联系地址信息在网页中展示出来，如公司的地址。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。默认字体为斜体，也可以通过 CSS样式来修改它的样式。

12.<code></code>&<pre></pre>

前者为显示一行编程代码，后者为多行变成代码的显示。不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

13.<ul></ul>/<ol></ol>&<li></li>

ul-li是没有前后顺序的信息列表，ol-li有前后顺序的信息列表。

14.<div></div>

将一些独立的逻辑部分划分出来。逻辑部分是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称,如<div  id="版块名称">…</div>。

15.<table></table>

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)表格中列的个数，取决于一行中数据单元格的个数。

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

(8)<caption></caption>: 用以描述表格内容，标题的显示位置：表格上方。

上述代码在浏览器中显示的默认的样式为：



例子：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>认识table表标签</title>

</head>

<body>

<table>

  <tbody>

    <tr>

      <th>班级</th>

      <th>学生数</th>

      <th>平均成绩</th>

    </tr>

    <tr>

      <td>一班</td>

      <td>30</td>

      <td>89</td>

    </tr>

    <tr>

      <td>二班</td>

      <td>35</td>

      <td>85</td>

    </tr>

<tr>

<td>三班</td>

<td>32</td>

<td>80</td>

</tr>

  </tbody>

</table>

</body>

</html>

效果如下图：



16.<a></a>

使用<a>标签可实现超链接。其语法为：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

即单击“链接显示文本”文字，网页链接到“http://目标网址”这个网页，鼠标滑过链接文字时会显示"鼠标滑过显示的文本">。

P.S. <title>属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。故而在<a>中加入target="_blank"来使得链接在新的网页打开。例如：<a href="目标网址" target="_blank">click here!</a>

HTML语言学习笔记（会更新）的更多相关文章

  1. 2017-04-21周C语言学习笔记

    C语言学习笔记:... --------------------------------- C语言学习笔记:学习程度的高低取决于.自学能力的高低.有的时候生活就是这样的.聪明的人有时候需要.用笨的方法 ...

  2. 2017-05-4-C语言学习笔记

    C语言学习笔记... ------------------------------------ Hello C语言:什么是程序:程序是指:完成某件事的既定方式和过程.计算机中的程序是指:为了让计算机执 ...

  3. GO语言学习笔记（一）

    GO语言学习笔记 1.数组切片slice:可动态增长的数组 2.错误处理流程关键字:defer panic recover 3.变量的初始化:以下效果一样 `var a int = 10` `var ...

  4. Haskell语言学习笔记（88）语言扩展（1）

    ExistentialQuantification {-# LANGUAGE ExistentialQuantification #-} 存在类型专用的语言扩展 Haskell语言学习笔记(73)Ex ...

  5. Go语言学习笔记十三： Map集合

    Go语言学习笔记十三: Map集合 Map在每种语言中基本都有,Java中是属于集合类Map,其包括HashMap, TreeMap等.而Python语言直接就属于一种类型,写法上比Java还简单. ...

  6. Go语言学习笔记十二： 范围(Range)

    Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...

  7. Go语言学习笔记十一： 切片（slice）

    Go语言学习笔记十一: 切片(slice) 切片这个概念我是从python语言中学到的,当时感觉这个东西真的比较好用.不像java语言写起来就比较繁琐.不过我觉得未来java语法也会支持的. 定义切片 ...

  8. Go语言学习笔记十： 结构体

    Go语言学习笔记十: 结构体 Go语言的结构体语法和C语言类似.而结构体这个概念就类似高级语言Java中的类. 结构体定义 结构体有两个关键字type和struct,中间夹着一个结构体名称.大括号里面 ...

  9. Go语言学习笔记九： 指针

    Go语言学习笔记九: 指针 指针的概念是当时学C语言时了解的.Go语言的指针感觉与C语言的没啥不同. 指针定义与使用 指针变量是保存内存地址的变量.其他变量保存的是数值,而指针变量保存的是内存地址.这 ...

随机推荐

  1. 用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限

    先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自 ...

  2. UIFont的常用字体

    + (UIFont *)systemFontOfSize:(CGFloat)fontSize;   系统默认字体 + (UIFont *)boldSystemFontOfSize:(CGFloat)f ...

  3. python之信用卡ATM（第五天）

    本节作业 作业需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日, ...

  4. Hiho 1232 北京网络赛 F Couple Trees

    给两颗标号从1...n的树,保证标号小的点一定在上面.每次询问A树上的x点,和B树上的y点同时向上走,最近的相遇点和x,y到这个点的距离. 比赛的时候想用倍增LCA做,但写渣了....后来看到题解是主 ...

  5. LayaAir学习笔记

    1.Text文本类 var Text=laya.display.Text; Laya.init(620,400); Laya.stage.bgColor="#323232";//设 ...

  6. Saltstack之multi-master

    一.实验环境: 1.salt版本: [root@master master]# salt --versions-report Salt: 2015.5.10 Python: 2.7.5 (defaul ...

  7. Linux下PHP+MYSQL+APACHE配置方法

    apache: http://www.apache.org  mysql: http://www.mysql.com  php: http://www.php.net/downloads.php  g ...

  8. HDU 4292：Food（最大流）

    http://acm.hdu.edu.cn/showproblem.php?pid=4292 题意:和奶牛一题差不多,只不过每种食物可以有多种. 思路:因为食物多种,所以源点和汇点的容量要改下.还有D ...

  9. jQuery概述

    JQUERY   JS语法字典---网友总结 1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->ht ...

  10. bzoj 1079 着色方案

    题目: 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其 中第i 种颜色的油漆足够涂ci 个木块.所有油漆刚好足够涂满所有木块,即c1+c2+-+ck=n.相邻两个木块涂相同色显得 ...