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="此处可选值见下表">
总结