HTML基础HTML入门 html标签 html超链接 html图像 html表格 html表单 html元素 html

HTML是什么

HTML：Hyper Text Markup Language （超文本标记语言）。

超文本包括：文字，图片，音频，视频，动画等。

标记语言：用标签的形式来表示。

HTML的作用

在前端HTML，CSS，JavaScript三大技术流中，HTML的作用为搭建网页的框架。

HTML文档格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML中的基本概念

标签：
如 <body></body> <br> 一对尖括号包裹起来的内容称为标签。标签分为双标签和单标签，前面提到的 <body></body> 就为双标签，顾名思义，双标签由两个标签构成完整语义，其中 <body> 为开始标签（start tag）又叫做开放标签（opening tag），其中 </body> 为结束标签（end tag）又叫做闭合标签（closing tag）。前面提到的 <br> 就为单标签，只有一个标签构成。
元素：
元素是指标签及包裹的内容，元素的内容是指开始标签与结束标签之间的内容，如 <p>I Love China.</p> 为这个p元素， I Love China. 为这个p元素的内容。大多数元素可以嵌套使用，如 <body><p>I Love China.</p></body> 。没有内容的元素被称为空元素，如 <br> 就是没有关闭标签的空元素。
属性：
HTML标签可以拥有属性。标签的属性用来表示标签的更多作用和表现形式。属性为键值对（key value）格式，如 key="value" 。一个跳转到百度的超链接实例为 <a href="www.baisu.com">点击跳转到百度</a> ，其中 href="" 就为 <a> 标签的属性。

HTML标题

HTML中使用 <h1></h1> 标签到 <h6></h6> 标签来表示一级标题到六级标题。标题内容写在开始标签和结束标签之间。如 <h2>此乃二级标题</h2> 。

浏览器会自动的在标题的上下方添加一行空行。

要避免为了产生粗体或大号的文本而使用标题，因为搜索引擎会根据标题为网页的结构和内容编制索引。

HTML水平线

HTML中使用 <hr> 标签来创建水平线，可用于分割内容。

HTML注释

HTML中使用  标签来表示注释，如  。写注释是一个必备的好习惯。

HTML段落

HTML中使用 <p></p> 标签来表示一个段落，实例如下：

<p>第一段</p>
<p>第二段</p>

浏览器会自动的在 <p></p> 标签上下添加一行空行。

HTML换行

HTML中使用 <br> 标签来表示换行。

<br> 元素是一个空元素，没有结束标签。

HTML文本格式

HTML中可以使用 <b></b> 或 <strong></strong> 来定义粗体文本。 <strong></strong> 是有强调作用的语义标签，该标签中的内容在搜索引擎中更受重视，一些语音阅读器也会根据此标签在阅读时加强语气。如 <strong>此处应该被重视，加粗表示</strong>。 <b></b> 是单纯的将文本从形式上视觉表现为加粗，没有强调作用，如果不是为了强调，只是为了表现加粗效果，可以使用CSS来控制加粗样式。

HTML中可以使用 <i></i> 或 <em></em> 来定义斜体文本。 <em></em> 是有强调作用的语义标签，该标签中的内容在搜索引擎中更受重视，一些语音阅读器也会根据此标签在阅读时加强语气。如 <em>此处应该被重视，斜体表示</em> 。 <i></i> 是单纯的将文本从形式上视觉表现为斜体，没有强调作用，如果不是为了强调，只是为了表现斜体效果，可以使用CSS来控制斜体样式。

HTML中可以使用 <sup></sup> 标签来定义上标字。如100的平方可用 100<sup>2</sup> 来显示。

HTML中可以使用 <sub></sub> 标签来定义下标字。如水的化学式可用 H<sub>2</sub>O 来显示。

HTML中可以使用 <ins></ins> 标签来定义文本下划线， <u></u> 标签也可以定义文本下划线，不赞成使用。 HTML中可以使用 <del></del> 标签来定义文本删除线， <s></s> 和 <strike></strike> 标签也可以定义文本删除线，不赞成使用。

HTML超链接

超链接可以是一个网页，也可以是一幅图像，可以点击超链接跳转到链接位置。

当把鼠标指针移入超链接上时，鼠标箭头会变为一只小手。

HTML中使用 <a></a> 标签创建超链接。

`<a></a>` 属性

属性名	属性描述	属性值	是否必需
href=""	规定链接指向的页面的URL	URL , #Text	定义URL时必需
id , name=""	定义锚链接被指向的位置	Text	定义锚链接时必需
target=""	规定在何处打开超链接	_blank , _self , _parent , _top	可选

