html 相关问题

如何在HTML段落中插入图像 +文本超链接？ 我有以下设置：

我有以下设置： <p> some text.... </p> <a href="..." class="redirect"> <span class="redirect-image"></span> <span class="read-more">Read more...</span> </a> <...

在Firefox Devtools

没有人知道这意味着什么？因为物品具有弹性折射，所以它可以缩小，但是无法将其缩小到最小宽度以下：自动？ 是否有关于此次调试的Firefox文档...

发生溢出时，更新div或form的背景颜色

我不能发布实际的代码，但这里是一个示例，详细介绍了我要完成的工作。希望更改

Python自动化，无法单击搜索框

我想在Python中写一个自动机，它将我带入Google Chrome，并且在已经手动打开的窗口中，它搜索搜索功能并单击它...

如何获得pdf image的x，y尺寸

我使用的是popover API，iOSSafari

<dialog>与表格结合并输入会导致其阻止页面的其余部分（

在选择菜单“无法选择”

我有一个带有一些选项的选择元素，但是我希望某些选项不可选择。 基本上就是这样： 城市1 我有一个带有一些选项的元素，但是我希望某些选项不可选择。 基本上是这样的： select 如您所见，我不希望这些城市可以直接选择，而只能选择每个城市下面的选项。 用户可以单击<select> <option> CITY 1 </option> <option> City 1 branch A </option> <option> City 1 branch B </option> <option> City 1 branch C </option> <option> CITY 2 </option> <option> City 2 branch A </option> <option> City 2 branch B </option> ... </select> 或CITY 1，但不能选择它，但不会选择它，因此用户被迫选择下面的一个分支？ 您可能正在寻找一个：： CITY 2 Demo：Http：//jsfiddle.net/zg9mw/ 如果您确实需要使常规<optgroup>元素不可选择，则可以给它们提供<select> <optgroup label="CITY 1"> <option>City 1 branch A</option> <option>City 1 branch B</option> <option>City 1 branch C</option> </optgroup> <optgroup label="CITY 2"> <option>City 2 branch A</option> <option>City 2 branch B</option> </optgroup> </select>属性（这是一个布尔属性，所以该值根本不重要）： <option> 我可以看到以前的答案实际上是您要寻找的内容，但是对于像我这样的堆叠问题的人们寻找类似答案，您只需在选项中键入disabled。 <option disabled>City 2 branch A</option> jsfiddledemo from：如何默认显示禁用html选择选项？ 这是做同样事情的另一种方式。 Edit：（现在您可以在这里运行） disabled <select> <option value="apple" disabled>Apple</option> <option value="peach">Peach</option> <option value="pear">Pear</option> <option value="orange" disabled >Orange</option> </select> 你会使用<label>Unreal :</label> <select name="unreal"> <option style="display:none">Select One</option> <option>Money</option> <option>Country</option> <option>God</option> </select> jsFiddle Demo 有很多选择来实现这一目标，我建议一个名为选择的jQuery插件： 它会： <optgroup> 链接是https：//harvesthq.github.io/chosen/ simply将禁用属性添加到您不想选择的选项标签中 <select> <optgroup label="City 1"> <option>City 1 Branch A</option> <option>City 1 Branch B</option> <option>City 1 Branch C</option> </optgroup> <optgroup label="City 2"> <option>City 2 Branch A</option> <option>City 2 Branch B</option> </optgroup> </select> 实际上，您可以在<select data-placeholder="Choose a Country..." class="chosen-select chose-select-width-custom" multiple tabindex="4" name="countryDigestValues"> <option value=""></option> <optgroup class="custom-optgroup-class" label="Label Title"> <option class="custom-option-class">Here goes the option to select</option> </optgroup> </select> 元素上同时同时使用<select> <option disabled> CITY 1 </option> <option> City 1 branch A </option> <option> City 1 branch B </option> <option> City 1 branch C </option> <option disabled> CITY 2 </option> <option> City 2 branch A </option> <option> City 2 branch B </option> </select> 和selected属性，以防您想具有一种内联标签来提供基本说明，而无需让用户选择它。 disabled效果也很棒。 给予许多回应。这取决于您要使用的第一个选项。如果您想将其显示为某种指南。例如，选项1是“选择城市”，但您不希望用户选择它。 <option> 通过使用上述代码，选择城市将是默认选项。但是用户将无法从选项中选择它。 使用禁用不会渲染默认值，也不可选。 如果您想有条件地禁用该选项，则可以考虑IF语句。

