一、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设置边框宽度