target="" 属性值解释

_blank ：在新窗口打开超链接。
_self ：在本窗口打开超链接，覆盖本页面。 <a></a> 标签不写 target="" 属性时默认为此选项。

这些target的所有4个值都以下划线开始。浏览器会忽略除这4个值外的以下划线开头命名的属性值，因此，不要将 name="" 和 id="" 的属性值以下划线开头命名。

name="" 属性不赞成使用。

`<a></a>` 实例

超链接到网络URL，如下：

<a href="www.baidu.com" target="_blank">点击跳转到百度</a>

超链接到本地URL，可以使用相对地址或绝对地址，如下：

<a href="./HelloWorld.html" target="_blank">点击跳转到HelloWorld页面</a>

跳转到本网页或其他网页的具体位置，使用锚链接，如下：

<body>
    <a id="top">通过锚链接跳转到这里</a>

    <div style="height: 2000px;width: 200px;background-color: #deeeef"></div>

    <a href="#top">点击跳转到页面顶部</a>

</body>

HTML图像

HTML中使用 <img> 标签来链接图像。

<img> 标签为单标签。

`<img>` 属性

属性名	属性描述	属性值	是否必需
src=""	显示图像的URL，可以是本地地址，也可以是网络地址	URL	必需
alt=""	图像不能正常显示时替代的文本	Text	必需
title=""	图像上鼠标悬停显示的文本	Text	可选
height=""	指定图像的高度，height和width只设定一个属性时，保持默认纵横比	正数px , 正数%	可选
width=""	指定图像的宽度，height和width只设定一个属性时，保持默认纵横比	正数px , 正数%	可选
align=""	根据周围文字排列图像，已弃用	top , bottom , middle , left , right	可选
border=""	定义图像的边框，已弃用	正数	可选

`<img>` 实例

引用本地图像，如下：

<img src="resources/image/thisComputer.jpg" alt="替代文本" title="鼠标悬停显示文本" height="150px">

引用网络图像，如下：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="替代文本" title="鼠标悬停显示文本" height="150px">

HTML块元素、内联元素（行内元素）、行内块元素

块元素：

该元素独占一行，宽度自动填满其父元素宽度，并且排斥与其他元素在同一行。
在浏览器中，块元素出现的形状是矩形。
display属性为block。
块元素可以容纳行内元素和其他块元素。
块级元素可以设置width,height属性，也可以设置margin,padding属性。块级元素设置了width宽度属性后仍然是独占一行的。

常见的块级元素有：

<div></div>定义文档中的分区或节

<h1></h1>定义h1标题

<h2></h2>定义h2标题

<h3></h3>定义h3标题

<h4></h4>定义h4标题

<h5></h5>定义h5标题

<h6></h6>定义h6标题

<form></form>创建html表单

<hr>创建一条水平线

<p></p>标签定义段落

<address></address>定义地址

<caption>定义表格标题

<dd>定义列表中定义条目

<dl>定义列表

<dt>定义列表中的项目

<fieldset>定义一个框架集

<legend>

<fieldset>元素定义标题

<li>标签定义列表项目

<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部

<noscript>定义在脚本未被执行时的替代内容

<ol>定义有序列表

<ul>定义无序列表

<pre>定义预格式化的文本

<table>标签定义 HTML 表格

<tbody>标签表格主体（正文）

<td>表格中的标准单元格

<tfoot>定义表格的页脚（脚注或表注）

<th>定义表头单元格

<thead>标签定义表格的表头

<tr>定义表格中的行

内联元素（行内元素）

行内元素大多为描述性标记。
行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行。
其高度和宽度完全由元素的内容撑开，对内联元素设置width,height无效。
display属性为inline。
内联元素一般只能容纳文本或者其他内联元素。
行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

常见的内联元素有

  <span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img>  图片

  <sup>...</sup>  上标

  <sub>...</sub>  下标

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表

行内块元素

不仅可以设置宽高属性值，还可以多个标签存在一行显示。
display属性值为inline-block。

常见的行内块元素有

<img>

<textarea>

<input>

当加了css的display属性控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。

HTML列表

无序列表

无序列表使用 <ul> 标签来表示。每个列表项可使用 <li> 标签来表示。

无序列表实例如下：

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

有序列表

有序列表使用 <ol> 标签来表示。每个列表项可使用 <li> 标签来表示。

有序列表实例如下：

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

自定义列表

自定义列表使用 <dl> 标签来表示。每个列表标题可使用 <dt> 标签来表示，每个列表项可使用 <dd> 标签来表示。

自定义列表实例如下：

