HTML简单概述

一.概述

1.概念:HTML全称 Hyper Text Markup Language 超文本标记语言,是一种标识性的语言。其中超文本是指用超链接的方法将各种不同的文字信息组织在一起的网状文本。

2.HTML是由标签构成的语言且标签不区分大小写，其中标签又分为围堵标签和自闭和标签.

3.html文档的基本结构

二.常见的标签介绍

1.文件类标签
(1)html：为HTML文档的根标签。
(2)head：头标签用于定义文档的一些属性和引入外部的资源。
(3)body：体标签，定义文档的主体。
(4)title：标题标签，定义当前页面的标题。

2.文本类标签
(1)标题标签：h1~h6，其中h1到h6字号依次减小。
(2)段落标签：p
(3)显示一条水平线：hr
(4)字体加粗：b
(5)斜体：I
(6)字体标签：font，可以通过其中的属性对内容进行设置。不建议使用。
(7)换行：br

3.图片标签
需要注意的是图片标签是一个自闭和标签，其中的alt属性只有当图片加载失败时才会显示文字信息。

<img src = "图片的位置" align="对齐方式" alt="文字信息">

相对路径: 开头为 ./ 表示当前目录,为 …/ 表示上一级目录

4.列表标签
(1)有序列表：ol,li。使用ol定义一个列表，li为其中的列表项。
我们可以利用ol中的type属性来规定排序的方法，start属性来规定列表的起始值。

<ol type="a" start="5">
   <li>吃饭</li>
   <li>学习</li>
   <li>睡觉</li>
</ol>

(2)无序标签：ul,li
其中ul中的type属性的取值有disc,square,circle…等。

<ul type="disc">
  <li>吃饭</li>
  <li>学习</li>
  <li>睡觉</li>
</ul>

5.链接标签
a：可以用于定义一个超链接
其中通过href属性指定访问资源的URL。
通过target属性指定打开资源的方式，—(下划线)self 本页面打开，—(下划线)blank 在空白页打开一个页面。

<a href="https://www.baidu.com"  target="_self">去百度</a>

6.块标签
(1)div：每一个div占满一行，块级标签。
(2)span：文本信息在一行展示，行内标签(内联标签)默认没有任何效果，结合css使用。

<span>hello world</span>
<div>hello world</div>

7.表格标签
(1)table标签定义表格
(2)tr定义行
(3)td定义单元格,其中colspan属性用于列，rowspan属性用于合并行。
(4)th定义表头单元格
(5)caption定义表格标题
(6)thead可以用来表示表格的头部分，该标签没有任何效果，一般用于结合css样式使用
(7)tbody可以用来表示表格的体部分，该标签没有任何效果，一般用于结合css样式使用
(8)tfoot可以用来表示表格的脚部分，该标签没有任何效果，一般用于结合css样式使用

<table border="1">     <!--使用border属性给表格设置边框-->
   <caption>成绩表</caption>
   <tr>
     <th>姓名</th>     <!--其中表头的单元格可以永th定义-->
     <th>成绩</th>
   </tr>

   <tr>
     <td>张三</td>
     <td>88</td>
   </tr>

   <tr>
     <td>李四</td>
     <td>55</td>
   </tr>
</table>

8.表单标签

(1)表单:用于采集用户输入的数据，用于和服务器的交互。

(2)form用于定义表单，可以定义一个范围，范围代表采集用户的数据的范围，通俗的说就是只有被form标签包裹的代码部分的数据才会被提交。

(3)form当中的action属性可以指定提交数据的URL,#表示提交到当前页面，method属性指定数据的提交方式，其中一共有七种提交方式，比较常用的有get和post。当以get方式提交数据时，请求的参数会在地址栏中显示且请求的参数的长度有限制。当以post方式提交时，请求的参数不会在地址栏中显示且请求的参数的长度没有限制，是一种比较安全的提交方式。

(4)表单当中的数据要想被提交，必须指定其name属性的值。

(5)表单项标签：
input:用于接收用户输入的数据，可以通过改变其type属性，改变元素展示的样式，默认为文本框，其属性取值有text(文本框)，password(密码框)，radio(单选框)，checkbox(复选框)，file(文件选择框)，hidden(隐藏域)，按钮(button,submit,imag[通过src属性指定图片的路径])，date…需要注意的是，当我需要实现单选框时，其各个input标签中的name属性必须一样。input的placeholde属性可以用于文本框显示提示信息，checked属性可以用于设置默认值。

/*
input
表单项的提示信息我们一般用label标签将其包裹，
一般设置label标签的for属性与input标签的id属性相对应，
这样当我们点击label区域时，会让input获取焦点。
*/
<form action="#" method="post">
  <label for="username">用户名</label><input type="text" name="user" id="username">
</form>

select下拉列表

option标签用于定义列表项，由于http协议不支持中文的提交，所以我们可以利用option中的value属性指定实际提交的值。

<form action="post">
<select name="province">
  <option>请选择省份</option>
  <option value="0">北京</option>    
  <option value="1">上海</option>
  <option value="2">武汉</option>
</select>
</form>

textarea文本域
cols属性指定列数，rows属性指定行数(如果不够会自动扩充)

<form>
   <textarea name="text" cols="20" rows="50"></textarea>
</form>