HTML（超文本标记语言）是用于创建网页和其他要在网络浏览器中显示的信息的标记语言。该标签很少单独使用，通常与 CSS 和 JavaScript 搭配使用。

HTML

在JavaScript中实现DOM数据绑定主要有几种方式，包括手动绑定、使用库或框架，以及通过新技术如Web Components。我将逐一讲解这些方法，并提供相应的例子。

### 1. 手动绑定
手动绑定是最基础的方法，通常涉及直接操作DOM来更新界面。这种方法虽简单，但随着应用规模的增大，可能会导致代码难以维护。

**例子**:
```javascript
function updateText(id, text) {
    const element = document.getElementById(id);
    element.innerText = text;
}

// 假设有一个HTML元素 <div id="myText">Initial text</div>
updateText('myText', 'Updated text');
```

### 2. 使用库或框架
市面上有许多库和框架可以帮助实现数据绑定，如React、Vue.js、Angular等。这些工具提供了更高级的数据绑定功能，使得开发者可以更方便地管理状态与UI的同步。

**例子**:
- **React** 使用状态(state)和属性(props)来管理数据，并通过JSX来绑定数据。

```jsx
class MyComponent extends React.Component {
    state = {
        text: "Initial text"
    };

    updateText = () => {
        this.setState({ text: "Updated text" });
    };

    render() {
        return (
            <div>
                <div>{this.state.text}</div>
                <button onClick={this.updateText}>Update Text</button>
            </div>
        );
    }
}
```

- **Vue.js**:
```javascript
new Vue({
    el: '#app',
    data: {
        text: 'Initial text'
    },
    methods: {
        updateText() {
            this.text = 'Updated text';
        }
    }
});

// 对应的HTML
// <div id="app">
//   <div>{{ text }}</div>
//   <button @click="updateText">Update Text</button>
// </div>
```

### 3. Web Components
Web Components是一套不同的技术，允许创建可重用的自定义元素，并在Web应用中使用它们，这些元素的功能封装起来不会影响到页面其他部分的代码。

**例子**:
```javascript
class MyElement extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<div>Initial text</div>`;
        this.onclick = () => {
            this.querySelector('div').innerText = 'Updated text';
        };
    }
}

customElements.define('my-element', MyElement);
```

```html
<my-element></my-element>
```

在实际开发中，选择哪种方法进行数据绑定，通常取决于项目的具体需求、团队熟悉的技术栈以及应用的规模。对于大型应用，通常推荐使用成熟的框架来保证代码的可维护性和可扩展性。对于简单的项目或功能，手动绑定或Web Components可能是更合适的选择。

How to Implement DOM Data Binding in JavaScript

空的`href`属性在HTML标签`<a>`中是有效的，但它并不推荐在生产环境中使用，因为它会带来一些可用性和可访问性的问题。

具体来说，`<a href="">`这种写法会导致链接指向当前页面本身。这意味着当用户点击这样的链接时，页面会重新加载或刷新。这在某些情景下可能不是预期的行为，比如在单页应用（SPA）中，这可能会导致不必要的资源重新加载。

然而，在某些特定的情况下，开发者可能故意使用空的`href`来利用`<a>`标签的默认样式或行为（例如，光标变为手形），同时通过JavaScript来定义更复杂的交互或处理逻辑。例如：

```html
<a href="" onclick="event.preventDefault(); openCustomModal();">打开模态框</a>
```

在这个例子中，点击链接不会导致页面刷新，因为`event.preventDefault()`方法阻止了默认行为。而`openCustomModal()`函数负责打开一个自定义的模态框。

尽管这种做法在技术上是可行的，但为了更好的用户体验和提高网站的可访问性，更推荐的做法是使用按钮(`<button>`)或者其他适合的标签，并通过CSS来实现需要的视觉风格。这样不仅可以避免潜在的可用性问题，还可以使网站的意图更加明确，代码更易于理解和维护。

Is an empty href valid?

在CSS中，通常有两种方式可以用来删除或者重置列表（例如`<ul>`或`<ol>`）的默认缩进。这些缩进通常是由于浏览器的默认样式表引起的。以下是两种常用的方法：

### 方法1：设置 `padding` 和 `margin` 为0

可以通过将列表的 `padding` 和 `margin` 属性设置为0来移除缩进。这是最直接和常见的方式。CSS代码如下：

```css
ul, ol {
  margin: 0;
  padding: 0;
}
```

这段代码将无序列表（`ul`）和有序列表（`ol`）的内边距和外边距都设置为0，从而消除了缩进。

### 方法2：使用 `list-style-position` 属性

另一种方式是使用 `list-style-position` 属性，并设置其值为 `inside`。这不仅会影响项目符号的位置，也会改变文本对齐方式，从而实现没有缩进的效果。

```css
ul, ol {
  list-style-position: inside;
}
```

这段代码会将列表项的标记（比如圆点或数字）放在列表项内容的内部开始处，从而有效地减少到没有外部缩进的效果。

### 示例

假设我们有以下HTML代码：

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

如果我们使用第一种方法（设置`margin`和`padding`为0），则列表将紧贴左边界，没有任何缩进。

如果使用第二种方法（设置`list-style-position: inside`），列表项标记将位于文本内部的最左侧，使得整体视觉上没有缩进，但标记将与文本在同一行显示。

这两种方法各有优劣，具体使用哪种取决于你的具体需求和设计目的。在实际工作中，我们可能会根据具体的页面设计要求选择合适的方法来实现所需的列表样式。

How to remove list indentation with CSS

在HTML中创建下载链接，可以使用`<a>`标签，并通过设置`href`属性指向需要下载的文件。此外，为了确保浏览器理解链接指向的是一个下载文件，而不是要打开的新页面，可以使用`download`属性。这个属性可以让浏览器下载链接目标而不是导航到它。

这里有一个简单的例子：

```html
<!DOCTYPE html>
<html>
<head>
    <title>下载页面</title>
</head>
<body>
    <h1>下载示例</h1>
    <a href="path/to/your/file.pdf" download="NewFileName.pdf">下载PDF文件</a>
</body>
</html>
```

在这个例子中，`<a>`标签的`href`属性设置为指向你要下载的文件的路径，这里是`path/to/your/file.pdf`。`download`属性已被设置为`NewFileName.pdf`，这意味着当用户点击链接下载文件时，文件将被保存为`NewFileName.pdf`，而不是原始文件名。

这种方法的优点是简单且兼容大多数现代浏览器，但需要注意的是，如果文件是跨域的，或者浏览器不支持`download`属性（如一些老版本的浏览器），这个属性可能不会生效。在这种情况下，用户的浏览器会尝试打开文件而不是下载它。因此，最好确保网站的访问者使用的是支持HTML5的现代浏览器。

CSS选择器中的类名是区分大小写的。这意味着如果你在HTML中指定了一个类名，你在CSS中引用这个类时需要确保大小写完全一致。

举个例子，假设你的HTML中有这样一个元素：

```html
<div class="Button">点击我</div>
```

如果你在CSS中使用以下选择器来设置样式：

```css
.button {
    background-color: blue;
}
```

这段样式实际上是不会应用到 `<div class="Button">`上的，因为“.button”和“Button”在大小写上不匹配。正确的选择器应该是： 

```css
 .Button {
    background-color: blue;
}
```

这样写才能确保样式正确应用到相应的HTML元素上。所以，在编写CSS时确保类名的大小写与HTML中的完全一致是非常重要的。

Are class names in CSS selectors case sensitive?

在使用jQuery设置输入文本的值时，可以通过`val()`方法来实现。这个方法非常直观易用，它可以获取或设置表单元素的值，如输入框（input）、选项框（select）和文本区域（textarea）等。

### 示例代码：

假设我们有一个HTML页面，其中包含一个文本输入框，我们希望在用户打开页面时，自动填充这个输入框：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Set Input Value using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>


<input type="text" id="myInput">

<script>
$(document).ready(function() {
    // 当文档加载完毕后执行
    $('#myInput').val("Hello, world!");  // 设置输入框的值为 "Hello, world!"
});
</script>

</body>
</html>
```

