HTML基础入门知识总结

背景：参加软件设计比赛，选择了网页制作的方向，在前端的学习中，B站黑马Pink老师分享经验：知识被动的听最多只能掌握30%，而小组讨论，实践，与他人分享这种主动学习才能更高程度的掌握，所以整理成csdn，希望能把自己学的知识点分享出来（先听后看——动手练习——分享交流）
第一部分：基础概念
1.1什么是网页

• 网站：网页的集合
• 网页：网站中的一页，是构成网站的基本元素。由文字、视频、链接、图片等元素组成（网页通常是以html为后缀结尾的文件，所以俗称html文件）
  1.2什么是html
• 超文本语言，是用来描述网页的一种语言（不是编程语言，是标记语言，是一套标记标签）
• 超文本的两层含义：可以是图片、视频等，超出了文本限制；可以从一个文件跳转到另外一个文件，超级链接文本
  1.3网页生成制作
• 前端人员书写html代码，浏览器打开，就能看到网页了
  2.1五大浏览器
• chrome（谷歌）+IE(微软）+火狐（firefox)+Safari（苹果）+Opera
  3.1Web标准的构成
• 结构：对网页元素进行整理与分类（HTML）（身体）
• 表现：版式、颜色、大小等外观样式（CSS）（上色）
• 行为：交互（JS）（让小鸟有动作）
  第二部分：HTML
  1.1基本语法
• html标签是由尖括号<>包括的关键词，比如html
• html标签通常是成对出现，我们成为双标签，例如html \html,第一个称为开始标签，第二个称为结束标签
• 有些特殊标签是单个出现的，例如br /(最后加了斜杠，中间有个空格）
  1.2标签关系
• 包含关系
• 并列关系
  2.1骨架标签
• html根标签，小猪佩奇的全身
• head文件的头部（html文件也叫html文档，页眉的那一个位置）
• title文件的名字，被head包含，写在一行上
• body与head是并列关系,head结束后写body
  3.1用VSCode写HTML
• 新建文件，保存为.html格式
• 输入！生成页面骨架
• 右键点击Open In Default Browser生成页面
  3.2文档类型声明标签
• !DOCTYPE html文档类型声明标签，不是html标签，告诉浏览器页面采取html5来显示
• html lang="en"页面采用英文显示，zh-CN是页面采用中文显示
• meta charset="UTF-8"采取UTF-8显示，不写就会产生乱码
  4.1标签语义
• 标签的含义，在适当的位置放上适当的标签，可以使结构更加清晰
  4.2标题标签（变成标签）
• 标题一共六级选，文字加粗一行显
• 由大到小依次减h1-h6
  4.3段落标签（分段）
• 段落之间会自动保有一定空间
• p不用段落标签的在body内的换行等操作在浏览器中无法按照你想要的形式呈现
  4.4换行标签（强制换行）
• br /强制换行
  4.5文本格式化标签
• 加粗strong
• 倾斜em
• 删除线del
• 下划线ins
  4.6div与span标签（两者都无语义，都用来布局）
• div表示分区，是一个大盒子，一行只能有一个
• span表示跨行，是一个小盒子，一行可以有很多个
  4.7图像标签
• img src=“文件名”(图片要和网页放在一个位置）
• 替换文本(alt)图像显示不出来的时候用文字替换，直接接在img标签内即可
• 提示文本（title)鼠标放在图片上显示的文字
• 设置图像宽度（width)
• 设置图像高度（height)(一般来说，高度与宽度只设置一个，另外一个会等比例更改，避免失真）
• 设置图像边框（border)
• 注：以上三个均为单标签，尾部的/不要忘记，一个标签内一个/就可以
• 属性之间不分先后顺序，属性与属性之间以空格间隔
• 图片标签可以拥有多个属性，必须写在标签名后面
  4.8目录文件夹与根目录与路径
• 目录文件夹：就是一个普通文件夹，不过是里面装着网页制作所需要的一些照片、文本等
• 根目录：目录文件夹的第一层
• 相对路径：图片相对于html文件的位置；同一级路径（正常引用）：图片与html文件同一级；下一级路径（引用时要前置上一级的路径）：图片在文件的下一级；上一级路径（引用时前置…/):图片与html所在的文件夹同级
• 绝对路径：在src后面接图片在自己电脑中的位置（不常用）或者是完整的网络地址
  4.9超链接标签
