HTML学习笔记

一、HTML是什么？

HTML：超文本标记语言，用在前端，里面可以显示的文字、图片、语音、视频、超链接等。
是一种标记语言，不是编程语言。由一个个的标签组成。每个标签由特殊的含义，也叫标签语义化

二、骨架标签简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stage-frontWeb</title>
</head>
<body>
    <p>这是第一个前端页面程序1</p>    
</body>
</html>

<!DOCTYPE html> 文档类型申明标签，不是HTML标签的，只是用来声明运用的HTML版本。必须放在html文件的首行。
<html></html> 根标签，这个标签在一个html文件中只有一个，用来组织其他标签。
<head></head> 头部标签，用来定义网页的头部元素，是htm标签的下级标签。
title用来定义浏览器头部中显示的标题。
<body></body> 用来定义网页内容的元素，是html标签的下级标签，与head标签同级。
lang属性 用来声明浏览器是中文网页还是英文网页，或者其他语言的网页。放在head标签中使用
charset字符集用来声明浏览器使用的字符集编码，一般是 utf-8,这个标签很重要，未声明，浏览器会出现乱码现象。

三、常用标签

1、标题标签`h1~h6`

标题标签独占一行
h1-->h6重要性一次递减
标题标签标记的字体会加粗，随着标签等级，加粗效果会不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签使用</title>
</head>
<body>
    <h1>我是一个标题标签</h1>
    <h2>我是一个标题标签</h2>
    <h3>我是一个标题标签</h3>
    <h4>我是一个标题标签</h4>
    <h5>我是一个标题标签</h5>
    <h6>我是一个标题标签</h6>
</body>
</html>

2、段落标签 `p`与换行标签`br`

被p标签标记的文字会分成一段，段落雨段落之间有较明显垂直距离。
<br/>换行标签是单标签也叫自闭合标签，作用是文本进行强制换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签与换行标签使用</title>
</head>
<body>
    <p>文章包括各种文体的著作、作品，如诗歌、戏剧、小说、科学论文，记叙文、议论文、说明文、应用文等等。</p>“千古文章未尽才”“文章千古事”“文章憎命达”“板凳要坐十年冷、文章不写一字空”“积句而成章，积章而成篇”“言出为论，下笔成章”等，都是现在所说的文章的意思。<br/>更广义的文章，也包含“学问”“奥秘”等意思，如“洞明世事皆学问，人情练达即文章”就是。
</body>
</html>

3、div和span

div和span标签没有语义，只是一个盒子，用来组织承载其他标签元素的容器，常用来布局使用。
div标签独占一行，可以看做一个大的盒子。
span标签是个小盒子，一行中可以有多个span标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span标签使用</title>
</head>
<body>
    <div>我是一个div,我独自占一行</div>
    <div>我是一个div,我独自占一行</div>
    <div>我是一个div,我独自占一行</div>
    <span>java</span>
    <span>python</span>
    <span>c++</span>
</body>
</html>

4、图像标签`img`和路径（重点）

img标签后必须接的属性是 src，src="图片的路径和文件名",这个属性是必须的，属性值是图片的路径名与文件名。
图片标签是自闭合标签，<img src=""/>。
alt属性，当图片显示失败是用来替换图片显示的文字或者其他提示信息。
title属性，当鼠标悬浮在图片上时的提示信息，对图片的解释说明。
width属性，设置图片的显示宽度。一般情况设置了宽度，高度就自动按照比例缩放，防止图片失真，所以宽度和高度一般设置一个就好了。
height属性，设置图片的显示高度。一般情况设置了高度，宽度就自动按照比例缩放，防止图片失真，所以宽度和高度一般设置一个就好了。
border设置图片的边框。这个一般使用css样式来解决，了解即可。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片标签使用</title>
  </head>
  <body>
    <img src="img-01.png" alt="刘德华老师" title="刘德华" width="500" />
  </body>
</html>

4-2、相对路径（重点学习）

相对前对象来查看的一种路径查找方式，就叫相对路径。

如果被引用的资源与当前对象处于同一个路径下，就直接写引用的资源名就可以。
如果被引用的资源在当前对象路径的下级路径，则使用/来查找。
如果被引用的资源在当前对象的上级路径下，则使用../来查找。

4-3、绝对路径（了解即可）

从根路径下开始查找，一般不建议使用，因为每个人电脑上项目目录的路径不一定是相同的，用这个方式会出错。

5、超链接标签`a`（重点）

5-1、语法格式

图片或者文字

href 属性是必填属性

target属性默认是_slef,代表当前页面打开地址，另外一个是_blank，代表新窗口中打开目标地址。

_self:代表当前页面打开

_blank:代表新窗口中打开

_top:代表当前页面打开

_parent:代表当前页面打开

5-2、链接分类

5-2-1、外部链接

目标地址以http://开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签使用</title>
</head>
<body>
    <h2>外部连接使用</h2>
    <a href="http://wwww.baidu.com" target="_blank">百度</a>