### 解释：

1. **HTML 部分**：包含一个具有ID `myInput`的输入框。
2. **jQuery 部分**：
   - 首先，我们确保在文档完全加载后执行脚本（`$(document).ready()`）。
   - 使用`$('#myInput')`选择器找到ID为`myInput`的元素。
   - 使用`.val("Hello, world!")`方法设置该输入框的值为`Hello, world!`。

通过上述方法，我们可以方便地在任何需要的时候动态设置输入框的值。这在处理用户表单、展示默认值或在用户交互过程中动态改变输入内容的场景下非常有用。

How to set value of input text using jQuery

要限制 `<input type="file">` 元素只接受图像文件，可以通过设置 `accept` 属性来指定接受的文件类型。`accept` 属性可以接受一个或多个由逗号分隔的文件类型描述符。

例如，如果您想只允许用户上传图像文件，您可以将 `accept` 属性设置为接受常见的图像文件格式，如下所示：

```html
<input type="file" accept="image/png, image/jpeg, image/gif">
```

在这个例子中，`accept` 属性设置了三种图像格式：

- `image/png` - PNG 格式
- `image/jpeg` - JPEG 格式
- `image/gif` - GIF 格式

当用户点击这个输入字段以选择文件时，文件对话框将会过滤并只显示这些特定的图像文件类型，从而使用户更容易选择正确类型的文件，减少错误上传非图像文件的机会。

您也可以使用通配符 `image/*` 来允许所有类型的图像文件：

```html
<input type="file" accept="image/*">
```

这种设置允许用户上传任何类型的图像文件，而不限于特定的几种格式。这可能更方便，但如果您想确保只接受特定的图像格式，前一个方法更加合适和严格。

How to allow <input type=" file "> to accept only image files?

`tabindex` 属性是 HTML 中的一个全局属性，它指定了元素在键盘导航时的顺序。使用 `tabindex` 可以控制用户通过键盘（通常是 Tab 键）在页面上的元素间导航的顺序。

### 作用：

1. **提高可访问性**：
   通过设置 `tabindex`，开发者可以改善网站的可访问性，使其更友好地支持键盘操作，尤其是对于那些无法使用鼠标的用户。

2. **界面导航控制**：
   有时界面中的元素顺序并不符合逻辑或直观的导航顺序，`tabindex` 可以用来自定义这一顺序。

3. **包含非交互元素**：
   默认情况下，某些元素如 div 或 span 不会被包括在 Tab 导航中。通过设置 `tabindex`，这些元素也可以被包括在内，这对于创建丰富的交互式应用非常有用。

### 示例：

假如有一个表单，我们希望用户能按照特定的顺序导航：

```html
<input type="text" placeholder="Enter your first name" tabindex="1">
<input type="text" placeholder="Enter your last name" tabindex="3">
<input type="text" placeholder="Enter your email" tabindex="2">
<button type="submit" tabindex="4">Submit</button>
```

在这个例子中，用户首先会聚焦到“first name”输入框，然后是“email”输入框（因为其 `tabindex` 设置为 2），接着是“last name”输入框，最后是提交按钮。这样的设置可以帮助引导用户按照开发者预期的顺序填写信息，提升用户体验。

What is the HTML tabindex attribute?

在HTML中，`<div>`和`<span>`都是常用的元素，但它们有一些关键的区别主要体现在默认的显示方式和使用场景上。

### 显示方式
- `<div>` 是块级元素（block-level element），这意味着它默认会在页面上占据一整行，即使内容没有充满整行。
- `<span>` 是内联元素（inline element），它只占据必要的空间，通常用于不打断文本内容的小段内部。

### 使用场景
- `<div>` 通常用作布局的一部分，用来组织其他元素和创建页面的结构。例如，你可以用多个 `<div>` 元素来分隔页面的不同部分，如页眉、内容块、侧边栏和页脚。
- `<span>` 主要用于改变文本的一部分的样式或行为，而不影响整体布局。比如，你可以用 `<span>` 来为部分文本着色，改变字体或添加其他样式。

### 示例
假设我们要创建一个简单的用户介绍页面，我们可能会这样使用 `<div>` 和 `<span>`：

```html
<div id="profile">
  <div class="name">姓名：<span>张三</span></div>
  <div class="age">年龄：<span>30岁</span></div>
  <div class="occupation">职业：<span>软件工程师</span></div>
</div>
```
在这个例子中，`<div>` 用来构成每一个信息块（姓名、年龄、职业），而 `<span>` 则用来强调或特别标注实际的信息内容（张三、30岁、软件工程师）。这样的结构不仅清晰，而且便于通过CSS进行样式设计。

总结来说，`<div>` 和 `<span>` 虽然都是用于组织HTML内容的容器，但 `<div>` 更倾向于处理结构布局，而 `<span>` 更适用于文本级的细节调整。选择使用哪一个，取决于你的具体需求和上下文环境。

What is the difference between HTML div and span elements?

在使用JavaScript设置HTML表单元素的焦点时，通常的做法是使用HTML DOM（文档对象模型）来访问和操作页面上的元素。以下是实现此功能的具体步骤和示例：

### 步骤 1：选择元素
首先，需要使用JavaScript选择想要设置焦点的表单元素。可以通过多种方式选择元素，常见的方法有使用`getElementById()`、`getElementsByClassName()`、`getElementsByTagName()`或者更现代的选择器`querySelector()`和`querySelectorAll()`。

### 步骤 2：使用`focus()`方法
在选定元素后，可以调用这个元素的`focus()`方法来将焦点设置到该元素上。

### 示例代码

假设有一个HTML表单，其中包括一个文本输入框，其HTML代码如下：

```html
<form id="myForm">
    <input type="text" id="firstName" placeholder="Enter your first name">
    <input type="text" id="lastName" placeholder="Enter your last name">
    <input type="submit" value="Submit">
</form>

<script>
    // 使用JavaScript为firstName输入框设置焦点
    window.onload = function() {
        document.getElementById("firstName").focus();
    };
</script>
```

在这个例子中，当页面加载(`window.onload`)完成后，JavaScript代码会通过`getElementById()`函数选取ID为`firstName`的输入框，并通过调用`focus()`方法来设置焦点。这样一来，用户在页面加载完成后可以直接开始在`firstName`输入框中输入信息，无需再手动点击选中该输入框。

### 注意事项

- 确保在调用`focus()`方法之前，元素已经被加载到DOM中。通常，这意味着将JavaScript代码放在HTML文档的底部或在适当的DOM事件处理器中调用。
- 在一些情况下，特别是在使用更复杂的动态内容和AJAX技术时，可能需要在元素实际添加到DOM之后再调用`focus()`。

通过这种方法，可以非常灵活地控制用户的交互流程，提高表单的用户体验。

How can I set focus on an element in an HTML form using JavaScript?

在 HTML 中，`textarea` 元素用于输入多行文本。如果您需要在 `textarea` 中添加新行，通常有两种方式可以实现：

### 1. 直接在 HTML 中使用换行符

