1.标签

1.1meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容

keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

description 用于指定网站的描述

将页面重定向到另一个网站

1.2title标签

title标签的内容会作为搜索结果的超链接上的文字显示

1.3标题

• h1 ~ h6 一共有六级标题
• 从h1~h6重要性递减，h1最重要，h6最不重要
• h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
• 标题元素是块元素

• 一级标题

  
  

  二级标题

  
  

  三级标题

  
  

  四级标题

  
  

  五级标题

  
  

  六级标题

• 
  
• hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
• 
  

  回乡偶书二首

  
  

  其一

  
  
• 其他标签
• p标签表示页面中的一个段落

• 在p标签中的内容就表示一个段落

• em标签用于表示语音语调的一个加重

• 今天天气真不错！

• strong表示强调，重要内容！

• 你今天必须要完成作业！

• blockquote 表示一个长引用

• 
  这句话我是从来没有说过的！
  

• q表示一个短引用
• 子曰学而时习之，乐呵乐呵！
• br标签表示页面中的换行
• 
  

1.4布局标签

header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容（侧边栏） article 表示一个独立的文章 section 表示一个独立的区块，上边的标签都不能表示时使用section

p 没有语义，就用来表示一个区块，目前来讲p还是我们主要的布局元素

span 行内元素，没有任何的语义，一般用于在网页中选中文字

1.5列表

1.1.1分类

1.1.1.1有序列表

使用ol标签来创建无序列表，使用li表示列表项

       
结构
       
表现
       
行为
   

1.1.1.2 无序列表

使用ul标签来创建无序列表，使用li表示列表项

       
结构
       
表现
       
行为
   

1.1.1.3定义列表

使用dl标签来创建一个定义列表， 使用dt来表示定义的内容，使用dd来对内容进行解释说明

       
结构
       
结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
       
结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
       
结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
   

1.1.1.4列表之间可以互相嵌套

       

          aa
           

               
aa-1
               
aa-2
                   

                       
aa-1
                       
aa-2
                   
               
           
       
   

1.6超链接

1.6.1 作用

超链接可以让我们从一个页面跳转到其他页面， 或者是当前页面的其他的位置

1.6.2 定义

使用 a 标签来定义超链接

超链接

1.6.3 属性

1.6.3.1属性1：href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2：target

用来指定超链接打开的位置

_self 默认值 在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

超链接

1.6.4其他

将#作为超链接的路径的展位符使用

javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生

将超链接的href属性设置为#，这样点击超链接以后 页面不会发生跳转，而是转到当前页面的顶部的位置

跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

去底部
   


去第三个自然段
   



  内容多一点

这是一个新的超链接
   


这是一个新的超链接
   


回到顶部

1.7图片标签

img标签来引入外部图片，img标签是一个自结束标签

属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示

1.8内联框架

用于向当前页面中引入一个其他页面

• src 指定要引入的网页的路径
• frameborder 指定内联框架的边框

1.8 音视频标签

1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性

• controls 是否允许用户控制播放
• autoplay 音频文件是否自动播放
• 如果设置了autoplay 则音乐在打开页面时会自动播放
• loop 音乐是否循环播放

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

1.8.2视频

与 audio 相似

2.表格table

• 在table中使用tr表示表格中的一行，有几个tr就有几行
• 在tr中使用td表示一个单元格，有几个td就有几个单元格
• rowspan 纵向的合并单元格
• colspan 横向的合并单元格

      

          
A1
          
B1
          
C1
          
D1
      
      

          
A2
          
B2
          
C2
          
D2
      
      

          
A3
          
B3
          
C3
      
      

          
A4
          
B4
          
C4
      
  

长表格

• 可以将一个表格分成三个部分：
• 头部 thead
• 主体 tbody
• 底部 tfoot
• th 表示头部的单元格

  
      

          

              
日期
              
收入
              
支出
              
合计
          
      
      

          

              
2000.1.1
              
500
              
200
              
300
          
          

              
2000.1.1
              
500
              
200
              
300
          
          

              
2000.1.1
              
500
              
200
              
300
          
          

              
2000.1.1
              
500
              
200
              
300
          
      
      

          

              

              

              
合计
              
300
          
      

  

表格样式

• border-spacing: 指定边框之间的距离

border-spacing: 0px;

• border-collapse: collapse; 设置边框的合并

border-collapse: collapse;

• 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中tr不是table的子元素

3.表单（form）

• 使用form标签来创建一个表单
• action 表单要提交的服务器的地址
• 数据要提交到服务器中，必须要为元素指定一个name属性值

• 单选按钮
• 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
• checked 可以将单选按钮设置为默认选中

• 多选框

• 下拉列表

          选项一
          选项二
          选项三
      

• 提交按钮

属性

• autocomplete="off" 关闭自动补全
• readonly 将表单项设置为只读，数据会提交
• disabled 将表单项设置为禁用，数据不会提交
• autofocus 设置表单项自动获取焦点

4.注释

5.属性

• 属性，在标签中（开始标签或自结束标签）还可以设置属性
• 属性是一个名值对（x=y）
• 属性用来设置标签中的内容如何显示
• 属性和标签名或其他属性应该使用空格隔开
• 属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

6.文档声明