前端技术栈
tips： 1.标签属性不分大小写 一般小写2.空标签可以不闭合3.属性值推荐用双引号包裹4.某些属性值可以省略
html基本结构
HTML文档由三个主要部分组成：
- DOCTYPE声明：告诉浏览器使用哪个HTML版本。
- 根元素：通常是
<html>元素，它是所有其他HTML元素的容器。 - 头部元素：使用
<head>标签，包含文档的元数据，如标题、链接、脚本等。 - 主体元素：使用
<body>标签，包含实际显示在网页上的内容。
html部分语法
1. 标题标签
HTML中使用
<h1>到<h6>六个标签来定义不同级别的标题。
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>
2. 列表标签
HTML中有三种主要的列表类型：无序列表、有序列表和定义列表。
无序列表
使用
<ul>标签定义无序列表，<li>标签定义列表项。
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
有序列表
使用
<ol>标签定义有序列表，<li>标签定义列表项。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
定义链表
使用
<dl>标签定义定义列表，<dt>标签定义定义术语，<dd>标签定义定义描述。
<dl>
<dt>计算机</dt>
<dd>一种用于数据处理的电子设备</dd>
<dt>手机</dt>
<dd>一种便携式通讯设备</dd>
</dl>
3. 链接标签
使用<a>标签定义链接。
<a href="https://www.example.com">点击这里</a>
4. 多媒体
HTML5支持多种多媒体元素，如图像、音频和视频。
图像
使用<img>标签定义图像。
<img src="example.jpg" alt="描述性文字">
音频
使用<audio>标签定义音频。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
视频
使用<video>标签定义视频。
<video controls>
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频元素。
</video>
5. 控件
HTML5引入了新的表单控件，如日期选择器、颜色选择器等。
<input type="date">
<input type="color">
响应式网页
使用HTML构建响应式网页意味着网页能够根据不同的屏幕尺寸和设备类型（如桌面、平板、手机）自动调整其布局和内容。响应式网页设计通常依赖于CSS（Cascading Style Sheets）和有时也会使用JavaScript来提供更加动态的响应。
HTML基础
1.视口（Viewport）设置：在HTML中，可以通过标签来设置视口，确保网页在不同设备上正确显示。 2.使用正确的标签：使用HTML5中的语义化标签，如
、、、、等，可以帮助浏览器更好地解析页面结构。CSS基础
1.媒体查询（Media Queries）：CSS媒体查询允许你根据不同的设备尺寸应用不同的样式规则。 @media (max-width: 600px) { /* 小于600px时的样式 */ } 2.百分比宽度：使用百分比宽度可以让元素在不同的屏幕尺寸上自动调整大小。 .container { width: 80%; } 3.使用Flexbox和Grid布局：Flexbox和Grid布局是现代CSS布局模型，它们提供了强大的响应式布局能力。 .container { display: flex; flex-wrap: wrap; } 4.使用CSS变量：CSS变量（Custom Properties）可以帮助你创建可复用的样式，并方便在不同设备上进行调整。 :root { --primary-color: #333; }
实用技巧
移动优先设计：从手机尺寸开始设计，然后逐步增加宽度，确保在小屏幕上也能有良好的用户体验。 响应式图片：使用标签和srcset属性可以提供不同尺寸的图片，以优化加载速度和显示效果。 响应式导航：使用
标签和CSS来创建一个可折叠的导航菜单，或者使用汉堡菜单（hamburger menu）来适应小屏幕。 使用rem和em单位：相对于根元素（rem）或父元素（em）的字体大小单位可以帮助你在不同设备上保持一致的字体大小。 测试和优化：使用不同的设备和浏览器测试你的网页，确保所有内容都能正确显示。 响应式设计不仅仅是关于技术，它还涉及到用户体验和内容策略。
