1 主体架构 (可在VSCode上 !+Tab键 快速生成)
<html> <!-- 根标签(元素),网页中所有内容都要写在元素的里面 --> <head> <!--head是网页得头部,head中的内容不会显示在网页中,主要用来帮助浏览器或搜索引擎来解析网页 --> <title>这里是网页名称</title> <!--网页的标题--> </head> <body> <!-- 网页的主体 --> 网页内容 </body> </html>
2 文档的声明 <!doctype html> 放在根标签的外部,整段代码的开头
3 段落标签 <p> </p>
4 自结束标签 <img> <input>等 不需要成对出现
5 注释 <!-- -->
6 各级标题 <h1> 一级标题 </h1> 网页的大标题 同理<h2> </h2>...
7 标签中的属性
<h3>这是我的<font color="blue" size="10">第一个网页</font></h3>
8 避免乱码 <meta charset = "UTF-8" > 写在<head>标签中
9 实体(转义字符)
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候,我们不能直接书写一些特殊符号,比如多个连续的空格,比如字母两侧的大于和小于号
如果我们需要在网页中书写这些特殊的符号,则需要使用HTML中的实体
& 实体的名字 ;
例如 空格 >大于号 < 小于号
10 meta标签
meta标签主要用于设置网页中的一些元数据,元数据不是给用户看
- charset:设置字符集,防止乱码问题
<meta charset = " UTF-8 ">
- name:keywords description author
(1)keywords 关键词
例如在百度上搜索购物就会出现京东、淘宝等,因为购物是京东等网页的关键词
可同时使用多个关键词,中间用逗号隔开
(2)description 网页的描述
<head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Hege Refsnes"> </head>
- http-equiv:将页面重定向到另一个网站
例如在 3 秒后,跳转到百度界面:
<meta http-equiv = "refresh" content = "3 ; url ="https://www.baidu.com" >