在 HTML 中直接给 `textarea` 的默认值添加换行符（`\n`），这样当页面加载时 `textarea` 就已经包含了预设的新行。例如：

```html
<textarea>
第一行文本
第二行文本
</textarea>
```

在上面的例子中，在 "第一行文本" 和 "第二行文本" 之间已经有一个新行。这是因为 HTML 中 `textarea` 的内容支持直接书写多行。

### 2. 使用 JavaScript 动态添加

您可以使用 JavaScript 来动态向 `textarea` 中添加新行。这种方法适用于当用户交互或其他程序逻辑需要在运行时添加行。以下是一个示例：

```html
<textarea id="myTextarea">初始文本</textarea>
<button onclick="addNewLine()">添加新行</button>

<script>
function addNewLine() {
    var textarea = document.getElementById('myTextarea');
    textarea.value += "\n新添加的行";
}
</script>
```

在这个例子中，每当用户点击按钮时，都会调用 `addNewLine()` 函数。这个函数会获取 `textarea` 元素，并在其现有内容后添加一个换行符和新的文本行。

这两种方法都是添加新行到 `textarea` 的有效方式，具体使用哪种方式取决于您的具体需求和场景。

How to add a new line in textarea element?

### offsetHeight

`offsetHeight` 是一个元素的可视高度，包含了元素的垂直内边距（padding）、边框（border）和水平滚动条（如果可见）的高度，但不包括外边距（margin）。它提供了元素整体占据的垂直空间的度量。

例如，如果我们有一个元素样式设置如下：

```html
<div style="height: 100px; padding: 10px; border: 5px solid; margin: 10px; overflow: scroll;">
  Hello, world!
</div>
```

这个元素的 `offsetHeight` 将是 `100px` （元素本身的高度）+ `20px` （上下padding各10px）+ `10px` （上下border各5px）= `130px`。

### clientHeight

`clientHeight` 是元素的内部高度，包括元素的垂直内边距，但不包括水平滚动条的高度、边框和外边距。这是元素内容区域加上内边距的高度。

继续使用上面的例子，该元素的 `clientHeight` 将是 `100px` （元素本身的高度）+ `20px` （上下padding各10px）= `120px`，因为它不包括边框和滚动条的高度。

### scrollHeight

`scrollHeight` 是元素内容的总高度，包括因为溢出而不可见的部分。这通常用于确定是否需要滚动条。

假设上面的元素包含了足够的内容使其内容溢出可视区域：

```html
<div style="height: 100px; padding: 10px; border: 5px solid; overflow: scroll;">
  Hello, world!<br>
  Hello, world!<br>
  Hello, world!<br>
  
</div>
```

如果内容高度总和达到 `200px`，那么 `scrollHeight` 将是 `200px`，尽管可视区域由于高度限制和滚动条仅显示部分内容。

### 小结

总的来说，这三个属性提供了不同视角的元素高度信息，可以根据具体需要选择合适的属性来使用。在设计交互式和响应式界面时，了解和使用这些属性非常重要，以确保用户界面的功能和美观性。

What is offsetHeight, clientHeight, scrollHeight?

在HTML文档中，`<script>`标签可以放置在不同的位置，这取决于你希望脚本执行的时机。一般来讲，有两个主要的位置：`<head>`区域和`<body>`区域的末尾。

1. 放在`<head>`标签中：将`<script>`放在`<head>`中意味着它会在页面其他内容加载之前加载和执行。这样做的好处是可以确保Javascript代码在DOM构建之前就已经加载，适合那些不依赖DOM元素、或者需要提前执行的脚本，例如配置文件或者字符集设置。

   但是，这种做法可能会造成页面加载速度变慢，因为浏览器会先解析执行`<head>`中的JavaScript代码，这可能会延迟页面内容的显示。

   例如，配置网页的字符集：
   ```html
   <head>
       <meta charset="UTF-8">
       <script>
           // 配置信息或者不依赖页面其他元素的脚本
       </script>
   </head>
   ```

2. 放在`<body>`标签的末尾：将`<script>`标签放在`<body>`的末尾，通常是在关闭的`</body>`标签之前，会在HTML文档的元素已经解析完成后执行JavaScript代码。这是目前最常见和推荐的做法，因为它允许浏览器先加载页面的内容，使得用户能尽快看到网页，从而提高用户体验。

   这种做法可以保证在脚本执行时，DOM已经构建完毕，可以安全地进行DOM操作。它还可以减少页面的可视渲染时间。

   例如，当页面几乎加载完成，我们需要添加一些交互功能：
   ```html
   <body>
       
       <script>
           // 依赖DOM元素的脚本，例如事件监听、DOM操作等
       </script>
   </body>
   ```

在某些情况下，你可能还会看到`<script>`标签配合`async`或`defer`属性使用，这两个属性允许对脚本的加载和执行时机进行更细致的控制：

- `async`属性表示脚本将异步加载，它一旦下载完成就会立刻执行，而不用等待其他脚本或者HTML文档解析完成。适合那些不依赖于页面其他脚本，也不依赖于DOM内容加载完成的脚本。

   ```html
   <script async src="script.js"></script>
   ```

- `defer`属性表示脚本会在HTML文档解析完成后、`DOMContentLoaded`事件触发之前执行。适合那些需要访问DOM，但又不影响文档初始渲染的脚本。

   ```html
   <script defer src="script.js"></script>
   ```

结合实际开发经验来说，除非有特殊的需求，一般建议将含有实际功能的JavaScript脚本放在`<body>`标签的底部，以提升页面加载性能和用户体验。

<p>Here's what happens when a browser loads a website with a<code>&lt; Script&gt</ Code>tag on it:</p>

<p>Just before the closing body tag, as stated on<em><a href=“ http://developer.yahoo.com/performance/rules.html#js_bottom "Rel=" noreferrer ">Put Scripts at the Bottom</a></em>:</p>

<p>Non blocking script tags can be placed just about anywhere:</p>

<p>The standard advice, promoted by the<em>Yahoo</ The Exceptional Performance team is to put the<code>&lt; Script&gt</ Code>tags at the end of the document's<code>&lt; Body&gt</ Code>element so they don't block rendering of the page</ P>

<p>The modern approach is using ES6 'module' type scripts</ P>

<p>If you are using jQuery then put the JavaScript code where you find it best and use<code>$(document). ready()</code>to ensure that things are loaded properly before executing any functions</ P>

<pre class="default s code block"><code class="hljs language XML"><span class="hljs tag">&lt< Span class="hljs name">script</span><span class="hljs attr">src</span>=<span class="hljs string">"myjs. js"</span>&gt</ <span class="hljs tag">&lt/< Span class="hljs name">script</span>&gt</ Span>

<p>The<strong>best</strong>place to put<code>&lt; Script&gt</ Code>tag is before closing<code>&lt/ Body&gt</ Code>tag, so the downloading and executing it doesn't block the browser to parse the HTML in document</p>

<p>It turns out it can be everywhere</ P>

<p>The most conservative (and widely accepted) answer is "at the bottom just before the ending tag", because then the entire DOM will have been loaded before anything can start executing</ P>

Where should i put script tags in html markup

为了隐藏HTML中图像损坏的图标，可以使用CSS的伪元素来覆盖默认的图像损坏图标。以下是一个常用的方法，它利用了`::before`或`::after`伪元素来实现。

