2、html
html是html文档的整体，也就是表示一个网页。
html中的lang="en"是定义该文件语言是英文
3、head
head是html的第一层子元素【子标签】，负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏中。即title标签。
4、meta
meta是html语言head标签中的一个辅助性标签，该标签不包含任何内容，但是该标签的属性定义了与文档相关联的名称，比如：编码
5、body
body也是html的第一层子元素，我们页面中显示的所有内容全部都是编写在该标签体中。
四、Html文档规范
html制定了文档的编写规范，必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来
五、Html注释
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。
注释的语法：
六、html基本属性
注：属性是标签的辅助作用。
属性 描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片
1.bgcolor
设置网页的背景颜色
html的属性
2.路径
我们在开发网页时，需要经常的插入图片、视频、文件等一些操作，但是我们需要指定文件所在的位置，这个位置就是所谓的路径
路径分为：
相对路径 指目标相对于当前文件的路径，网页结构设计中多采用这种方式来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下： ./ ：代表文件所在的目录（可以省略不写）../ ：代表文件所在的父级目录../../ ：代表文件所在的父级目录的父级目录/ ：代表文件所在的根目录【/ ： 可以理解为目标文件的绝对路径】绝对路径 指目标文件的完整路径，从盘符开始。3.background
设置网页的背景图片
html的属性
注意事项：
bgcolor和background不能同时使用
background不能指定绝对路径
七、Html标签1.网页的组成
网页的组成：文字、图片、视频、超链接、列表、表格、表单等组成。
2、文本段落标签
标签 描述 hn 设置文字标题【n：取值范围 1~6】 center 居中对齐 hr 水平线 属性（width：宽度 color：颜色 size：粗细） br 换行 p 段落
3、文本控制标签
标签 描述 font 设置字体，需要借助属性设置
属性 描述 color 设置字体颜色 size 设置字体大小，不需要带单位，取值范围：1~7【浏览器默认值：3】 face 设置字体风格
4、文本格式化标签
标签 描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字
Html文本格式化标签
粗体文本
倾斜文本
着重文本
小号字
加重语气
上标
下标
插入字
删除字
5、图片标签
在Html中，图像由
标签定义。
是空标签，意思是说，它只包含属性。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。
标签 描述 img 图片标签
属性 描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本
注意事项：不建议设置图片大小，容易失真
6、audio
在Html中，声音由标签定义。
标签 描述 audio 声音标签
属性 描述 src 指定声音地址
7、video
在Html中，视频由video标签定义
标签 描述 video 视频标签
属性 描述 src 指定视频地址
8、超链接
a标签定义超链接，用于从一个页面链接到另一个页面。
a标签最重要的属性是href，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
语法：
点击内容
属性 描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式 属性值 描述 _blank 新窗口打开【常用】_parent 在父窗口中打开链接【了解】 _self 默认，在当前窗口打开【了解】 _top 在当前窗体打开链接，并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】
超链接分类：
9、列表
列表的使用与word等软件的列表概念相似，只不过是应用在网页展示中。
1.有序列表
有序列表是指有数字编号或字母的列表项，可以使用css定义更多样式。
- 新闻一
- 新闻二
- 新闻三
属性 描述 type 设置符号类型 值：1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】
- 新闻一
- 新闻二
- 新闻三
2、无序列表
无序列表是指没有数字编号或字母的列表项，可以使用css定义更多样式。
- 童装
- 男装
- 女装
属性 描述 type 用于设置符号类型，默认：实心圆 值：空心圆、正方形 【用于ul、li】
- 童装
- 男装
- 女装
3、描述列表
描述列表指每个列表项有单独的标题。
- 开源产品
- Java封装库
- Web组件库
- 网站导航
- mrliujava.com
- mrliuweb.com
10、表格
表格在网页开发中使用频率非常高，尤其是数据展示的时候。
10.1 基本使用
标签 描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部
属性 描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式
员工薪资统计表
序号
姓名
性别
职位
薪资
1
狗蛋
男
JavaEe工程师
8780
2
黑妞
女
Web前端工程师
9750
3
傻蛋
妖
测试工程师
996
当前页：1 页
上一页
下一页
尾页
共 3 页
10.2 单元格合并
属性 说明 rowspan 行合并 colspan 列合并
下面是行合并：
员工薪资统计表
序号
姓名
性别
职位
薪资
1
狗蛋
男
JavaEe工程师
8780
2
黑妞
女
9750
3
傻蛋
妖
测试工程师
996
当前页：1 页
上一页
下一页
尾页
共 3 页
下面是列合并：
员工薪资统计表
序号
姓名
性别
职位
薪资
1
狗蛋
男
JavaEe工程师
8780
2
黑妞
女
Web前端工程师
9750
3
傻蛋
测试工程师
996
当前页：1 页
上一页
下一页
尾页
共 3 页
11、表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。
11.1 基本使用
表单需要使用表单标签来设置：
input元素
11.2 GET&POST
属性 说明 action 后台地址 method 提交方式GET或POST
GET和POST区别：
1.GET
2.POST
11.3 LABEL
使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。
也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。
11.4 INPUT
文本框用于输入单行文本使用，下面是常用属性与示例。
属性 说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型 比如:.jpg capture 使用麦克风\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera
11.4.1 基本示例
11.4.2 调用摄像头
当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.
11.4.3 其他类型
通过设置表单的type字段可以指定不同的输入内容.
类型 说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮
11.4.4 HIDDEN
隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.
11.4.5 SUBMIT
创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.
a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.
b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.
11.4.6 禁用表单
通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端
11.4.7 PATTERN
表单可以通过设置pattern属性指定正则验证.
属性 说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件
11.4.8 TEXTAREA
文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.
属性 说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)
11.4.9 SELECT
下拉列表项可用于多个值中的选择.
属性 说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值
11.4.10 RADIO
单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密 只能选择一个.
属性 说明 checked 选中状态
11.4.11 CHECKBOX
复选框指允许选择多个值的表单
属性 说明 checked 选中状态
11.4.12 FILE
文件上传有很多方式,可以使用插件或者JS拖放上传处理.Html本身也提供了默认的上传功能,只是上传效果并不是很美观.
属性 说明 multiple 支持多选 accept 允许上传类型.png , .psd 或者 image/png , image/gif
11.4.13 日期时间
属性 说明 min 最小时间 max 最大时间 step 间隔: date缺省是1天 week缺省是1周 month缺省是1月
a.日期选择
日期选择
b.周选择
周选择
c.月份选择
月选择
d.日期与时间
日期与时间
11.4.14 DATALIST
input表单的输入值选项列表
12、框架集
frameset元素可定义一个框架集。它被用来组织多个窗口（框架），每个框架存有独立的文档，在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行，您必须使用cols或rows属性。
注意事项：由于是分割原网页，所以我们不能在body中进行编写，在head中进行分割。
标签 说明 frameset 框架集 frame 框架
属性 说明 cols 定义框架集中列的数目和尺寸 rows 定义框架集中行的数目和尺寸 frame border 去除框架边框 scrolling 去除滚动条
12.1 垂直框架
Html垂直框架
12.2 水平框架
Html水平框架
12.3 混合框架
Html混合框架
12.4 导航框架
Html美女
Html野兽
Html动物
Html链接
美女图片
野兽图片
动物图片
Html垂直框架
13、内联框架
iframe元素会创建包含另外一个文档的内联框架。
属性 说明 align 对齐方式，后期采用css的方式进行设置 width 设置宽度 height 设置高度 src 设置iframe中显示的文档的URL name iframe的名称 scrolling 是否显示滚动条 frameborder 设置iframe的边框
Html内联框架
css button自动调整位置_20个 CSS 快速提升技巧
如何提升你的CSS技能，掌握这20个css技巧即可[完整版] _ Web秀
本文涵盖了20个css技巧，可以解决许多工作中常见的问题。
1、使用CSS重置（reset）
css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。
大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。
使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。
2、继承盒模型
让盒模型从html 继承：
3、使用flexbox布局来避免margin的问题 （Get Rid of Margin hacks width Flexbox）
当你多少次试着去设计栅格布局如：组合或者图片画廊，如果使用浮动的方式，那么就需要去清除浮动和重置外边距来使其分解成所需要行数。为了避免nth-、first-、last-child 问题 ，可以使用flexbox 的space-between 属性值。
4、使用:not() 解决lists边框的问题
在web设计中，我们通常使用：last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。比如说一个导航菜单，通过使用borders 来给每个链接Link创建分割符，然后再在加上一条规则 解除最后一个link的border
这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：
上面就是，除了最后一个li以外，所有的 .nav li 都加上了border样式，是不是很简单！
当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有语义化（semantic）和容易理解的。
5、body上加入line-height样式
导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。
行间距（line-height）可以作为给你的整个项目设置的一个属性，不仅可以减小代码量，而且可以让你的网站的样式给一个标准的外观
请注意，这里的声明没有单位，我们只是告诉浏览器 让它渲染行高是 渲染字体大小的1.5倍
6、垂直居中任何元素 (vertical-center anything)
在没有准备使用CSSGrid 布局的时候，设置垂直居中布局的全局规则是一个很好的方式，可以为优雅（elegantly）的设置内容布局奠定一个基础
7、使用SVG icons
SVG使用于所有分辨类，并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件 丢弃。FontAwsome5中 也提供了SVG的图标字体。设置SVG的格式就跟其他图片类型一样：
温馨提示：如果将SVG用在可交互的元素上比如说button，SVG 会产生无法加载的问题。可以通过下面这个规则来确保SVG可以访问到（确保在HTML中已设置适当的aria属性）
8、使用 “OWL选择器”
使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则
这是一个很棒的技巧，可以帮你创建更加均匀的类型跟间距。在上面的列子中，跟在其他元素后面的元素，比如说H3后面的H4，或者一个段落之后的一个段落，他们之间至少1.5rems的间距（大约为30px）
9、一致的垂直结构（Consistent Vertical Rhythm）
一致的垂直节奏提供了一种视觉美学，使内容更具可读性。如果owl选择器过于通用，请在元素内使用通用选择器（*）为布局的特定部分创建一致的垂直节奏：
10、对更漂亮的换行文本使用 box-decoration-break
假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个大块。Box Decoration Break属性允许您仅对文本应用样式，同时保持填充和页边距的完整性。
如果要在悬停时应用突出显示，或在滑块中设置子文本样式以具有突出显示的外观，则此功能尤其有用：
内联块声明允许将颜色、背景、页边距和填充应用于每行文本，而不是整个元素，克隆声明确保将这些样式均匀地应用于每行。
11、等宽表格单元格
表格可能很难处理，所以尝试使用table-layout：fixed来保持单元格相等宽度：
12、强制使用属性选择器显示空链接
这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。例如，元素没有文本值，但href属性有一个链接：
13、样式“默认”链接
说到链接样式，您可以在几乎每个样式表中找到一个通用的A样式。这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。
尝试这种较少干扰的方式为“默认”链接添加样式：
14、比率框
要创建具有固有比率的框，您需要做的就是将顶部或底部填充应用于div：
使用20％进行填充使得框的高度等于其宽度的20％。无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％= 5：1）。
15、风格破碎的图像
这个技巧不是关于代码缩减，而是关于细化设计细节的。破碎的图像发生的原因有很多，要么不雅观，要么导致混乱（只是一个空元素）。用这个小小的CSS创建更美观的效果：
16、使用rem进行全局大小调整；使用em进行局部大小调整
在设置根目录的基本字体大小后，例如html字体大小：15px；，可以将包含元素的字体大小设置为rem:
然后将文本元素的字体大小设置为em
现在，每个包含的元素都变得分区化，更易于样式化、更易于维护和灵活。
17、隐藏未静音的自动 视频
当您处理无法从源代码轻松控制的内容时,这对于自定义用户样式表来说是一个很好的技巧。这个技巧将帮助您避免在加载页面时自动 视频中的声音干扰访问者，并再次提供了精彩的：not（）伪选择器：
18、灵活运用root类型
响应布局中的字体大小应该能够自动调整到视区，从而保存编写媒体查询的工作，以处理字体大小。可以使用:not和视区单位，根据视区高度和宽度计算字体大小：
现在，您可以使用根em单位，该单位基于:not：
结合上面的rem/em技巧以获得更好的控制。
19、在表单元素上设置字体大小，以获得更好的移动体验
为了避免移动浏览器（iOS Safari等）在点击下拉列表时放大HTML表单元素，请在添加font-size样式：
20、CSS变量
最后，最强大的CSS级别来自于CSS变量，它允许您声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。你可能有一套颜色在整个项目中使用，以保持一致性。
在CSS中反复重复这些颜色值不仅是件烦人的事情，而且还容易出错。如果某个颜色在某个时刻需要改变，你就不得不去寻找和替换，这是不可靠或不快速的，当为最终用户构建产品时，变量使得定制变得容易得多。例如：
最后，如果觉得好的话，不要忘记点个收藏或者赞同哦~还可以添加我的vx:jgxiaokeai~加入前端技术交流群与千位大咖一起交流学习哦~
