HTML基础笔记
HTML
HTML4
编辑器：
VsCode
VsCode中的快捷键：
| 标准结构 | ！ |
|---|---|
| 删除当前行中的内容 | ctrl + shift + k |
注释：
语法：
<!-- -->
字符编码：
默认：
绝大多数浏览器认为你使用UTF-8编码，因此会用UTF-8解码
语法：
<head>
<meta charset = "utf-8">
</head>
过程：
源代码 to 编码 to 编码后的进制代码 to 解码 to 源代码
错误类型：
编码错误： 问号
解码错误： 乱码；
乱码不可以修复，而问号可以更改为原型
设置语言：
原因：
根据浏览器中的语言判断是否提供翻译提示
语法：
<html lang = "zh-CN">
</html>
meta元信息：
描述浏览器的基本信息
开发者文档：
标签：
排版标签：
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
| h1~h6 | 标题 | 双 |
| p | 段落 | 双 |
| div | 没有任何含义，用于整体布局 | 双 |
- h1在一个网页中只能有一个，h2~h6可以有多个
- h1~h6不可以相互嵌套
- p标签里不能嵌套块级元素
语法：
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>
这是一个段落
</p>
<div>
这就像一个大包装袋，分类袋
</div>
超链接标签,图片标签：
语法：
<a href = "address"></a>
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<a href = "#16">看库里</a> <!-- 地址以#开头代表具体位置是锚点 -->
<a name = "16"></a> <!-- 这是锚点 -->
<a href = "#15">看图片</a>
<img id = "15" src = "address">
<!-- 超链接唤醒指定程序 -->
<a href="tel:17739501240">电话联系</a>
<a href="mailto:2164182641@qq.com">邮件联系</a>
<a href="sms:10086">短信联系</a>
超链接标签作用：
- 可以打开网站，文件
- 可以跳转锚点，也可以跳转到另一个网站的锚点
- 有name标签是锚点，有href是跳转点
- 用来实现区域内容的跳转和回到顶部的功能
- 唤起指定应用程序
相对路径：
- 上一级： ../
- 下一级：/
语义化标签
这对于设置HTML格式是一个重要的知识点
[!IMPORTANT]
标签的效果不重要，重要的是这个标签符合语义
作用：
- 代码的可读性强，清晰
- 有利于SEO（搜索引擎优化） 爬虫 代码 机器人
- 方便设备解析（屏幕阅读器，盲人阅读器）
标签分类
- 块级标签
- 行内标签
[!CAUTION]
- 块级标签可以包含块级，行内标签
- 行内标签只能包含行内标签
- 有一些特殊的规则，个例
列表标签
语法：
<ul>
<!-- 独占一行 -->
<li>NBA实时直播</li>
<li>NBA回放</li>
<li>NBA球员榜</li>
<li>东西部排名</li>
</ul>
<!--无序列表 -->
<ol>
<li>设计程序的流程图</li>
<li>规范其中的算法和数据结构</li>
<li>将流程图变成所用语言的代码并进行编译测试</li>
</ol>
<!--有序列表 -->
<dl>
<dt>标题</dt>
<dd>描述1</dd>
<dd>描述2</dd>
</dl>
<!--定义列表 -->
重点：
- 三个列表可以互相嵌套
- 有序和无序列表最好元素都是
- 起手
表格标签
表头：
单元格：
主体：
脚注：
单元格：
一行：
属性：
[!NOTE]
border（边距）
width（宽度）
height（高度）
cellspacing（单元格间距）
为0不代表边距重合
[!NOTE]
- align(在边框中的水平位置)
- valign（垂直对齐）
- colspan（跨列）
- rowspan（跨行）
语法：
<table border="1">
<caption>学生信息</caption>
<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>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
</tr>
</tfoot>
</table>
常见文本标签
em：要着重阅读的内容
strong: 比em的语气强
span：没有语义，用于包裹短语的通用容器
双标签
常见标签
- br：换行
- pre：按原文显示
- hr：分割线
单标签
表单标签（form）
作用：网页中的交互区域 to 收集信息
属性：
-
action：将数据传给哪个网站
-
target：是原网页，还是新网页，还是框架到action指定的网站
语法：
<form action="https://search.jd.com/search">
账户：<input type="text" name="account" value="fafa" maxlength="10s"><br>
密码：<input type="password" name="psd" >
<br>
性别：
<input type="radio" name="gender"value = "male">男
<input type="radio" name="gender"value = "female" checked>女
<br>
爱好：
<input type="checkbox" name="hobby" value="smoke" checked>抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
<br>
其他：
<!-- 文本域 -->
<textarea name="other" cols="20" rows="10" ></textarea>
<!-- 可以换行 -->
籍贯：
<!-- 下拉框 -->
<select name="place" >
<option value="hebei">河北</option>
<option value="shandong" selected>山东</option>
<option value="shanghai">上海</option>
</select>
<br>
<!-- 隐藏域 -->
<input type = "hidden" name = "tag" value = "100">
<br>
<br>
<!-- 确认按钮的第一种写法 -->
<button type="submit">确认 </button>
<!-- 默认就是submit -->
<!-- 确认按钮的第二种写法 -->
<input type="submit" value="确认">
<!-- 不可以写name属性，让提交把按钮的数据带走 -->
<!-- 重置按钮的第一种写法 -->
<button type="reset">重置</button>
<!-- 重置按钮的第二种写法 -->
<input type="reset" value="点我重置">
<!-- 普通按钮 第一种写法 -->
<button type="button">检测用户账号是否注册</button>
<!-- 普通按钮 第二种写法 -->
<input type="button" value="检测用户账号是否注册">
<!-- 禁用表单元素 - disabled -->
账户：<input disabled type="text" name="account" value="fafa" maxlength="10s"><br>
</form>
<!-- 第一种写法 通过id进行绑定 -->
<label for="zhanghu">账号：</label>
<input id="zhanghu" type="text">
<label for="mima">密码：</label>
<input id="mima" type="password">
<!-- 第二种写法 直接包裹-->
<label>
备注：<input type="text">
</label>
<!-- 主要信息 -->
<fieldset>
<legend>主要信息</legend>
账户：<input type="text" name="account" value="fafa" maxlength="10s"><br>
密码：<input type="password" name="psd">
<br>
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
<br>
</fieldset>
<!-- 附加信息 -->
<fieldset>
<legend>附加信息</legend>
kgjkldsg
</fieldset>
框架标签
语法：
<!-- 用的不多？ -->
<!-- 可以嵌入网页，图片，广告等 -->
<!-- 浏览器能打开的，都可以嵌入后查看 -->
<iframe src="https://www.bilibili.com"width = "900" height="300" frameborder = "1"></iframe>
<!-- 通过超链接在自己的网页中嵌入其他网 target属性配合使用 -->
<a href="https://www.bilibili.com" target="tt">点我看哔哩哔哩</a>
<!-- 与表单的target属性配合使用 -->
<iframe name="tt" frameborder="0" width="900" height="400"></iframe>
HTML实体
在HTML中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实 体。比如小于号 <用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须 在 HTML 源码中插入字符实体。
meta元信息
作用：
配置浏览器基本信息
配置字符编码：
<meta charset="utf-8">
针对IE浏览器的兼容设置：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
针对移动端的配置（移动端课程中会详细讲解）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
配置网页关键字：
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
配置网页描述信息
<meta name="description" content="80字以内的一段话，与网站内容相关">
. 针对搜索引擎爬虫配置：
<meta name="robots" content="此处可选值见下表">
总结
