HTML5笔记

web入门

• HTML5笔记
• HTML
• • 标签语法
  • • 标签关系
    • 注释
    • 标题标签
    • 段落标签
    • 换行标签
    • 水平线标签
    • 文本格式化标签
    • 图像标签
    • 超链接标签
    • 多媒体标签
    • • 音频标签
      • 视频标签
      • 列表标签
      • • 无序列表
        • 有序列表
        • 定义列表
        • 表格标签
        • • 表格结构
          • 合并单元格
          • 表单标签
          • • input标签
            • 下拉菜单
            • 文本域
            • • label标签
              • 按钮标签
              • 无语义的布局标签
              • 字符实体

                HTML5笔记

                入门基础技术点

                html5 + css3 +移动web

                基础环境 ： 编辑器用vscode 浏览器用谷歌

                HTML

                概念：超文本标记语言 HyperText Markup Language

                超文本是链接

                标记 也叫标签带尖括号的文本

                标签语法

                1. 标签成对出现，中间包裹内容
                2. <> 里面放英文字母也就是标签名字
                3. 结束标签比开始标签多 /

                例如加粗文字

                要加粗的文字

                HTML 是骨架 网页模板 CSS是样式 js是交互

                骨架内容

                1. html ：整个网页
                2. head：网页头部，存放给浏览器识别的代码例如css代码
                3. body： 网页主体存放给用户看的代码，例如图片、文字
                4. title：网页标题

                vscode中快速生成骨架可以使用!+回车或则+tab

                标签关系

                父子关系(嵌套关系)

                兄弟关系(并列关系)

                html标签与head和body就是嵌套关系

                head与body就是并列关系

                注释

                格式：

                快捷键ctrl+/

                标题标签

                标签名：h1~h6（双标签，中间包裹内容）

                会有换行效果 ， 级别标题

                h1标签一般一个页面只出现一次 作为主标题或者网页logo

                h2~h6则可以多次使用

                段落标签

                标签名：p(双标签)

                效果：形成换行效果

                需要显示换行效果的文字
                  a
                需要显示换行效果的文字
                  b
                
                

                换行标签

                单标签:
                

                水平线标签

                单标签:

                ---

                文本格式化标签

                效果：突出重点

                常见格式：加粗、倾斜、下划线、删除线等

                标签名(自带强调意义)		效果
                strong	b	加粗
                em	i	倾斜
                ins	u	下划线
                del	s	删除线

                都是双标签

                图像标签

                单标签

                
                
                跳转到百度
                
                跳转到index
                

                多媒体标签

                音频标签

                属性	作用	特殊说明
                src ***	音频URL	mp3 、ogg、wav
                controls	显示音频控制面板	controls=“controls” 在html5中如果属性名和属性值完全一样可以简写为一个单词
                loop	循环播放	同上
                autoplay	自动播放	同上 (浏览器一般默认禁用此属性)

                视频标签

                双标签

                常见属性 : 与音频标签的controls loop autoplay 一样 支持MP4、WebM、Ogg格式 多出一个muted属性 : 静音播放 并且视频的autoplay需要配合着muted属性才能使用

                列表标签

                作用:布局内容整齐的区域

                三种格式 : 无序列表(多用)、有序列表、定义列表

                无序列表

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

                
                    
                条目1
                    
                条目2
                    ...
                
                

                有序列表

                标签名: ol 嵌套 li, ol是无序列表 ，li是列表条目

                
                    
                条目1
                    
                条目2
                    ...
                
                

                定义列表

                标签名: dl 嵌套 dt 和dd , dl是定义列表 ，dt是定义列表的标题，dd是定义列表的描述

                
                    
                标题1
                    
                描述1
                    
                描述1-2
                    
                标题2
                    
                描述2
                    ....
                
                

                表格标签

                标签：table嵌套 tr ，tr嵌套 td/th

                在网页中，table默认没有边框线，使用border属性可以为表格添加边框线

                标签名	作用
                table	表格
                tr	行
                th	表头单元格
                td	内容单元格

                表格结构

                用表格结构标签将内容划分区域，让表格结构更清晰

                标签名	含义	说明
                thead	表格头部	表头
                tbody	表格主体	主要内容
                tfoot	表格底部	信息汇总

                具体格式如下(因为一般表格结构是否添加对于视觉无伤大雅所以一般取消表格结构 直接采用表格标签)

                    
                
                        
                
                            
                
                                
                表头
                            
                        
                    
                
                        
                
                            
                内容1
                        
                    
                    
                
                        
                
                            
                汇总1
                        
                    
                    
                

                合并单元格

                跨行合并 添加属性rowspan (会保留最上列单元格)

                取值是数字表示需要合并的单元格数量

                跨列合并 添加属性colspan (会保留最左列单元格)

                取值是数字表示需要合并的单元格数量

                注意 : 不能跨结构合并

                表单标签

                表单一般用于登陆注册界面

                input标签

                属性	说明
                text	文本框
                password	密码框
                radio	单选框
                checkbox	多选框
                file	上传文件

                文本框属性: placeholder 提示文字(浅色文字)密码框也能用。

                单选框属性:name可以实现单选功能 将需要单选的选项标签中添加属性name 属性值自定义 相同的name属性值分为一组来实现单选功能; 如果想实现默认选中功能要添加属性checked 当然这个属性和属性值相同只需要添加checked即可

                upload file属性:如果要上传多个属性添加multiple属性即可

                **checkbox的默认选中:**同样是属性checked

                input不会换行

                下拉菜单

                标签：select 嵌套 option ，select是下拉菜单整体 ，option是菜单中的每一项。

                  	城市: 
                	
                        北京
                        上海
                        广州
                        深圳
                    
                

                默认显示属性: selected

                文本域

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

                特点是右下角可以放大缩小一般都会禁用，尺寸一般由css设置

                默认提示文字
                

                label标签

                作用：网页中，某个标签的说明文体，使用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。就像单选性别的时候点文字“男”或者“女”都能选中 支持很多表单控件

                写法一

                
                男
                

                写法二

                女
                

                按钮标签

                button

                按钮
                
                

                type属性	说明
                submit	提交按钮，提交数据到后台(默认功能)
                reset	重置按钮，表单恢复默认值
                button	普通按钮，默认没有功能，一般配合js使用

                注意: 所有表单控件都要写在表单区域from中 只有这样才能实现功能。

                
                    ...
                    ...
                
                

                无语义的布局标签

                作用：布局网页（划分网页区域，摆放内容）

                 独占一行
                

                • div 独占一行
                • span 不换行

                   不换行
                  

                  字符实体

                  作用：在网页中预留字符

                  空格		       
                  <       	<    
                  >       	">>