网站开发人员=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、width、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输入类型：text、radio、checkbox、password、file、submit、button、reset … 块标签：div，span

 

　　strong和em标签都表示强调，表现形态为文本加粗和斜体；b和i标签同样也表示文本加粗和斜体。区别在于前者是具备语义化的，而后者是不具备语义化的。

 

　　br与wbr：br是换行，wbr软换行，用于长单词的折行

 

　　iframe嵌套页面：

 

　　iframe元素会创建包含另外一个文档的内联框架（即行内框架）

 

　　，引入其他html页面到本html页面中显示

 

　　属性

 

　　frameborder：规定是否显示周围的边框width：定义iframe的宽度height：定义iframe的高度scrolling：规定是否在iframe中显示滚动条src：规定在iframe中引入的urlsrcdoc：规定在iframe中显示的页面内容

 

　　应用场景：数据传输、共享代码、局部刷新、第三方介入等

 

　　map与area

 

　　作用：定义一个客户端图像映射

 

　　图像映射：带有可点击区域的一幅图像

 

　　area元素永远嵌套在map元素的内部，area元素可定义图像映射中的区域。area元素的href属性定义区域的url，shape属性来定义区域的形状，coords属性定义热区的坐标。

 

　　embed与object

 

　　嵌入一些多媒体，如flash动画、插件等，基本使用没有太多差别，主要是为了兼容不同的浏览器。object元素需要配合param元素一起完成。使用较少。

 

　　audio与video标签（html5）

 

　　audio标签嵌入音频文件、video标签表示侵入视频文件。

 

　　默认空间是不显示的，可以通过controls属性来显示控件。

 

　　为了能够支持多个备选文件的兼容支持，可以配合source标签使用

 

　　文字注解与文字标签

 

　　文字注解： ruby、rt

 

　　文字方向：bdo或者direction css样式

 

　　link标签的扩展

 

　　引入css文件

 

　　添加网址标题栏之前的小图标

 

　　引入dns的解析

 

　　meta标签

 

　　添加一些辅助信息

 

　　HTML5新语义化标签

 

　　标签语义header页眉footer页脚main主体hgroup标题组合nav导航article主题独立的内容aside辅助信息section章节区域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、offautofocus获取焦点，可选值on、offrequired不能为空pattern正则验证method数据传输方式enctype数据传输类型name、value数据的键值对

 

　　扩展标签：

 

　　标签功能fieldset表单内元素分组legend为fieldset元素定义标题optgroup定义选项组

 

　　[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vt1UxJDB-1578980584333)(前端的基本概念.assets/1578542553039.png)]

 

　　语法：

 

　　浏览器前缀

 

　　CSS去兼容不同的浏览器，针对旧的浏览器做兼容，新的浏览器基本不需要添加前缀

 

　　浏览器内核前缀IETrident-ms-FirefoxGecko-moz-OperaPresto-o-ChromeWebkit-webkit-SafariWebkit-webkit-Opera、ChromeBlink

 

　　长度单位

 

　　像素px、百分比%、相对字体长度单位em

 

　　样式的类型

 

　　区别link与@import：

 

　　颜色表示法

 

　　单词表示法：

 

　　十六进制表示法：

 

　　rgb表示法：

 

　　透明颜色：transparent

 

　　提取颜色工具FeHelper

 

　　CSS背景样式

 

　　背景颜色：背景图片：背景图片的平铺方式：，其中背景图片的位置： ，其中背景图片随滚动条移动的方式：，其中

 

　　利用背景实现视觉差效果：

 

　　CSS3背景扩展样式：

 

　　background-size：背景图的尺寸、cover覆盖、contain包含

 

　　background-origin：背景图的填充位置、padding-box（默认）、 border-box、content-box

 

　　background-clip：背景图的裁切方式，padding-box、border-box（默认）、content-box

 

　　CSS边框样式

 

　　边框风格（border-style）：solid、dashed、dotted边框大小（border-width）边框颜色（border-color）

 

　　单独设某一条边：

 

　　绘制三角形：

 

　　CSS文字样式

 

　　font-family：字体类型，中文、西文，衬线体与非衬线体，注意适当添加引号font-size：字体大小，数值|xx-small|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的格式：

 

　　复合样式与单一样式不应该混合使用，复合样式会覆盖所包含的单一样式，如果非要混合使用一定要先写复合样式再写单一样式

 

　　ID选择器

 

　　ID在一个页面内是唯一的，符合标识符命名规则，可选择驼峰写法、下划线写法、短线写法，遵守约定俗成的命名惯例。

 

　　快捷键：div#aaa+tab

 

　　CLASS选择器

 

　　class可以复用，可以组合，css文件或style标签中顺序决定优先级（而不是class中顺序），CLASS选择器可以与标签选择器混合使用。