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）组成的，而元素是通过标签创建出来的

属性

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

<h1 align="center">今天是个好日子!!!</h1>

在这里插入图片描述
显示效果如下：

1.2 入门案例

1.2.1 案例效果

在这里插入图片描述

1.2.2 实现步骤

在项目下的web目录中新建一个HTML文件
修改 <title> 标签中的内容：01-入门案例
在<body>标签中编写一个<h1>标签，内容为：这是我的第一个HTML入门案例
在 <h1> 标签中指定属性align，属性值为center
通过浏览器打开查看页面

1.3 总结

HTML是一种标记语言，用来组织页面，使用元素和属性。
这个元素的主要部分有：

元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
属性（Attribute）：标签的附加信息。

在学习HTML时，要抓住两个方面：

掌握标签所代表的含义。
掌握在标签中加入的属性的含义。

2 HTML 基本语法

2.1 HTML 的注释

什么是注释

注释是用于解释说明程序的

注释的格式

<!-注释内容-->

注释特点

被注释掉的标签，不会被浏览器解析

2.2 HTML 标签

标签的分类

开始和结束标签 <h1></h1> <u></u>
自闭和标签 <br/> <hr/>

    <h1>一级标题</h1>
    <br/>
    <hr/>
    <h2>二级标题</h2>

在这里插入图片描述

标签的嵌套

正确的嵌套格式：<h1><u>文本</u></h1>
错误的嵌套格式：<h1><u>文本</h1></u>

<h1>一级标题</h1>
    <br/>
    <hr/>
    <h2><u>二级标题</u></h2>

在这里插入图片描述

块级元素和行内元素

块级元素：在页面中以块的形式展现，自己独占一行，后面的内容会自动换行。 <p> <hr> <div>
行内元素：在页面中以行的形式展现，不会换行。 <b> <i> <u> <span>

div 和 span

<div> 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。
<span> 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。

    <!--div和span-->
    <div>一个div</div>
    <div>两个div</div>
    <span>一个span</span>
    <span>两个span</span>

在这里插入图片描述

注意：div和span在页面布局中有重要作用。

2.3 HTML 的属性

什么是属性

属性可以提供一些额外的，这些信息不会直接显示在内容中，但可以改变标签的样式或提供数据使用

定义格式

属性名=属性值

属性的规范

同一个标签中属性的名称必须唯一
不区分大小写，建议使用小写
属性值可以使用单引号或双引号括起来，建议使用双引号

常用属性

 <!--属性-->
    <div class="cls">第一个div</div>
    <div class="cls">第二个div</div>
    <div id="1">第三个div</div>
    <div id="2">第四个div</div>
    <div style="background-color: aqua">第五个div</div>

在这里插入图片描述

2.4 HTML 的特殊字符

说什么是特殊字符

在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分

常用的特殊字符

    本网站有    特殊解释权<br/>
    本网站有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;特殊解释权

在这里插入图片描述

3 HTML 案例新闻文本

3.1 案例效果

在这里插入图片描述

3.2 案例分析

3.2.1 div 样式布局

在 <head>标签中，通过<style>标签来控制样式
样式格式
基本格式

格式:
<style>
    标签名{
        属性名:属性值;
    }
</style>

多个属性名格式：

<style>
    标签名{
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
    }
</style>

div的多样式：

<style>
    标签名{
        属性名:属性值1 属性值2 属性值3; 
    }
</style>

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式演示</title>
    <style>
      div{
        /*边框*/
        border: 1px solid pink;

        /*宽度*/
        width: 60%;

        /*高度*/
        height: 500px;

        /*外边框边距*/
        margin: auto;
      }
    </style>
</head>
<body>
  <div>第一个div</div>
</body>
</html>

在这里插入图片描述

3.2.2 文本标签

使用文本内容标签设置文字基本样式
在这里插入图片描述

3.3 实现步骤