```css
img {
  /* 当图像未能加载时，将其内容设置为空 */
  display: block;
  font-family: 'arial';
  color: transparent;
  width: 200px; /* 设置为你希望的宽度 */
  height: 200px; /* 设置为你希望的高度 */
}

img::before {
  /* 在图像位置展示的内容，这里使用空内容来隐藏损坏的图标 */
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #ccc; /* 可以使用其他颜色或背景图案 */
}

img:not([src]), img[src=""] {
  visibility: hidden;
}
```

此代码块做了以下几件事情：

1. **设置图像尺寸**：`width`和`height`属性用于指定图像的占位大小。

2. **隐藏损坏的图标**：使用`img::before`创建一个伪元素，`content`属性设置为空字符串，这将覆盖默认的图像损坏图标。

3. **设置一个备用背景**：可以通过`background`属性设置一个颜色或者图案，作为图像损坏时的背景。这是可选的，如果你不希望有任何东西显示，可以省略这一步。

4. **隐藏没有`src`的图像**：`img:not([src]), img[src=""]`选择器用来选中那些没有`src`属性或者`src`为空字符串的`img`元素，并将其`visibility`属性设置为`hidden`，以确保这些元素不会在页面上显示。

请注意，这种方法的效果可能依赖于不同浏览器的实现以及图像损坏时浏览器的默认行为。此外，如果你希望支持屏幕阅读器用户，隐藏图像的同时请确保使用适当的`alt`文本描述，以便屏幕阅读器仍然可以提供图像的信息。

CSS/HTML 无法知道图像链接是否已损坏，因此无论如何您都必须使用 JavaScript

但这里有一个隐藏图像或用备份替换源的最小方法。

    <img src="Error.src" onerror="this.style.display='none'"/>
    

或者

    <img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
    

更新
--

您可以通过执行以下操作将此逻辑一次应用于多个图像：

    document.addEventListener("DOMContentLoaded", function(event) {
       document.querySelectorAll('img').forEach(function(img){
      	img.onerror = function(){this.style.display='none';};
       })
    });

    <img src="error.src">
    <img src="error.src">
    <img src="error.src">
    <img src="error.src">

运行代码片段Hide results

展开片段

更新2
---

