自闭合标签

标签 说明
定义网页的信息（供搜索引擎查看）
引入“外部CSS文件”

换行标签
水平线标签
html-标签 - 图1 图片标签
表单标签

HTML常见块元素 独占一行

块元素 说明
h1~h6 标题元素
p 段落元素
div div元素
hr 水平线
ol 有序列表
ul 无序列表

HTML常见行内元素

行内元素 说明
strong 粗体元素
em 斜体元素
a 超链接
span 常用行内元素，结合CSS定义样式

行内块状元素特征：

img, input, textarea

(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

8种文本标签

  • （1）粗体标签：strong、b
  • （2）斜体标签：i、em、cite
  • （3）上标标签：sup
  • （4）下标标签：sub
  • （5）中划线标签：s
  • （6）下划线标签：u
  • （7）大字号标签：big
  • （8）小字号标签：small

有序无序列表

有序ol、li。配套使用，ol里不能嵌套其他东西。

无序ul、li。ul标签和li标签也是配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。这一点跟有序列表是一样的。

定义 dl包裹，dt和dt之间的外层，dt嵌套的dl在里层

表格

  • （1）表格：table标签
  • （2）行：tr标签
  • （3）单元格：td标签
    1. <!DOCTYPE html> 
    2. <html>
    3. <head>
    4.   <meta charset="utf-8" />
    5.   <title>表头单元格</title>
    6.   <!--这里使用CSS为表格加上边框-->
    7.   <style type="text/css">
    8.       table,tr,td,th{border:1px solid silver;}
    9.   </style>
    10. </head>
    11. <body>
    12.   <table>        
    13.       <caption>考试成绩表</caption>
    14.       <tr>
    15.           <th>姓名</th>
    16.           <th>语文</th>
    17.           <th>英语</th>
    18.           <th>数学</th>
    19.       </tr>
    20.       <tr>
    21.           <td>小明</td>
    22.           <td>80</td>
    23.           <td>80</td>
    24.           <td>80</td>
    25.       </tr>
    26.       <tr>
    27.           <td>小红</td>
    28.           <td>90</td>
    29.           <td>90</td>
    30.           <td>90</td>
    31.       </tr>
    32.       <tr>
    33.           <td>小杰</td>
    34.           <td>100</td>
    35.           <td>100</td>
    36.           <td>100</td>
    37.       </tr>
    38.   </table>
    39. </body>
    40. </html>
    完整html

表格语义化
thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚

合并行和合并列
rowspan和colspan，如colspan=”1”

图片标签

img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性。alt是显示失败时显示，title是鼠标over时显示

矢量图常见格式有：“.ai”、“.cdf”、“.fh”、“.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。对于矢量图，我们可以使用illustrator或者CorelDRAW这两款软件来处理。
在网页中，很少用到矢量图，除非是一些字体图标（iconfont）。不过作为初学者，我们只需简单了解一下即可。
对于位图和矢量图的区别，我们总结有以下4点。

  • （1）位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
  • （2）位图组成单位是“像素”，而矢量图组成单位是“数学向量”。
  • （3）位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响，当图片放大时不会失真。
  • （4）网页中的图片绝大多数都是位图，而不是矢量图。

超链接

herf指向跳转的路径
target属性取值

属性值 说明
_self 默认值，在原来窗口打开链接
_blank 在新窗口打开链接
_parent 在父窗口打开链接
_top 在顶层窗口打开超链接

锚点链接
herf=’#xxx-id’，滚动到对应对应的id的div

iframe

网页内部嵌入其他网页

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <iframe src="http://www.lvyestudy.com" width="200" height="150"></iframe>
  9.     <iframe src="http://sina.com" width="200" height="150"></iframe>
  10. </body>
  11. </html>