首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端基础:HTML

-- 注释不会在浏览器中显示 --> 标签 br 标签就是一个换行功能标签 标签 在 p 标签中的内容会在开始与结束之间产生一个空白行并且它会自动换行 常用属性 align 的作用是设置段落中的内容对齐方式...注意:在 HTML 中允许标签进行嵌套的,但是一般都包裹嵌套,而不可以进行交叉嵌套 清单标记(列表标记) 有序清单: 节点树中的节点彼此拥有层级关系。常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。...在节点树中,顶端节点被称为根(root)。 每个节点都有父节点、除了根(它没有父节点)。 一个节点可拥有任意数量的子节点。 同胞是拥有相同父节点的节点。...DOM 方法 & 属性 HTML DOM 方法是可以在节点(HTML 元素)上执行的动作。 HTML DOM 属性是可以在节点(HTML 元素)设置和修改的值。

1.8K20

JavaScript笔记(14)

元素节点 nodeType为1 属性节点 nodeType为2 文本节点 nodeType为3 (文本节点包括文字,空格,换行等) 我们在实际开发中,节点操作主要操作的是元素节点 利用DOM树可以把节点划分为不同的层级关系...但是只能得到它最近的父级节点(亲爸爸) 如果指定的节点没有父元素则返回null 2.子节点 parentNode.childNodes (注意's',子节点可以有很多个) 假如我们现在只想要ul...tagName指定的HTML元素.因为这些原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建节点,但是光创建是不够的,元素并不会在页面中显示,因为我们没有告诉他将节点放在哪....添加节点 node.appendChild(child) node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾,类似于CSS中的after伪元素,node...就是父级节点,child是子级节点.

