最新CSS基础教程

1、最新css基础教程网站开发人员=ui设计师+前端工程师+后端工程师html（结构）+css（样式）+js（行为）xhtml比html语法更为严格，主要体现在doctype写法、大小写敏感、属性b布尔值、属性引号、alt属性、标签的严格闭合等方面标签与属性的含义常见html标签：html文档的典型结构：注释：html语义化：按照网页中内容的语义挑选相应的标签频繁的标签：标题与段落：h与p标签文本修饰标签：strong、em、sub、sup、del、ins引用标签：blockquote、q、abbr、address、citepre与code标签：用于代码的输出标签：img属性：src、alt、wi

2、dth、height、title 跳转：标签：a、base属性：href、target、name锚点：+id、+name 特别符号：列表：无序列表：ul/dir/menu、li有序列表：ol、li定义列表：dl、dt、dd 表格：标签：table、tr、th、td、caption、thead、tbody、tfoot；属性：border、cellpadding、callspacing、rowspan、colspan、align、valign 表单：标签：form、input、select与option、textarea、label属性：action、method、type、name、value输

3、入类型：text、radio、checkbox、password、file、submit、button、reset 块标签：div，spanstrong和em标签都表示强调，表现形态为文本加粗和斜体；b和i标签同样也表示文本加粗和斜体。区分在于前者是具备语义化的，而后者是不具备语义化的。br与wbr：br是换行，wbr软换行，用于长单词的折行iframe嵌套页面：iframe元素会创建包含另外一个文档的内联框架（即行内框架），引入其他html页面到本html页面中显示属性frameborder：规定是否显示周围的边框width：定义iframe的宽度height：定义iframe的高度scro

4、lling：规定是否在iframe中显示滚动条src：规定在iframe中引入的urlsrcdoc：规定在iframe中显示的页面内容应用场景：数据传输、分享代码、局部刷新、第三方介入等map与area作用：定义一个客户端图像映射图像映射：带有可点击区域的一幅图像area元素永久嵌套在map元素的内部，area元素可定义图像映射中的区域。area元素的href属性定义区域的url，shape属性来定义区域的外形，coords属性定义热区的坐标。embed与object嵌入一些多媒体，如flash动画、插件等，基本用法没有太多差别，主要是为了兼容不同的扫瞄器。object元素需要协作param元

5、素一起完成。用法较少。audio与video标签（html5）audio标签嵌入音频文件、video标签表示侵入视频文件。默认空间是不显示的，可以通过controls属性来显示控件。为了能够支持多个备选文件的兼容支持，可以协作source标签用法文字注解与文字标签文字注解： ruby、rt文字方向：bdo或者direction css样式link标签的扩展引入css文件添加网址标题栏之前的小图标引入dns的解析meta标签添加一些辅助信息html5新语义化标签标签语义header页眉footer页脚main主体hgroup标题组合nav导航article主题自立的内容aside辅助信息sect

6、ion章节区域figure图像和视频figcaption对和视频的描述datalist智能选项列表details/summary文档详情/文档标题progress/meter定义进度条/定义度量范围time定义日期和时光mark带有标志的文本表格扩展内容功能标签/样式添加单线border-collapse: collapse躲藏空单元empty-cells: hide斜线分类border / rotate列分组colgroup / col表单的扩展内容美化表单控件：1、伪类 :checked 2、position+透亮度新的表单属性：属性功能autocomplete自动完成，可选值on、off

7、autofocus猎取焦点，可选值on、offrequired不能为空pattern正则验证method数据传输方式enctype数据传输类型name、value数据的键值对扩展标签：标签功能fieldset表单内元素分组legend为fieldset元素定义标题optgroup定义选项组外链转存失败,源站可能有防盗链机制,建议将保存下来挺直上传(img-vt1uxjdb-1578980584333)(前端的基本概念.assets/1578542553039.png)语法：扫瞄器前缀css去兼容不同的扫瞄器，针对旧的扫瞄器做兼容，新的扫瞄器基本不需要添加前缀扫瞄器内核前缀ietrident-m

8、s-firefoxgecko-moz-operapresto-o-chromewebkit-webkit-safariwebkit-webkit-opera、chromeblink长度单位像素px、百分比%、相对字体长度单位em样式的类型区分link与import：色彩表示法单词表示法：十六进制表示法：rgb表示法：透亮色彩：transparent提取色彩工具fehelpercss背景样式背景色彩：背景：背景的平铺方式：，其中背景的位置： ，其中背景随滚动条移动的方式：，其中利用背景实现视觉差效果：css3背景扩展样式：background-size：背景图的尺寸、cover笼罩、contai

9、n包含background-origin：背景图的填充位置、padding-box（默认）、 border-box、content-boxbackground-clip：背景图的裁切方式，padding-box、border-box（默认）、content-boxcss边框样式边框风格（border-style）：solid、dashed、dotted边框大小（border-width）边框色彩（border-color）单独设某一条边：绘制三角形：css文字样式font-family：字体类型，中文、西文，衬线体与非衬线体，注重适当添加引号font-size：字体大小，数值|xx-small

10、|x-small|small|medium|large|x-large|xx-largefont-weight：字体粗细，数值|normal|boldfont-style：字体样式，normal|italic|oblique，注重区分italic与obliquecolor：字体色彩css段落样式text-decoration：文本装点，underline|overline|line-through|nonetext-transform：文本大小写，lowercase|uppercase|capitalizetext-indent：首行缩进，数值表示，单位可以挑选px、em等text-align：文本对齐方式，left|right|center|justifyline-height：定义行高，行高=上边距+字体大小+下边距，上边距=下边距，默认行高与字体大小有关，肯定值（带单位）|比例值（不带单位）letter-spacing：字间距word-spacing：单词间距，针对西文折行：或者，注重二者区分css复合样式background、font、border、border-left，通过空格举行区别。font的格式：复合样式与单一样式不应当混合用法，复合样式会笼罩所包含的单一样式，假如非要混合用法一定要先写复合样