HTML -- 常用标签

目录

HTML 

标签

单标签

双标签

常见标签的使用

 标题和段落

 换行、分隔、超链接

列表标签

表单标签

 属性

 属性的使用

---

• HTML 

HTML（Hyper Text Markup Language），超文本标记语言，是一门标记语言，不是编程语言，所以它没有变量，也没有任何语句结构。

所谓超文本，即超越了文本范畴的文档格式，普通文本只能显示文字，而超文本可以显示各种的媒体资源，例如html网页，doc文档，xls文档等

HTML发展至今，一共经历了6个版本：HTML1.0，HTML2.0，HTML3.0，HTML4.0，XHTML1.0（过渡版本），HTML5.0（现行）

HTML在4.0版本（1999年）时，W3C组织与浏览器厂商发生过一次分歧，W3C组织认为HTML作为标记语言，本身语法不够严谨（乱写HTML代码也不会报错），所以发布了新的一门语法更加严谨的标记语言XML，但XML比HTML更为复杂、难以使用，所以浏览器厂商想要用XML代替HTML实际上需要耗费极大的成本，且当时全球有上百万的网站使用的都是HTML，所以如果想要直接从HTML转换到XML，很多公司是难以接受的，因此，在2000年W3C推出了HTML转换成XML的过渡版本，即XHTML1.0版本，这个版本既有HTML的语法，也兼顾了XML的部分语法，但是在XHTML2.0版本推出时，浏览器厂商与W3C闹翻了，浏览器厂商不再和W3C合作，而是自己组织了一个新的HTML标准团队WHATWG，发展HTML5.0版本。在随后几年（2004年），正式推出了HTML5.0试验版本。在2014年W3C迷途知返，重新与浏览器厂商的团队合作，在2014年重新发布HTML5.0版本，同时也宣告XML代替HTML的计划失败。最终XML慢慢变成了软件的配置文档，数据转换格式的结构，类似于json的作用

HTML的代码必须写在.html 或 .htm文档 中

.htm的出现是基于计算机发展的历史遗留问题，早期计算机的存储能力不强，所以针对文件名的命名存在"8.3规范"：要求文件名必须在8个字符内，文件后缀必须是3个字符内。因为.html是4个字符，不符合"8.3规范"，因此改成了.htm。类似的还有图片格式中的.jpeg，在早期为.jpg格式

---

• 标签

表示HTML网页内容的一个最基本的组织单元，类似于语文中的标点符号，

标签的作用：告诉浏览器当前标签中的内容是什么，以什么格式在页面中进行呈现

• 标签从书写结构上分为2种：单标签和双标签
• 标签从组织结构上分为2种：内容标签和结构标签
  • 内容标签：主要包含和展示内容的，部分标签可以包含其他的内容标签
  • 结构标签：主要用于包含其他标签，一般结构标签内部不会直接包含网页内容（文本、图片、视频、音频等） 

• 单标签

单标签（只有一个标签名的标签）的标签格式：

<标签名>
<标签名 />
<标签名 属性名="属性值" 属性名/>

网页中的常见单标签： 

标签名	描述
	元信息标签
	css外观样式的外链引入标签（类似于import），可以导入css代码到html文档中
	图片标签
	输入框标签
	换行标签，浏览器遇到br标签就会自动进行内容换行（类似于/r /n）
	分格线标签，代表分隔内容的一条横线

• 双标签

双标签（成对标签名出现，有开始标签和结束标签）的标签格式：

<标签名> 内容 

网页中的常见双标签： 

标签名	描述
	网页的一级标题
	网页的二级标题
...	...
	网页的六级标题
	网页的段落
	网页超链接
	块级结构标签
	行级结构标签
	表单标签，表示网页的一个提供给用户输入数据的表单
	无序列表结构标签，表示网页的一个内容列表
	列表项目标签
	表格标签，表示网页的一个表格

• 常见标签的使用

注：HTML中的标签是由HTML语法提供的，所以每个标签名都是固定的

而XML中的标签是可以自定义的，但XML中的语法更为严谨

 标题和段落

    
    


    
h1标题:常用于网站的logo、标题
    
h2标题:常用于网站的模块标题、栏目标题
    
h3标题:常用于网站的模块标题、栏目标题
    
h4标题:常用于网站的附加板块标题或是文章的标题
    
h5标题:更小级别的标题,基本用不到
    
h6标题:更小级别的标题,基本用不到
    
p段落

 换行、分隔、超链接

    
    


  
将进酒
  

    君不见黄河之水天上来，奔流到海不复回。

    君不见高堂明镜悲白发，朝如青丝暮成雪。

    人生得意须尽欢，莫使金樽空对月。

    天生我材必有用，千金散尽还复来。

    烹羊宰牛且为乐，会须一饮三百杯。

    岑夫子，丹丘生，将进酒，杯莫停。

    与君歌一曲，请君为我倾耳听。

  
  

  