36920
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【Java 进阶篇】HTML文本标签详解

    在HTML中,文本标签用于定义和呈现文本内容。本文将详细介绍HTML中的一些常用文本标签,包括段落、标题、文本样式等,适用于初学者,让您了解如何创建和格式化文本内容。 1....段落标签 段落标签 用于定义文本的段落。它会在文本前后添加额外的空白行,以显示文本的段落结构。下面是一个示例: 这是一个段落。 这是另一个段落。...换行标签 换行标签 用于在文本中插入换行符,即使在段落中也可以使用它来强制换行。 这是第一行。这是第二行。 这将呈现为: 这是第一行。 这是第二行。 5....嵌套标签 HTML允许标签嵌套,即将一个标签放在另一个标签内部。例如,您可以在段落中嵌套链接标签来创建带有链接的文本。...-- --> 用于添加注释,这些注释不会在浏览器中显示,但可以用于提供对代码的解释或说明。 不会在页面上显示 --> 这是一个段落。

    26840

    HTML标签

    >  倡议: 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。...段落标签( 熟记) 单词缩写: paragraph 段落 在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是 文本内容...  是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。...换行标签(熟记) 单词缩写: break 打断 ,换行 在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。...中只能嵌套,直接在标签中输入其他标签或者文字的做法是不被允许的。 2. 与之间相当于一个容器,可以容纳所有元素。 3.

    7K20

    前端学习(47)~DOM简介和DOM操作

    文本节点(文本):HTML标签中的文本内容(包括标签之间的空格、换行)。 节点的类型不同,属性和方法也都不尽相同。所有的节点都是Object。...解析过程: HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。...【重要】 它只返回HTML节点,甚至不返回文本节点。 在IE6/7/8中包含注释节点(在IE678中,注释节点不要写在里面)。...方式1: 父节点.appendChild(新的子节点); 解释:父节点的最后插入一个新的子节点。...方式2: 父节点.insertBefore(新的子节点,作为参考的子节点) 解释: 在参考节点前插入一个新的节点。 如果参考节点为null,那么他将在父节点里面的最后插入一个子节点。

    1.7K30

    【Web世界探险家】HTML5 探索与实践

    上述代码中 head 标签和 title 标签就是嵌套关系,我们通常最外面的标签称为“父标签”,里面的标签称为“子标签”。...在 HTML 标签中, 标签用于定义段落,它可以将整个网页分为若干的段落。 特点: 文本在一个段落中会根据浏览器的窗口的大小自动换行 段落与段落之间包有空隙 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望 某段文本强制换行显示,就需要使用换行标签 。...这是一个段落这是一个段落这是一个段落 2.5 文本格式化标签 在网页中,有时需要为文字设置粗体、斜体 或 下划线 等效果,这时就需要用到 HTML 中的文本格式化标签... 标签用于定义表格中行,必须嵌套在标签中 标签表示 HTML 表格的表头部分 用于定义表格中单元格,必须嵌套在<tr

    9410

    【Web前端】剖析HTML 元素

    内容(Content):元素的实际文本或嵌套的其他HTML元素。内容出现在开始标签之后,结束标签之前。例如, 元素的内容是段落中的文字。... 这里, 元素被嵌套在 元素中,形成一个包含链接的段落。 通过合理和有效地嵌套HTML元素,可以更好地组织内容、优化页面结构,并提升页面的可访问性和用户体验。...1、块级元素(Block-level Elements): 特点: 每个块级元素通常会在新的一行上开始,占据父元素的整个宽度。 它们会创建一个“块”或“框”,用于结构化文档内容。... 3、区别总结: 显示特性:块级元素通常占据整个父元素的宽度,而内联元素只占据它们需要的空间。 排列方式:块级元素通常会从新的一行开始,而内联元素在同一行内显示。...在 HTML 中,常见的空元素包括: :换行符,用于在文本中创建换行。 :用于插入图像。 :用于创建输入字段。

    15810

    【HTML】HTML页面和常见标签

    head:编写页面相关的属性 title:页面标题 body:页面的内容展示信息 每一个标签相当于是一个节点,这么多的标签(节点)构成了一个 DOM 树。...树就有一些子节点,head、title、body… 就相当于是 html 的一个子标签 所有的标签都是 html 的子标签 head 和 body 是兄弟标签 head 和 title 是父子标签 DOM...树中的每一个标签就相当与是一个对象,程序猿就可以通过代码拿到这些标签(拿到这些对象),之后就可以对这些对象进行“增删查改” 如何快速生成代码框架 直接在 vscode 中输入 !...会学) 自动根据浏览器宽度来决定排版 html 内容首尾处的换行,空格均无效 在 html 中文字之间输入的多个空格只相当于一个空格 html 中直接输入换行不会真的换行,而是相当于一个空格....> 两种标签都能达到效果,但前者不仅能达到效果,还都有强调的作用,它们向搜索引擎、屏幕阅读器等辅助技术传达了文本的重要性,而不仅仅是视觉上的加粗

    8810

    五.网络爬虫之BeautifulSoup基础语法万字详解

    在Python2.7中,安装的扩展包会在目录Scripts文件夹下添加相应的文件,甚至需要将此目录(Scripts)加入环境变量中。...1.子节点 BeautifulSoup中通过contents值获取标签(Tag)的子节点内容,并以列表形式输出。...,所以获取的列表包括了两个换行,如个需要提取第二个元素,代码如下: 另一个获取子节点的方法是children关键字,但它返回的不是一个list,可以通过for循环来获取所有子节点内容。...---- 2.节点内容 如果标签只有一个子节点,需要获取该子节点的内容,则使用string属性,输出子节点的内容,通常返回最里层的标签内容。...---- 3.搜索文档树 搜索文档树作者主要讲解findall()方法,这是最常用的一种方法,而更多的方法与遍历文档树类似,包括父节点、子节点、兄弟节点等,推荐读者下来从官网自行学习。

    1.4K01

    『知识巩固#1』Html、Css基础整理

    Html 标签学习 排版标签 标题 h1、h2、h3、h4、h5、h6只有这六个 段落标签 p标签 段落之间有空隙换行 换行标签 br 空换行 hr 下划线换行 文本格式化标签...行高 = 上间距 + 文本高度 + 下间距 应用 单行文本垂直居中 可以设置为line-height: 文字父元素高度 注意点 如果同时设置了行高和font连写,注意覆盖问题 font: style...: > 选择器1 > 选择器2 {css} 只选择儿子,不选其他 并集选择器: , 选择器1, 选择器2 {css} 两者均包括 交集选择器:紧挨着 作用 选中页面中同时满足多个选择器的标签 选择器...,但是不能用小范围的元素嵌套大范围元素 如p标签不能嵌套div、p、h a标签内部可以嵌套任意元素,除了a标签 css特性 继承性 子元素没有的 从父元素处继承;子元素有的,不继承 可以理解为 父元素的样式先赋给子元素...: 0;}清除内边距 外边距折叠现象 合并现象 相邻的两个盒子,margin-bottom 和 margin-top 会合并 取最大值 而不是相加 塌陷现象 发生在互相嵌套的块标签 给子元素添加margin

    4K20

    CSS学习 - 盒模型&flex

    css学习 盒子模型 padding:即内边距,围绕着内容(比如段落)的空间。 border:即边框,紧接着内边距的线。 margin:即外边距,围绕元素外部的空间。 ?...会在前面的元素后面 flex 模型 ? 主轴就是水平轴,交叉轴就是垂直轴 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。...设置了 display: flex 的父元素(在本例中是 )被称之为 flex 容器(flex container)。...flex-wrap: wrap 标识弹性盒子可以换行,换行的标准是下级元素设置flex: 200px来决定的 ,弹性盒子里面的元素最小是200px flex:1 直接接数值的,表示比例,四个元素,全部都是...换句话说,90%这个是动态的,但最大跨度为900px

    56930

    html基础知识点合集

    > 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。...段落标签 单词缩写: paragraph 段落 [ˈpærəgræf] 无须记这个单词 在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是... 文本内容 是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。...换行标签(熟记) 单词缩写: break 打断 ,换行 在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。...2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

    2.4K20

    HTML+CSS基础

    2.2     margin问题                2.2.1     margin-top传递问题:父子级包含的时候,子级的margin-top会传递给父级,解决办法:给父级加上border...--》                     2.2.3.1      理解错了这个属性的含义,它指的是你所设置的元素的下外边距,但不代表它在父元素的底部,也不代表它的子元素都会在它的底部显示。...也是设为0时),margin-bottom是设置同级元素间的间隔,并不是设置它在父元素中的位置。      ...1、如果你#b元素是#a元素的子元素,可以直接通过 #a #b {...} 2、#a与#b是亲兄弟关系,有相同的父节点,且#b跟#a紧临,可以通过 #a + #b{..}来控制#b里面的元素样式; 注:...与A B的区别在于,A B选择所有后代元素,而A>B只选择一代子元素。

    2.8K91

    前端常见技术点 - CSS DOM 布局(43问)

    17、常见的移动端开发问题 应该有很多,这里只列出笔者遇到过的一部分: 若父容器设置了 transform 属性,则其内部子元素的 position:fixed; 属性会失效; 18、对 line-height...line-height 值;相对来说,用纯数字指定 line-height 比较好,可以动态改变行距;段落中的行间距最好是本身 font-size 的1.5倍最好,浏览器默认行间距为1.14左右。...浏览器的默认行为是把 inline 元素间的空白字符(空格、换行、Tab)渲染成一个空格,这个问题不止出现在 li 元素上; 解决方案: 1、所以把所有 li 放到同一行; 2、将这些被渲染成空格的字符...font-size 设置为 0; 3、设置 letter-spacing 为适当大小; 25、Z-Index 栈 Z-Index 只在设置了 position 属性(非 static)的元素上生效;父元素的...children 只会包含元素节点,不会包含文字节点,childNodes 会包含所有子节点;nextElementSibling 只包含元素兄弟节点,nextSibling 会包含文字节点。

    1.5K30

    HTML入门完全指南:从零开始构建你的第一个网页

    (html 就是 head 和 body 的父标签) title 是 head 的子标签,head 是 title 的父标签 head 和 body 之间是兄弟关系, 可以使用 chrome 的开发者工具查看页面的结构...段落标签: p 把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落....在 html 中文字之间输入的多个空格只相当于一个空格. html 中直接输入换行不会真的换行,而是相当于一个空格 4. 换行标签: br br 是 break 的缩写....---带编号--> div{$.hello} 四、HTML 特殊字符 有些特殊的字符在 html 文件中是不能直接表示的 作用:在网页中 显示预留字符 比如:网页不认识多个空格,只认识一个,在段落前想缩进两个文字的空格...---带编号--> div{$.hello} 四、HTML 特殊字符 有些特殊的字符在 html 文件中是不能直接表示的 作用:在网页中 显示预留字符 比如:网页不认识多个空格,只认识一个,在段落前想缩进两个文字的空格

    12810

    五.网络爬虫之BeautifulSoup基础语法万字详解

    在Python2.7中,安装的扩展包会在目录Scripts文件夹下添加相应的文件,甚至需要将此目录(Scripts)加入环境变量中。...1.子节点 BeautifulSoup中通过contents值获取标签(Tag)的子节点内容,并以列表形式输出。...,所以获取的列表包括了两个换行,如个需要提取第二个元素,代码如下: 另一个获取子节点的方法是children关键字,但它返回的不是一个list,可以通过for循环来获取所有子节点内容。...---- 2.节点内容 如果标签只有一个子节点,需要获取该子节点的内容,则使用string属性,输出子节点的内容,通常返回最里层的标签内容。...---- 3.搜索文档树 搜索文档树作者主要讲解find_all()方法,这是最常用的一种方法,而更多的方法与遍历文档树类似,包括父节点、子节点、兄弟节点等,推荐读者下来从官网自行学习。

    2K10

    总结:React 中的 state 状态

    换言之,props 是对外的,state 是对内的 props:只读,父组件通过 props 传递给子组件其所需要的状态;子组件内部不能直接修改props,只能在父组件中修改。...这使得它的执行速度很快,但是也意味着当你想要更新一个嵌套属性时,你必须得多次使用展开语法2。...map(例子) 排序 reverse,sort 先将数组复制一份(例子) 批量更新 在 开篇:通过 state 阐述 React 渲染 setInterval 示例中曾提及:一个 state 变量的值永远不会在一次渲染的内部发生变化...触发重新渲染 对于初次渲染, React 会使用 appendChild() DOM API 将其创建的所有 DOM 节点放在屏幕上。 对于重渲染, React 将应用最少的必要操作(在渲染时计算!)...‼️注意,文本不会在组件重渲染时消失。

    14500

    02_Bootstrap基础组件02

    4 排版 使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素,实际上它是把大部分在HTML的基本标签加了样式。所以这部分相对比较简单。...list-style 样式和左侧外边距的一组元素(只针对直接子元素)。...这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。...不要和其他组件混合使用(应该创建一个嵌套的 span 标签,并将图标类应用到这个span标签上) 只对内容为空的元素起作用(图标类只能应用在不包含任何文本内容或子元素的元素上) info 6.4 响应式表格 将 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上

    3700
    领券