HTML骨架

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

推荐使用sublime编辑器，vsc也不错。sublime无法通过输入!或html:5后按tab自动补全HTML骨架的解决办法：

  1. 下载插件
1
git clone https://github.com/wbond/package_control
  1. 将插件复制到Preference--Browse Packages的目录下，文件名必须是Package Control
  2. 按下图步骤安装Emmet，安装不成功就是网络原因，建议登机。再不行就用VSCode吧



常用标签

标题标签

Markdown中已经见识过了，HTML中用h1~6表示（双标签）

段落标签

p[paragraph]标签表示独占一行，（双标签）

1
<p> </p>

分割线标签

hr[horizontal] （单标签）

1
<hr />

换行标签

br [break]（单标签）

1
<br />

div 和 span标签

div span是没有语义的，是网页布局主要的2个盒子
div就是division的缩写分割，分区的意思。

span 跨度，跨距；范围

两个都是双标签

1
<div>  </div>    <span></span>

区别

  • div标签 用来布局的，但是现在一行只能放一个div
  • span标签 用来布局的，一行上可以放好多个span

小结

标签名 定义 说明
<hx></hx> 标题标签 作为标题使用，并且依据重要性递减
<p></p> 段落标签 可以把 HTML 文档分割为若干段落
<hr /> 水平线标签 就是一条线
<br /> 换行标签 强制换行
<div></div> div标签 用来布局的，但是现在一行只能放一个div
<span></span> span标签 用来布局的，一行上可以放好多个span

标签属性

标签属性就是外在特性

  • 水平线的长度是 200
  • 图片的宽度 是 300

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

1
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

图像标签

1
<img src="url" >

注意:

  1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
  2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  3. 采取 键值对 的格式 key="value" 的格式
  4. 图像标签中src属性必须写
  5. alt属性表示图片未能正常显示时的文本，title表示图片描述

链接标签

1
<a href="url" target="_blank"> </a>

注意：

  1. 内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
  2. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
  3. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

注释标签

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

快捷键是： Ctrl+ /

1
<!-- 注释语句 -->

一般用于简单的描述，如某些状态描述、属性描述等

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

路径