目录

• 1 HTML快速入门
• • 1.1 HTML 的介绍
  • • 1.1.1 HTML 的组成
    • • 标签
      • 属性
  • 1.2 入门案例
  • • 1.2.1 案例效果
    • 1.2.2 实现步骤
  • 1.3 总结
• 2 HTML 基本语法
• • 2.1 HTML 的注释
  • 2.2 HTML 标签
  • 2.3 HTML 的属性
  • 2.4 HTML 的特殊字符
• 3 HTML 案例 新闻文本
• • 3.1 案例效果
  • 3.2 案例分析
  • • 3.2.1 div 样式布局
    • 3.2.2 文本标签
  • 3.3 实现步骤
• 4 HTML案例-头条页面
• • 4.1 案例效果
  • 4.2 案例分析
  • • 4.2.1 div布局的进阶
    • • 1）div 的class值
    • 4.2.2 图片标签
    • 4.2.3 超链接
• 5 HTML案例-登录页面
• • 5.1 案例效果
  • 5.2 案例分析
  • • 5.2.1 表单标签
    • 5.2.2 表单元素入门
    • • 1）简单的文本输入框
      • 2）提交用户名的表单
    • 5.2.3 关于属性值
    • • 1）NAME 和 VALUE 属性
      • 2）TYPE 属性
      • 3）HTML5 新增属性
    • 5.2.4 更多表单元素
  • 5.3 实现步骤

1 HTML快速入门

1.1 HTML 的介绍

• HTML（HyperText Markup Language）：超文本标记语言
• 超文本：比普通文本更强大
• 标记：就是标签。可以使用一系列标签，将网络上的文档格式统一，使分散的资源连接为一个逻辑整体

1.1.1 HTML 的组成

• HTML 页面是由一系列的元素（Element）组成的，而元素是通过标签创建出来的

标签

• 一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。 例如：

今天是个好日子

在HTML中，

标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。

显示效果如下：

属性

HTML标签可以拥有属性。 属性 提供了有关 HTML 元素的 更多的信息 。我们只能在开始标签中，加入属性。通常以名称=值 成对的形式出现， 比如：name=‘value’ 。例如：

今天是个好日子!!!

显示效果如下：

1.2 入门案例

1.2.1 案例效果

1.2.2 实现步骤

1. 在项目下的web目录中新建一个HTML文件
2. 修改
   第一个div

   

   3.2.2 文本标签

   使用文本内容标签设置文字基本样式
   

   3.3 实现步骤

   1. 创建初始页面。
   2. 使用div标签划分区域（标题，作者，副标题，正文），设置div样式。
   3. 编辑正文。
      1. 使用h1标签加入标题。
      2. 使用em标签加入作者信息。
      3. 使用hr标签加入分割线。
      4. 使用h3标签加入副标题。
      5. 使用p标签加入正文。
      6. 使用ol标签，li标签加入列表信息。
      7. 使用strong标签，加入文字强调效果。

   4 HTML案例-头条页面

   4.1 案例效果

   

   4.2 案例分析

   4.2.1 div布局的进阶

   
   想要将div布局成案例效果，首先需要对多个div进行区分，再分别设置每一个div自身的效果。

   1）div 的class值

   首先编写六个div，设置边框样式

   	
   top
   navbar
   left
   center
   right
   footer
   

   
   发现通过div设置的样式都是一致的，无法个性化布局。如何区分不同的div呢？
   使用class的值，格式：

   .class值{属性名:属性值;
   }<标签名 class="class值">  提示: class是自定义的值
   

   修改后

   top
   navbar
   left
   center
   right
   footer
   

   演示
   

   所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。

   4.2.2 图片标签

   
   其他属性
   

   4.2.3 超链接

   
   去掉下划线
   根据某些样式的布局需求，去除下划线更为美观。

   a { text-decoration:none;  // none 表示不显示
   }
   

   5 HTML案例-登录页面

   5.1 案例效果

   

   5.2 案例分析

   5.2.1 表单标签

   
   举例：

   //表单元素
   
   

   表单的属性
   
   举例：

   GET与POST说明：

   post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。

   get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。.
   GET与POST对比：
   

   5.2.2 表单元素入门

   表单元素指的是 input 元素、复选框、下拉框、提交按钮等
   

   1）简单的文本输入框

   • label 标签：表单的说明
     • for 属性值：匹配 input 标签的 id 属性值
   • input 标签：输入条件
     • type 属性：表示输入类型，text值为普通文本框
     • id 属性：表示标签唯一标识
     • name 属性：表示标签名称
     • value 属性：表示标签数据

   代码实现

   Username:
   
   

   

   2）提交用户名的表单

   • button 标签：表示按钮
     • type 属性：表示按钮类型，submit值为提交按钮

   Username:login
   
   

   

   5.2.3 关于属性值

   1）NAME 和 VALUE 属性

   
   使用方式：
   以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用&进行分隔。
   举例：
   

   2）TYPE 属性

   • input 标签的 type 属性
     • 基本的文本属性
       
       举例：

     
   Username: 
   Password:
   Email:      
    login
   

   

   • 单选多选属性
     
     举例：

   性别:男女
   爱好:  体育 科技 娱乐 短视频
   
   

   

   • 按钮属性
     
   • HTML5 新增的 type 值
     
     
   • button 标签的 type 属性
     

   3）HTML5 新增属性

   

   5.2.4 更多表单元素

   
   select举例：

   Choose a pet:--Please choose an option--DogCatHamsterParrotSpiderGoldfish
   

   
   textarea举例：

   Write something here
   

   
   fieldset举例：

   是否同意
    同意 不同意
   
   

   

   5.3 实现步骤

   1. 设置背景图。
   2. 基本上下两部分布局。
   3. 实现上部（图片）
   4. 实现下部（表单）
   5. 实现页面跳转，从案例3跳转到案例2。