对于**CSS 选项，**请参阅下面[michalzuber 的回答](https://stackoverflow.com/a/37192970/484780)。您无法隐藏整个图像，但可以更改损坏图标的外观。

不管人们在这里怎么说，你根本不需要 JavaScript，甚至不需要 CSS！

实际上，仅使用 HTML 就非常可行且简单。  
**如果图像未加载，您甚至可以显示默认图像**。就是这样...

这也适用于所有浏览器，甚至早到 IE8（在 2015 年 9 月我托管的网站的 250,000 多名访问者中，**零**个人使用了比 IE8 更糟糕的浏览器，这意味着该解决方案几乎适用于**所有浏览器**）。

步骤 1：将图像引用为**对象**而不是**img**。当对象失败时，它们不会显示损坏的图标；他们只是什么都不做。从 IE8 开始，您可以互换使用 object 和 img 标签。您还可以调整大小并使用常规图像做所有您可以做的事情。不要害怕对象标签；它只是一个标签，不会加载任何大而笨重的东西，也不会减慢任何东西。您只需使用另一个名称的 img 标签即可。速度测试表明它们的使用方式相同。

第 2 步：（**可选，但非常棒）**将默认图像粘贴到该对象内。如果您想要的图像实际加载_到对象中_，则默认图像将不会显示。例如，您可以显示用户头像列表，如果某人在服务器上还没有图像，它可以显示占位符图像...根本不需要 JavaScript 或 CSS，但您可以获得以下功能大多数人都需要 JavaScript。

这是代码...

    <object data="avatar.jpg" type="image/jpeg">
        <img src="default.jpg" />
    </object>
    

……是的，就是这么简单。

如果你想用 CSS 实现默认图像，你可以在 HTML 中使其变得更简单，如下所示......

    <object class="avatar" data="user21.jpg" type="image/jpeg"></object>
    

...只需添加此答案中的 CSS -> [https://stackoverflow.com/a/32928240/3196360](https://stackoverflow.com/a/32928240/3196360)

[在https://bitsofco.de/styling-broken-images/](https://bitsofco.de/styling-broken-images/)找到了一个很好的解决方案[](https://bitsofco.de/styling-broken-images/)

    img {  
      position: relative;
    }
    
    /* style this to fit your needs */
    /* and remove [alt] to apply to all images*/
    img[alt]:after {  
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      font-family: 'Helvetica';
      font-weight: 300;
      line-height: 2;  
      text-align: center;
      content: attr(alt);
    }

    <img src="error">
    <br>
    <img src="broken" alt="A broken image">
    <br>
    <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

运行代码片段Hide results

展开片段

如果您添加带有文本**alt="abc"**的 alt ，它将显示显示损坏的缩略图，以及 alt 消息 abc

    <img src="pic_trulli.jpg" alt="abc"/>
    

[![第一名](https://i.stack.imgur.com/llfn8.jpg)](https://i.stack.imgur.com/llfn8.jpg)

如果您不添加 alt，它将显示“显示损坏的缩略图”

    <img src="pic_trulli.jpg"/>
    

[![第二名](https://i.stack.imgur.com/iEFO5.jpg)](https://i.stack.imgur.com/iEFO5.jpg)

如果你想隐藏损坏的，只需添加**alt=""**它不会显示损坏的缩略图和任何 alt 消息（不使用 js）

    <img src="pic_trulli.jpg" alt=""/>
    

如果你想隐藏损坏的，只需添加**alt="" & onerror="this.style.display='none'"**它不会显示损坏的缩略图和任何 alt 消息（带有 js）

    <img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>
    

第四个有点危险（不完全是），如果你想在onerror事件中添加任何图像，即使图像存在，它也不会显示，因为style.display就像添加一样。因此，当您不需要显示任何替代图像时，请使用它。

    display: 'none'; // in css
    

如果我们在 CSS 中给出它，那么该项目将不会显示（如 image、iframe、div 等）。

如果你想显示图像并且你想在错误时显示完全空白，那么你可以使用，但也要小心这不会占用任何空间。所以，你需要将它保存在 div 中

链接[https://jsfiddle.net/02d9yshw/](https://jsfiddle.net/02d9yshw/)

我认为最简单的方法是通过文本缩进属性隐藏损坏的图像图标。

    img {
        text-indent: -10000px
    }
    

显然，如果你想看到“alt”属性，这是行不通的。

How to hide image broken icon using only css

`:before` 是一个CSS伪元素，它用于在选择的元素内容的前面插入一些内容。通常，这个伪元素与 `content` 属性一起使用，可以插入文本、图标或其他装饰性内容。

然而，`:before` 伪元素对 `img` 标签不起作用，原因是 `img` 标签是一个替换元素（replacement element）。在HTML中，替换元素通常是指那些不是由CSS渲染的内容，而是由外部资源表示的元素。`img` 元素的内容不是由文档内容直接定义的，而是由它的 `src` 属性指定的外部资源定义的，比如一张图片。

CSS伪元素 `:before` 和 `:after` 是用来为元素的内容添加装饰性内容的，但它们只能应用于那些能够包含子内容的元素，比如 `div`、`span` 或者文本元素等。既然 `img` 元素没有子内容，它是自闭合的标签，并且它的内容是由外部引用定义的，所以是不能使用 `:before` 和 `:after` 伪元素的。

如果你想为图片添加装饰或额外的图形元素，你可以使用一个容器元素（比如 `div`），然后将 `img` 元素放入该容器内。之后，你可以对这个容器使用 `:before` 或 `:after` 伪元素来添加装饰内容。

例如，以下HTML和CSS代码演示了如何给图片添加一个简单的装饰边框：

```html
<div class="image-container">
  <img src="example.jpg" alt="示例图片" />
</div>
```

```css
.image-container {
  position: relative;
  display: inline-block;
}

.image-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid red;
  pointer-events: none; /* 防止伪元素捕获鼠标事件 */
}
```

在这个例子中，`.image-container` 就像是 `img` 的父容器，我们可以在它上面使用 `:before` 伪元素来创建一个边框效果，而这个边框会显示在图片的周围。这种方法允许开发者在图片周围添加虚拟的内容，比如边框、背景或者其他装饰物，而无需修改原始的 `img` 标签。这样的技术可以保持HTML结构的清晰和语义化，同时还能提供灵活的样式设计。

例如，如果你想给图片添加一个悬浮时显示的标题或标签，你可以这样做：

```html
<div class="image-wrapper">
  <img src="example.jpg" alt="示例图片" />
</div>
```

```css
.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper:before {
  content: "图片标题";
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.image-wrapper:hover:before {
  opacity: 1;
}
```

在上述代码中，当用户将鼠标悬浮在 `.image-wrapper` 包裹的图片上时，`before` 伪元素中定义的内容（"图片标题"）就会显示出来，作为图片的标题或者说明文字。这种方法同样不会影响到 `img` 元素本身，而是通过包裹元素和CSS伪元素来实现效果。

总的来说，对于不能直接应用 `:before` 和 `:after` 伪元素的替换元素，我们可以通过创造性的方法，例如使用包裹元素或者其他结构性的标签，来模拟出我们想要的效果。这样做的好处是不会对HTML的语义结构造成影响，同时还能保持样式的灵活性和扩展性。

不幸的是，大多数浏览器不支持在 img 标签上使用`:after`或。`:before`

[http://lildude.co.uk/after-css-property-for-img-tag](http://lildude.co.uk/after-css-property-for-img-tag)

然而，您可以使用 JavaScript/jQuery 来完成您所需要的任务。看看这个小提琴：

[http://jsfiddle.net/xixonia/ahnGT/](http://jsfiddle.net/xixonia/ahnGT/)

    $(function() {
    
        $('.target').after('<img src="..." />');
    
    });
    

**_编辑_**：

对于不支持此功能的原因，请查看[coreyward 的回答](https://stackoverflow.com/a/5843164/696056)。

before 和 after 伪选择器不插入 HTML 元素 — 它们在目标元素的现有内容之前或之后插入文本。因为图像元素不包含文本或有后代，所以它们都不`img:before`会对`img:after`您有任何好处。出于同样的原因，类似`<br>`和的元素也是如此。`<hr>`

我找到了一种在纯 css 中实现此功能的方法：

_我只是假内容_\-方法
============

启用 img:after 的纯 CSS 方法。

你可以查看**[CodePen：我只是假内容](http://codepen.io/TimPietrusky/pen/xpesA)**或者查看**来源**。

来源和片段
-----

    img {
        /* hide the default image */
        height:0;
        width:0;
    
        /* hide fake content */
        font-size:0;
        color:transparent;
    
        /* enable absolute position for pseudo elements */
        position:relative;
    
        /* and this is just fake content */
        content:"I'm just fake content";
    }
    
    /* initial absolute position */
    img:before,
    img:after {
        position:absolute;
        top:0;
        left:0;    
    }
    
    /* img:before - chrome & others */
    img:before {
        content:url(http://placekitten.com/g/250/250);
    }
    
    /* img:before - firefox */
    body:not(:-moz-handler-blocked) img:before {
        padding:125px;
        background:url(http://placekitten.com/g/250/250) no-repeat;
    }
    
    /* img:after */
    img:after {
        /* width of img:before */
        left:250px;
    
        content:url(http://lorempixel.com/350/200/city/1);
    }

    <img
        alt="You are watching the ~ I'm just fake content ~ method"  
    />

运行代码片段Hide results

展开片段

### 浏览器支持

✓ Chrome 10+

✓ 火狐 11+

✓ 歌剧 9.8+

✓ 野生动物园

### 没有支持

⊗ Internet Explorer 8 / 9

_请在其他浏览器中测试_

由于[`<img>`](https://www.w3.org/TR/html50/embedded-content-0.html#the-img-element)被[替换元素](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)的性质，文档样式不会影响它。

无论如何要引用它，[`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)提供一个理想的本机包装器，可以附加伪元素，如下所示：

    img::after,
    picture::after{
        content:"\1F63B";
        font-size:larger;
        margin:-1em;
    }

    <img src="//placekitten.com/110/80">
    
    <picture>
        <img src="//placekitten.com/110/80">
    </picture>

运行代码片段Hide results

展开片段

这是另一种解决方案，使用 div 容器作为 img，同时使用`:hover::after`来实现效果。

HTML如下：

    <div id=img_container><img src='' style='height:300px; width:300px;'></img></div>
    

CSS如下：

    #img_container { 
        margin:0; 
        position:relative; 
    } 
    
    #img_container:hover::after { 
        content:''; 
        display:block; 
        position:absolute; 
        width:300px; 
        height:300px; 
        background:url(''); 
        z-index:1; 
        top:0;
    } 
    

要查看它的实际效果，请查看我创建的[小提琴](http://jsfiddle.net/D7C88/)。只是为了让您知道这是跨浏览器友好的，并且无需使用“虚假内容”来欺骗代码。

`:before` 是一个CSS伪元素，它用于在选择的元素内容的前面插入一些内容。通常，这个伪元素与 `content` 属性一起使用，可以插入文本、图标或其他装饰性内容。

然而，`:before` 伪元素对 `img` 标签不起作用，原因是 `img` 标签是一个替换元素（replacement element）。在HTML中，替换元素通常是指那些不是由CSS渲染的内容，而是由外部资源表示的元素。`img` 元素的内容不是由文档内容直接定义的，而是由它的 `src` 属性指定的外部资源定义的，比如一张图片。

CSS伪元素 `:before` 和 `:after` 是用来为元素的内容添加装饰性内容的，但它们只能应用于那些能够包含子内容的元素，比如 `div`、`span` 或者文本元素等。既然 `img` 元素没有子内容，它是自闭合的标签，并且它的内容是由外部引用定义的，所以是不能使用 `:before` 和 `:after` 伪元素的。

如果你想为图片添加装饰或额外的图形元素，你可以使用一个容器元素（比如 `div`），然后将 `img` 元素放入该容器内。之后，你可以对这个容器使用 `:before` 或 `:after` 伪元素来添加装饰内容。

例如，以下HTML和CSS代码演示了如何给图片添加一个简单的装饰边框：

```html
<div class="image-container">
  <img src="example.jpg" alt="示例图片" />
</div>
```

```css
.image-container {
  position: relative;
  display: inline-block;
}

.image-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid red;
  pointer-events: none; /* 防止伪元素捕获鼠标事件 */
}
```

在这个例子中，`.image-container` 就像是 `img` 的父容器，我们可以在它上面使用 `:before` 伪元素来创建一个边框效果，而这个边框会显示在图片的周围。
这种方法允许开发者在图片周围添加虚拟的内容，比如边框、背景或者其他装饰物，而无需修改原始的 `img` 标签。这样的技术可以保持HTML结构的清晰和语义化，同时还能提供灵活的样式设计。

例如，如果你想给图片添加一个悬浮时显示的标题或标签，你可以这样做：

```html
<div class="image-wrapper">
  <img src="example.jpg" alt="示例图片" />
</div>
```

```css
.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper:before {
  content: "图片标题";
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.image-wrapper:hover:before {
  opacity: 1;
}
```

在上述代码中，当用户将鼠标悬浮在 `.image-wrapper` 包裹的图片上时，`before` 伪元素中定义的内容（"图片标题"）就会显示出来，作为图片的标题或者说明文字。这种方法同样不会影响到 `img` 元素本身，而是通过包裹元素和CSS伪元素来实现效果。

总的来说，对于不能直接应用 `:before` 和 `:after` 伪元素的替换元素，我们可以通过创造性的方法，例如使用包裹元素或者其他结构性的标签，来模拟出我们想要的效果。这样做的好处是不会对HTML的语义结构造成影响，同时还能保持样式的灵活性和扩展性。

Why does before not work on img elements?

在HTML中，超链接（`a` 标签）默认会有特定的颜色，通常未访问的链接是蓝色，而访问过的链接是紫色。如果你想要删除或者改变这些默认颜色，可以使用CSS。

以下是一个简单的CSS示例来改变链接颜色：

```css
/* 未访问的链接 */
a:link {
    color: inherit; /* 这将使链接颜色继承父元素的颜色 */
    text-decoration: none; /* 这将移除下划线 */
}

/* 访问过的链接 */
a:visited {
    color: inherit; /* 同上 */
    text-decoration: none; /* 同上 */
}

/* 鼠标悬停状态 */
a:hover {
    color: inherit; /* 你可以在这里设置悬停时的颜色，或者保持继承 */
    text-decoration: underline; /* 在悬停时显示下划线，这是可选的 */
}

/* 鼠标激活点击状态 */
a:active {
    color: inherit; /* 你可以在这里设置点击时的颜色，或者保持继承 */
    text-decoration: none;
}
```

这段CSS代码可以应用到你的HTML文档的`<head>`部分或者一个外部的CSS文件中。`inherit`值意味着链接的颜色将不再是浏览器默认的蓝色或紫色，而是会继承其父元素的字体颜色。`text-decoration: none;`用于移除链接的下划线，但你可以根据需要来调整这些属性。

例如，如果你的HTML文档中有一个段落，你希望其中的链接没有默认的蓝色或紫色，看起来就像普通文本一样，你可以这样做：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 这里是之前提供的CSS代码 */
        a:link, a:visited, a:hover, a:active {
            color: inherit;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p style="color: black;">这是一个段落，里面有一个<a href="https://www.example.com">链接</a>，它看起来应该和其他文本一样。</p>
</body>
</html>
```

在这个例子中，`<a>` 标签内的文本将显示为与周围文本相同的颜色，并且没有下划线，除非鼠标悬停在链接上时，你可以设置显示下划线。这样，链接看起来就和普通的文本没有区别了。

简言之，通过使用CSS，你可以轻松地改变或删除超链接的默认颜色和下划线，以符合你的设计需求。

继承[值](https://developer.mozilla.org/en-US/docs/Web/CSS/inherit)：

    a { color: inherit; } 
    

...将导致该元素呈现其父级的颜色（这就是我认为您正在寻找的）。

现场演示如下：

显示代码片段

    a {
      color: inherit;
    }

    <p>The default color of the html element is black. The default colour of the body and of a paragraph is inherited. This
      <a href="http://example.com">link</a> would normally take on the default link or visited color, but has been styled to inherit the color from the paragraph.</p>

Run code snippetHide results

Expand snippet

尝试这样的事情：

    a {
        color: #0060B6;
        text-decoration: none;
    }
    
    a:hover {
        color:#00A0C6; 
        text-decoration:none; 
        cursor:pointer;  
    }
    

如果`text-decoration`不起作用，请将其更改为：

    text-decoration: none !important;
    

该`!important`规则会覆盖该属性的所有其他样式`text-decoration`。你可以[在这里](https://www.w3schools.com/css/css_important.asp)读更多关于它的内容。

如果您不想看到浏览器提供的下划线和默认颜色，可以将以下代码保留在 main.css 文件的顶部。如果您需要不同的颜色和装饰样式，您可以使用下面的代码片段轻松覆盖默认值。

     a, a:hover, a:focus, a:active {
          text-decoration: none;
          color: inherit;
     }

.cancela,.cancela:link,.cancela:visited,.cancela:hover,.cancela:focus,.cancela:active{
        color: inherit;
        text-decoration: none;
    }
    

我觉得有必要发布上面的类定义，SO上的许多答案都遗漏了一些状态

这也是可能的：

    a {
      all: unset;
    }
    

> unset：此关键字指示将应用于该元素或该元素的父元素的所有属性更改为它们的父值（如果它们是可继承的），否则更改为它们的初始值。 unicode-bidi 和方向值不受影响。

来源：[Mozilla 的所有描述](https://developer.mozilla.org/en-US/docs/Web/CSS/all)

在CSS中，您可以通过设置 `a` 标签的 `color` 属性来删除超链接的默认链接颜色。默认情况下，未访问的链接是蓝色的，而已访问的链接则是紫色的。如果您想要超链接看起来不像传统的链接，您可以指定一个颜色值，甚至可以将其设置为与文本相同的颜色。

以下是一段CSS代码，展示了如何为超链接设置不同状态下的颜色：

```css
/* 未访问的链接 */
a:link {
    color: black; /* 或者可以是任何颜色，例如#000000或者rgba(0,0,0,1) */
    text-decoration: none; /* 这会删除下划线 */
}

/* 已访问的链接 */
a:visited {
    color: black; /* 设置成和未访问链接一样的颜色 */
    text-decoration: none;
}

/* 鼠标悬浮在链接上 */
a:hover {
    color: gray; /* 或者你想要的任何颜色 */
    text-decoration: underline; /* 可选：鼠标悬浮时添加下划线 */
}

/* 鼠标点击链接的那一刻 */
a:active {
    color: red; /* 或者你想要的任何颜色 */
    text-decoration: none;
}
```

在上面的例子中，我将所有链接都设置成了黑色，并且移除了下划线，这样链接在视觉上就不再显示为传统的蓝色或紫色带下划线的文本。同时，我也添加了 `:hover` 和 `:active` 状态的样式，以便在用户与链接交互时提供视觉反馈。当然，您可以根据您的设计需求自由地修改这些属性值。

How do i remove the default link color of the html hyperlink a tag

Webkit 是一种开源的浏览器引擎，最初由苹果公司开发，用于其Safari浏览器。它是一套核心软件组件，能够解析网页代码，并将其渲染为用户界面。Webkit 的设计允许它解释和显示网页编码，包括 HTML、JavaScript 和 CSS。

与 CSS 的关联在于 Webkit 可以解析和渲染 CSS 代码。CSS（层叠样式表）是一种用来表现 HTML 或 XML 文档的样式的语言。它使开发人员能够控制网页的布局、字体、颜色、间距和其他视觉方面的元素。

Webkit 作为浏览器引擎，其性能和特性对于 CSS 的支持至关重要，因为开发人员依赖于它来确保他们的网页在各种设备和浏览器上都能正确显示。例如，Webkit 在开发过程中引入并支持了很多 CSS3 的新特性，如动画、圆角、阴影等。这就要求 Webkit 不断更新，以适应 CSS 标准的发展。

Webkit 引擎的一个关键优势是其对 CSS 标准的紧密跟进和快速实现。为了提供一个例子，苹果公司在开发 iPhone 时就使用了 Webkit，因为它能够提供流畅的用户体验和对先进 web 标准（包括新的 CSS 功能）的支持。这使得 Safari 浏览器能够显示复杂的网页布局和动态效果，而不牺牲性能或兼容性。

简而言之，Webkit 是 web 开发和渲染的核心组件之一，它在渲染 CSS 样式和实现跨浏览器兼容性方面发挥了至关重要的作用。

> 更新：显然，WebKit 是 Safari/Chrome 的 HTML/CSS Web 浏览器渲染引擎。 IE/Opera/Firefox 是否有这样的引擎？使用其中一种引擎有何区别、优缺点？例如，我可以在 Firefox 中使用 WebKit 功能吗？

每个浏览器都由渲染引擎支持来绘制 HTML/CSS 网页。

*   IE →[三叉戟](http://en.wikipedia.org/wiki/Trident_%28layout_engine%29)（已停产）
*   边缘 →[EdgeHTML](https://en.wikipedia.org/wiki/EdgeHTML)（Trident 的清理分支）（Edge 于 2019 年切换为[Blink](https://en.wikipedia.org/wiki/Blink_%28web_engine%29)）
*   火狐 →[壁虎](http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29)
*   歌剧 →[急板](http://en.wikipedia.org/wiki/Presto_%28layout_engine%29)（自 2013 年 2 月起不再使用 Presto，考虑 Opera = Chrome，因此现在[Blink ）](https://en.wikipedia.org/wiki/Blink_%28web_engine%29)
*   Safari → [WebKit](http://en.wikipedia.org/wiki/WebKit)
*   Chrome → [Blink （](https://en.wikipedia.org/wiki/Blink_%28web_engine%29) [Webkit](http://en.wikipedia.org/wiki/WebKit)的一个分支）。

有关不同领域的比较列表，请参阅[网络浏览器引擎的比较。](http://en.wikipedia.org/wiki/Comparison_of_web_browser_engines)

> 最终的问题... IE 支持 WebKit 吗？

不是原生的。

除了[@KennyTM](https://stackoverflow.com/questions/3468154/what-is-webkit-and-how-is-it-related-to-css/3468236#3468236)所说：

*   **IE**
    *   发动机：[三叉戟](https://en.wikipedia.org/wiki/Trident_%28layout_engine%29)
    *   CSS 前缀：`-ms`
*   **边缘**
    *   引擎：[EdgeHTML](https://en.wikipedia.org/wiki/EdgeHTML) → [Blink](https://en.wikipedia.org/wiki/Blink_%28web_engine%29) 3
    *   CSS 前缀：`-ms`
*   **火狐浏览器**
    *   发动机：[壁虎](https://en.wikipedia.org/wiki/Gecko_%28software%29)
    *   CSS 前缀：`-moz`
*   **歌剧**
    *   引擎：[急速](https://en.wikipedia.org/wiki/Presto_%28layout_engine%29)→[闪烁](https://en.wikipedia.org/wiki/Blink_%28web_engine%29)1
    *   CSS 前缀：`-o`(Presto) 和`-webkit`(Blink)
*   **苹果浏览器**
    *   引擎：[WebKit](https://en.wikipedia.org/wiki/WebKit)
    *   CSS 前缀：`-webkit`
*   **铬合金**
    *   引擎：[WebKit](https://en.wikipedia.org/wiki/WebKit) → [Blink](https://en.wikipedia.org/wiki/Blink_%28web_engine%29) 2
    *   CSS 前缀：`-webkit`

1) 2013 年 2 月 12 日，Opera（版本 15+）[宣布](https://dev.opera.com/blog/300-million-users-and-move-to-webkit/)他们从自己的引擎 Presto 转向名为[Blink](https://en.wikipedia.org/wiki/Blink_%28web_engine%29)的 WebKit 。

2) 2013 年 4 月 3 日，Google（Chrome 版本 28+）[宣布](http://blog.chromium.org/2013/04/blink-rendering-engine-for-chromium.html)他们将使用基于 WebKit 的[Blink](https://en.wikipedia.org/wiki/Blink_%28web_engine%29)引擎。

3) 2018 年 12 月 6 日，微软（Microsoft Edge 79+稳定版）[宣布](https://github.com/MicrosoftEdge/MSEdge/blob/7d69268e85e198cee1c2b452d888ac5b9e5995ca/README.md)他们将使用基于 WebKit 的[Blink](https://en.wikipedia.org/wiki/Blink_%28web_engine%29)引擎。

Webkit 是 Safari 和 Chrome（以及其他浏览器，但这些都是流行的）使用的 Web 浏览器渲染引擎。

CSS 选择器上的前缀是_仅_此引擎打算处理的`-webkit`属性，与属性非常相似。我们中的许多人都希望这种情况消失，例如被标准取代，并且您不需要针对多个浏览器的_同一_事物使用多个规则。这实际上是“预先规范”功能的结果，这些功能旨在在标准版本出现时不干扰标准版本。`-moz``-webkit-border-radius``border-radius`

_对于您的更新：_ ...不，它实际上与 IE 无关，IE 至少在 9 之前使用不同的渲染引擎，称为[Trident](http://en.wikipedia.org/wiki/Trident_(layout_engine))。

这已被回答并接受，但如果有人仍然想知道为什么今天事情有点混乱，你必须阅读以下内容：

[http://webaim.org/blog/user-agent-string-history/](http://webaim.org/blog/user-agent-string-history/)

它很好地了解了 gecko、webkit 和其他主要渲染引擎是如何演变的，以及是什么导致了当前用户代理字符串混乱的状态。

出于 TL;DR 目的引用最后一段：

> 然后 Google 构建了 Chrome，Chrome 使用了 Webkit，它就像 Safari，并且希望为 Safari 构建页面，因此假装是 Safari。于是Chrome使用了WebKit，假装成Safari，WebKit假装成KHTML，KHTML假装成Gecko，所有浏览器假装成Mozilla，Chrome称自己，`Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13`用户代理字符串一团糟，几乎毫无用处，每个人都假装成其他人，混乱无处不在。

`-webkit-`只是 Chrome、Safari、Opera 和 iOS 浏览器所属的一组。它们都有一个共同的祖先，因此它们的功能/限制（当涉及到运行 CSS 和 Javascript 时）通常仅限于该组。

开发人员将`-webkit-`在后面放置一些代码，这意味着这些代码只能在 Chrome、Safari、Opera 和 iOS 浏览器上运行。这是一个完整的列表：

`-webkit-`（Chrome、Safari、较新版本的 Opera、几乎所有 iOS 浏览器（包括 iOS 版 Firefox）；基本上，任何基于 WebKit 的浏览器）

`-moz-`（火狐）

`-o-`（旧的、WebKit 之前的 Opera 版本）

`-ms-`（Internet Explorer 和 Microsoft Edge）

What is webkit and how is it related to css

要使用CSS将`div`元素美化成看起来像`a`标签链接的样式，我们可以通过设置`div`的一些基础样式来模拟`a`标签的外观。下面是具体的步骤和一个例子：

1. **颜色和文本装饰**：通常，链接的文本颜色为蓝色，并且有下划线，以便用户可以识别它们。我们可以对`div`应用相同的样式。

2. **鼠标悬停效果**：当鼠标指针悬停在链接上时，链接通常会改变颜色或下划线。我们可以为`div`添加`:hover`伪类来实现这个效果。

3. **光标样式**：为了让用户知道他们可以点击`div`，我们可以将光标样式设置为`pointer`，这通常是链接的标志。

4. **可访问性**：虽然样式上可以模仿链接的外观，但`div`元素默认不具有键盘可访问性和语义性。为了提高可访问性，我们可以使用`tabindex`属性。

5. **交互性**：如果你想让`div`元素像链接那样实际工作，你需要使用JavaScript来监听点击事件，并导航到指定的URL。

下面是一个将`div`元素美化成看起来像`a`标签链接的CSS样式例子：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div as a Link</title>
<style>
  .link-style-div {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    display: inline-block; /* 可以是其他合适的显示类型，根据布局需求而定 */
  }
  .link-style-div:hover {
    text-decoration: none;
    color: darkblue;
  }
</style>
</head>
<body>

<div class="link-style-div" onclick="window.location.href='http://example.com';" tabindex="0">
  点击这个div跳转到example.com
</div>

<script>
  // 为了更好的可访问性，我们可以加入键盘监听事件
  document.querySelector('.link-style-div').addEventListener('keypress', function(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      window.location.href = 'http://example.com';
    }
  });
</script>

</body>
</html>
```

在上面的代码中，我们创建了一个具有基础链接样式的`div`元素，当用户点击或者按下回车键（Enter）或空格键（Space）时，页面会导航到`http://example.com`。我们通过JavaScript添加了点击和键盘监听事件，以实现`div`的交互性。

来到这里是希望找到一个更好的解决方案，但我不喜欢这里提供的任何解决方案。我认为你们中有些人误解了这个问题。 OP 想让一个充满内容的 div 表现得像一个链接。 Facebook 广告就是一个例子 - 如果你仔细观察，它们实际上是正确的标记。

对我来说，禁忌是： javascript（不应该仅仅为了链接而需要，而且搜索引擎优化/可访问性非常糟糕）；无效的 HTML。

本质上是这样的：

*   使用正常的 CSS 技术和有效的 HTML 构建您的面板。
*   在其中的某个位置放置一个链接，如果用户单击面板，您希望该链接成为默认链接（您也可以有其他链接）。
*   在该链接内，放置一个空的跨度标签（`<span></span>`，而不是`<span />`\- 感谢@Campey）
*   给面板位置：相对
*   将以下 CSS 应用到空范围：
    
        { 
          position:absolute; 
          width:100%;
          height:100%;
          top:0;
          left: 0;
        
          z-index: 1;
        
          /* fixes overlap error in IE7/8, 
             make sure you have an empty gif */
          background-image: url('empty.gif');
        }   
        
    
    它现在将覆盖面板，并且由于它位于`<A>`标签内，因此它是一个可点击的链接
    
*   给面板内的任何其他链接位置：相对和合适的 z-index (>1)，将它们放在默认跨度链接的前面

您无法创建`div`a 链接本身，但可以使`<a>`标记充当 a `block`，与 a 具有相同的行为`<div>`。

    a {
        display: block;
    }
    

然后您可以设置其宽度和高度。

这是一个古老的问题，但我想我会回答它，因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单...

锚标签的工作方式如下 -

    <a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>
    

苏...

    <a href="whatever you want"> <div id="thediv" /> </a>
    

虽然我不确定这是否有效。如果这就是口头解决方案背后的原因，那么我深表歉意......

需要一点 JavaScript。但是，你的`div`将是可点击的。

    <div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

This option doesn’t require an empty.gif as in the most upvoted answer:

HTML:

     <div class="feature">
           <a href="http://www.example.com"></a>
     </div>
    

CSS:

     div.feature {
            position: relative;
        }
    
        div.feature a {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            text-decoration: none; /* No underlines on the link */
            z-index: 10; /* Places the link above everything else in the div */
            background-color: #FFF; /* Fix to make div clickable in IE */
            opacity: 0; /* Fix to make div clickable in IE */
            filter: alpha(opacity=1); /* Fix to make div clickable in IE */
        }
    

As proposed at [http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/](http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/)

How to make a div into a link?

要删除 HTML 中的 `<iframe>` 元素的边框，您可以通过 CSS 设置 `border` 属性为 `0` 或 `none`。这里有两种方法可以实现：

### 方法 1：直接在 `iframe` 标签内使用 `style` 属性

```html
<iframe src="example.html" style="border:none;"></iframe>
```

或者

```html
<iframe src="example.html" style="border:0;"></iframe>
```

### 方法 2：通过 CSS 文件或 `<style>` 标签

在 CSS 中，您可以为 `iframe` 指定一个类，然后为这个类设置 `border` 属性为 `0` 或 `none`。

```html
<style>
  .no-border {
    border: none;
  }
</style>

<iframe class="no-border" src="example.html"></iframe>
```

或者，如果您想对页面中的所有 `iframe` 元素移除边框，您可以直接对 `iframe` 元素进行样式设定：

```html
<style>
  iframe {
    border: 0;
  }
</style>

<iframe src="example.html"></iframe>
```

请根据您的具体需求选择合适的方法。如果您的 `iframe` 是通过 JavaScript 动态创建的，您也可以在创建 `iframe` 元素时设置其 `style.border` 属性。

添加`frameBorder`属性（注意**大写“B”**）。

所以它看起来像：

    <iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>

在疯狂尝试删除 IE7 中的边框后，我发现frameBorder属性是区分大小写的。

您必须使用大写**B**设置 frameBorder 属性。

    <iframe frameBorder="0"></iframe>

根据[iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)文档，frameBorder 已弃用，最好使用“border”CSS 属性：

    <iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
    

*   注意 CSS border 属性在 IE6、7 或 8 中无法达到预期效果**。**

除了添加frameBorder属性之外，您可能还需要考虑将滚动属性设置为“no”以防止出现滚动条。

    <iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe >

对于浏览器特定问题还`frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"`根据 Dreamweaver 添加：

    <iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>

How to remove border from iframe

在HTML5中，`localStorage` 和 `sessionStorage` 可以用来在用户浏览器中存储键值对信息。这两者的主要区别在于数据的持久性和作用域：

- `localStorage` 中的数据会被长期存储，直到主动清除，即使浏览器关闭也依然保留。
- `sessionStorage` 中的数据只在当前的浏览器会话期间有效，关闭浏览器标签或窗口后数据将被清除。

但是，需要注意的是`localStorage`和`sessionStorage`只能直接存储字符串。如果希望存储对象，需要先将对象转化为JSON字符串格式。

下面是存储对象的步骤：

1. 首先，创建一个对象。
2. 使用`JSON.stringify()`方法将对象转换成一个JSON字符串。
3. 使用`localStorage.setItem()`或`sessionStorage.setItem()`方法来存储字符串。

下面是一个具体的例子：

```javascript
// 假设我们有一个要存储的对象
var user = {
  name: "张三",
  age: 30
};

// 将对象转换为JSON字符串
var userString = JSON.stringify(user);

// 存储到localStorage
localStorage.setItem('user', userString);

// 存储到sessionStorage
sessionStorage.setItem('user', userString);
```

在需要读取存储的对象时，可以按照以下步骤进行：

1. 使用`localStorage.getItem()`或`sessionStorage.getItem()`方法来获取存储的字符串。
2. 使用`JSON.parse()`方法将JSON字符串转换回对象。

以下是读取存储对象的例子：

```javascript
// 从localStorage中读取字符串
var storedUserString = localStorage.getItem('user');

// 将字符串转换回对象
var storedUser = JSON.parse(storedUserString);

// 现在storedUser就是之前存储的对象
console.log(storedUser.name); // 输出："张三"
```

同样的步骤也适用于`sessionStorage`。

总结一下，在使用HTML5的Web存储API来存储对象时，需要先将对象转换成字符串再存储，读取时再将字符串转换回对象。这样可以保证对象的结构和数据在存储过程中得以保持。

HTML相关问题