当前位置：首页 > wzjs >正文

做网站设计师工资多少网站建设推广公司

wzjs 2025/9/9 5:37:37

做网站设计师工资多少,网站建设推广公司,快速优化网站建设,百度竞价排名是什么意思前言什么是 HTML？ HTML 是一种用于创建网页结构的标记语言，通过标签（Tag）定义内容的结构和呈现方式。浏览器解析 HTML 文档后，将其渲染为可视化网页。一、HTML 语法 1. HTML 基本骨架所有 HTML 文档必须包含以下…

前言

什么是 HTML？

HTML 是一种用于创建网页结构的标记语言，通过标签（Tag）定义内容的结构和呈现方式。

浏览器解析 HTML 文档后，将其渲染为可视化网页。

一、HTML 语法

1. HTML 基本骨架

所有 HTML 文档必须包含以下基本结构：

<!DOCTYPE html>           <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN">       <!-- 根标签，lang 定义页面语言 -->
<head><meta charset="UTF-8"> <!-- 字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title> <!-- 显示在浏览器标签页上的标题 -->
</head>
<body><!-- 网页主体内容 -->
</body>
</html>

2. 标签关系

父子关系：标签嵌套形成层级结构（如 <ul> 包含多个 <li>）。
兄弟关系：同一层级的标签（如多个 <p> 并列）。
自闭合标签：无内容的标签（如 <img>, <br>）。

二、核心内容标签

1. 标题标签 `<h1>` - `<h6>`

作用：定义标题层级，<h1> 最高级，<h6> 最低级。

示例：

<h1>主标题</h1>
<h2>次级标题</h2>
<h3>三级标题</h3>

SEO 建议：一个页面仅一个 <h1>，层级应清晰。

2. 段落标签 `<p>`

作用：定义文本段落。

示例：

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

3. 换行标签 `<br>`

作用：强制文本换行（无需闭合标签）。

示例：

<p>第一行文本<br>第二行文本</p>

4. 水平线标签 `<hr>`

作用：插入水平分隔线。

示例：

<p>第一部分内容</p>
<hr>
<p>第二部分内容</p>

三、文本格式化标签

1. 语义化标签

<strong>：表示重要文本（默认加粗）。
<em>：表示强调文本（默认斜体）。
<ins>：下划线文本。
<del>：删除线文本。
<mark>：高亮文本（黄色背景）。
<code>：显示代码片段（等宽字体）。
<blockquote>：长引用（缩进显示）。

2. 物理样式标签

<b>：加粗文本（无语义）。
<i>：斜体文本（无语义）。
<u>：下划线文本。
<s>：删除线文本。

3. 示例：

<p><strong>重要提示</strong>：请<em>立即</em>保存文件。<code>print("Hello World")</code><mark>高亮内容</mark>
</p>

语义化优先：优先使用 <strong> 而非 <b>，<em> 而非 <i>。

四、图像标签 `<img>`

1. 基本用法

<img src="image.jpg" alt="图片描述">

关键属性：
- src：图像路径（必填）。
- alt：替代文本（图片无法显示时展示，必填）。
- width/height：定义宽高（单位像素或百分比）。
- title：悬停提示文本（可选）。

2. 响应式图像

<img src="small.jpg" srcset="large.jpg 1200w, medium.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw"alt="响应式图片"
>

srcset：定义不同分辨率/尺寸的图片源。
sizes：定义图片在不同视口中的显示尺寸。

五、超链接标签 `<a>`

1. 基本用法

<a href="https://example.com" target="_blank">访问示例网站</a>

关键属性：
- href：链接目标（URL、文件路径、锚点 #id）。
- target：打开方式（_blank 新标签页，_self 当前页）。
- download：强制下载文件（如 download="filename.pdf"）。

2. 锚点链接

<a href="#section1">跳转到第一部分</a>
<!-- 目标位置 -->
<h2 id="section1">第一部分</h2>

六、多媒体标签

1. 音频 `<audio>`

<audio controls autoplay loop><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg">您的浏览器不支持音频播放。
</audio>

关键属性：
- controls：显示播放控件。
- autoplay：自动播放（部分浏览器限制）。
- loop：循环播放。
- muted：静音播放。

2. 视频 `<video>`

<video controls width="600" poster="preview.jpg"><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm">您的浏览器不支持视频播放。
</video>

关键属性：
- poster：视频封面图。
- preload：预加载策略（auto、metadata、none）。
- playsinline：移动端内联播放（避免全屏）。

七、列表（List）

1. 无序列表 `<ul>`

用途：展示无顺序关系的项目（默认用实心圆点标记）。

标签结构：

<ul><li>项目1</li><li>项目2</li>
</ul>

属性：
- type：定义项目符号类型（disc（默认）、circle、square，但推荐用 CSS list-style-type 替代）。

2. 有序列表 `<ol>`

用途：展示有顺序关系的项目（默认用数字标记）。

标签结构：

<ol><li>第一步</li><li>第二步</li>
</ol>

属性：
- type：编号类型（1（默认）、A、a、I、i）。
- start：起始编号（如 start="3" 从 3 开始）。
- reversed：倒序编号（如 reversed）。

3. 定义列表 `<dl>`

用途：展示术语及其描述（如字典）。

标签结构：

<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd>
</dl>

八、表格（Table）与合并单元格

1. 基本表格结构

<table border="1"><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>25</td></tr></tbody><tfoot><tr><td colspan="2">总计：1人</td></tr></tfoot>
</table>

核心标签：
- <table>：定义表格。
- <tr>：表格行。
- <th>：表头单元格（默认加粗居中）。
- <td>：普通单元格。
- <thead>/<tbody>/<tfoot>：语义化分组。

