HTML5学习简记(更新中~)

目录

HTML定义

标签

HTML基本骨架

常见标签

标题标签

 段落标签

 换行与水平线标签

 文本格式化标签

        图像标签

        绝对路径与相对路径

        超链接标签

        音频与视频标签

 列表标签

无序列表

有序列表

 定义列表

表格标签 

表格结构标签

合并单元格

表单标签

input标签

 input标签占位文本

真正实现单选功能

上传多个文件

下拉菜单标签

文本域标签 

label标签

button标签​编辑

 无语义的布局标签

div标签

span标签

字符实体


HTML定义

HTML是一种超文本标记语言,超文本即我们在网页中看到的链接,标记指的是语言中的标签


标签

标签一般成对出现,结束标签比开始标签多一个/

此外标签一般分为单标签与双标签HTML5学习简记(更新中~)_第1张图片


HTML基本骨架

HTML5学习简记(更新中~)_第2张图片 其中,HTML标签代表整个网页,head标签代表网页的头,它里面存放给浏览器看的内容,比如CSS,body代表网页的主体,用于存放给用户看的信息

这里也可以看出标签之间的关系共有两种:兄弟关系、父子关系


常见标签


标题标签

标题标签有6种,标签名为h1~h6

标签显示效果为

  • 文字加粗
  • 字号逐渐变小
  • 独占一行

HTML5学习简记(更新中~)_第3张图片

HTML5学习简记(更新中~)_第4张图片


 段落标签

标签名为p(双标签)

显示特点:

  • 独占一行
  • 段落之间存在间隙

HTML5学习简记(更新中~)_第5张图片


 换行与水平线标签

  • 换行:
    单标签
  • 水平线:
    单标签

 HTML5学习简记(更新中~)_第6张图片


 文本格式化标签

作用:为文本添加特殊格式,用于突出重点,例如加粗、倾斜、下划线、删除线等

HTML5学习简记(更新中~)_第7张图片

HTML5学习简记(更新中~)_第8张图片 HTML5学习简记(更新中~)_第9张图片


图像标签

标签名:img

标签属性src用于指定图像的位置 

除src属性外,img标签还有以下属性

HTML5学习简记(更新中~)_第10张图片

这里的width属性与height属性在改变时浏览器会自动等比例调整,这两个属性了解即可

HTML5学习简记(更新中~)_第11张图片


绝对路径与相对路径

绝对路径:在windows系统中是从磁盘开始的路径,在其他系统可能是从根目录开始的路径(统一使用/即可)

相对路径:从当前文件所在位置开始的路径


超链接标签

标签名:a

属性href用于指定跳转地址

如上图所示,target属性指定为_blank可以使得页面跳转是开启一个新页面而不是覆盖当前页面

在开发中如果暂时不清楚跳转地址的话可以将href属性值定位#


音频与视频标签

音频标签名:audio

HTML5学习简记(更新中~)_第12张图片

值得说明的是,这里因为属性值与属性名一样所以可以简写为属性名即可HTML5学习简记(更新中~)_第13张图片

 视频标签名video

HTML5学习简记(更新中~)_第14张图片

 


 列表标签

无序列表

标签:ul嵌套li,ul是无序列表,li是列表条目

 HTML5学习简记(更新中~)_第15张图片

注意ul标签里只能包裹li标签

但是li标签里可以包裹任意标签

有序列表

标签:ol嵌套li,ol是有序列表,li是列表条目

HTML5学习简记(更新中~)_第16张图片

 定义列表

定义列表通常用于一个网页的底部,如下图所示

HTML5学习简记(更新中~)_第17张图片

标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情

HTML5学习简记(更新中~)_第18张图片


表格标签 

        HTML5学习简记(更新中~)_第19张图片 

HTML5学习简记(更新中~)_第20张图片

HTML5学习简记(更新中~)_第21张图片


表格结构标签

作用:使用表格结构标签把内容划分区域,使得表格结构更加清晰,语义更清晰

注意这些标签是对浏览器说明的,只是加强语义 

HTML5学习简记(更新中~)_第22张图片

HTML5学习简记(更新中~)_第23张图片


合并单元格

HTML5学习简记(更新中~)_第24张图片

注意不能跨结构标签进行合并单元格 





    
    
    
    Document



    
姓名 语文 数学 总分
张三 99 100 199
李四 98 198
总结 全市第一

表单标签

作用:收集用户信息

标签名:form标签

在form标签里统一管理相关标签

使用场景:

  • 登陆页面
  • 注册页面
  • 搜索页面

input标签

HTML5学习简记(更新中~)_第25张图片




    
    
    
    Document


    文本框:
    

密码框:

单选框:

多选框:

文件上传:

HTML5学习简记(更新中~)_第26张图片


 input标签占位文本

即input标签中的placeholder属性




    
    
    
    Document


    文本框:
    

密码框:

HTML5学习简记(更新中~)_第27张图片


真正实现单选功能

HTML5学习简记(更新中~)_第28张图片

注意这里的checked属性在多选框中同样适用

HTML5学习简记(更新中~)_第29张图片

HTML5学习简记(更新中~)_第30张图片


上传多个文件

在原先的input标签中添加属性multiple即可一次上传多个文件

HTML5学习简记(更新中~)_第31张图片


下拉菜单标签

标签:select嵌套option,select标签是下拉菜单整体,option是下拉菜单的每一项

HTML5学习简记(更新中~)_第32张图片

其中selected属性是用于选定默认选择哪一项


文本域标签 

作用:多行输入文本的表单控件

标签:textarea

HTML5学习简记(更新中~)_第33张图片


label标签

作用:增大点击范围

HTML5学习简记(更新中~)_第34张图片




    
    
    Document


    
    


button标签

HTML5学习简记(更新中~)_第35张图片




    
    
    Document


    



HTML5学习简记(更新中~)_第36张图片


 无语义的布局标签

div标签

它是独占一行的

span标签

它是不换行的

HTML5学习简记(更新中~)_第37张图片


字符实体

概念上类似语言中的转义字符

HTML5学习简记(更新中~)_第38张图片

HTML5学习简记(更新中~)_第39张图片

  

你可能感兴趣的:(学习)