HTML

前端HTMLHTMLweb大约 11 分钟

HTML 入门

HTML 简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML 页面

模板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
      <h1>我的第一个标题</h1>
      <p>我的第一个段落。</p>
</body>
</html>

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

元素

<html lang="zh-CN"> lang 表示该页面的语言 "en" 英语 "zh" 中文
<p id="p1" title="show1">Hello,world!</p> id 给标签命名title定义鼠标指向元素显示的信息
<meta charset="UTF-8" /> 页面编码

HTML 元素

开始标签	元素内容	结束标签
<p>	这是一个段落	</p>
<a href="default.htm">	这是一个链接	</a>
<br>	换行

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

HTML 文档实例

<!DOCTYPE html>
<html>
  <body>
    <p>这是第一个段落。</p>
  </body>
</html>

以上实例包含了三个 HTML 元素。

HTML 实例

<p> 元素:

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>. 元素内容是: 这是第一个段落。

<body> 元素:

<body>
  <p>这是第一个段落。</p>
</body>

<body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>
  <body>
    <p>这是第一个段落。\</p>
  </body>
</html>

<html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>. 元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落<p>这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用<br /> 其实是更长远的保障。

HTML tips：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

HTML 列表

<li>标签可以放任意标签

1.有序列表

ol： ordered list

<ol>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ol>

2.无序列表

ul ：unordered（无序的）list

li：list item （列表项）

<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ul>

3.多级列表

<ul>
  <li>
    北京市
    <ul>
      <li>海滨区</li>
      <li>朝阳区</li>
      <li>昌平区</li>
    </ul>
  </li>
  <li>
    河北省
    <ul>
      <li>石家庄</li>
      <li>保定</li>
    </ul>
  </li>
</ul>

4.自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
  <dt>look</dt>
  <dd>解释1</dd>
  <dd>解释2</dd>
  <dd>解释3</dd>
</dl>

HTML Anchor(超链接)

锚，超链接

<a href="address">超链接文本</a>

1.本地网页

<a href="index01.html">本地网页</a>

2.互联网网页

<a href="http://www.bilibili.com">互联网网页</a>

3.页面内锚点

<a href="#p1">页面内锚点</a>
<hr />
<!-- <hr>分割线 -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- <br>换行 -->
<p id="p1">很下面的内容<a href="#">回到顶部</a></p>

href = "#" 只有#号，表示回到页面顶部

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

target 指定链接页面的打开方式，_self 为默认值，_blank 为在新窗口打开。

案例

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="index01.html">本地网页</a>
    <hr />
    <a href="http://www.bilibili.com">互联网网页</a>
    <hr />
    <a href="#p1">页面内锚点</a>
    <hr />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <p id="p1">很下面的内容<a href="#">回到顶部</a></p>
  </body>
</html>

结果：

多媒体

1.Image

<img src="文件路径" /> <img src="文件路径" alt="error" width="200" />

border边框

src 格式有三种

文件地址
data URL 将图片的二进制数据嵌入网页

data:媒体类型;base64,数据

object URL

base64 编码

java：

终端

jshell+<CR>

调用Files.readAllBytes()方法

Files.readAllBytes(Path.of("path of image"));+<CR>

调用Base64.getEncoder().encodeToString($*)方法

System.out.println(Base64.getEncoder().encodeToString($1));+<CR>

复制生成的字符串

<img src="data:image/jpg;base64,粘贴数据" alt="error" width="400" />

2.Video

<video src="文件路径"></video>

<video src="../video/tscg.mp4" width="800" controls></video>

controls显示控件

案例：嵌入 B 站视频

<iframe
  src="//player.bilibili.com/player.html?aid=941207928&bvid=BV13W4y127Ey&cid=807165255&page=46"
  scrolling="no"
  border="0"
  frameborder="no"
  framespacing="0"
  allowfullscreen="true"
>
</iframe>

3.Audio

<audio src="文件路径"></audio> <audio src="文件路径" controls></audio>

HTML <div> 和<span>

无语义,用于布局网页