</body>
</html>

5-2-2、内部链接

网站内部之间相互跳转的链接，直接链接内部网站的网页路径名称即可。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超链接标签使用</title>
  </head>
  <body>
    <h2>内部链接</h2>
    <a href="04-图片标签.html" target="_blank">图标刘德华</a>
  </body>
</html>

5-2-3、空链接

开发中需要跳转，但是目标链接还没开发的时候使用，空链接，不跳转。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超链接标签使用</title>
  </head>
  <body>
    <h2>空链接</h2>
    <a href="#" target="_blank">首页</a>
  </body>
</html>

5-2-4、下载链接

如果href中地址是个文件或者压缩包，会下载这个文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超链接标签使用</title>
  </head>
  <body>
    <h2>下载链接</h2>
    <a href="img-01.zip" target="_blank">下载</a>

    <h2>网页元素链接</h2>
    <a href="img-01.zip">
        <img src="img-01.png" alt="下载文件" title="下载图片" width="500"/>
    </a>
  </body>
</html>

5-2-5、网页元素链接

任何的元素都可做链接文字：音频、图片、文字....

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超链接标签使用</title>
  </head>
  <body>
   
    <h2>网页元素链接</h2>
    <a href="img-01.zip">
        <img src="img-01.png" alt="下载文件" title="下载图片" width="500"/>
    </a>
  </body>
</html>

5-2-6、锚点链接

点击链接，快速定位到页面中的某个位置。

使用步骤

在连接文本的href属性中，设置属性值为#名字的形式，如：<a href='#two'>第2集</a>
找到目标位置的标签，里面添加一个id属性=刚才的名字，如：<h3 id='two'>第2集介绍</h3>

6、注释标签和特殊字符

6-1、注释

可以用来对代码解释说明。
可以用来注释代码。
注释的部分不会留浏览器执行。

6-2、特殊字符

空格 &nbsp 一个字符就是一个&nbsp
< 小于号用&lt
> 大于号用&gt
.... 查文档api

7、表格标签`table`

表格不是用来布局的，是用来显示数据的，使数据排列的更加整齐、美观。

7-1、标签基本语法结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签使用</title>
</head>
<body>
    <!-- table标签表示整个表格 -->
    <table>
        <!-- tr表示行标签,一个tr代表一行 tr标签嵌在table中 -->
        <tr>
            <!-- td 表示表格的单元格数据,一个单元格对应一个td,td标签嵌入在tr标签中 -->
            <td>姓名</td> 
            <td>性别</td> 
            <td>年龄</td> 
        </tr>
    </table>
</body>
</html>

7-2表格结构标签与表格头标签

7-2-1、表格头标签`th`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格标签使用</title>
  </head>
  <body>
    <!-- table标签表示整个表格 -->
    <table>
      <!-- tr表示行标签,一个tr代表一行 tr标签嵌在table中 -->
      <tr>
        <!-- th标签与td差不多,只是被th修饰的，会加粗显示并居中,与表格其他字段数据突出显示头部的不一样。 -->
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </table>
  </body>
</html>

7-2-2、表格头部域`thead`和表格主体区域`tbody`

为了更好对表格的结构做规划，区分头部和主体。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格标签使用</title>
  </head>
  <body>
    <!-- table标签表示整个表单 -->
    <table>
      <!-- tr表示行标签,一个tr代表一行 tr标签嵌在table中 -->
      <!-- thead标签包裹头部的tr -->
      <thead>
        <tr>
          <!-- th标签与td差不多,只是被th修饰的，会加粗显示并居中,与表格其他字段数据突出显示头部的不一样。 -->
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <!-- tbody标签包裹表格的主体标签 -->
      <tbody>
        <tr>
          <td>刘德华</td>
          <td>男</td>
          <td>57</td>
        </tr>
        <tr>
          <td>郭富城</td>
          <td>男</td>
          <td>52</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

7-3、表格标签属性（了解）

表格标签的数据都是写在table标签中的。

表格标签的属性一般是用来美化表格的，但是一般采用CSS样式来美化，这里我们只是熟悉了解一下。

7-3-1、align属性

align属性：表格对周围元素的显示位置，属性值有 left/center/right。默认是left

7-3-2、border属性

border属性：规定表格是否有边框，默认是"",表示没有边框。如果要加边框可以是 border="2"。

7-3-3、cellpadding属性

cellpadding属性：规定单元格边沿与内容之间的距离，默认是1像素。如果要表示更大的距离的话，可以这样cellpadding="20"。

7-3-4、cellspacing属性

cellspacing属性：规定单元格之间的距离，默认是2像素，如果要表示没有距离的话，可以这样cellspacing="0"。

7-3-5、width属性

width属性：规定表格的宽度。

7-3-6、height属性

