• HTML是什么？
• 现在来讲讲HTML标签的分类
• HTML文档结构
• HTML的语法注释
• 创建HTML文件
• Head内常见标签
  • title标签代码示例
  • style标签代码示例
  • script标签代码示例
  • Script通过src属性导入外部js文件代码示例
  • link通过href属性引入外部css文件代码示例
  • meta定义网页的源信息代码示例之refresh
  • meta定义网页的源信息代码示例之Keywords关键字搜索
  • meta定义网页的源信息代码示例之description 网页描述信息(简介)
• boby内基本标签
• 标签分类
• 特殊符号
• 常见标签
  • 布局标签
• 标签嵌套的标准
• 常见以及使用频率较高标签
  • a标签>>>链接标签
    • 通过 href 属性指定网址点击跳转
    • 锚点功能
• 标签的两大重要属性
  • id属性>>>个体查找
  • class属性>>>群体查找
  • URL : 统一资源定位符
• img标签>>>图片标签：图片标签(单标签同样也是自闭合标签)
  • 效果展示
• 列表标签
• 表格标签

HTML是什么？

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

现在来讲讲HTML标签的分类

1. 双标签（有头有尾）
   
2. 自闭合标签

可以看到映入眼帘的是自动生成的HTML代码

解析基本HTML内容

1.	:声明为HTML文档

2.	:默认编码

3.,	:是文档开始标记和结束的标记。是HTML页面的根元素，在他们之间是文档的头部(head)和主体(body)

4.,	:定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。

5.	:定义了网页标题，在浏览器标题栏显示。

6.,	:之间的文本是可见的网页主体内容。

# 对于中文网页需要使用  声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 。

注意：编写HTML标签时候，不需要自己写大括号小括号，只需要写标签名称+tab键即可自动补全

创建完毕那么如何展示？

右上方会提供多种浏览器，一般为电脑上存在的浏览器，注意提前下载

此时我们点击Google Chrome

空白内容因为尚未编辑，接下来开始编辑内容

那么为什么head中的文本没有展示而body中的文本展示了呢？别急，待我一一道来。

Head内常见标签

在html文件中，可以编写html，css，js，但是在实际工作中三者其实是分开的，有利于后期维护和扩展

title标签代码示例

    
    


hello world
hello world

style标签代码示例

    
    
    


hello world
hello world

script标签代码示例

    
    
    
    


hello world
hello world

Script通过src属性导入外部js文件代码示例

    
    
    
    
    


hello world
hello world

link通过href属性引入外部css文件代码示例

    
    
    
    
    


hello world
hello world

meta定义网页的源信息代码示例之refresh

    
    
    
    
    
    
    


hello world
hello world

两秒之后跳转至百度首页

meta定义网页的源信息代码示例之Keywords关键字搜索

meta定义网页的源信息代码示例之description 网页描述信息(简介)

boby内基本标签

代码体

    
    


hello world
hello world
hello world
hello world
hello world
hello world
段落标签
段落标签
加粗
斜体
下划线
删除线

标签分类

• 单双 标签
• 块儿级 标签
  • 独占一行（h1-h6 ，p，后期可以通过css实现独占一行）
• 行内标签
  • 自身文本多大就占多大（b，i，u，s）

特殊符号

注意：符号后面必须跟分号（ ; ）

常见标签

网页在制作之前需要提前布局好，比如进入京东主页面，

布局标签

• div 块儿级标签
• span 行内标签

标签嵌套的标准

标签是可以嵌套的，但是要遵循以下规律

• 块儿级标签可以无限制的嵌套块儿级标签和行内标签
  • 特例：p标签虽然是块儿级标签但是也不能嵌套块儿级标签
• 行内标签不能嵌套块儿级标签，可以嵌套行内标签

前端浏览器不会轻易报错，会尽量避免错误，并自动纠正

页面布局的技巧

先用div划分区域，之后再考虑填充具体内容，可以参考小米官网练习该技巧

常见以及使用频率较高标签

a标签>>>链接标签

跳转过程有两种方式

• 当前页面跳转 target="_self" 默认

  京东官网
  

  • 新建页面跳转 target="_blank"

    京东官网
    

• 通过 href 属性指定网址点击跳转

    
    



我自横刀向天笑, 去留肝胆两昆仑
链接标签

• 锚点功能

通过href属性指定标签的id值点击即可跳转到对应位置

    
    



我自横刀向天笑, 去留肝胆两昆仑

标题2的内容

标题3的内容

标题1的内容

锚点功能中提到了id，这又涉及到标签中的重要属性

标签的两大重要属性

id属性>>>个体查找

类似于标签的身份证号，在同一个html页面上id不能重复

class属性>>>群体查找

类似于python面向对象中的类的继承，可以将多个标签划为一类

# 定义两个标签为class='c1'类 查找时只需要点class='c1'即可找出所有为c1标签
 class='c1'>
 class='c1'>

并且一个标签可以有很多类

同时属于

URL : 统一资源定位符

网址并不是一个非常专业的名词，一般称呼URL

img标签>>>图片标签：图片标签(单标签同样也是自闭合标签)

src属性指定图片地址：可以是本地也可以说是网络上的地址

alt属性编写文本：用于图片无法加载出来的情况下的提示信息

title 属性写文本：用于鼠标悬浮在图片上提示的文本信息

height、width属性写像素

用于调整图片的尺寸
需要注意调整的时候 修改一个另外一个自动等比例缩放
如果同时调整两个 那么可能会造成图片的失真

    
    



我自横刀向天笑, 去留肝胆两昆仑

效果展示

列表标签

• 无序列表

前面没有用于标识数字顺序的提示，使用频率最高。

并且网页上有规则排列的多个横向或者竖向内容，几乎都是无序列表。要想实现需要css相关知识。

快速生成无序列表

ul>li{$$$}*10+tab

    
111
    
222
    
333

• 有序列表

111
222
333

• 标题列表

标题1
内容1
标题2
内容1
内容2

表格标签

当需要展示一些具体固定格式的多条数据的时候可以考虑使用（excel）

表格标签的格式

     表头（录入信息头）
     表单（真实数据项）

tr标签：表示一行

th标签：在表头的字段名称

td标签：普通的二单元格数据

    
    


我自横刀向天笑, 去留肝胆两昆仑


    

        

            
姓名
            
密码
            
年龄
        
    
    

        

            
junjie
            
0000
            
18
        
        

            
junjun
            
1234
            
28
        
    

属性:

• border: 表格边框.
• cellpadding: 内边距
• cellspacing: 外边距.
• width: 像素 百分比.（最好通过css来设置长宽）
• rowspan: 单元格竖跨多少行
• colspan: 单元格横跨多少列（即合并单元格）