01-HTML基本介绍

　　本篇主要介绍HTML相关标签的使用，以及其常用标签的作用等介绍。

　　一、HTML的介绍

　　HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。

　　其基本结构为：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">  <!--指定编码格式 -->

    <title>HTML标题</title>

</head>

<body>

    <h1>hello world</h1>

</body>

</html>

　　这便是一个最简单的HTML文档，其主要包含：

　　<!DOCTYPE html>：第一行是文档声明；

　　<html></html> ：“<html>”标签和最后一行“</html>”定义html文档的整体；

　　<head></head> ：“<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，

　　头部常加的：https://blog.csdn.net/chunchun1230/article/details/79925886

　　<body></body>：“<body>”内编写网页上显示的内容。

　　二、HTML常用标签

　通常我们将HTML标签分为块元素标签和内联元素标签，即：

　　块元素：在布局中默认会独占一行，块元素后的元素需换行排列。
　　内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。

　2.1 常见的块元素标签：

　　　1、标题标签： h1 -- h6 ，即一级标题到六级标题；

　　　2、段落标签：<p></p>

　　　4、盒子标签: <div></div> ，通常用于布局；

　　　5、列表标签：

<ul>

    <li>列表标签</li>

    <li>列表标签</li>

</ul>

　　　6、表格标签

<table> <!--表格标签-->

    <tr>  <!-- 行 -->

        <th>name</th>   <!-- 表头单元格 -->

        <th>age</th>

        <th>gender</th>

    </tr>

    <tr>

        <td>alex</td>  <!-- 普通单元格 -->

        <td>35</td>

        <td>male</td>

    </tr>

</table>

　　　7、表单标签

<form action="http://www..." method="get">

    <p><label>姓名：</label><input type="text" name="username" /></p>

    <p><label>密码：</label><input type="password" name="password" /></p>

    <p>

        <label>性别：</label>

        <input type="radio" name="gender" value="0" /> 男

        <input type="radio" name="gender" value="1" /> 女

    </p>

    <p>

        <label>爱好：</label>

        <input type="checkbox" name="like" value="sing" /> 唱歌

        <input type="checkbox" name="like" value="run" /> 跑步

        <input type="checkbox" name="like" value="swiming" /> 游泳

    </p>

    <p>

        <label>照片：</label>

        <input type="file" name="person_pic">

    </p>

    <p>

        <label>个人描述：</label>

        <textarea name="about"></textarea>

    </p>

    <p>

        <label>籍贯：</label>

        <select name="site">

            <option value="0">北京</option>

            <option value="1">上海</option>

            <option value="2">广州</option>

            <option value="3">深圳</option>

        </select>

    </p>

    <p>

        <input type="submit" name="" value="提交">

        <input type="reset" name="" value="重置">

    </p>

</form>

表单标签

　　1、<form>标签定义整体的表单区域，属性：action属性定义表单数据提交地址，method属性定义表单提交的方式，一般有“get”方式和“post”方式；

　　2、<label>标签为表单元素定义文字标注；

　　3、<input>标签定义通用的表单元素；

　　① type属性

type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮

　　② value属性：定义表单元素的值

　　③ name属性: 定义表单元素的名称，此名称是提交数据时的键名

　　4、<textarea>标签：定义多行文本输入框，而<input>是定义单行文本框；

　　5、<select>标签：定义下拉表单元素；

　　6、<option>标签：与<select>标签配合，定义下拉表单元素中的选项;

　2.2 内联元素标签

　　1、超链接标签：<a href="http://www.baidu.com"></a>; 链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线

　　2、内联容器标签：<span></span>，没有默认样式；

　　3、图片标签：<img src="图片地址" alt="图片不正常显示时出现" title="鼠标移上时显示">；

　2.3 常用的功能标签

　　1、换行标签：<br>

2、注释标签：

　　 3、特殊字符：  -- 空格标签；<-- <小于号； >-- >大于号；

　　要想了解全面请点击：W3School --> http://www.w3school.com.cn/html/html_doctype.asp

　　Over~~~~下篇介绍常用的css样式~~~~