height属性：规定表格的高度。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格标签使用</title>
  </head>
  <body>
    <!-- table标签表示整个表单 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
      <!-- tr表示行标签,一个tr代表一行 tr标签嵌在table中 -->
      <!-- thead标签包裹头部的tr -->
      <thead>
        <tr>
          <!-- th标签与td差不多,只是被th修饰的，会加粗显示并居中,与表格其他字段数据突出显示头部的不一样。 -->
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <!-- tbody标签包裹表格的主体标签 -->
      <tbody>
        <tr>
          <td>刘德华</td>
          <td>男</td>
          <td>57</td>
        </tr>
        <tr>
          <td>郭富城</td>
          <td>男</td>
          <td>52</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

7-4、合并单元格

7-4-1、合并单元格的方式

跨行合并 rowspan="合并单元格的个数"
跨列合并colspan="合并单元格的个数"

7-4-2、目标单元格（写合并代码的）

跨行合并的方式：最上侧单元格为目标单元格，写合并代码。
跨列合并的方式：最左侧单元格为目标单元格，写合并代码。

7-4-3、合并单元格三步骤

先确定合并方式：跨行？还是跨列？
找到目标单元格，写上合并代码
删除多余的单元格。

8、列表标签

列表标签就是用来布局的。

有序列表，无序列表，自定义列表。

8-1无序列表`ul`（重点）

8-1-1、语法结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>

无序列表的各个列表项没有顺序之分，属于并列关系

<ul></ul>标签中只能是<li></li>标签，不可以有其他标签或者元素。

<li></li>标签相当于一个容器，里面可以嵌入任何一个元素。

无序列表会带有自己的样式属性，但在实际开发中，我们都是使用css来处理样式的。

8-2、有序列表`ol`（理解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>

有序列表的列表项是有顺序的。

<ol></ol>标签中只能是<li></li>标签，不可以有其他标签或者元素。

<li></li>标签相当于一个容器，里面可以嵌入任何一个元素。

有序列表会带有自己的样式属性，但在实际开发中，我们都是使用css来处理样式的。

8-3、自定义列表`dl`（重点）

在html中，<dl>标签用于定义描述列表（或定义列表），该标签与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>名词1</dt>
        <dd>名词1的解释1</dd>
        <dd>名词1的解释2</dd>
        <dd>名词1的解释3</dd>
    </ul>
</body>
</html>

<dl></dl>里面只能包含<dt>和<dd>。

<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

9、表单相关标签

网页中表单主要是为了收集用户信息。

9-1、表单的组成

表单组成包括：表单域、表单控件（也称为表单元素）和提示信息。

9-2、表单域`form`

在html中，表单域用标签<form>来定义，用来实现用户信息的收集和传递。<form>标签范围内的表单元素信息提交到服务器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="***.php" method="post" name="表单域的名称">   
        各种表单元素...
    </form>
</body>
</html>

属性	属性值	作用
action	url地址	指定接受并处理表单数据的服务器地址。
method	get/post	设置表单向服务器提交数据的方式。
name	名称	设置表单域的名称，用于区分页面中不同的表单域。

9-3表单控件（表单元素）

9-3-1、input输入表单元素

表单元素中<input>标签用于收集用户信息。

<input>标签中属性 type是必须的，根据不同的属性值，输入的文本元素有不同形式，可以是文本、复选框、按钮等。

语法格式为 <input type='属性值'/>

type属性值以及描述如下：

属性值	描述
button	定义可点击的按钮。
checkbox	定义复选框。
file	定义输入字段和“浏览”按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段，该字段中的密码被掩码。
radio	定义单选按钮。
reset	定义重置按钮，用来清空表单中的数据。
submit	定义提交按钮，提交按钮会把表单数据提交到服务器。
text	定义单行的输入字段，默认宽度为20个字符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="***.php" method="post" name="表单域的名称">   
        用户名：<input type="text" value="请输入名字" name="username">
        密码：<input type="password" name="pwd" >
    </form>
</body>
</html>

属性name 定义表单元素的名称，用来区分其他表单元素。

属性 value 定义表单元素的值。

.... 其他属性可以查找相应的api文档学习。

9-3-2、select下拉表单

页面中，如果有多个选项让用户选择，并且想要节约页面空间，就可以使用<select>元素控件定义下拉列表。

语法结构

<select>
	<option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
    ...
</select>

标签<select>中至少包含一对<option>。

在<option>中定义属性selected="selected"时，当前项默认选中状态。

9-3-3、textarea文本域元素

当用户输入内容较多的情况下，使用文本域标签元素定义。

<textarea rows="3" cols="20">
	文本内容
</textarea>

属性 rows="3" 代表三行显示。

属性 cols="20" 代表输入的字符个数。

9-3-4 label标签

<label>标签为input元素定义标注。

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验。

语法结构

<!--label标签元素中 属性 for的值 与input标签中属性id的值必须一致，才可以完成绑定-->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

526互联