HTML各知识点总结：

注：图片或者音、视频的路径：
1、相对路径：相对于代码所在的路径，返回上级目录用“../”
2、绝对路径：不考虑所写代码的路径，直接复制图片或者音、视频的在盘符里的路径

一、基本标签：

注：标签中的各个属性是用 空格 隔开！

1、标题标签：

给网页中的正文设置标题，同时可选择标签大小。

用法说明：

一级标题h1,二级标题则h2，后者同理。

例如：一级标签：

  格式： 
标题名字

2、段落标签：

给网页中的内容分段，但是不具有空格和换行功能。

用法说明：

段落标签用字符p表示

例如：

  格式： 
段落内容

3、换行标签：

给网页中内容进行换行，不具有分段和空格功能，且与段落标签相比，内容较显的紧凑。

用法说明：

换行标签用br表示，并且是单标签

  格式： 选择换行内容
(自闭合、建议使用)
   或者  选择换行内容

4、水平线标签：

给网页中内容进行水平线分隔开。

用法说明：

水平线标签用Hr表示，也是单标签

  格式： 选择换行内容
(自闭合、建议使用)
   或者  选择换行内容

5、字体样式标签：

设置字体样式，如粗体、斜体。

用法说明：

粗体：strong
斜体：em

  格式：  内容 
          内容 

6、注释和特殊符号：

网页中所表示实际上的中、英或者数字等注释和符号。

  格式： 空格：内容1   内容2  大于号：内容1 > 内容2 
        小于号：内容1 < 内容2   版权符号：© 内容

二、网页插入：

1、图像：

在网页中插入图片。

   格式  
         其中 src: 图像地址 alt: 图像的替代文字（当图片不存在或者找不到时，就会用alt中内容来表示这个图片）
         title: 悬停在图片上的文字 width和height:设置图片大小

2、超链接

在网页中加入超链接，可以实现跳转功能。

锚链接：

1、需要一个锚标记
锚标记可以在本页面标记，在其他页面实现跳转； 也可以在其他页面标记，在本页面跳到标记的那个页面。
2、知道要跳转的页面的网页链接

  格式： 锚标记： 	 有的版本用的是这个：  
        锚链接： 回到锚标记对应的内容中

功能性链接：

如邮件链接：mailto

  格式： 邮件链接：  点击跳转 	

3、列表：

用来列举各种可能的事件或者种类等等。

有序列表：ol

无序列表：ul

自定义列表：dl

    ` 

                        
 内容 
 
                    

      

                        
 内容 
 
                    

    
 
                        
  
                            
 内容 
                        
                    
`

4、表格：

用表格来显示各个事物的各种属性，简单明了。
使用：
表格：table
行：tr
列：td
跨行：rowspan
跨列：colspan

  ` 内容  
   
       

         
 内容
              
         
       
  
`

多行多列则在表格里多写几个tr、td。具体事例如下代码：

    
    




    


        
1-1



    
    
    

        
2-1
        
        
2-2
        
        
2-3
        

    
    

        
3-1
        
        
3-2
        
        
3-3
        
        
3-4
        
    

    

        
学生成绩
    
    

        
哈哈
        
 语文
        
 100

    
    


        
 数学
        
 100
    
    

        
嘻嘻
        
 语文
        
 100

    
    


        
 数学
        
 100
    

三、表单：

1、提交表单的形式：常用get/post （get方式提交，可以在url中看到用户提交的信息，不安全，但是这种方式高效；post相对较安全，但是要想信息不被泄露仍需后期加密）

  格式： 
 表单内容

2、输入框：

输入框：input

比如输入框、密码框等等都用input标签 ，标签中的“type”的值决定了是输入框还是其他标签元素等等。并且尽量用“name”命名元素

type:

text(文本框)，password（密码框），checkbox（多选框），radio（单选框），submit（提交），reset （重置），file（上传文件），hidden（隐藏区域），image（图片，点击该图片也可以提交表单），button（按钮）等

value:

表单组件的初始值。当type为radio或者checkbox时，必须指定一个值。

size:

指定表单组件的初始宽度。当type为text或password时，表单元素的大小以字符为单位。而其他组件类型，宽度以像素为单位。

maxlength：

type为text或password时，输入的最大字符数

checked：

type为radio或者checkbox时，表示指定按钮已被选中，不可更改。

注：同一类型的单选框，name名称必须一样，不一样则不为单选。

    格式：     文本框：  密码框：input type="password" name="名字" >
               多选框：  单选框：
               提交：  重置
               上传文件：  隐藏区域：
               图片：  按钮：

3、下拉框：

下拉框：select

   格式      
                 （可在option标签中加入selected表示已被选择的选项）
                
            

4、搜索框：

在网页中添加搜索，可快速找到网页中某个内容。

   格式： 

5、滑块：

类似音量调节的滑块，可用来调节大小。

   格式：   （滑块对应的值要在表单提交后的网页的网址上看到）

6、文件域：

上传文件：file

   格式： 

7、文本域：

多行文本：textarea

   格式：  文本内容 

表单的提交和重置：

提交：submit
重置：reset

  格式  提交： 
  或者以图片形式提交：
        重置：

四、表单初级验证：

判断用户输入是否合理或者满足条件，验证失败时，给出提示信息。

1、邮箱验证：

  格式： 

2、URL验证：

  格式：  

3、数字验证：

  格式：  (可在此标签中加入max,min,step来设置数字范围以及步长大小)

4、表单验证之提示：

默认提示信息：placeholder（即在文本框中默认显示的信息）可用在所有输入框中，在单选、多选、下拉框中无意义。
必填选项：required （设置该项必填）
正则表达式：pattern （需要的可以在网上搜索）

五、表单其他功能：

隐藏某区域：hidden
设置只读模式：readonly
禁用模式：disabled
注：可在标签属性后添加这几个功能。如隐藏一个文本框：

  格式：  (表示该文本框已经隐藏）

鼠标定位：实现点击文字就能将鼠标定位到对应的框中。

   格式：   内容如（用户名）
           

表单相关代码：
`

    用户名：
    



    密码：
    




    男：
    
    女：
    



    中国：
    
    美国：
    
    韩国：
    
    印度：
    



    
        中国
        美国 
        韩国
        印度
    



    搜素框：
    



    滑块：
    


    文件域：
    



     




    
    邮箱验证：
    



    
    URL验证：
    



    
    数字验证：
    



    此处文本框被隐藏：
    



    只读模式：
    



    禁用模式：
    



    提示用户信息：
    



    此处必填：
    



    鼠标定位：
     内容如（用户名）
    



    提交：
    
    图片提交：
    



    重置：