创建初始页面。
使用div标签划分区域（标题，作者，副标题，正文），设置div样式。
编辑正文。
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，设置边框样式

	<style>
		div{
            border: 1px solid pink;
        }
	</style>
  <!--顶部登录注册-->
    <div>top</div>

  <!--导航条-->
  <div>navbar</div>

  <!--左侧图片-->
  <div>left</div>

  <!--中间正文-->
  <div>center</div>

  <!--右侧广告-->
  <div>right</div>

  <!--底部脚页超链接-->
  <div>footer</div>

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

.class值{
    属性名:属性值;
}

<标签名 class="class值">  
 提示: class是自定义的值

修改后

<style>
        div{
            border: 1px solid pink;
        }
        .left{
            width: 20%;
            float: left;
            height: 500px;
        }

        .center{
            width: 59%;
            float: left;
            height: 500px;
        }

        .right{
            width: 20%;
            float: left;
            height: 500px;
        }
    </style>

  <!--顶部登录注册-->
    <div>top</div>

  <!--导航条-->
  <div>navbar</div>

  <!--左侧图片-->
  <div class="left">left</div>

  <!--中间正文-->
  <div class="center">center</div>

  <!--右侧广告-->
  <div class="right">right</div>

  <!--底部脚页超链接-->
  <div>footer</div>

演示
在这里插入图片描述

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

4.2.2 图片标签

在这里插入图片描述
其他属性

4.2.3 超链接

在这里插入图片描述
去掉下划线
根据某些样式的布局需求，去除下划线更为美观。

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

5 HTML案例-登录页面

5.1 案例效果

在这里插入图片描述

5.2 案例分析

5.2.1 表单标签

在这里插入图片描述
举例：

<form >
    //表单元素
</form>

表单的属性
在这里插入图片描述
举例：

<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>

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 属性：表示标签数据

代码实现

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
</form>

在这里插入图片描述

2）提交用户名的表单

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

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
  <button type="submit" >login</button>
</form>

在这里插入图片描述

5.2.3 关于属性值

1）NAME 和 VALUE 属性

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

2）TYPE 属性

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

  <form action="#" method="get">
      <label for="username">Username:</label>
      <input type="text" id="username"  name="username"> <br/>
  
      <label for="password">Password:</label>
      <input type="password" id="password"  name="password"><br/>
  
      <label for="email">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <input type="email" id="email"  name="email"><br/>
      <button type="submit"> login</button>
  </form>

在这里插入图片描述

单选多选属性

举例：

<form action="#" method="get">
    <label for="gender">性别:</label>
    <input type="radio" id="gender" name="gender" value="boy"/>男
    <input type="radio" name="gender" value="girl" checked="checked"/>女

    <hr/>
    <label for="hobby">爱好: </label>
    <input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育
    <input type="checkbox"  name="hobby" value="tech"/> 科技
    <input type="checkbox" name="hobby" value="fun" /> 娱乐
    <input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频
</form>

在这里插入图片描述

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

3）HTML5 新增属性

在这里插入图片描述

5.2.4 更多表单元素

在这里插入图片描述
select举例：

<form action="#" method="post">
        <label for="pet-select">Choose a pet:</label>

        <select name="pets" id="pet-select">
            <option value="">--Please choose an option--</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
            <option value="hamster">Hamster</option>
            <option value="parrot">Parrot</option>
            <option value="spider">Spider</option>
            <option value="goldfish">Goldfish</option>
        </select>


    </form>

在这里插入图片描述
textarea举例：

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

在这里插入图片描述
fieldset举例：

<form action="#" method="post">
  <fieldset>
    	<legend>是否同意</legend>
        <input type="radio" id="radio_y" name="agree" value="y"> 
      	<label for="radio_y">同意</label>
        <input type="radio" id="radio_n" name="agree" value="n"> 
      	<label for="radio_n">不同意</label>
  </fieldset>
</form>