01- HTML简介

• HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

• 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。html是由很多标签组成的，学习html其实就是学习标签的使用

• 标准模板

•  1       
   2    
   3                   
   4            
   5         
   6 
   7 
   8         网页显示内容          
   9 
  10 
  

• html是由很多标签组成：html标签（一个html文件里面只能有一个html标签），head标签、body标签。如果把html比作一个完整的人体框架，head就是html的头，body是html的身体。

02- HTML注释

• html文档中的注释使用，被注释的内容不会在网页中显示
• 快捷键：ctrl + /

03- head标签

3-1 meta标签

• 定义关于HTML文档的元数据。 重要的属性有三个：http-equiv、name、content

• http-equiv：把content属性值关联到http头部

  • Content-Type（浏览器接受的文档类型，一般是text/html）

  • refresh（网页刷新，以秒为单位）

  • expires（设定网页到期时间，一旦过期，必须到服务器上重传）

  • 
        #过两秒自动刷新
         #过两秒自动跳转到对应的网站
    
    

• name: 把content属性关联到一个名称

  • keywords（搜索关键字，用于搜索引擎抓取信息的显示）

  • description（搜索到网站后显示的网页内容简描述）

  • author（站点制作者信息）

  • generator（用以说明生成工具）

• content: 定义与http-equiv或name属性相关的元信息，是必要的属性

3-2 link标签

• 引用外部文档，常见于引用外部样式。重要属性有三个：rel、href、type。

3-3 style标签

• 在页面中写css样式

04- body标签

标题标签h1-h6

• 通过 h1、h2、h3、h4、h5、h6标签可以在网页上定义6种级别的标题。

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

段落标签p

• 标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开

• 
  
      
          
          
      
      
          
  HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
          文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
          标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
          
  
          
  一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
          式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
          页可以从一个网页链接跳转到另外一个网页。
          
      
  
  

换行标签

• 代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入
  来强制换行

• 
  一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用
  
  文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件
  
  渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
  
  

图片标签

• 标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

  • src属性 定义图片的引用地址
  • alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片
  • title属性 鼠标划入图片上有提示

• 绝对路径和相对路径

  • 绝对路径: 相对于磁盘的位置去定位文件的地址
  • 相对路径: 相对于引用文件本身去定位被引用的文件地址

• “ ./ ” 表示当前文件所在目录下，比如：“./xx.jpg” 表示当前目录下的xx.jpg的图片，这个使用时可以省略。

• “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/xxx.jpg” 表示当前目录下的上一级目录下的images文件夹中的xxx.jpg的图片。

链接标签

• 在网页上定义一个链接地址，它的常用属性有：

• href属性 定义跳转的地址

• title属性 定义鼠标悬停时弹出的提示文字框

• target属性 定义链接窗口打开的位置

  • target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
  • target="_blank" 新页面会在新开的一个浏览器窗口打开

• name 锚记名称。作用：跳转到文档的某个地方。返回首页。

• 
  百度一下你就知道
  
  
   死链接
   #
  
  
  第一章
  第二章
  第三章
  
  第一章的内容
  第二章的内容
  第三章的内容
  
  
  这是顶部
  
      HTML是 HyperText Mark-up Language的首字母简写，
      意思是超文本标记语言，超文本指的是超链接，标记指的是标签，
      是一种用来制作网页的语言，这种语言由一个个的标签组成，
      用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，
      一个html文件就是一个网页，html文件用编辑器打开显示的是文本，
      可以用文本的方式编辑它，如果用浏览器打开，浏览器会按
      照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
  
  百度一下
  11
  去顶部
  

列表标签

有序列表

• 在网页上定义一个有编号的内容列表可以用

  、
  1. 配合使用来实现

  2. type属性

     • A A B C D
     • a a b c d
     • 1 1 2 3 4
     • i i ii iii iv v vi
     • I I II III IV V VI

  3. 
         
     列表文字一
         
     列表文字二
         
     列表文字三
     
     