<dl>
    <dt>前端</dt>
    <dd>HTML</dd>
    <dd>CSS</dd>
    <dd>Javascript</dd>

    <dt>后端</dt>
    <dd>Java</dd>
    <dd>C++</dd>
    <dd>PHP</dd>
    <dd>GO</dd>
</dl>

HTML音频&视频

HTML中音频可用 <audio></audio> 标签来表示，视频频可用 <video></video> 标签来表示。

<audio src="resources/audio/太阳照常升起.mp3" controls autoplay></audio>

<video src="resources/video/让子弹飞.mp4" controls autoplay></video>

HTML内联框架

HTML中音频可用 <iframe></iframe> 标签来在此页面上嵌套另一个网页。

内联框架实例

在本页面嵌套百度首页，如下：

<iframe src="https://www.baisu.com" width="800" height="400"></iframe>

开始在本页面嵌套淘宝页面，点击超链接，在内联框架中打开百度首页，如下：

<iframe src="https://www.taobao.com" name="skip_to_baidu" width="800" height="400"></iframe>
<a href="https://www.baidu.com" target="skip_to_baidu">百度一下</a>

HTML表格

HTML表格由 <table> 标签来定义。表格中的行由 <tr> 标签来定义，每行被分割为若干单元格（由 <td> 标签定义）， <th> 标签可用来表示表头的单元格。每个单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

`<table></table>` 属性

属性名	属性描述	属性值	是否必需
border=""	定义表格的边框	正数	可选
title=""	表格上鼠标悬停显示的文本	Text	可选

`<th></th>` `<td></td>` 属性

属性名	属性描述	属性值	是否必需
colspan=""	横向合并几个单元格	正数	可选
rowspan=""	纵向合并几个单元格	正数	可选

`<table></table>` 实例

<table border="1px">
    <tr>
        <th colspan="4">手机</th>
    </tr>
    <tr>
        <th>类型</th>
        <th>手机型号</th>
        <th>尺寸</th>
        <th>颜色</th>
    </tr>
    <tr>
        <td rowspan="2">旗舰</td>
        <td>iphone12</td>
        <td>6.2英寸</td>
        <td>紫色</td>
    </tr>
    <tr>
        <td>华为mate40</td>
        <td>6.5英寸</td>
        <td>白色</td>
    </tr>
</table>

HTML表单

`<form></form>` 属性

属性名	属性描述	属性值	是否必需
action=""	将表单请求到哪个地址	URL , #	必需
method=""	表单提交方式	get , post	必需

`<input>` 属性

属性名	属性描述	属性值	是否必需
type=""	定义表单项的类型	text , password , hidden , radio , checkbox , button , img , file , email , url , number , range , search , submit , reset	必需
name=""	定义表单项的key值	Text	必需
value=""	定义一些表单项的value值	Text	可选
placeholder=""	一些表单项的默认提示	Text	可选
pattern=""	通过正则表达式定义此表单项的数据规则	正则表达式	可选
min=""	定义此表单项的最小值	正数	可选
max=""	定义此表单项的最大值	正数	可选
step=""	定义此表单项的步长	正数	可选
disabled	不可选中	无	可选
check	默认选中	无	可选
hidden	隐藏此表单项，等同于type="hidden"	无	可选
required	需要填写此表单项才可以提交	无	可选
readonly	此表单项里的内容只读，不可更改	无	可选

`<label></label>` 属性

属性名	属性描述	属性值	是否必需
for=""	对应 `<input>` 中的id属性，实现鼠标选中	Text	必需

`<select></select>` 属性

属性名	属性描述	属性值	是否必需
name=""	定义下拉菜单的的key值	Text	必需

`<option></option>` 属性

属性名	属性描述	属性值	是否必需
value=""	定义下拉菜单的的value值	Text	必需

`<textarea></textarea>` 属性

属性名	属性描述	属性值	是否必需
name=""	定义多行文本域的的key值	Text	必需
cols=""	定义多行文本域的的行数	正数	必需
rows=""	定义多行文本域的的列数	正数	必需

表单实例