2. 合并单元格

跨列合并（colspan）：
```
<td colspan="2">占两列</td>
```
跨行合并（rowspan）：
```
<td rowspan="2">占两行</td>
```

表格：

避免用表格布局（使用 CSS Grid/Flexbox）。
合并单元格时确保结构完整，避免跨分组（如 <thead> 与 <tbody>）。

九、表单（Form）与输入控件

1. 表单容器 `<form>`

<form action="/submit" method="POST" enctype="multipart/form-data"><!-- 表单控件 -->
</form>

关键属性：
- action：提交目标 URL。
- method：HTTP 方法（GET 或 POST）。
- enctype：编码类型（上传文件需设为 multipart/form-data）。

2. 输入控件 `<input>`

常见类型：

<!-- 文本输入 -->
<input type="text" name="username" placeholder="用户名" required><!-- 密码输入 -->
<input type="password" name="password"><!-- 单选按钮 -->
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女<!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动<!-- 文件上传 -->
<input type="file" name="avatar" accept="image/*"><!-- 隐藏字段 -->
<input type="hidden" name="token" value="abc123">

通用属性：
- name：字段名称（后端接收数据的键）。
- value：默认值。
- required：必填字段。
- disabled：禁用控件。

3. 下拉菜单 `<select>`

<select name="country"><option value="">请选择国家</option><option value="cn" selected>中国</option><option value="us">美国</option><optgroup label="欧洲"><option value="fr">法国</option><option value="de">德国</option></optgroup>
</select>

属性：
- multiple：允许多选。
- size：可见选项数。

4. 文本域 `<textarea>`

<textarea name="comment" rows="4" cols="50" placeholder="请输入评论"></textarea>

属性：
- rows：可见行数。
- cols：可见列数（推荐用 CSS 控制宽度）。
- maxlength：最大字符数。

5. 按钮`<button>`

<button> 标签：

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('点击')">普通按钮</button>

<input> 类型按钮：

<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">

6.关联标签 `<label>`

作用：提升表单可访问性，点击标签可聚焦控件。

用法：

<!-- 显式关联（推荐） -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><!-- 隐式关联 -->
<label><input type="checkbox" name="agree"> 同意协议
</label>

表单：

始终为 <input> 添加 name 属性，否则数据无法提交。
使用 label 提升可访问性。

十、容器标签 `<div>` 与 `<span>`

1. `<div>`

用途：块级容器，用于布局或样式分组。

示例：

<div class="container"><h1>标题</h1><p>段落内容</p>
</div>

2. `<span>`

用途：行内容器，用于局部文本样式或操作。

示例：

<p>这是一段<span style="color: red;">红色文本</span>。</p>

十一、HTML 字符实体

1. 常见字符实体

字符	实体名称	实体编号	用途
`<`	`<`	`<`	避免被解析为标签
`>`	`>`	`>`	同上
`&`	`&`	`&`	避免被解析为实体
	` `	` `	非换行空格
`©`	`©`	`©`	版权符号

2. 使用示例

<p>10 &gt; 5 &amp; 5 &lt; 10</p>
<p>版权所有 &copy; 2023</p>

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title>
</head>
<body><h1>什么是JavaScript</h1><hr><p>欢迎来到 MDN 的 JavaScript 初学者课程！本节将在一定高度俯瞰 JavaScript，回答一些诸如“它是什么？”和“它能做什么？”的问题。并使你熟悉 JavaScript 的用途。</p><h2>高层定义</h2><p><strong>JavaScript</strong> 是一种 <em>脚本编程语言</em>，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等—— <ins>JavaScript</ins>就在其中。 <del>它是标准Web技术蛋糕的第三层</del> ，其中<a href="#">HTML</a> 和<a href="#">CSS</a> 我们已经在学习区的其他部分进行了详细的讲解。</p><h2>它到底可以做什么？</h2><p>不再是<mark>简单的</mark>静态信息</p><ul><li>交互式的地图</li><li>2D/3D 动画</li><li>滚动播放的视频</li></ul><ol><li>交互式的地图</li><li>2D/3D 动画</li><li>滚动播放的视频</li></ol><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> --><td>198</td></tr><tfoot><tr><td>总结</td><td colspan="3">全市第一</td><!-- <td>全市第一</td> --><!-- <td>全市第一</td> --></tr></tfoot></tbody></table><h1>注册信息</h1><form action=""><h2>个人信息</h2><label>姓名： <input type="text" placeholder="请输入姓名"></label><br><br><label>密码： <input type="password" placeholder="请输入密码"></label><br><br><label><input type="radio" name="gender">男</label>            <label><input type="radio" name="gender">女</label><br><br><label>居住城市：</label><select><option>北京</option><option selected>上海</option><option>南京</option></select><h2>教育经历</h2><select><option>2022</option><option>2023</option><option>2024</option></select><span>--</span><select><option>2026</option><option>2027</option><option>2028</option></select><h2>工作经历</h2>    <textarea ></textarea><br><br><label><input type="checkbox">已阅读并同意以下协议：<ul><li><a href="#">《用户服务协议》</a></li><li><a href="#">《隐私政策》</a></li></ul></label><br><button type="submit">免费注册</button>&nbsp;&nbsp;&nbsp;<button type="reset">清空</button></form><!-- <img src="https://www.runoob.com/wp-content/uploads/2013/07/js-logo.png" alt="123" width="200"><img src="./pixmap.png" width="300"><br><audio src="./银临,Aki阿杰+-+牵丝戏.mp3" controls></audio><br><video src="./不眠之夜.mp4" controls height="300" ></video> --></body>
</html>