无序列表

• 在网页上定义一个无编号的内容列表可以用

  、
  • 配合使用来实现

  • 
        
    新闻标题一
        
    新闻标题二
        
    新闻标题三
    
    

  • type属性

    • disc 默认 小黑圆点
    • circle 空心圆
    • square 小方框

  • 
        
    新闻标题一
        
    新闻标题二
        
    新闻标题三
    
    

  定义列表

  • 定义列表通常用于术语的定义。

    标签表示列表的整体。

    标签定义术语的题目。

    标签是术语的解释。一个

    中可以有多个题目和解释

  • 
        
    html
        
    负责页面的结构
    
        
    css
        
    负责页面的表现
    
        
    javascript
        
    负责页面的行为
    
    

  表格

  • table声明一个表格，属性如下：

    • border属性 定义表格的边框，设置值是数值
    • cellpadding属性 定义单元格内容与边框的距离，设置值是数值
    • cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
    • align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right

  • caption 表格标题

  • thead表格头部，使结构更加分明

  • tr 表格的数据行

  • th 表格的表头名称，与td不同在于文字采用加粗居中的形式显示

  • td 单元格，用来显示表格内容

  • th、td属性：

    • align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
    • valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
    • colspan 设置单元格水平合并，设置值是数值
    • rowspan 设置单元格垂直合并，设置值是数值

  学生信息表

  姓名	班级	年龄	身高(cm)	体重(kg)
  张三	31709	21	170	60
  李四		20	160	45
  王二	31708	19	保密

• 效果图

表单

• 表单用于搜集不同类型的用户数据，表单由不同类型的标签组成

• \标签 定义整体的表单区域

  • action属性 定义表单数据提交地址
  • method属性 定义表单提交的方式，一般有“get”方式和“post”方式
  • get提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
  • post提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

• \标签 把标签与文本关联起来（获取光标）,提高用户体验

  • 用户名
    
    

• \标签 定义通用的表单元素

  • type属性

    • type="text" 定义单行文本输入框

    • type="password" 定义密码输入框

      • text和password共有的属性

      • size（指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他元素，宽度以像素为单位）

      • maxlength（表示输入的最大字符数，有利于防止sql的注入）

      • readonly （只读）

      • placeholder （提示用户输入信息）

      • 
            用户名：
            
            
        
        
        
        
            密 码：
            
        
        

    • type="radio" 定义单选框

      • name为同一个属性时才表示一组数据，才能实现单选功能

      • value（必须要写，提交到服务器的key值）

      • checked（为true时默认选中该选项）

      • 	
            
        
                性 别：
        
                男
                
        
                女
                
        
                保密
                
            
        
        

    • type="checkbox" 定义复选框

      • name为同一个属性时才表示一组数据，才能实现单选功能

      • value（必须要写，提交到服务器的key值）

      • checked（为true时默认选中该选项）

      • 
            爱好：
        
            睡觉
            
        
            唱歌
            
        
            跳舞
            
        
            绘画
            
            
        
        

    • type="file" 定义上传文件

      • 上传文件：
        

    • type="submit" 定义提交按钮。用于提交表单。

    • type="reset" 重置按钮。清空表单的输入，恢复到表单默认的状态。

    • type="button" 普通按钮。一般结合javascript使用。

    • type="hidden" 定义一个隐藏的表单域，用来存储值

  • value属性 定义表单元素的值

  • name属性 定义表单元素的名称，此名称是提交数据时的键名

• </code>标签 定义多行文本输入框</p> <ul> <li> <p>name （表单提交项的key）</p> </li> <li> <p>cols（设置文本域宽度）</p> </li> <li> <p>rows（设置文本域高度，即行数）</p> </li> <li> <pre><code class="language-HTML"><textarea name="comments" id="" cols="30" rows="10">请写上你的评价