HTML 结构 与 基础标签

Web前端基础 学习笔记

一、Html 基本结构

1.1、创建文件

1. Ctrl + N 新建一个文件
2. Ctrl + S 保存，命名为 xxx.html
3. 右键 ，选择 Open in Brower（在浏览器中打开）

1.2、结构

我们已经安装了模块，所以一个感叹号 ! + Tab键 就可以直接生成下面整一块代码

注意点：

1. 仅声明文档类型 非标签
2. .标签：尖括号包围关键字
3. 标签通常成对出现 <开始标签> —> ”双标签”
4. 标签但也有单独成现的(比如：
   ,

   ---

   ,...) —> ”单标签/自闭和标签”
5. 元素：<开始标签> 内容 —> 标签 + 内容
6. 要显示的代码都是放到 里的 ( 粘贴代码的时候我就只放内容了 )

---

二、基础标签

2.1、标题标签

	
	



	
我是h1
	
我是h2
	
我是h3
	
我是h4
	
我是h5
	
我是h6
	

2.2、

标签

语法：

( left：左对齐，right：右对齐，justify：两端对齐 )

	
我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。
	
我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。
	
我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。
	

	
	
	
		我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。
		我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。
		我是小妖怪，逍遥又自在。杀人不眨眼，吃人不放盐。一口七八个，肚子要撑破。茅房去拉屎，想起忘带纸。
	
	

注意：

1. 一个
   标签代表一个段落
2. 在
   标签内，加上
仅换行，但还是一个段落
3. 输入的空格不起作用，  代表空格

4. 标签会保留空格和换行符

2.3、其他的一些效果标签

• 水平线：

  ---

  单标签
• 文字斜体： 和
• 加粗： 和
• 下标：
• 上标：
• 下划线：
• 删除线：

	
我是大魔王
	
我是大魔王   <i>斜体
	
我是大魔王   <em>斜体
	
	
我是大魔王   <b>加粗
	
我是大魔王   <strong>加粗
	
	
我是大魔王      <sub>下标
	
我是大魔王      <sub>上标
	
	
我是大魔王   <ins>下划线
	
它是大魔王   <del>删除
	

2.4、常用的特殊号

• < <
• > >
• ® 已注册
• © 版权
• ™ 商标
•   空格

	
		®   & reg;  已注册
		©   & copy;  版权
		™   & trade;  商标
		    & nbsp;  空格