如何从laravel中的字符串中删除HTML标签

{{$ row ['policy_category_id']}}} ...

默认移动浏览器中的“ bio中的链接”，没有提示

拷贝和粘贴在可拖动的对象中 我有这样的html脚本，

我有这样的html脚本， <div style={{width:"200px",height:"100px"}} draggable={true}> <div style={{width:"100px",height:"50px"}}> copy test</span> </div> this Div是可拖动的，然后我想复制文本， 无论我尝试复制文本，都会拖动DIV。 有什么好方法吗？ 使用内部元素的样式，通过单击它可以选择它。 或使用user-select: all可通过单击两次或三次来选择它。

为什么这个边距将元素推到父母上？

将HTML字符串阅读到树结构创建具有定义边界的树的平坦列表。例如 <table> <tr> <td> 1 </td> </tr> <tr> <td> 2 </td> </tr> </table> tents转换为[table, [tr, [td, [1]]], [tr, [td, [2]]]] 将此列表连接到Myers差异算法以找到差异。 当我获得差异时，就HTML而言，我没有得到最佳的差异（编辑数量最少）。 编码读取HTML并创建列表。 import htmlparser from 'htmlparser2'; import {diffHierarchical} from './beta-myers-diff.js';; /** * Converts HTML string to a hierarchical array structure * @param {string} html - The HTML string to parse * @returns {Array} - A hierarchical array representation of the HTML */ export function htmlToHierarchicalArray(html) { // Parse HTML to DOM using htmlparser2 let dom = null; const handler = new htmlparser.DomHandler((error, nodes) => { if(error) { console.error('Error parsing HTML:', error); return; } // Find root element(s) const tags = nodes.filter(node => node.type === 'tag'); if(tags.length > 0) { dom = tags[0]; // Take the first tag as the root (usually there's only one root) } else if(nodes.length > 0) { dom = nodes[0]; // Take the first node if no tags } }); const parser = new htmlparser.Parser(handler, { decodeEntities: false }); parser.write(html); parser.end(); // Convert DOM to hierarchical array structure if (!dom) { return []; // Return empty array if parsing failed } // Convert the single root element to our hierarchical structure return nodeToHierarchicalArray(dom); } /** * Recursive function to convert DOM nodes to hierarchical array * @param {Array|Object} nodes - DOM node or array of nodes * @returns {Array} - Hierarchical array representation */ function domToHierarchicalArray(nodes) { // Handle single node if(!Array.isArray(nodes)) { return nodeToHierarchicalArray(nodes); } // Handle array of nodes return nodes.map(node => nodeToHierarchicalArray(node)); } /** * Convert a single DOM node to hierarchical array * @param {Object} node - DOM node * @returns {Array} - Hierarchical array representation */ function nodeToHierarchicalArray(node) { // Handle text node if(node.type === 'text') { const text = node.data.trim(); if(text === '') { return null; // Skip empty text nodes } // Return text node as a single-element array to maintain consistency return [node]; } // Handle tag node if(node.type === 'tag') { // Create array with the complete node object as first element const result = [node]; // Process children and add them to the array if(node.children && node.children.length > 0) { const childArrays = node.children .map(child => nodeToHierarchicalArray(child)) .filter(item => item !== null); // Filter out null items (empty text) if(childArrays.length > 0) { result.push(...childArrays); } } return result; } // Other node types (comment, directive, etc.) - skip return null; } /** * Test function for the table row swapping example */ function testTableRowSwapping() { const oldHtml = `<table> <tr> <td> 1 </td> </tr> <tr> <td> 2 </td> </tr> </table>`; const newHtml = `<table> <tr> <td> 2 </td> </tr> <tr> <td> 1 </td> </tr> </table>`; // Parse HTML to hierarchical arrays const oldArray = htmlToHierarchicalArray(oldHtml); const newArray = htmlToHierarchicalArray(newHtml); const editScript = diffHierarchical(oldArray, newArray); } testTableRowSwapping(); Myersdiff代码分散了创建的列表： export class Keep { constructor(line, isSubtree = false) { this.type = 'Keep'; this.line = line; this.isSubtree = isSubtree; } } export class Insert { constructor(line, isSubtree = false) { this.type = 'Insert'; this.line = line; this.isSubtree = isSubtree; } } export class Remove { constructor(line, isSubtree = false) { this.type = 'Remove'; this.line = line; this.isSubtree = isSubtree; } } // Represents a point on the frontier with its history export class Frontier { constructor(x, history) { this.x = x; // x-coordinate in edit graph this.history = history; // sequence of operations to reach this point } } /** * Compare two node objects for equality * This is a critical function that determines when two nodes are considered "the same" */ function areNodesEqual(nodeA, nodeB) { // If both are text nodes, compare their trimmed content if (nodeA.type === 'text' && nodeB.type === 'text') { return nodeA.data.trim() === nodeB.data.trim(); } // If both are tags, compare tag names if (nodeA.type === 'tag' && nodeB.type === 'tag') { return nodeA.name === nodeB.name; } // Different types are never equal return false; } /** * Compare two subtrees for structural equality */ function areSubtreesEqual(subtreeA, subtreeB) { // Both must be arrays if (!Array.isArray(subtreeA) || !Array.isArray(subtreeB)) { return false; } // Must have the same number of elements if (subtreeA.length !== subtreeB.length) { return false; } // Root nodes must be equal if (!areNodesEqual(subtreeA[0], subtreeB[0])) { return false; } // Compare all children recursively for (let i = 1; i < subtreeA.length; i++) { if (!areSubtreesEqual(subtreeA[i], subtreeB[i])) { return false; } } return true; } /** * Hierarchical Myers diff algorithm * @param {Array} old - Old hierarchical array * @param {Array} current - New hierarchical array * @returns {Array} - Edit script */ function hierarchicalMyersDiff(old, current) { // Base case - if either is empty if (old.length === 0) { return current.map(item => new Insert(item, true)); } if (current.length === 0) { return old.map(item => new Remove(item, true)); } // Compare root nodes of the arrays const oldRoot = old[0]; const currentRoot = current[0]; // If the root nodes are equal, we have a potential match if (areNodesEqual(oldRoot, currentRoot)) { // First, check if these are leaf nodes or if their subtrees are equal if (old.length === 1 && current.length === 1) { // Leaf nodes - just keep return [new Keep(currentRoot)]; } // If both have exactly the same structure, keep the entire subtree if (areSubtreesEqual(old, current)) { return [new Keep(current, true)]; } // The roots match but the subtrees differ - recursively diff the children const result = [new Keep(currentRoot)]; // Extract children (everything except the root node) const oldChildren = old.slice(1); const currentChildren = current.slice(1); // Apply standard Myers diff to the children arrays const childDiff = myersDiff(oldChildren, currentChildren); result.push(...childDiff); return result; } // Root nodes are different - try standard Myers diff on the top level return myersDiff(old, current); } /** * Standard Myers diff algorithm for arrays * This is similar to the original myersDiff but adapted for our hierarchical arrays */ function myersDiff(old, current) { // Initialize the frontier with starting point const frontier = { 1: new Frontier(0, []) }; // Convert from 1-based to 0-based indexing function one(idx) { return idx - 1; } const aMax = old.length; // horizontal size of edit graph const bMax = current.length; // vertical size of edit graph // Main loop: try increasing numbers of edits for (let d = 0; d <= aMax + bMax + 1; d++) { // For each value of D, try all possible diagonals for (let k = -d; k <= d; k += 2) { // Determine whether to go down or right const goDown = (k === -d || (k !== d && frontier[k - 1].x < frontier[k + 1].x)); // Find starting point for this iteration let oldX, history; if (goDown) { ({ x: oldX, history } = frontier[k + 1]); var x = oldX; } else { ({ x: oldX, history } = frontier[k - 1]); var x = oldX + 1; } // Clone history to avoid modifying previous paths history = [...history]; let y = x - k; // Calculate y from x and k // Record the edit we made to get here if (y >= 1 && y <= bMax && goDown) { // Insert from new sequence when going down const currentItem = current[one(y)]; // Check if this is a subtree (an array) or a leaf node const isSubtree = Array.isArray(currentItem) && currentItem.length > 0; if (isSubtree) { // Add the entire subtree as a single insert operation history.push(new Insert(currentItem, true)); } else { history.push(new Insert(currentItem)); } } else if (x >= 1 && x <= aMax) { // Remove from old sequence when going right const oldItem = old[one(x)]; // Check if this is a subtree (an array) or a leaf node const isSubtree = Array.isArray(oldItem) && oldItem.length > 0; if (isSubtree) { // Add the entire subtree as a single remove operation history.push(new Remove(oldItem, true)); } else { history.push(new Remove(oldItem)); } } // Follow the snake: match diagonal moves as far as possible while (x < aMax && y < bMax) { const oldItem = old[one(x + 1)]; const currentItem = current[one(y + 1)]; // Both items must be arrays (subtrees) to compare if (Array.isArray(oldItem) && Array.isArray(currentItem)) { // Check if the subtrees are equal if (areSubtreesEqual(oldItem, currentItem)) { x += 1; y += 1; history.push(new Keep(currentItem, true)); } else { // Check if just the root nodes are equal if (oldItem.length > 0 && currentItem.length > 0 && areNodesEqual(oldItem[0], currentItem[0])) { x += 1; y += 1; // Add a Keep for the root node, then recursively diff the children history.push(new Keep(currentItem[0])); // Apply hierarchical diff to the children const oldChildren = oldItem.slice(1); const currentChildren = currentItem.slice(1); if (oldChildren.length > 0 || currentChildren.length > 0) { const childDiff = hierarchicalMyersDiff(...oldChildren, ...currentChildren); history.push(...childDiff); } } else { break; // No match, end of snake } } } else { break; // Different types, end of snake } } // Check if we've reached the end if (x >= aMax && y >= bMax) { return history; // Found solution } else { // Save this point in the frontier frontier[k] = new Frontier(x, history); } } } // If no solution found with the hierarchical approach, fallback to treating each element individually // This should be rare but ensures we always produce a result const fallbackResult = []; // Remove all old elements for (let i = 0; i < old.length; i++) { fallbackResult.push(new Remove(old[i])); } // Insert all new elements for (let i = 0; i < current.length; i++) { fallbackResult.push(new Insert(current[i])); } return fallbackResult; } /** * Process the edit script to expand subtree operations into individual node operations * This is necessary to integrate with the existing system */ export function expandEditScript(editScript) { const expanded = []; for (const operation of editScript) { if (operation.isSubtree) { // Convert subtree operation to individual node operations const node = operation.line[0]; // Root node const children = operation.line.slice(1); // Child subtrees // Add operation for the root node if (operation.type === 'Keep') { expanded.push(new Keep(node)); } else if (operation.type === 'Insert') { expanded.push(new Insert(node)); } else if (operation.type === 'Remove') { expanded.push(new Remove(node)); } // Recursively process children for (const child of children) { const childOperations = expandSubtreeOperation(child, operation.type); expanded.push(...childOperations); } } else { // Single node operation - add as is expanded.push(operation); } } return expanded; } /** * Helper function to expand a single subtree operation into individual node operations */ function expandSubtreeOperation(subtree, operationType) { const result = []; if (!Array.isArray(subtree)) { // Not a subtree, just a single node if (operationType === 'Keep') { result.push(new Keep(subtree)); } else if (operationType === 'Insert') { result.push(new Insert(subtree)); } else if (operationType === 'Remove') { result.push(new Remove(subtree)); } return result; } // Process the root node const rootNode = subtree[0]; if (operationType === 'Keep') { result.push(new Keep(rootNode)); } else if (operationType === 'Insert') { result.push(new Insert(rootNode)); } else if (operationType === 'Remove') { result.push(new Remove(rootNode)); } // Process all children recursively for (let i = 1; i < subtree.length; i++) { const childOperations = expandSubtreeOperation(subtree[i], operationType); result.push(...childOperations); } return result; } /** * Main entry point - applies hierarchical Myers diff and returns expanded edit script */ export function diffHierarchical(old, current) { const editScript = hierarchicalMyersDiff(old, current); return expandEditScript(editScript); } 在HTML字符串上运行Myers差异后的期望： 戈德： <table> <tr> <td> 1 </td> </tr> <tr> <td> 2 </td> </tr> </table> new： <table> <tr> <td> 2 </td> </tr> <tr> <td> 1 </td> </tr> </table> 它返回具有2个编辑的差异，该差异为1个，为1个，插入1个。相反，它返回4个编辑，其中删除了1个，插入了2个，插入了1个，插入了1个，并删除了2个。我该如何解决？ sorry共享如此长的代码，但这是我在这个问题中讨论的用例的最小可重复示例。代码的第一部分只是读取HTML并将其编码为列表。第二部分是在第一部分生成的序列上运行的Myers diff实现。 在主题3中，请尝试修复JavaScript import htmlparser from 'htmlparser2'; import { diffHierarchical } from './beta-myers-diff.js'; /** * Converts HTML string to a hierarchical array structure * @param {string} html - The HTML string to parse * @returns {Array} - A hierarchical array representation of the HTML */ export function htmlToHierarchicalArray(html) { let dom = null; const handler = new htmlparser.DomHandler((error, nodes) => { if (error) { console.error('Error parsing HTML:', error); return; } dom = nodes; }); const parser = new htmlparser.Parser(handler, { decodeEntities: false }); parser.write(html); parser.end(); if (!dom) { return []; } return domToHierarchicalArray(dom); } /** * Recursive function to convert DOM nodes to hierarchical array * @param {Array|Object} nodes - DOM node or array of nodes * @returns {Array} - Hierarchical array representation */ function domToHierarchicalArray(nodes) { if (!Array.isArray(nodes)) { return nodeToHierarchicalArray(nodes); } return nodes.map(node => nodeToHierarchicalArray(node)).filter(item => item !== null); } /** * Convert a single DOM node to hierarchical array * @param {Object} node - DOM node * @returns {Array} - Hierarchical array representation */ function nodeToHierarchicalArray(node) { if (node.type === 'text') { const text = node.data.trim(); return text === '' ? null : text; } if (node.type === 'tag') { const result = [node.name]; if (node.attribs && Object.keys(node.attribs).length > 0) { result.push(node.attribs); } if (node.children && node.children.length > 0) { const childArrays = node.children.map(child => nodeToHierarchicalArray(child)).filter(item => item !== null); if (childArrays.length > 0) { result.push(childArrays); } } return result; } return null; } /** * Test function for the table row swapping example */ function testTableRowSwapping() { const oldHtml = `<table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> </table>`; const newHtml = `<table> <tr> <td>2</td> </tr> <tr> <td>1</td> </tr> </table>`; const oldArray = htmlToHierarchicalArray(oldHtml); const newArray = htmlToHierarchicalArray(newHtml); const editScript = diffHierarchical(oldArray, newArray); console.log(editScript); } testTableRowSwapping();

从Q1和Q2的条形图中示出了间距，我正在使用ChartJS版本2.7.2和Angular Chart JS版本1

在您的Chart.js条形图中，当相应的数据值为0时，标签Q1和Q2之间会遇到不需要的间距。即使未视觉显示0值的条形，也...

如何删除剪裁元素之间的细线？

I使用CSS夹式路径将徽标夹在2个部分中并取代它们以创建以下效果，但两个元素之间仍然存在细线： 为什么这线出现？这是一个渲染吗？

我如何在右侧对齐？

我想将注册 - login类放在右边，同时使用图像保持线路。 这是我的HTML 身体 { 保证金：0px; 填充：0px; } .navbar { 背景色：＃8C0424; ...

无法通过编程性更改<input>的值

tradingview

Cross-Browser链接到本地系统上的文件 我想在本地文件系统上从网页到文件，使其在所有浏览器（或至少在Internet Explorer，Firefox和Chrome）中起作用。 例如，以下工作...

，例如，Internet Explorer中的以下作品：

legend标签不正确对齐

如何将标签和输入放在响应式CSS网格布局中？ I具有HTML结构，其中标签和输入放置在带有网格布局的DIV内。这是我的代码： div { 显示：网格； 网格 - 板柱：重复（自动填充，Minmax（200px，1fr）...

html：图像名称为URL参数不起作用？

我有一个使用图像名称作为URL参数的HTML页面。为什么不显示图像，我错了什么？ <!DOCTYPE html> <html lang="nl"> <head> <script src="lib/functions.js"></script> </head> <body> <!-- test03.html?parameter=mountains.jpg --> <img src="" id="imagename"> <script> const queryString = window.location.search; const urlParameters = new URLSearchParams(queryString); const Parameter = urlParameters.get('parameter'); document.getElementById("imagename").innerHTML = Parameter; </script> </body> </html> <question vote="0"> <p> </p>您看不到您的图片，因为您更改了<pre><code>innerHTML</code></pre>，它与图像源的</question><code>img</code><answer tick="false" vote="0">html标签无关。 <p>正确的方法是<pre><code>document.getElementById(&#34;imagename&#34;).src = Parameter</code></pre>而不是<pre><code>document.getElementById(&#34;imagename&#34;).innerHTML = Parameter</code></pre>对于这种情况。 </p>确保您有此图像，并且图像路径正确。 <p> <pre></pre>