本文介绍了开发工具VScode的使用，包括为何不同浏览器显示差异、Web标准的构成以及HTML的基本标签和快捷命令。还详细讲解了排版标签如标题、段落、换行和水平线，以及文本格式化、媒体标签（图片、音频、视频和链接）、列表、表格和表单的相关标签及属性。此外，提到了语义化标签和字符实体在网页制作中的应用。
目录
②表格相关属性(table的属性)（实际开发中推荐用css设置样式效果）
一、开发工具：VScode
1.为什么每个浏览器不同，谷歌的浏览器相对来说比较好？
答：是因为每个浏览器有不同的渲染引擎（即浏览器内核），是用于在浏览器中专门对代码进行渲染解析的部分。渲染引擎不同，导致在解析代码的时候就有不同的速度、性能和效果。
2.web标准：
①定义：让不同的浏览器按照相同的标准显示结果，让展示的结果统一。不同的浏览器的渲染引擎不同，相同代码的解析效果就会不同，用户用不同的浏览器打开同一代码看到的可能是不同效果的网页，使用户的体验感差，所以要有web标准。
②构成：Ⅰ结构：HTML语言：说明页面元素和内容
Ⅱ表现：CSS语言：说明网页元素的外观和位置等页面样式（如颜色等）
Ⅲ行为：javascript语言：说明网页模型的定义与页面交互
3.关于HTML：
是hyper text markup lauguage的简称，翻译过来是超文本标记语言。是专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
4.一些快捷命令：
- 快速生成HTML的结构命令：！+ tab；
- 保存文件：ctrl+s（注意改完代码之后要先保存再运行，否则运行的是之前的）
- 快速查看网页效果：alt+b
- 快速生成标签：英文+tab
- 注释：ctrl+/
- 选中一个内容后，按ctrl+d会再向后选相同的内容，可按n次选n个。
- 按住alt，在要选中的每一句话前面点一下描绘同时出现多个光标，再按ctrl+shift+→就会同时选中光标后的每一行内容。
5.注意：
- 标签是命令，属性是包含在标签里面的，双标签属性包含在开始的标签中。
- 标签上可同时存在多个属性，属性之间用空格隔开，标签名与属性之间用空格隔开。
- 属性之间没有顺序之分。
- 改好代码要先保存再运行，否则运行的是改之前的代码
二、排版标签
1.标题标签h（最高到六级标题）
- 代码：
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body> 运行结果：
- 特点：每个标题独占一行
2.段落标签p
- 代码：
<body>
<p>我是一段文字</p>
<p>我是第二段文字</p>
</body> 运行结果：
- 特点：用网页打开后段落之间存在间隙；每个段落独占一行。
3.换行标签br（单）
- 可让文字强制换行
- 代码：
<body>
<p>我是一段 <br> 文字</p>
<p>我是第二段文字</p>
</body>- 特点：单标签
- 注意：文字中间添加标签要将标签两边各空出一个空格才能成功
4.水平线标签hr（单）
- 代码：
<body>
我认为 <hr> 她她她
</body>输出：
- 特点：自动换行，并在中间加入一条水平线，是单标签。
三、文本格式化标签
- 需要让文字加粗、倾斜、下划线等操作
标签：
<body>
<strong>我要长胖</strong><br>
<ins>我要穿溜冰鞋</ins><br>
<em>我要变歪</em><br>
<del>我要灭了自己</del><br>
</body>输出：
四、媒体标签
1.图片标签img（单）
作用：在网页中显示一张图片
属性：
- src:文件路径
- alt:替换文本。若文件加载失败会显示替换文本。
- title：当鼠标悬停在图片上时展示的文本
- width：图片的宽度
- height：图片的高度
注意：title也可用于其他标签，比如标题标签h和段落p等;若width和height只设置其中一个，另一个会等比例缩放。
2.音频标签audio
作用:在网页中插入一段音频。
属性：
- src：音频路径
- controls:显示播放的控件，就是这个东西
- autoplay:自动播放
- loop：循环播放
3.视频标签video
属性：
- src:路径
- controls：播放控件
- autoplay：自动播放
- loop：循环播放
- muted：谷歌浏览器打开会自动静音
注意：目前只支持mp4、webm、ogg格式的视频
4.连接标签a
作用：点击之后从一个页面跳转到另一个页面
属性：
- href：要跳转到的网页的路径
- target：设置目标网页的打开形式：_self是默认值，在当前窗口跳转；_blank是在新的窗口跳转
代码：
<body>
<a href="https://www.csdn.net/">百度一下</a>
</body>输出：
点击这个百度一下会跳转到相应的网页
注意：
- 默认文字有下划线，如上图中的百度一下
- 未点击过的文字默认蓝色，点击过的文字变为紫色（清除历史记录可恢复蓝色）
- href=”#“是空链接，点击后返回网页顶部
五、列表、表格、表单标签
1.列表标签（无序列表和有序列表）
①无序列表 ul li
标签组成：
- ul：表示无序列表的整体，用于包裹li标签
- li：表示无序列表的每一项，用于包含每一行的内容
代码：
<body>
<ul>
<li>榴莲</li>
<li>苹果</li>
</ul>
</body>输出：
注意：
- 每一项前默认显示圆点标识
- ul标签里面只允许放li标签，但li标签里可以放任意内容
②有序列表 ol li
比如排行榜
标签组成：
- ol：表示有序列表的整体，用于包裹li标签
- li：表示有序列表的每一项，用于包含每一行的内容
注意：
- 列表的每一项前默认显示序号
- ol标签只允许包含li，但li标签可包含任意内容
代码
<body>
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
</body>输出：
③自定义列表dl dt dd
常用于网页底部的导航栏
标签组成：
- dl：表示自定义列表的整体，用于包裹dt和dd标签
- dt：表示自定义列表的主题
- dd：表示自定义列表的针对主题的每一项内容
代码：
<body>
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
输出：
注意：
- dd前会默认显示缩进效果
- dl标签只允许包含dt/dd标签，但dd/dt标签可包含任意内容
2.表格标签 table
①标签组成： tr td
- table：表格整体，用于包裹多个tr
- tr：表格每行，可用于包裹td
- td表格单元格，可用于包裹内容
②表格相关属性(table的属性)（实际开发中推荐用css设置样式效果）
- boder：边框宽度
- width：表格宽度（注意和height这两个属性在终端没有提示，需要自己手动补全）
- height：表格高度
③表格标题和表格单元格标签：
- 在表格中表示整体大标题和一列小标题
- caption：表格大标题，默认在表格整体的顶部居中位置。写在table标签内部
- th：表头单元格，表示一列小标题，通常在表格第一行，默认内部文字加粗并剧中。写在tr标签内部，可用于替换td
代码：
<body>
<table border="2" width="100">
<caption><h3>学生成绩单</h3></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<td>非标题</td>
</tr>
</table>
</body>输出：
④、表格的结构标签
Ⅰ让表格的内容结构分组（头部、主体、底部），突出表格的不同部分
Ⅱ结构标签：
- thead：表格头部
- tbody：表格zhuti
- tfoot：表格底部
Ⅲ表格结构标签内部用于包裹tr标签
Ⅳ表格的结构标签可省略
⑤、合并单元格
作用:将水平的或者垂直的多个单元格合并成一个
步骤：
- 明确要合并哪几个单元格
- 通过左上原则确定保留删除谁（上下合并时保留最上面的那个单元格删除其他，左右合并时保留最左边的单元格删除其他）
- 给保留的单元格设置：跨行合并或者跨列合并
代码：跨行合并：
- 属性1：rowpan 属性值：合并单元格的个数
- 属性2：colspan 属性值：合并单元格的个数
<body>
<table border="2" >
<caption>学生成绩单</caption>
<thead>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</thead>
<tbody>
<tr>
<td>
小哥哥
</td>
<td rowspan="2">100分</td>
<td>帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>美</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</tfoot>
</table>
</body>输出：
3、表单标签
①input系列标签
补充：input标签：date
生日: <input type="date">输出：
- 场景：在网页中收集用户信息的表单效果，比如注册页面
- 标签名：input，input标签可以通过type属性值的不同展示不同的效果
- type属性值：
②input属性--文本框text
- 场景：在网页中显示输入单行文本的表单控件
- type属性：text
- 常用属性：placeholder（占位符，提示用户输入内容的文本，用户什么也没输入的时候呈现，当用户输入内容后会消失）
- 举例
<body> 昵称：<input type="text" placeholder="请在此输入昵称"> </body>输出：
- 也可用value属性和name属性。value属性：用户输入的内容提交之后会发送给后端服务器；name属性：当前控件的含义，提交之后可以通过name告诉后端发过去的数据是什么含义。
③input系列--密码框password
- 场景：在网页中显示输入密码的表单控件
- type属性：password
- 常用属性：placeholder（同text）
④input系列--单选框radio
- 场景：在网页中显示多选一的表单控件
- type属性：radio
- 常用属性1：name（分组，有相同属性值的单选框为一组，一组中同时只能有一个被选中）
- 常用属性2：checked：默认选中
⑤input系列--复选框 checkbox
- 场景：在网页中显示多选多的表单控件
- type属性：checkbox
- 常用属性：chencked：默认选中
⑥input系列--文件选择 file
- 在网页中显示文件选择的表单控件
- type属性：file
- 常用属性：multiple：多文件选择
⑦input系列--按钮
- 场景：在网页中显示不同功能的按钮表单控件
- type属性1：submit：提交按钮。点击之后提交数据给后端服务器
- type属性2：reset：重置按钮。点击之后恢复表单默认值
- trpe属性3：button：普通按钮。默认无功能，后续会配合js添加功能
- 注意：如果需要实现这三个按钮，需要配合form标签使用。form的使用方法：用form标签把表单标签一起包裹起来即可。button按钮通过添加value属性显示它的名字。
⑧input系列举例：
<form>
昵称：<input type="text" placeholder="请在此输入昵称"><br>
密码：<input type="password" placeholder="请在此输入密码"><br>
性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <br>
爱好：<input type="checkbox" checked>敲代码 <input type="checkbox">打篮球<br>
<input type="file" multiple><br>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
</form>输出：
⑨button按钮标签（注意上面的button是input标签的属性，这里的button是标签）
- 场景：在网页中显示用户点击的按钮
- 标签名:button
- type属性值：
- 举例
<form> 昵称：<input type="text"><br> <button type="submit">button提交按钮</button><br> <button type="reset">button重置按钮</button><br> <button type="button">button普通按钮</button> </form> - 注意：谷歌浏览器中button默认是提交按钮；button标签是双标签，更便于包裹其他内容。button只是包含这三个按钮，而不包含其他的input属性，也需要写在form标签内部。
⑩select下拉菜单标签
- 背景：在网页中提供多个选择项的下拉菜单表单控件
- 标签组成：1：select标签：下拉菜单的整体；2：option标签：下拉菜单的每一项
- 常见属性：selected：下拉菜单的默认选中
- 举例
所在城市：<select> <option>上海</option> <option>海南</option> <option>背景</option> <option>广州</option> <option>深圳</option> </select>输出：
⑪textarea文本域标签
- 在网页中让用户可以实现输入多行文本的表单控件
- 标签名：textarea
- 常见属性1：cols：规定了文本域内可见宽度
- 常见属性2：rows：规定了文本域内可见行数
- 注意：右下角可以拖拽改变大小；实际开发时针对样式效果推荐用CSS设置;之前的text文本框只能输入单行文本而文本域标签可输入多行
⑫label标签
- 场景：常用于绑定内容与表单标签的关系（比如在进行多选时，选择兴趣领域有新闻等，在网页中会显示一个方框用于让你选择是否打对勾，方框右边会有新闻的文字字样，正常在选择的时候我们需要用鼠标点击方框才能打上对勾，label标签的作用是：用户点击方框或者旁边与方框绑定的文字都可以让方框打上对勾）
- 标签名：lable
- 使用方法：
4.语义化标签
①没有语义布局的标签div和span
- div标签：一行只显示一个（独占一行）（div与p的区别：两个标签都能使文字独占一行，两个p标签网页显示出来有间隔，两个div标签网页显示出来没有间隔）
- span标签：一行可以显示多个
代码：
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>输出：
②有语义的布局标签
- 特点：与div标签的表现形式是一样的，只是比div多了一些语义而已。
- 代码：
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页的侧边栏</aside>
<section>网页的区块</section>
<article>网页的文章</article>输出：
5.字符实体
作用：能通过字符实体在网页中显示特殊符号
①HTML中的空格合并现象
- 场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格。如何能做到出现多个空格？用字符实体可以做到。
②常见字符实体
- 在网页中展示特殊符号效果时，需要使用字符实体替代。
- 结构：&英文；
- 常见字符实体：（记住前三个）
- 举例：
宝 你输出：
什么时候>和<需要使用？使用的时候直接打出来不就好了吗？什么场景下需使用呢？比如当你想给用户展示<p></p>标签长这个样子，但是在代码中敲出来会被识别成标签而无法展示在网页中，这个时候就可以用到转义标签。
扫一扫
1333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