HTML 可以通过 <div> 和 <span>将元素组合起来。

<div>

（division）分开，分组

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

<span>

（span）内联容器，跨度，跨距

HTML <span> 元素是内联元素，可用作文本的容器

<span>元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE 不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

虽然 html 不区分大小写，但实体字符对大小写敏感。

HTML 实体参考

HTML 表格

HTML 表格标签

<table>
  <tr>
    <td>单元格中的文字</td>
    <td>1</td>
  </tr>
  ...
</table>

<table></table>用于定义一个表格
<tr></tr>用于定义表格中的行
<td>1</td>用于定义表格中的单元格
想要表格居中的话，要在<table>中添加 align="center"

表头单元格标签

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

表格属性

key	value	description
align	left、center、right	规定表格的对齐方式。
border	1 or ""	规定表格的边框，默认为""，表示没有边框。
cellpadding	px	规定单元边沿与内容之间的空白，默认为 1。
cellspacing	px	规定单元格之间的空白，默认为 2。
width	px 或百分比%	规定表格的宽度。

表格结构标签

<thead>标签：表格头部区域

<tbody>标签：表格主体区域

其它：
标签描述
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<tfoot> 定义表格的页脚

标签	描述
`<caption>`	定义表格标题
`<colgroup>`	定义表格列的组
`<col>`	定义用于表格列的属性
`<tfoot>`	定义表格的页脚

合并单元格

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

<table align="center" border="1" cellpadding="2" cellspacing="0">
  <thead>
    <tr>
      <th>Header 1</th>
      <th colspan="3">Header 2</th>
    </tr>
  </thead>
  <tbody align="center">
    <tr>
      <td rowspan="3">单元格</td>
      <td>单元格中的文字</td>
      <td>单元格中的文字</td>
      <td>1</td>
    </tr>
    <tr>
      <td>单元格中的文字</td>
      <td>单元格中的文字</td>
      <td>1</td>
    </tr>
    <tr>
      <td>单元格</td>
      <td>单元格</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

表单

表单的作用：收集用户填入的数据，并将数据提交给服务器

<form action="服务器地址" method="请求方式" enctype="数据格式">
  <!-- 表单项 -->

  <input type="submit" value="提交按钮" />
</form>

method

method 请求方式有

get（默认）提交是，数据跟在 URL 地址之后
post提交时，数据在请求体内

enctype

enctype 在 post 请求时，指定数据格式

application/x-www-form-urlencoded（默认）
multipart/form-data

表单项

表单项提供多种收集数据的方式

有<input>输入<select>下拉<textarea>文本域

有name 属性的表单项数据，才会被发送到服务器

常见表单项

<input>

1.文本框

<input type="text" name="username" />

2.密码框

<input type="password" name="password" maxlength="20" />
<!-- "maxlength"设置输入最大值 -->

3.隐藏框

<input type="hidden" name="id" />

4.日期框

<input type="date" name="birthday" />

5.单选

<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
<!-- "checked"此元素默认被选中 --/>

6.多选

<input type="CheckBox" name="fav" value="1" />
<input type="CheckBox" name="fav" value="2" />
<input type="CheckBox" name="fav" value="3" />

7.文件上传

<input type="file" name="avatar" />

<select>

<select>下拉表单

籍贯<select name="jiguan">
  <option value="0">长沙</option>
  <option value="0">上海</option>
  <option value="0" selected>北京</option>
  <option value="0">杭州</option>
</select>

selected:默认选择项

<label>

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

用于绑定一个表单元素，可以增加用户体验。

<label for="m">男</label>
<input type="radio" name="sex" value="男" id="m" checked />
<label for="f">女</label>
<input type="radio" name="sex" value="女" id="f" />

<textarea>

文本域元素

<form>
  反馈：<br />
  <textarea name="feedback" id="feed" cols="30" rows="10">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet veritatis ipsum quasi, maxime deleniti deserunt ducimus officia nostrum? Alias assumenda dolorum, illum molestias deserunt eaque rem cumque incidunt recusandae quasi?
 </textarea
  >
</form>