<hr>
<form action="#" method="get">
    <!--文本框-->
    <!--增强鼠标可用性 label标签-->
    <label for="username">用户名：</label><input type="text" name="username" id="username" placeholder="请输入用户名" maxlength="8" required>
    <br>
    
    <!--密码框-->
    密码：<input type="password" name="pwd" placeholder="请输入密码">
    <br>
    
    <!--隐藏域-->
    隐藏域：<input type="hidden" name="tty" value="tty_content">
    <br>
    隐藏域：<input type="text" name="tty2" value="tty_content2" hidden>
    <br>

    <!--单选框-->
    性别：
    <input type="radio" name="gender" value="boy">男
    <input type="radio" name="gender" value="girl" checked>女
    <br>
    
    <!--多选框 checked默认选择-->
    爱好：
    <input type="checkbox" name="hobby" value="sleep" disabled>睡觉
    <input type="checkbox" name="hobby" value="study">学习
    <input type="checkbox" name="hobby" value="game">打游戏
    <input type="checkbox" name="hobby" value="music">玩音乐
    <input type="checkbox" name="hobby" value="code" checked>写代码
    <br>
    
    <!--普通按钮-->
    <input type="button" name="btn1" value="按钮1">
    
    <!--图片按钮 图片按钮自动提交功能-->
    <input type="image" src="resources/image/thisComputer.jpg">
    <br>
    
    <!--文件上传-->
    <input type="file" name="file1">
    <input type="button" name="upload" value="上传文件">
    <br>
    
    <!--邮箱框 pattern正则表达式-->
    邮箱：<input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    <br>
    
    <!--URL框-->
    URL：<input type="url" name="url">
    <br>
    
    <!--数字框-->
    数字：<input type="number" name="number" max="10000" min="0" step="5">
    <br>
    
    <!--滑块-->
    滑块-音量：<input type="range" name="voice" max="100" min="0">
    <br>
    
    <!--搜索框-->
    搜索：<input type="search" name="search1">
    <br>
    
    <!--只读文本框-->
    只读：<input type="text" name="readonly" value="不能更改" readonly>
    <br>
    
    <!--下拉菜单-->
    手机：
    <select name="occ" id="s1">
        <option value="iphone12">iphone12</option>
        <option value="huawei_mate40">华为mate40</option>
        <option value="mi_11">小米11</option>
        <option value="meizu_18" selected>魅族18</option>
    </select>
    <br>
    
    <!--多行文本域-->
    意见：
    <textarea name="feedback" id="t1" cols="30" rows="10"></textarea>
    <br>
    
    <!--提交按钮-->
    <input type="submit">
    
    <!--重置按钮-->
    <input type="reset">
    
</form>
<hr>

HTML不赞成使用的标签和属性（可以使用CSS样式来实现）

不赞成使用的标签

<center></center> 定义居中的内容。
<font></font> 和 <basefont></basefont> 定义HTML字体样式。
<tt></tt> 显示类似打字机或者等宽的文本效果。
<b></b> 显示粗体文本效果。
<i></i> 显示斜体文本效果。
<big></big> 显示大号字体效果。
<small></small> 显示小号字体效果。
<s></s> 和 <strike></strike> 定义删除文本样式。
<u></u> 定义下划线文本样式。

不赞成使用的属性

align="" 定义文本的对齐方式。
bgcolor="" 定义背景颜色。
color="" 定义文本颜色。

HTML注意点

HTML对大小写不敏感， <P> 和 <p> 都能被浏览器正确解析。标准规范推荐使用小写。HTML4.0以及之前的版本中，W3C标准不区分标签大小写。但是在以后的HTML5.0版本中，W3C明确规定，标签必须用小写格式。
HTML对属性值的双引号和单引号不敏感，如 <a href="www.baisu.com">点击跳转到百度</a> 和 <a href='www.baisu.com'>点击跳转到百度</a> 都可以被正确解析，推荐使用双引号。
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来，如 <p>第一个段落 但是有时候会出现莫名其妙的错误。极其不推荐漏写结束标签。
浏览器会移除HTML源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。

HTML使用CSS样式

有三种方式插入样式表，可以使浏览器根据样式表对HTML进行格式化。

1 外部样式表：

当一个样式需要被应用到很多页面时，可以使用外部样式表。可以通过更改一个文件来改变引用此样式表的所有HTML页面。

<head>
<link rel="stylesheet" type="text/css" href="subai.css">
</head>

2 内部样式表：

当单个文件需要特别样式时，可以使用内部样式表。可以在 <head></head> 部分通过 <style></style> 标签定义内部样式表。

<head>
    <style type="text/css">
        body {background-color: #f8f8f8}
        a {margin: 10px}
    </style>
</head>

3 内联样式：

当需要对个别元素单独设置样式时，可以使用内联样式。在相关的标签中设置样式属性。

<h2 style="color: bisque;background-color: aliceblue">标题2</h2>

HTML使用JavaScript

HTML中使用 <script></script> 标签来定义客户端脚本（JavaScript）。

<script></script> 元素可以包含脚本语句，也可以通过 src="" 属性指向外部脚本文件。

HTML基础