详细的后端笔记，包括html和css部分，xmind8做的笔记。 css部分：写在哪里 1.内联样式 将样式编译到标签的style属性中。 这些样式仅适用于当前标签css 父节点，并且不能重复使用该样式。 不方便后期维护。 不建议使用 2. 内部样式 table 将样式表编译到 head 中的样式标签中，并使用内部样式表进一步将呈现与结构分离。 可以同时为多个元素设置样式，方便后期维护。 3.外部样式表将样式表编译到外部CSS文件中，然后通过链接标签“href=”文件路径”/>将外部文件导入到css中将样式编译到外部样式表中，即可使用样式表放在不同的页面，并且呈现和结构完全分离，方便后期维护，推荐的编译位置方法 1.内联样式 将样式编译到标签的 style 属性中，这些样式只对当前有效标签，不能复用样式，后期维护不方便，不推荐 2、使用内部样式表，将样式表编译成head中的样式标签，使用内部样式表，进一步将性能与性能分离结构，可以同时为多个元素设置样式，方便后期维护 3、外部样式表将样式表编译成外部CSS文件，然后通过外部文件导入到css中link标签" href="文件路径"/> 将样式编译成外部样式表，不同页面可以使用同一个样式表，完全性能和结构分离，方便后期维护。 推荐的方法是使用基本句型选择器，通过选择器选择页面中的一组元素，然后为其设置样式。 元素选择器根据标签名称选择页面中指定的元素句子类型：标签名称{}示例：div{}p{}h1{}id选择器根据元素的id属性值选择唯一的元素句子type: #id {} 示例：#box1{}#hello{} 类选择 选择器根据元素的 class 属性值选择一组元素句型：.class{} 示例：.hello{}.box{ } 通配符选择器选择页面中的所有元素 句型：*{} 通配符选择器 性能比较差，尽量避免使用联合选择器来选择同时匹配多个选择器的元素 句型：选择器 1，选择器2、选择器 N{} 示例：div,p,#box,.hello{ } 交集选择器可以选择满足多个条件的元素 句型：选择器 1 选择器 2 选择器 N{} 示例：p.hello{} 后代元素选择器选择指定元素的指定后代 句型：祖先元素 后代元素 {} 示例：div span {} div p{} 子元素选择器 选择指定元素的指定子元素 句型：父元素 > 子元素 {} 示例: div > span {} div > p{} 声明块 声明块 其实就是一一的CSS声明。 每个 CSS 声明都是一种样式。 实际上，它是结构体名称和值之间使用的名称-值对：链接：左边是样式的名称：右边是样式的值。 每个声明结尾为; 反例 color:red;font-size:20px; 元素之间的关系 父元素直接包含子元素的元素称为父元素 父元素直接包含的元素称为子元素 直接或间接包含后代元素的元素称为祖先元素，父元素也是祖先元素。 后代元素直接或间接地被祖先元素包含。 元素称为后代元素，子元素也是后代元素。 行内元素、块元素、块元素都会在页面中占据一行，无论包含多少内容。 块元素通常用于布局页面。 常见块元素divph1~h6内联元素。 行内元素只占用自己的大小，不会独占。 一行内联元素也称为内联元素（inline）。 一般来说，内联元素用于设置文本的效果。 常见的内联spanaimg换行规则通常使用块元素来换行内联元素，而不是内联元素。 包装块元素的 a 元素可以包含除 a 本身之外的任何元素。 p 元素不能包含任何块元素。 伪类和伪元素。 伪类和伪元素用于表示元素的特殊状态或特殊位置： link 表示普通链接（未访问过的链接）：visited 表示访问过的链接：hover 键盘移入的链接，也可以对其他元素设置hover:active，正在点击的链接，也可以对其他元素设置active:focus 表示元素获得焦点的状态，一般用在文本框中::selection 表示内容被选中的状态。 在Maxthon中，使用::-moz-selection来替换：first-letter表示第一个字符：first-line表示文本的第一个字符one line：before选择元素的前面。 通常这个伪类与内容结合使用。 可以通过 content: after 选择元素的最后一个边缘来将内容添加到指定位置。 通常这个伪类与内容结合使用。 Content 可用于将内容添加到指定位置。 在指定位置添加内容。 属性选择器根据元素的属性[属性名]选择指定的元素。 选择富含指定属性的元素 [属性名称=“属性值”] 选择属性值等于指定值的元素 [属性名称^=“属性值”]选择属性值以指定内容开头的元素[属性名称$=“属性值”] 选择属性值以指定内容结尾的元素 [属性名称*=“属性值”] 选择属性值包含指定内容的元素 元素选择器选择下一个同级元素。 上一个 + 下一个选择所有先前的同级元素。 Previous ~ 所有后续子元素的伪类：first-child 在所有子元素中搜索父元素的第一个子元素。 中排序：last-child 查找父元素的最后一个子元素，在所有子元素中排序：nth-child 查找父元素中指定位置的子元素，在所有子元素中排序。 反例 p:nth-child( 3) 您可以使用 Even 来查找素数的子元素。 您可以使用 odd 查找素数的子元素：first-of-type 查找指定类型的第一个子元素：last-oftype 查找指定类型的最后一个子元素。 sub-element:nth-of-type 搜索指定类型中的指定子元素。 否定伪类以从一组元素中删除满足要求的元素。 句型：:not(选择器) 例：.abc:not(div) HTML，超文本标记语言，负责页面的结构并定义页面的各个组件。 HTML 以纯文本形式编译，并使用 HTML 标签来标记页面的不同部分。 标签从结束标签开始成对出现。 属性可用于设置标签的功效。 属性需要在开始标签或结束标签中定义。 属性实际上是一组名称-值对。 示例：HTML 页面的基本结构。 常用标签。 网页的根标签。 有 并且只有一个根标签。 网页中的所有内容都需要写在html标签内部网页的颈部。 该标签中的内容不会直接显示在网页上。 该标签用于帮助浏览器解析页面子标签并用它来设置网页。 默认情况下，标题将显示在浏览器的标题栏中。 搜索引擎检索网页时，主要会检索标题中的内容，这会影响页面在搜索引擎中的排名。 用于设置网页的元数据，例如网页使用的字符集。 设置网页的关键词 设置网页的描述 设置请求的重定向网页主网页的所有可见部分都必须在body中编辑~ html中的title标签中有六个标题 这六个标题中，h1是最重要的是，h6 最不重要的是，一般页面只使用h1~h3。 h1的重要性仅次于标题。 浏览器也会主要搜索h1中的内容来确定页面的主要内容。 通常一页只能写一个h1。
段落标签
换行标签 横线标签 内联框架可以引入其他外部页面属性 src 外部页面的地址可以使用相对路径 width 和 height 可以设置框架的长度和高度 name 可以为内联框架指定一个名称 该属性值设置到超链接的目标属性值，这样当点击超链接时，页面将在相应的内联框架中打开。 内联框架中的内容不会被搜索引擎检索到，所以开发中尽量不要使用内联框架超链接，可以使当前页面跳转到其他页面。 链接的文本属性href指向链接跳转的目标地址，可以是相对路径，也可以是#id属性的值css 父节点，这样当点击超链接时，就会跳转到当前的指定位置page 可以使用 mailto: 创建超链接发送邮件 target 指定打开链接的窗口 可选值 _self 默认值，默认在当前窗口打开链接 _blank 在新窗口中打开 链接内联的 name 属性值框架在指定的内嵌框架中打开链接 注释 句子注释中的内容不会显示在页面上，而是会显示在源代码中。 我们可以使用注释来解释网页的代码。 注释隐藏了一些您不想在页面上显示的内容。 HTML页面中的一些特殊符号不能直接使用。 需要用实体来代替那些特殊符号。 实体也可以称为转义字符。 <<>>版权符号图像标签
使用image标签，可以在页面中引入外部图片属性src，指向外部图片的路径。 当图片加载失败时，可以使用相对路径alt指定图片的描述。 搜索引擎主要利用该属性来识别图像的内容。 如果不写这个属性，搜索引擎就会收录该图片。 width 设置图片的长度，height 设置图片的高度。 图片的格式是JPEG。 色彩丰富的图片，如照片、GIF、单色、简单透明图片、动态图片、PNG、色彩丰富、复杂透明图片选择原则是效果相同，效果不一致则疗效不一致是小。 效果好的相对路径可以使用相对于当前资源所在目录的路径。 句型规范 1. HTML 不区分大小写，但尽量使用大写 2. HTML 注释不能嵌套 3. 标签必须有完整的结构或者成对出现或自闭合标签 4. 标签可以嵌套，不能交叉-nested 5 .属性必须有值，并且值必须添加冒号。 单冒号和双引号都可以作为文本标签来表明内容的重要性。 斜体表示简单，粗体表示法规内容，表示引用内容。 任何添加书名的人都可以使用引用短引用、行内引用长引用、块级引用、上标和下标、删除内容和插入内容。
预格式化标签，可以在代码和换行符中保留空格。 该格式表示程序代码列表。 无序列表使用 ul 创建无序列表，并在列表中使用 li 表示列表项。 无序列表使用符号作为项目符号有序列表使用ol创建无序列表，使用列表中的li表示列表项使用有序序号作为项目符号定义列表列表相关元素是块元素，并且可以与每个元素嵌套其他清除项目符号列表-样式：无
发表评论