HTML笔记

一、HTML是什么？
Hyper Text Markup Language，超文本标记语言。
用标记这种特殊的语法结构来描述包含但并不限于文本的信息。
二、HTML的结构？
一个HTML文件由一个HTML标签组成
一个HTML标签由head标签和body标签组成
head标签主要描述网页中的不可见的信息，例如网页编码格式、网页搜索关键字、网页标题、网页标题图标
body标签用来描述网页中的主体内容信息
三、标记的组成部分?
标签的基本语法:
<标签名称 属性名称="属性值" 属性名称="属性值" 属性名称="属性值">内容</标签名称>
例如：

<img width="200px" height="100px"/>

四、head中常用的标签
tltle:双标签 描述网页的标题
meta:单标签 用来网页关键字，描述网页编码格式
五、html中常用的标签
标签从写法上可以分为两类:单标签  双标签
标签从布局上可以分为行级元素和块级元素
行级元素:会从上到下从左到右依次排列，如果超出一行的宽度会自动切换到下一行
块级元素:每一个块级元素都会单独占据一行

• 文字标签:

          font:双标签 行级标签 描述文字信息 提供了一些相应的属性可以用于修改文字显示效果 size属性表示文字大小
           属性中size表示文字大小  face表示文字字体  color表示文字颜色
          span:双标签 行级标签 描述文字信息 不能通过属性修改文字样式 span标签通常作为标准文字容器来使用
          i:双标签 行级标签 描述文本信息  使用斜体来修饰文字
          b:双标签 行级标签 描述文字信息  使用粗体来修饰文字
          u:双标签 行级标签 描述文字信息  使用下划线修饰文字
          h1-h6:双标签 块级标签 描述文字信息 描述标题内容文字更大而且加粗
          p:双标签 块级元素 描述文字信息  描述一段文字没有任何文字样式
    

• 图片标签:

    img:单标签 行级标签 展示图片
          属性中 src表示图片地址 width表示图片在浏览器中显示的宽度 height表示图片在浏览器中显示的高度
          alt图片加载失败时对应的提示文字  align设置图文混排时文字和图片的对齐方式

• 超链接标签:

          a:双标签 行级标签 提供一个跳转页面的可点击的文字
          属性中 href表示的是跳转的目标地址 target跳转之后的页面在什么地方展示
          锚链接:跳转到当前页面的某个位置
          跳转到其他页面:跳转到当前项目的其他页面,在跳转到其他页面时可以使用target指定新页面展示的窗口,_blank表示新窗   体,_parent表示当前窗体跳转到互联网的一个网址,需要在href中写完整的网页地址
          跳转到其他页面的某个位置:在地址后添加#锚点的名称,可以跳转到目标页面的某个具体位置

• 换行标签:

          br: 单标签 br后面的标签会出现在下一行

• 水平线:

          hr: 单标签 块级 显示一条水平线

• 列表标签:

          ul: 无序列表 双标签 块级标签 一个无序列表的外层容器 每个列表项前会出现一个不分先后的标记
          ol: 有序列表 双标签 块级标签 一个有序列表的外层容器 每个列表项前会出现一个代表先后次序的标记    
          li: 列表项  双标签 块级元素 描述一个列表项信息
          dl: 自定义列表容器 双标签  块级 自定义列表标签容器
          dt: 自定义列表标题
          dd: 自定义列表内容

• 表格:

          table:双标签 块级元素 作为表格的外层容器
          tbody:双标签 表格的主体内容容器 无论table中有没有写tbody标签tr都是属于tbody的子标签
          tr:双标签 表示表格中的一行
          td:双标签 行级元素 表示一个普通的单元格
          th:双标签 行级标签 表示一个标题单元格

• 表单及表单控件:

          form:双标签 块级 表示一个表单 在表单中需要使用action属性指定表单的提交地址    使用method属性可以指定提交方式
          get提交方式和post提交方式最根本的区别在于传递数据的方式不同,get提交方式是将数据追加到请求后通过键值对传参数,post提交方式参数保存在了请求头信息中
          get提交方式提交的参数量小,速度较快,地址栏可见
          post提交方式提交的参数量大,速度较低,地址栏不可见
    

•     input:单标签 行级标签  表示输入框控件

          根据input标签type属性的不同可以将input分为如下控件
          input标签中的name属性表示该数据提交到服务器时对应的键
          input标签中的value属性表示该输入框的值
          input标签中的placeholder表示输入框的提示文字    
          文本框:type="text" 输入明文的文字    
          密码框:type="password" 输入使用*替换显示的文字
          单选框:type="radio" 通常用来选择性别 在单选框中使用name属性将多个单选框定义为一组单选框 使用value属性保存单选框的值 使用checked="checked"设置单选框默认选中  

          多选框:type="checkbox" 在多选框中使用name属性将多个多选框定义为一组单选框 使用value属性保存多选框的值 使用checked="checked"设置多选框默认选中
          隐藏域:type="hidden" 不在页面显示的一个控件 主要用于提交一些不想让用户看到的数据
          文件域:type="file" 选择本地文件上传到服务器
          普通按钮:type="button" 点击之后没有任何特殊效果
          重置按钮:type="reset"  点击之后将表单中的所有表单控件还原为初始状态
          提交按钮:type="submit" 点击之后将表单提交到目标地址
          图片提交按钮:type="image" 用图片作为一个提交按钮
          select:双标签 行级标签 下拉框控件 name属性是提交数据时的键
          option:双标签 下拉框选项控件 option标签中value表示选项的值如果没有定义value会提交option的文本内容 使用otpion的                       selected="selected"将该option设置为选中
                    textarea:双标签  行级标签 多行文本域

• 框架集和框架:

          frameset:框架集 将现有窗口拆分成N个部分 必须写在head和body之间
          拆分之后的每一个子窗体需要使用frame标签引入目标页面
          rows属性可以纵向的将大窗体拆分成多个小窗体
          cols属性是横向的将大窗体拆分成多个小窗体
          border属性设置框架集的边框宽度
          例如:rows="20%,50%,*" 拆分成上中下三个窗体 高度占比分别是20%,50%,30%  cols="20%,*" 拆分成左右两个窗体 宽度占比分别是20%，80%    
          frame:单标签 引入一个页面显示到某个窗体上
          src表示该窗体引入的页面地址
          noresize设置当前窗体的大小不可调整
          name窗体名称属性 可以将一个超链接的target属性设置为某一个窗体的name          属性值，设置之后点击超链接打开的新页面会在目标窗体展示
          iframe:双标签 在网页的任意位置引入其他的页面
          src引入的页面地址
          frameborder设置边框宽度