译文
  

    你可见黄河水从天上流下来，波涛滚滚直奔向大海不回还。

    你可见高堂明镜中苍苍白发，早上满头青丝晚上就如白雪。

    人生得意时要尽情享受欢乐，不要让金杯空对皎洁的明月。

    天造就了我成材必定会有用，即使散尽黄金也还会再得到，

    煮羊宰牛姑且尽情享受欢乐，一气喝他三百杯也不要嫌多。

    岑夫子啊，丹丘生啊，快喝酒啊，不要停啊。

    我为在坐各位朋友高歌一曲，请你们一定要侧耳细细倾听。

  

 

超链接的2中常用用法：页面跳转、下载文件

    
    


    
    百度一下
    

    
    跳转到本地页面
    

    
    点击下载
    
    点击下载图片(使用“鼠标右键，另存为”的方式)

 实际上，页面跳转也是下载文件的一种，因为用户能在浏览器里面看到的所有内容，实际上都是经过浏览器下载到本地，用户才能看到。可以通过F12（打开开发者工具）->network（网络）查看

列表标签

列表是一种结构标签，可以让网页的内容形成列表格式

列表标签在HTML中提供了3种：

1. 无序列表（UnorderList，ul）
    

   
   
   
       
       
   
   
     
     
   
       这是ul与li,不会形成一个列表项
       
   无序列表,第1个列表项
       
   无序列表,第2个列表项
       
   无序列表,第3个列表项
     
     
   
     
     
   
       
   
         1
         
   
           
   1.1
           
   1.2
           
   1.3
         
       
       
   
         2
         
   
           
   2.1
           
   
             2.2
             
   
               
   2.3.1
               
   2.3.2
               
   2.3.3
             
           
         
       
     
   
   
   

   

2. 有序列表（OrderList，ol）

   
   
   
       
       
   
   
     
   
       
   有序列表，第1个列表项
       
   有序列表，第2个列表项
       
   有序列表，第3个列表项
     
     
   
     
   
       
   
         1
         
   
           
   1.1
           
   1.2
         
       
   
       
   
         2
         
   
           
   2.1
           
   2.2
         
       
     
   
   
   
   

   

3. 定义列表（DefineList，dl）

定义列表标签为dl
定义列表的每一个定义项由dt(Define Title) 和 dd(Define Description)组成
dt表示定义项的标题
dd表示对上一个dt中的标题内容进行描述或是补充说明

    
    


  
   

     定义列表标签为dl

     定义列表的每一个定义项由dt(Define Title) 和 dd(Define Description)组成

     dt表示定义项0的标题

     dd表示对上一个dt中的标题内容进行描述或是补充说明
  
  

    
HTML
    
超文本标记语言
    
W3C标准中的结构标准
    
CSS
    
层叠样式表
    
W3C标准中的外观标准
    
JavaScript
    
简称JS
    
W3C标准中的行为标准
  

除了定义列表结构特殊以外，其他的2种列表都为列表项目（List Item，li）

表单标签

表单标签是HTML中最终的标签之一，主要是提供了输入框或者按钮等标签提供给用户进行交互输入数据。将来表单可以提交到指定服务端程序中进行数据处理。

type="text"  文本

   账号:
   

（当value="H"时，默认该输入框中的内容为"H"  placeholder可理解为提示语）

type="password"  密码

    密码:
    

type="number"  数值

    年龄:
    

type="month"  出生年月

    出生年月:
    

type="tel"  电话号码 

    电话号码:
    

type="radio"  单选框

性别:
男
女

type="checkbox"  复选框

爱好:
篮球
滑板
撸猫
吉他

type="file"  上传文件

上传文件:

type="submit"  提交

• </li> </ul> <pre><code class="language-html">个性签名:<br> <textarea name="description" rows="10" cols="30">
  • 城市:
    

    昆明 曲靖 郑州 安阳 其他
    • 

    
    
    
        
        
    
    
        
    
            
                账号:
                
            
            
    
            
                密码:
                
            
            
    
            
                电话号码:
                
            
            
    
            
                年龄:
                
            
            
    
            
                出生年月:
                
            
            
    
            性别:
            男
            女
            
    
            爱好:
            篮球
            滑板
            撸猫
            吉他
            
    
            城市:
            
                
                    昆明
                    曲靖
                
                
                    郑州
                    安阳
                
                其他
            
            
    
            上传文件:
            
            
    
            个性签名:
    
            
            
    
            
        
    
    

    

    

    ---

    •  属性

    标签的作用就是用于展示内容，但是内容有时候并非文本，且文本的展示需要附加一些额外的效果时，就需要使用标签的属性来声明。不管是单标签还是双标签，都有属性[Attribute]。

    标签的属性有两种：

    •  普通属性：属性名与属性值使用"="关联，属性值使用单引号或双引号围住
    •  布尔属性：只有属性名，没有属性值，或是属性值只有True或False  (不是直接在后面写上True或False，而是当标签中写上这个属性名，则其值表示为True，反之为False)

     属性的使用

    
     
    
         
        
    
    
        
        
        
    h1标题:常用于网站的logo、标题
        
    h2标题:常用于网站的模块标题、栏目标题
        
    h3标题:常用于网站的模块标题、栏目标题
        
    h4标题:常用于网站的附加板块标题或是文章的标题
        
    h5标题:更小级别的标题,基本用不到
        
    h6标题:更小级别的标题,基本用不到
        
    p段落