ssss39的博客

DOM节点操作（上）一、任务目标理解DOM结构以及HTML节点关系掌握常用的节点获取方法及属性掌握常用的节点属性获取方式二、任务背景DOM（Document Object Model——文档对象模型）是用来处理HTML和XML的跨平台API。它允许运行在浏览器中的代码访问文档节点并与之交互，了解并掌握DOM操作是Web开发中的必经之路。三、任务内容1、DOM结构及节点整个HTML的结构都可以由类似上图的树结构表示，整个树结构由节点组成。

现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最左边的元素的类名为。现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最右边的元素的类名为。的背景图，使背景图保持纵横比不变，最大程度覆盖背景区域，请补全代码片段。现有以下代码，要求实现如图所示的文字环绕图片的效果，请补全代码片段。元素设置为不独占一行，且设置的宽高对元素产生影响，请补全代码片段。元素进行定位，使其固定在浏览器可视窗口的最上方，请补全代码片段。的顶部外边距，需要将其设置为块级元素，请补齐代码片段。

在使用浮动属性实现三列布局的时候常用，左侧盒子左浮动，右侧盒子右浮动，中间的盒子左右外边距设置大于左右两侧盒子大小即可。元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开。用于设置元素是否浮动，absolute（绝对）定位的元素会忽略float属性。用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方。

文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化。

当对一个页面进行布局（lay out）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。

HTML（超文本标记语言）中元素大多数为块级元素或行内元素，浏览器在显示页面时，对这两类元素的默认处理方式是不一样的。宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响。元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响。宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度。一般只能包含内容和其他行内元素，不可包含块级元素。可以包含内容、行内元素和其他块级元素。综合块级元素与行内元素的特性。可将元素设置为行内块级元素。可将元素转换为块级元素。可将元素转换为行内元素。

当创建的CSS样式表越来越多、越来越复杂的时候，一个元素的样式可能受到多个CSS样式表的影响，到底这个元素显示的是哪个样式表的样式呢？在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级。权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性。该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111。权重不同时，权重大的选择器生效。

伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用。为了便于区分伪类选与伪元素，使用双冒号【::】作为伪元素选择符。

将伪类与选择器相结合，可以指定选择元素的特殊状态，也可以根据元素的所处的状态应用不同的样式，掌握伪类选择器可以帮助我们实现更加丰富的样式。实际上所有内容字体都不会变红色。该元素为该元素父级元素的第一个子元素。都存在此类情况，注意区分。你是否认为最终效果是。

CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式。元素，将其字体颜色改为红色，如下图所示，可使用相邻选择器选择元素设置样式。通过间隔符将基础选择器连接起来，实现组合选择的效果。可以与其他选择器相结合，选择某元素下的所有元素。id属性的属性值应当是当前文档唯一。中，用于清除元素的默认样式，如。

文本流在垂直方向，从下至上、从左至右排列（该属性值不兼容webkit内核浏览器）：文本流在垂直方向，从上至下、从右至左排列（该属性值不兼容webkit内核浏览器）：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致。用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为。用于指定文本中单词之间的间距，设置固定值为单词间距，如10px。：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向。用于设置字间距，设置固定值为字间距，如10px。

在前端开发过程中，为了页面的美观，往往都会给HTML元素添加背景，使用CSS（层叠样式表）背景属性能够在页面美化的同时，实现页面的表现与内容分离。简写属性可以在一个属性声明中设置一个或多个背景属性，常用的属性设置如上表。保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示。保持图片纵横比不变，最大程度覆盖背景区域。允许水平和垂直方向重复（平铺）背景图片。有可能出现图片无法完全覆盖背景区域。有可能导致背景图片部分区域无法显示。只允许水平方向重复（平铺）背景图片。只允许垂直方向重复（平铺）背景图片。

CSS（层叠样式表）定义了HTML元素在页面中的样式、布局以及整个页面的布局。CSS遵循W3C规范，实现了跨浏览器的标准化。导入的CSS会被直接导入到HTML或CSS文件中，成为文件的一部分。属性设置为目标链接的CSS文件路径，rel属性设置为。表示链接样式表，type属性设置为。3.1 链接样式（最常用）标签链接外部的CSS文件。直接使用HTML元素的。在CSS文件中直接使用。在HTML文件中需要在。在HTML初始化时，

设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）标签用于定义文档的头部，它是所有头部元素的容器。用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标。提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。属性通常一起使用，以键值对的方式给文档提供元数据，其中。是空元素，仅包含属性，只能存在于。的属性值作为元数据的名称，

在HTML中，、&（用于区分标签，&用于转义）等特殊字符由于有特殊含义，在页面上可能无法正常显示，就需要在HTML文档中使用特殊转义字符来表示。转义字符也可称为字符实体，对于同一个特殊字符，可以使用【实体名称】或者【实体编号】表示。

HTML表单用于收集用户输入。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。method：规定用于发送form-data的HTTP方法，常用属性值为get、post。元素是最重要的表单元素，根据input元素的不同type类型，表现形式也是不一样的。文本，浏览器会自动将焦点转到和标签相关的表单控件上。action：规定表单提时，表单数据提交的URL。标签用于定义列表的可选项。属性值应当与相关元素的。

HTML标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，更利于开发者、程序和其他设备对于标签的理解。语义化在盲人软件、机器翻译等方面发挥着重要作用，同时搜索引擎会通过语义化标签增强文章的SEO搜索。下表为部分常见的语义化标签。