• 语法格式a href=“跳转目标” target=“打开方式”>文本或者图像</a
• 跳转目标格式http://www.qq.com
• 打开方式：默认打开方式（_self)当前页面打开；在新的页面打开（_blank)
• 内部链接（网站内页面的相互链接）：跳转目标那里写文件名即可，不用在家http
• 空链接（还没建设好跳转目标：用#
• 下载链接（地址链接的是exe.zip等压缩包形式，地址写文件名即可
• 网页元素的链接（通过图等形式进入超链接）：在a之间加一个<图片的标签格式img src=“地址”>
• 锚点链接（在网页中快速定位到某个位置）：在要跳转地方的超链接href属性中前加一个#，然后在要跳转的地方标签中加一个id=“XX”
  4.9注释标签和特殊字符
• 注释格式!–xxx–（快捷键Ctrl+/)
• 特殊字符（一些符号不方便直接使用）：&nbsp；&It；&gt；
  5.1表格标签
• 表格不是用来布局页面的，是用来显示数据的
• 语法：table（表格）tr(一行）td(单元格）
• 表头单元格标签：th,会加粗居中显示
  5.2表格标签的属性（属性都要写在table标签中）
• align:表格的对齐方式
• border:是否有边框
• cellpadding:文字与边框之间的大小
• cellspacing:表格框与表格框之间的距离
• width/height:表格的高度与宽度
  5.3表格结构标签
• 为了使表格具有更好的语义
• thead标签表示表格的头部区域，tbody标签表示表格的主体区域
  -单元格合并三部曲：确定是跨行（rowspan)还是跨列(colspan)；找到目标单元格，写上合并方式=要合并的数量；删除多出来的单元格
  6.1列表标签
• 表格是用来显示数据的，列表是用来布局的，列表最大的特点就是整齐、有序
• 无序列表：ul与li，ul只能放li，放其他的文字与标签都是不合法的，但li里面放什么都可以
• 有序列表：ol与li，特性与ul和li是一样滴
• 自定义列表（上面一个小标题，下面很多围绕它的）：dl(定义列表）dt(项目名称）dd(围绕项目），dl中只可以有dt与dd
  6.2表单标签
• 表单的目的：收集用户信息
• 表单的组成：表单域；表单元素；提示信息
• 表单域（form）：包含表单元素。表单域中的信息会存储到后台处理
  6.3input表单元素
• 格式：input type=“属性” /(不同的属性值不同的效果）
• 文本框（text属性）：用户可以输入文字
• 密码框（password属性）：用户看不见输入的密码
• 单选按钮（radio属性）：可以实现单选，也可实现多选（圆框）
• 复选框（checkbox属性）：可以实现多选（方框）
• 除了type属性外，还有name,value,这两者主要是给后端人员看的，单选按钮和复选框要有相同的name，单选按钮加上name后就可以实现只能选一个的功能，value可以让文本框中自动显示文字
• checked属性，自动被勾选，checked=“checked”
• maxlength属性：规定最大的长度（这两个也属于type之外的属性）
• 提交按钮（submit)：点击此按钮可以将表单域内的数据上传到后台服务器，按钮的名称可以使用value进行更改
• 重置按钮（reset):将填写的内容还原到最初状态，value可以改变框框内的内容
• 普通按钮（button属性）：点击后不上传数据，后期结合js一起使用
• 文件域（file属性）：点击后可以上传文件
  6.4lable标签
• lable标签经常与input标签搭配使用，用于绑定一个表单元素，当点击lable标签的时候，可以直接在与其绑定过的表单元素中键入，提升用户体验
• 语法规则：lable for="",for属性应该与input中的id属性一致
  6.5select下拉表单
• 使用场景：有很多选择项
• 语法规则：select option
• 在option中定义selected=“selected”，即可设置默认选项
  6.6textarea文本域标签
• 使用场景：要键入很多内容的时候，使用文本框不太方便
• 语法规则：textarea
  6.7不同类型的默认
• 在文本框text中显示文字用value，在textarea标签中加文字即可
• 单选框和复选框使用checked="checked"即可
  7查阅文档
• 授之以鱼，不如授之以渔（经常查阅文档是一个非常好的习惯）
• 推荐：百度，M3C，MDN