详尽的前端笔记-前端教程

详细的前端注释，包括html和css部分，由. css部分：写入位置 1.内联样式将样式写入标签的style属性中。 该样式只会影响当前标签，不能重复使用。 后期维护不方便，不推荐。 2.内部样式 将样式表写入head中的样式标签中。 使用内部样式表进一步分离性能和结构。 可以同时为多个元素设置样式，方便后期维护。 3.外部样式表将样式表写入外部CSS中。 文件，然后通过link标签引入外部文件，将样式写入到外部样式表中。 不同页面可以使用相同的样式表，性能和结构完全分离，方便后期维护。 建议使用书写的方法。 位置1.内联样式将样式写入标签的style属性中。 该样式只会影响当前标签，不能重复使用该样式。 后期维护不方便，不推荐。 2.内部样式表编写样式表。 使用头部样式标签中的内部样式表，进一步分离性能和结构。 可以同时为多个元素设置样式，方便后期维护。 3.外部样式表。 将样式表写入外部CSS文件中，然后使用link标签引入外部文件，并将样式写入外部样式表中。 不同页面可以使用相同的样式表，性能和结构完全分离，方便后期维护。 推荐的方式是通过选择器使用基本语法选择器。 您可以在页面中选择一组元素，然后为它们设置样式。 元素选择器根据标签名称选择页面中的指定元素。 语法：标记名称 { } 示例：div{}p{}h1{}id 选择器根据元素的 id 属性值选择唯一的元素。 语法：#id {} 示例：#box1{} #hello{} 类选择器根据元素的类属性值选择一组元素。 语法：.class{} 示例：.hello{} .box{} 通配符选择器选择页面上的所有元素。 语法：*{} 通配符选择器的性能比较差。 尽量避免使用联合选择器来选择同时匹配多个选择器的元素。 语法：Selector 1 , Selector 2, Selector N{} 示例：div, p, #box,.hello{} 交集选择器可以选择满足多个条件的元素 语法：Selector 1 Selector 2 Selector N{} 示例：p .hello{ } 后代元素选择器选择指定元素的指定后代元素 语法：祖先元素 后代元素 {} 示例：div span {}div p{} 子元素选择器选择指定元素的指定子元素 语法：父元素 > 子元素{} 示例：div > span {}div > p{} 声明块。 声明块实际上是一个 CSS 声明。 每个 CSS 声明都是一种样式。 它实际上是结构名称和值之间的名称-值对。 使用：链接：左边是样式的名称：右边是样式的值。 每个语句都以； 示例颜色：红色； 字体大小：20px； 元素之间的关系 父元素直接包含子元素的元素称为父元素子元素 父元素直接包含的元素称为子元素。 直接或间接包含后代元素的祖先元素称为祖先元素。 父元素也是祖先元素。 后代元素。 祖先元素直接或间接包含的元素称为后代元素。 子元素也是后代元素。 兄弟元素具有相同父元素的元素称为兄弟元素。 块元素和行内元素。 块元素将在页面中占据一行，无论它包含多少内容。 通常，块元素用于布局页面。 常见的块元素~h6内联元素。 行内元素只占用自己的大小，不占用行。 内联元素也称为行内元素()。 一般来说，内联元素用于设置文本的效果。 常见的内联换行规则一般都是使用块元素来换行。 内联元素，而不是使用内联来包裹块元素。 a 元素可以包含除 a 本身之外的任何元素。 p 元素不能包含任何块元素。 伪类和伪元素。 伪类和伪元素用于表示该元素所在的特殊元素。 状态，或者特殊位置： link 代表普通链接（未访问过的链接）： 代表访问过的链接：悬停鼠标移动到的链接，也可以为其他元素设置悬停：正在被点击的链接，也可以为其他元素设置： focus 表示元素获得焦点的状态，一般用在文本框中:: 表示内容被选中的状态。 在Firefox中，使用::-moz-代替:first-表示第一个字符：first-line表示第一行文本：选中元素的前面一般与这些伪类结合使用，内容可以添加到指定位置 by：在被选元素的最后一条边之后一般和这个伪类配合使用，可以将内容添加到指定位置，通过添加一个内容属性选择器来根据元素的属性 [属性名称] 选择包含指定属性的元素 [属性名称=“属性值”] 选择属性值等于指定值的元素 [属性名称^=“属性值”] 选择属性值以指定内容开头的元素 [属性名称$=“属性值”] 选择属性值以指定内容结尾的元素 [属性名称*=“属性值”] 选择属性值包含指定内容的元素选择器 选择下一个同级元素 Previous + Next 选择以下所有同级元素 Previous ~ 以下所有子元素的伪类：first-child 查找父元素的第一个子元素，对所有子元素进行排序：last-child 搜索父元素的最后一个子元素，在所有子元素中排序：nth-​​child 在父元素中查找指定位置的子元素，在所有子元素中排序。 例如 p:nth-child(3) 可以使用 Even ，查找偶数个子元素，可以使用 odd 查找奇数子元素：first-of-type 查找第一个子元素指定类型的元素：last-of-type 查找指定类型的最后一个子元素：nth -of-type 搜索指定类型中的指定子元素。 对伪类取反，并从一组元素中删除符合要求的元素。 语法： :not (选择器) 示例： .abc:not (div) HTML，超文本标记语言 负责页面的结构并定义页面的各个组件。 HTML 以纯文本形式编写。 HTML 标签用于标识页面的不同部分。 标签成对出现。 自端标签属性可以通过属性来设置标签的效果。 属性需要在开始标签或结束标签中定义。 属性实际上是一组名称-值对。 示例：HTML 页面的基本结构。 常用标签。 网页的根标签。 网页中存在并且只有一个根标签。 所有内容都需要写在html标签内部网页的head中。 标签中的内容不会直接显示在网页中。 该标签用于帮助浏览器解析页面。 子标签用于设置网页的标题。 默认情况下，它将位于浏览器的标题中。 该栏目显示，搜索引擎检索网页时，主要会检索标题中的内容，这会影响页面在搜索引擎中的排名。 用于设置网页的元数据，如网页使用的字符集、设置网页的关键字、设置网页等。 描述请求重定向网页的主网页的所有可见部分都需要写在body中~ HTML中有六级标题标签。 六个级别的标题中，h1 最重要，h6 最不重要。 一般来说，只有h6是最重要的。 使用h1~h3h1的重要性仅次于标题。 浏览器也会主要搜索h1中的内容来确定页面的主要内容。 一般一页只能写一个h1。

