HTML常用标签（小白必看）

一、HTML中的标题（<h1>-<h6>）

1.1、标题标签

基本语法格式如下：<h#> 标题文本 </h#>注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。

<h1>标题1</h1>             
 
<h2>标题2</h2>
 
<h3>标题3</h3>
 
<h4>标题4</h4>
 
<h5>标题5</h5>
 
<h6>标题6</h6>

2.注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：

  <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + /

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

二、HTML中的文字

2.1、段落标签

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

2.2、换行标签

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

2.3、div span标签

div span 是没有语义的 是我们网页布局主要的2个盒子 css+div

• <div></div> :一行只能放一个大盒子
• <span></span> : 一行可以放多个小盒子

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

2.4、文本格式标签

• 为文字设置粗体、斜体、下划线等效果

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

三、HTML中的图像

3.1、图像标签img

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下：

• src是<img>标签的必须属性，它用于指定图像文件的路径和文件

<img src="图像URL" />

四、HTML中的超链接

4.1、链接标签

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

• href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用
• target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：

1. 1.外部链接 需要添加 http:// www.baidu.com
2. 2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
3. 3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4. 4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

4.2、锚点链接定位

作用：点击链接，可以快速定位到页面中的某个位置

创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

• 在链接文本的href属性中，设置属性值为 #名字

  <a href="#two">  

• 找到目标位置标签，里面添加一个 id属性=刚才的名字

  <h3 id="two">第2集</h3>

4.3、路径

相对路径：

绝对路径：

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

五、HTML中的表格

5.1、表格 table

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。

表格的创建：在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
  <tr>           <!--表格第一行-->
    <td>单元格内的文字</td>    <!--表格第一行第一个空格-->
    ...
  </tr>
  <tr>           <!--表格第二行-->
    ...
  </tr>
</table>

在上面的语法中包含三对HTML标签，分别为 table</table、tr</tr、td</td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释:

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

5.2、表格属性

用法：

<table witdth="500" border="1" >
    ...
</table>

5.3、表格结构（了解即可）

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：

• 用 <thead></thead> 标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行
• 用<tbody></tbody> 标签表示表格的主体区域，主要是用于放数据本体
• 以上标签都是放在<table></table>标签中

5.4、表格标题

表格的标题： caption

用法：caption 元素定义表格标题。

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

5.5、合并单元格(难点)

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan="合并单元格的个数"

<td colspan = "2"></td>

总结表格

• 表格提供了HTML 中定义表格式数据的方法。

• 表格中由行中的单元格组成。

• 表格中没有列元素，列的个数取决于行的单元格个数。

• 表格不要纠结于外观，那是CSS 的作用。

六、HTML中的列表

• 无序列表：<ul>
• 有序列表：<ol>
• 自定义列表：<dl>

<dl>
     <dt>关注我们</dt>
     <dd>新浪微博</dd>
     <dd>联系我们</dd>
</dl>

七、HTML中的表单

表单标签

目的是为了收集用户信息。

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

7.1表单域:

• 表单域是一个包含表单元素的区域
• <form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域的名称">
    
</form>

7.2、表单控件(表单元素)

①input输入表单元素🔥

• input输入表单元素
• input是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)

type 属性的属性值及描述如下：

除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：

• name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
• name 是表单元素的名字，要求 单选框和复选框要有相同的name值
• checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素

②文本框与密码框🔥

• type 属性设置为 text 是文本框
• type 属性设置为 password 是密码框

<body>
    <form>
        用户名：<input type="text"> <br/> 
        密码：<input type="password">
    </form>
</body>

③单选框和复选框🔥

• type 属性设置为 radio 是单选框
• type 属性设置为 checkbox 是复选框
• name 是表单元素的名字，要求 单选框和复选框要有相同的name值

<form>
        用户名：<input type="text"> <br> 
        密码：<input type="password"> <br> 
        <!-- radio是单选框，可以多选一 -->
        性别：男<input type="radio"> 女 <input type="radio">
        <!-- checkbox是多选框，可以多选 -->
        爱好：吃饭<input type="checkbox">  睡觉<input type="checkbox">   打游戏<input type="checkbox"> 
</form>

④name和value属性🔥

• name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单，name的主要作用就是用于区别不同的表单

<form>
        用户名：<input type="text" value="请输入用户名"> <br> 
        密码：<input type="password"> <br> 
        <!-- radio是单选框，可以多选一 -->
        <!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 -->
        性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
        <!-- checkbox是多选框，可以多选 -->
        爱好：吃饭<input type="checkbox" name="habby" value="吃饭">  睡觉<input type="checkbox" name="habby" value="睡觉">   打游戏<input type="checkbox" name="habby" value="打游戏"> 
</form>

• 注意：单选框和复选框name必须一致，value可以不一样

⑤checked和maxlength🔥

• 单选按钮和复选框可以设置checked 属性
• 当页面打开时候就可以默认选中这个按钮
• 单选框只能给其中一个加checked，复选框可以多加

性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">

• maxlength:规定最多输入多少个字符

⑥submit和reset🔥

• type 属性设置为submit：提交按钮会把表单数据发送到服务器
• ``type` 属性设置为reset：重置按钮会清除表单中的所有数据

⑦button和文件域🔥

• type 属性设置为button：是一个按钮
• type 属性设置为file：是一个文件域，可以上传文件

<input type="button" value="获取短信验证码"> <br>
    <!-- 文件域：上传文件使用的 -->
    上传头像：<input type="file">

⑧label🔥

• label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
• label标签的 for属性 应当与相关元素的id 属性相同

<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />

7.3、select下拉表单元素

• 下拉表单元素
• <select>中至少包含一对<option>
• 在<option>中定义 selected="selected" 时，当前项即为默认选中项。

<select>
       <option selected="selected">选项1</option>
       <option>选项2</option>
       <option>选项3</option>
       ...
</select>

7.4、stextarea文本域元素当前项即为默认选中项

• 用于定义多行文本输入的控件

<textarea>
    文本内容
</textarea>

• cols = “每行中的字符数” ， rows = “显示的函数”，我们在实际开发中不会使用，都是用CSS来改变大小

7.5、表单元素总结

表单元素我们学了三大组

• input 输入表单元素
• select 下拉表单元素
• textarea 文本域表单元素

这三组表单元素都应该包含在 form 表单域里面，并且有 name 属性。