### DOCTYPE html.docx 关键知识点解析
#### 一、文档类型声明（DOCTYPE）
文档开头出现的 `<!DOCTYPE html>` 是HTML5文档类型的声明。它告诉浏览器该页面使用的是哪种HTML标准，对于确保网页在不同浏览器中正确显示非常重要。这里简要介绍下几个要点：
- **作用**：规范浏览器渲染行为，确保兼容性。
- **语法**：`<!DOCTYPE html>`，HTML5的文档类型声明简化了许多早期HTML或XHTML版本的要求。
#### 二、HTML基本结构
接下来是HTML文档的基本结构：
```html
<htmllang="en">
<head>
<!-- 头部信息 -->
</head>
<body>
<!-- 内容主体 -->
</body>
</html>
```
- `<html lang="en">`：定义整个HTML文档，其中`lang="en"`属性指定了文档的语言为英语。
- `<head>`：包含元数据，如字符集设置、视口配置等。
- `<body>`：包含网页可见的内容。
#### 三、元数据
元数据部分主要涉及：
```html
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
```
- `<meta charset="UTF-8">`：指定文档编码为UTF-8，确保特殊字符正确显示。
- `<meta http-equiv="X-UA-Compatible" content="IE=edge">`：告诉Internet Explorer浏览器使用最新的渲染引擎，避免出现兼容性问题。
- `<meta name="viewport" content="width=device-width,initial-scale=1.0">`：设定响应式设计，使页面能在不同设备上正确展示。
#### 四、内联样式
样式部分采用内联方式编写CSS，用于控制页面元素的外观：
```css
* { margin: 0; padding: 0; }
#content {
width: 100%; height: 100%;
}
.head {
height: 60px;
margin: 30px 30px;
}
ul li {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 30px;
}
li img { width: 80px; height: 120px; }
footer > p {
margin-left: 30px;
float: left;
}
footer > div {
margin-right: 30px;
float: right;
}
```
- 使用通配符选择器`*`重置默认的边距和填充，保持一致的布局。
- 使用Flex布局让页面元素能够更好地对齐和分布。
- 设置图片大小，并通过浮动布局控制footer的显示位置。
#### 五、Vue.js应用
文档中嵌入了Vue.js脚本，并创建了一个简单的Vue实例：
```javascript
new Vue({
el: '#box',
data: {
isAll: false,
checklist: [], // 勾选的商品
goods: [
{
name: 'JMSHOP清纯校花白色针织开衫慵懒风秋装女宽松仿貂毛毛衣外套',
price: 40,
number: 1,
id: 1,
limit: 5,
pic: "../js/img/shop.jpg"
},
// 其他商品信息...
]
},
methods: {
handleChangeAll() {},
handleChange() {},
handleDeleteClick() {},
sum() {}
}
})
```
- **Vue实例**：使用Vue框架创建了一个名为`#box`的DOM元素绑定的实例。
- **数据模型**：定义了`isAll`、`checklist`等数据属性以及一系列商品信息。
- **方法**：包括处理全选状态变化、单个商品状态变化、删除商品及计算总价的方法。
#### 六、模板语法
文档中还使用了Vue的模板语法来动态渲染内容：
```html
<input v-model="isAll" @change="handleChangeAll()" type="checkbox">全选/全不选
<li v-for="(item, index) in goods" :key="item.id">
<input type="checkbox" v-model="checklist" :value="item" @change="handleChange()">
<img :src="item.pic" alt="">
<div>{{ item.name }}</div>
<div style="color:red;">${{ item.price }}</div>
<button @click="item.number--" :disabled="item.number === 1">-</button>
<span>{{ item.number }}</span>
<button @click="item.number++" :disabled="item.number === item.limit">+</button>
<button @click="handleDeleteClick(index, item.id)">删除</button>
</li>
<footer>
<p>合计: {{ sum() }}</p>
<div>去付款</div>
</footer>
```
- **v-model**：实现表单控件与数据的双向绑定。
- **v-for**：遍历数组，动态渲染列表。
- **v-bind (:)**：绑定表达式的值到属性。
- **@click**：监听点击事件。
- **:disabled**：根据表达式的真假值决定是否禁用元素。
这份文档展示了如何使用HTML5结合Vue.js框架构建一个简单但功能完备的购物车系统，包括商品展示、增减数量、全选/取消全选等功能，并通过内联样式美化界面。这些技术点是前端开发中非常基础且重要的知识点，对于学习Web开发具有很好的参考价值。
