web前端开发技术

结构

1.<title>定义了文档的标题，该标题将显示在浏览器的标题中，收藏夹和搜索页面使用其作为标题

2.<base>描述了页面中的所有超链接的默认地址和默认目标。有两个关键属性：注意属性的值要用双引号圈起来

3.<link>通常用来说明css文档

4.<meta>用来描述文档的元信息。其中的值有，内容content，需要关联到http协议的http-equiv，还有名称name。

5.<script>用来定义javascript脚本

6.<style>标签用于为 HTML 文档定义样式信息。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 \"text/css\"。

头部区域标签

编写方法

HTML基础

段落和换行标签

<strong> 标签：和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。浏览器通常会以不同于 <em> 标签的方式来显示 <strong> 标签中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了

em：em标签的作用是告诉浏览器把其中的文本表示为强调的内容。语法格式为“需要强调的内容”，对于所有浏览器来说，这意味着要把这段文字用斜体来显示

span：是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。

HTML中注释格式：<!-- 被注释的内容 -->

空格、特殊字符的输入及注释

常用文本标签

header:该标签用于定义页面或内容区域的头部消息

article:用于表示页面中一块独立的、完整的相关内容块，可独立与页面其他内容使用

section:用于对页面上的内容进行分块，例如将文章分为不同的章节、页面内容分为不同的内容块

nav:用于定义页面上的各种导航条，一个页面中可以拥有多个nav标签，作为整个页面或不同部分内容的导航.

aside:用于定义当前页面或当前文章的附属信息部分，可以包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条等内容，通常放在主要内容的两侧，因而也称侧边栏内容。

footer：主要用于为页面或某篇文章定义脚注内容，包含了于页面、文章或是部分内容有关的信息，比如文章的作者或者日期，页面的版权、使用条款和链接等内容

文档结构标签

设置背景音乐<bgsound><bgsound src=\"路径/文件名称\" loop=\"循环次数\"><--loop默认情况下，背景音乐播放一次；如果取值为-1，则表示背景音乐循环不断地播放-->嵌入音视频文件<embed><embed src=\"路径/文件名称\"></embed>属性     说明src      文件路径width    以像素为单位定义嵌入式对象的宽度height   以像素为单位定义嵌入式对象的宽度loop     设置嵌入式对象的播放是否循环不断，取值true时循环不断，否则只播放一次，默认值是falsehidden   设置多媒体播放软件的可视性，默认值是false

插入多媒体内容

<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。用法：<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

列表、div标签和元素类型

<a></a>标签表示超链接，可以跳转到指定网页和位置

超链接

<table></table> 定义表格<tr></tr> 定义行<th></th> 定义表头<td></td> 定义单元格<caption></caption> 定义表格标题

表格有两种线：边框(border)与分割线(rules)属性边框(border)<table border=\"3\

表格

创建表单

HTML

font-style：字体（斜体）font-variant ：字体的变化（大小写）font-weight ：字体粗细font-size：字体大小font –family：字体名称

字体属性

border-radius：创建圆角边框box-Shadow：附加一个或者多个下拉框的阴影border-image（不支持IE）：使用图像创建一个边框

边框属性

  1、尺寸属性（width height）  2、边框属性 （border）  3、文本格式化属性 （font-size color …）  4、背景属性 （background）  5、框模型属性（margin不能用在 td 上，只能用在 table 上）  6、vertical-align：top / center / bottom 

表格属性

主要包含颜色color、对齐方式text-algin、修饰效果text-decoration，行高line-height显示相关属性text-shadow：适用于文本阴影，可以指定是水平阴影还是垂直阴影、模糊的距离以及阴影的颜色。box-shadow：适用于盒子阴影。可以在::after和::before两个伪元素中添加阴影效果。text-overflow：文本溢出属性指定应向用户如何显示溢出内容有两个属性：ellipsis（以省略号的形式隐藏内容）和clip（直接截断内容）word-wrap：强制换行，但是单词中间不换行word-break：单词可进行拆分然后换行

文本相关属性

显示相关属性

background-image：添加背景图片。不同的背景图像和图像用逗号隔开。background-size：指定背景图像的大小，可指定像素或者百分比的大小，是相对于父元素的宽度和高度的百分比的大小。background-origin：指定了背景图像的位置区域background-clip：背景裁剪属性是从指定位置开始绘制。

背景属性

动画属性

css常用属性

Margin：外边距，清除边框外的区域，外边距是透明的。Border：边框，围绕在内边距和内容外的边框。Padding：内边距，清除内容周围的区域，内边距是透明的。Content：盒子的内容，显示文本和图像

盒子模型

float:left或者right或者none或者inheritleft：让元素向左浮动right：让元素向右浮动none：让元素不浮动inherit：让元素从父级继承浮动属性

clear属性值：left 在左侧不允许浮动元素。right 在右侧不允许浮动元素。both 在左右两侧均不允许浮动元素。none 默认值。允许浮动元素出现在两侧。inherit 规定应该从父元素继承 clear 属性的值。

清除浮动

浮动排版

定位排版

网页元素css排版

CSS 

web前端开发技术