本文详细介绍了HTML中的文档类型声明、语言种类、字符集以及常用标签，如标题、文本格式化、图像和超链接的使用。同时，探讨了浏览器内核的不同，如Trident、Gecko、WebKit和Blink，及其对网页渲染的影响，以及如何解决浏览器兼容性问题。此外，还提及了VSCode中生成页面结构的方法和浏览器中预览页面的方式。
浏览器内核(渲染引擎):
负责读取网页内容,整理资讯,计算网页的显示方式并显示页面。
不同浏览器的内核实现有所差异，导致对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染结果也可能不同，这就抛出了常见的 “浏览器兼容性问题”
| 浏览器名称 | 内核 | 补充 |
|---|---|---|
| IE | Trident | 主要包含在 window操作系统的 IE浏览器中 |
| firefox | Gecko | Gecko的特点是代码完全公开，因此，其可开发程度很高 |
| Safari | webkit | 苹果公司自己的内核，包含WebCore排版引擎及JavaScriptCore解析引擎 |
| chrome | Chromium/Blink/webkit | Blink是开源引擎WebKit中WebCore组件的一个分支 |
| Opera | blink/Webkit/Presto | 现在跟随chrome的步伐，同时参与开发 |
VSCode的使用
- 生成页面骨架结构
输入!+Tab键 - 利用插件在浏览器中浏览页面:
单击鼠标右键,在弹出出口中点击"Open In Default Browser"
文档类型声明标签
文档类型声明:<!DOCTYPE>,作用就是告诉浏览器使用哪种HTML版本来显示页面
<!DOCTYPE html>
说明:当前页面采取的时HTML5版本来显示网页
注意:
1.<!DOCTYPE>声明位于文档中最前面的位置,处于标签之前
2.<!DOCTYPE>不是一个HTML标签,而是文档类型声明标签
lang语言种类
<html lang="en">
<html lang="zh-CN">
1.en定义语言为英语
2.zh-CN定义语言为中文
谷歌可自动翻译
字符集
<meta charset="UTF-8">
在<head>标签内，可以通过<mete>标签的charset属性来规定HTML文档应该使用哪种字符编码。
HTML常用标签
<h1>-<h6>标题标签，一个标题独占一行
| 语义 | 文本格式化标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者 <b></b> | 更推荐使用<strong>标签，语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐使用<em>标签，语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签，语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签，语义更强烈 |
<div>标签用来布局，但是一行只能放一个<div>
<span>标签用来布局，一行可以有多个<span>
图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像
<img src="图像URL"/>
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 用于指定图像文件的路径和文件名 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度，修改一个属性高度等比缩放 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框 |
/ 为下一级路径
<img src="images/baidu.jpg">
../ 为上一级路径
<img src="../baidu.jpg">
<img src="../../baidu.jpg">
超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<a href="#">空链接</a> 空链接先用#代替
<a href="img.zip">点击下载</a> 下载链接
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址（必须属性） |
| target | _self为默认值，_blank为在新窗口中打开 |
在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
锚点链接
可以快速定位到页面的某个位置
- 在链接文本的href属性中，设置属性值为#名字的形式，如
<a href="#head">顶部</a>" - 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如
<h3 id="head">标签栏</h3>
应用：回滚到顶部
注释标签
<!-- 注释语句 -->
空格符  ；（四个字符）
小于号 <；
大于号 >；
表格标签
作用：展示数据
tr表行 th表头 td单元格
表格属性：
align对齐方式
border边框
cellpadding单元边沿与内容之间的空白，默认为1像素
cellspacing单元格之间的空白，默认为2像素
width表格宽度
<thead>标签：表格的头部区域
<tbody>标签：表格的主体区域
作用：更好地语义化
合并单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
列表标签
作用：页面布局
无序列表：<ul></ul>中只能嵌套<li></li>,<li></li>之间相当于一个容器，可以容纳所有元素
有序列表：<ol></ol>中只能嵌套<li></li>,<li></li>之间相当于一个容器，可以容纳所有元素
自定义列表：
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
<dl></dl>里面只能包含<dt>和<dd>
<dt>和<dd>是并列关系，不是包含关系
表单标签
作用：收集用户信息
由表单域，表单控件（表单元素）和提示信息3个部分构成
表单域是一个包含表单元素的区域。
<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
<form aciton="url地址" method="提交方式(post/get)" name="表单域名称">
各种表单元素控件
</form>
表单控件
1.input输入表单元素
name属性
value属性
checked属性，默认选择项
maxlength，规定输入字段
type属性：
- button-按钮
- checkbox-复选框
- file-文件上传
- hidden-隐藏输入字段
- image-图像
- password-输入密码
- radio-单选按钮
- reset-重置按钮
- submit-提交按钮
- text-单行输入字段
- label-用于绑定一个表单元素，当点击
<label>标签内的文本时，浏览器会自动将光标转到对应的表单元素上，用来增加用户体验
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<label>标签的for属性应当与相关元素的id属性相同
2.select下拉表单元素
<select>
<option selected>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
3.texarea文本域元素
<textarea>
文本内容
</textarea>
扫一扫
1030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