段落标签

换行标签、横线标签、内联框架可以将其他外部页面属性引入到页面中。 src 是外部页面的地址。 您可以使用相对路径宽度，并且可以设置框架的宽度和高度。 名称可以为内嵌框架指定一个名称。 您可以设置该属性。 该值设置为超链接属性的值，这样当单击超链接时，页面将在相应的内联框架中打开。 内联框架中的内容不会被搜索引擎检索到，所以开发时尽量不要使用内联框架。 超链接可以使当前页面跳转到其他页面。 链接的文本属性href指向链接跳转的目标地址。 它可以是相对路径或#id 属性值。 这样，当点击超链接时，就会跳转到当前页面的指定位置，可以用来创建发送电子邮件的超链接。 指定在哪个窗口中打开链接。 可选值 _self 默认值，默认在当前窗口打开链接。 在新窗口中打开链接。 内联框架的 name 属性 值在指定的内联框架中打开链接。 注释语法 注释中的内容不会显示在页面上，而是显示在源代码中。 我们可以使用注释来解释网页的代码，也可以使用注释来隐藏页面中一些我们不想显示的部分。 内容实体的一些特殊符号不能直接在 HTML 页面中使用。 需要用实体来代替这些特殊符号。 实体也可以称为转义字符。 实体语法和实体名称； 常用的实体空间。 版权符号 © 图像标签

可以使用image标签向页面引入外部图片属性src，指向外部图片的路径。 当图片无法加载时，可以使用相对路径alt指定图片的描述。 搜索引擎主要利用该属性来识别图像的内容。 如果不写这个属性就意味着搜索引擎会收录该图片。 宽度设置图像的宽度。 设置图像的高度。 图像的格式是JPEG。 色彩丰富的图片，如照片、单色的GIF、简单的透明图片、动态图片色彩丰富的PNG图片、复杂的透明图片。 图片选择的原则是效果一致。 如果效果与小的不一致，可以使用效果好的相对路径相对于当前资源所在目录的路径。 可以使用../返回一级目录。 要返回多个级别，请使用多个 ../xHtml 语法规范。 1. HTML不区分大小写，但尽量使用小写。 2. HTML注释不能嵌套。 3. 标签必须具有完整的结构或成对出现或自结束标签。 4.标签可以嵌套，但不能交叉嵌套。 5.属性必须有一个值，并且该值必须用引号引起来。 单引号和双引号都可以作为文字标签，表达强调的语气，表明内容的重要性。 简单的斜体表示简单的粗体来表示细节。 详情等内容表示参考内容。 添加任何书名。 您可以使用引用短引用、内联引用长引用、块级引用上标和下标删除的内容和插入的内容。

预格式化标签可以保留代码中的空格和换行符。 这些格式代表程序代码列表。 无序列表使用 ul 创建无序列表，并在列表中使用 li 表示列表项。 无序列表使用符号作为有序列表的项目符号。 ol 创建无序列表，列表中使用 li 表示列表项，使用有序序号作为项目符号来定义列表，列表的相关元素都是块元素，并且可以相互嵌套移除项目符号列表样式：无