javaEE -11（13000字 HTML4 入门级教程）

一：HTML 基础知识

1.1 C/S架构与B/S架构

C/S架构是指客户端和服务器之间通过网络通信进行交互的架构模式，而B/S架构是指通过浏览器与服务器进行交互的架构模式。

C/S架构，特点：需要安装、偶尔更新、不跨平台、开发更具针对性。
B/S架构，特点：无需安装、无需更新、可跨平台、开发更具通用性。

C => client（客户端）、B => browser（浏览器）、S => server（服务器）。

1.2 浏览器相关知识

浏览器是网页运行的平台，常见的浏览器有：谷歌(Chrome) 、 Safari 、 IE 、火狐(Firefox) 、欧朋(Opera) 等，以上这些是常用的五大浏览器。

在这里插入图片描述

1.3 网页相关概念

网址：我们在浏览器中输入的地址。
网页：浏览器所呈现的每一个页面。
网站：多个网页构成了一个网站。

1.4 相关国际组织（了解）

IETF

全称：国际互联网工程任务组，是一个权威的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。官网：https://www.ietf.org

全称：万维网联盟，是目前Web技术领域，最具影响力的技术标准机构，对互联网技术的发展和应用起到了基础性和根本性的支撑作用，官网：https://www.w3.org

WHATWF

全称：网页超文本应用技术工作小组，是一个以推动网络 HTML 5 标准为目的而成立的组织。官网：https://whatwg.org/

1.5 开发者文档

W3C官网： www.w3c.org
W3School： www.w3school.com.cn
MDN： developer.mozilla.org —— 平时用的最多。

1.6 常见图片格式

第一种： jpg 格式：

概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。
主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。—— 该格式网页中很常见。

第二种：png 格式：

概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如：公司logo图、重要配图等。

第三种：bmp 格式：

概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使用）

第四种： gif 格式：

概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。

第五种： webp 格式：

概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。

第六种： base64 格式：

本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
原理：把图片进行 base64 编码，形成一串文本。
如何生成：靠一些工具或网站。
如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。

二： HTML

全称：HyperText Markup Language（超文本标记语言）。

超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。
标记：文本要变成超文本，就需要用到各种标记符号。
语言：每一个标记的写法、读音、使用规则，组成了一个标记语言。

HTML 代码是由 “标签” 构成的，例如：

<body>hello</body>

标签名要放到 < > 中
大部分标签成对出现. < body > 为开始标签, < /body > 为结束标签.
而少数标签只有开始标签, 称为 “单标签”.
开始标签和结束标签之间, 写的是标签的内容. (hello)。双标签的内容要写到开始标签和结束标签的中间
HTML不区分大小写，但在实际书写中，一般都采用小写

2.1 HTML 代码基本结构

<html>
  <head>
    <title>第一个页面</title>
  </head>
  <body>
   hello world
  </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性，head 标签中的内容不会出现在网页中。
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

2.2 标签层次结构

层次结构有两种：

父子关系
兄弟关系

<html>
  <head>
    <title>第一个页面</title>
  </head>
  <body>
   hello world
  </body>
</html>

其中:

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签. head 是 title 的父标签.
head 和 body 之间是兄弟关系.

2.3 快速生成代码框架

在 VScode 中创建文件 xxx.html , 然后在文件中直接输入 ! , 再按 tab 键, 此时能自动生成代码的主体框架.（切记要在英文符号的前提下），代码如下：

<!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>
 
</body>
</html>

< !DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文档。文档声明，必须在网页的第一行，且在 html 标签的外侧。
< html lang=“en”> 其中 lang 属性表示当前页面是一个 “英语页面”.，有些浏览器会根据此处的声明提示是否进行自动翻译
< meta charset=“UTF-8”> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.

常见的编码方式有：

ASCII ：大写字母、小写字母、数字、一些符号，共计128个。
GBK ：收录了的汉字和符号达到 20000+ ，支持繁体中文。
UTF-8 ：包含世界上所有语言的：所有文字与符号。—— 很常用。

2.3.1 基本代码框架解释

< meta name="viewport" content="width=device-width, initial-scale=1.0">

这行代码用于在网页上指定视口（viewport）的配置信息。视口是指用户在网页上实际可见的区域。

其中，width=device-width 表示视口的宽度应与设备的宽度保持一致。initial-scale=1.0 表示初始缩放级别为1.0，即不进行缩放。

所以说这行代码的作用是告诉浏览器自动调整网页的宽度和缩放级别以适应不同的设备屏幕大小和分辨率。使得用户无论是在桌面电脑、平板还是手机等设备上都能够获得良好的浏览体验。

2.4 HTML 设置语言

第一种写法（语言-国家/地区），例如：

zh-CN ：中文-中国大陆（简体中文）
zh-TW ：中文-中国台湾（繁体中文）
zh ：中文
en-US ：英语-美国
en-GB ：英语-英国

第二种写法（语言—具体种类）已不推荐使用，例如：

zh-Hans ：中文—简体
zh-Hant ：中文—繁体

2.5 块级元素与行内元素

块级元素：独占一行。
行内元素：不独占一行。

使用原则：

块级元素中能写行内元素和块级元素（简单记：块级元素中几乎什么都能写）。
行内元素中能写行内元素，但不能写块级元素。

三： HTML 常见标签

3.1 分割线

标签 hr 是水平分割线，可以将Html页面中的内容水平分隔：

<!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>
  水平分隔符前的位置
  <hr/>
  水平分割线后的位置
</body>
</html>

在这里插入图片描述

3.2 注释标签

注释不会显示在界面上. 目的是提高代码的可读性，注释以<!- - 开始，以- ->结尾

<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释.

3.3标题标签: h1-h6

h是head的缩写，代表头部，标题的意思，这个标签有六个, 从 h1 - h6. 数字越大, 则字体越小.

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

在这里插入图片描述
注意：标题标签独占一行

3.4 段落标签: p

在html中用 p 标签表示一个段落，如果你直接把文本粘贴到 html 中, 会发现并没有分成段落.

注意：

p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
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>Document</title>
</head>
<body>
  <p>
    第一个段落
  </p>
  <p>
    第二个段落
  </p>
 
  换行前的位置
  <br/>
  换行后的位置
</body>
</html>

在这里插入图片描述

< p >标签之间的空隙通常表示段落之间的间距。这个空隙是浏览器默认的样式效果，如果你不希望出现这个默认的间距，可以通过修改CSS来移除或者修改段落的外边距。

3.5换行标签: br

br 是 break 的缩写. 表示换行.

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
< br/ > 是规范写法. 不建议写成 < br >

3.6 格式化标签

标签	作用
`<b></b>`	让文本加粗
`<i></i>`	让文本倾斜
`<s></s>`	让文本中间有删除线
`<ins></ins>`	让文本有下划线
`<sup></sup>`	让文本上浮
`<sub></sub>`	让文本下沉
`<small></small>`	让文本字体小一号
`<big></big>`	让文本字体大一号

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML标签演示</title>
</head>
<body>
    <p><b>加粗文本</b></p>
    <p><i>倾斜文本</i></p>
    <p><s>删除线文本</s></p>
    <p><ins>下划线文本</ins></p>
    <p><sup>上浮文本</sup></p>
    <p><sub>下沉文本</sub></p>
    <p><small>小号字体文本</small></p>
    <p><big>大号字体文本</big></p>
</body>
</html>

在这里插入图片描述

使用 CSS 也可以完成类似的效果. 实际开发中以 CSS 方式为主.

3.7 图片标签: img

img 标签必须带有 src 属性. 表示图片的路径，除src属性之外的属性都可以省略，属性与属性之间用空格隔开

< img src="img.jpg" alt="图片消失" title="神秘图片"width="200px" height="300px;" />

是一个单标签， src属性用于指定图像文件的路径，这个路径可以是图片的相对路径或绝对路径。

img 标签的其他属性：

属性	描述
alt	替换文本。当图片无法正确显示时，会显示替换的文字。
title	提示文本。将鼠标悬停在图片上时，会显示提示。
width	控制图片的宽度。一般只需设置宽度和高度的其中一个，另一个会等比例缩放。不建议同时给定宽度和高度，否则图片可能会失衡。
height	控制图片的高度。一般只需设置宽度和高度的其中一个，另一个会等比例缩放。不建议同时给定宽度和高度，否则图片可能会失衡。
border	边框宽度，单位为像素。一般使用 CSS 来设置边框样式。

注意：

属性之间用空格分割, 可以是多个空格, 也可以是换行.
属性之间不分先后顺序

3.7.1 绝对路径和相对路径

相对路径和绝对路径是在HTML中引用外部资源时使用的两种不同的路径表示方法。

相对路径：

相对路径是以当前HTML文件所在所在的目录为基准，从当前位置出发来定位其他资源的路径。相对路径有以下几种形式：

符号	含义	举例
./	同级	`<img src="./怪兽.jpg">`
/	下一级	`<img src="./a/喜羊羊.jpg">`
…/	上一级	`<img src="../奥特曼.jpg">`

在这里插入图片描述

我们还可以用 / 代表根目录，比如说 /img.jpg 就代表当前位置的根目录有个名为img，格式为jpg的文件

如果要引用与当前HTML文件位于同一级目录下的资源，可以直接写文件名即可

绝对路径：

绝对路径是一个完整的磁盘路径或网络路径，用于直接指定外部资源的位置。绝对路径可以是以下两种形式：

磁盘路径：如果资源位于本地磁盘上，可以使用完整的磁盘路径来引用资源，例如D:\image.jpg。
网络路径：如果资源位于网络上，可以使用完整的网络路径来引用资源，例如https://example.com/image.jpg。

使用绝对路径的时候，最好使用 / 而不要使用 \，因为在某些编程语言中，反斜杠被用作转义字符，因此在字符串中使用反斜杠需要进行转义。

3.8 超链接标签: a

标签a（anchor）本身是锚的意思，我们可以为 < a >和 < /a > 中的内容添加锚点

href:是 a 标签必须具备属性, 表示点击后会跳转到哪个页面.

<a href="http://www.baidu.com">百度</a>

除了href外，a标签还有一个重要的属性target，当target取的值不同的时候有不同的含义：

属性值	含义
blank	在新窗口打开链接地址
_self	在当前窗口打开链接地址

注意：虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！

3.8.1 链接的几种形式:

外部链接: href 引用其他网站的地址

<a href="http://www.baidu.com">百度</a>

内部链接: 网站内部页面之间的链接. 写相对路径即可.

<!-- 1.html -->
<a href="2.html">点我跳转到 2.html</a>

<!-- 2.html -->
<a href="1.html">点我跳转到 1.html</a>

空链接: 使用 # 在 href 中占位.

<a href="#">空链接</a>

下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

<a href="test.zip">下载文件</a>

锚点链接: 可以快速定位到页面中的某个位置.

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
 第一集剧情 <br>
 第一集剧情 <br>
 ...
</p>
<p id="two">
 第二集剧情 <br>
 第二集剧情 <br>
...
</p>
<p id="three">
 第三集剧情 <br>
 第三集剧情 <br>
...
</p>

href="#three"

这个代码的意思其实就是说跳转到 id 为 three 的地方去

如果想要禁止 a 标签跳转的话可以这样写：

<a href="javascript:void(0);"> <!-- 写法一 -->
<a href="javascript:;"> <!-- 写法二 -->

这两种写法都可以。

3.9 表格标签

table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚

在这里插入图片描述

tr ：每一行
th 、 td ：每一个单元格（表格头部中用 th ，表格主体、表格脚注中用： td ）

th 一般被称为表头单元格，而 td 被称为标准单元格

在这里插入图片描述

<!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>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>男</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>28</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

运行后的结果如图所示：
在这里插入图片描述

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置，这些属性都要放到 table 标签中.

属性	属性值	作用
align	center、left、right	表格在当前网页的对齐方式，默认为left (不是内部元素的对齐方式)
bgcolor	colorname、#xxxxxx、rgb(x,x,x)	表格的背景颜色，可以使用英文单词、十六进制值和RGB参数值
border	像素	表格边框的大小（1 表示有边框(数字越大, 边框越粗), “” 表示没边框.）
cellpadding	像素	表格边框和单元格之间的距离（默认 1 像素）
cellspacing	像素	表格单元格之间的距离（默认为 2 像素）
width	像素或百分比	表格的宽度
height	像素或百分比	表格的高度

对于 tr 这个行标签，也有属性：

属性	属性值	作用
align	center, left, right, justify, char	表格行中的内容对齐方式，默认值为 left
bgcolor	colorname, #xxxxxx, rgb(x,x,x)	表格行的背景颜色，可以用英文单词、十六进制值和 RGB参数值
valign	top, middle, bottom, baseline	表格行中的内容垂直对齐

<!DOCTYPE html>
<html>
<head>
  <title>HTML Table Example</title>
</head>
<body>
  <table border="1px" width = "200px" height = "100px">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
      </tr>
      <tr>
        <td>Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Foot 1</td>
        <td>Foot 2</td>
        <td>Foot 3</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

在这里插入图片描述

可以看见，thead中的内容会居中加粗，而tbody中的内容高度会较大，最后是tfoot部分

注意：

元素的 border 属性只能控制表格最外侧边框的宽度，并不控制单元格边框的宽度。

3.10 合并单元格

跨行合并: rowspan=“n”
跨列合并: colspan=“n”

<!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>
    <table border="1">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
      </tr>
      <tr>
        <td rowspan="2">张三</td>
        <td>25</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>30</td>
        <td>上海</td>
      </tr>
      <tr>
        <td colspan="2">李四</td>
        <td>广州</td>
      </tr>
    </table>
  </body>
</html>

运行结果如下：
在这里插入图片描述

rowspan=“n”：n表示所跨越的行数。

在示例中，我们使用rowspan="2"将张三的姓名单元格跨越了两行。

colspan=“n”：n表示所跨越的列数。

在示例中，我们使用colspan="2"将李四的姓名单元格跨越了两列。

3.11 列表标签

列表标签有三种：

无序列表 ul li
有序列表 ol li
自定义列表[重要] 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>
    <h3>无序列表</h3>
<ul>
  <li>咬人猫</li>
  <li>兔总裁</li>
  <li>阿叶君</li>
</ul>
<h3>有序列表</h3>
<ol>
  <li>咬人猫</li>
  <li>兔总裁</li>
  <li>阿叶君</li>
</ol>
<h3>自定义列表</h3>
<dl>
        <dt>HTML</dt>
        <dd>超文本标记语言，用于创建网页结构和内容。</dd>
        
        <dt>CSS</dt>
        <dd>层叠样式表，用于设置网页的外观和样式。</dd>
        
        <dt>JavaScript</dt>
        <dd>一种用于在网页上添加交互和动态效果的编程语言。</dd>
</dl>
  </body>
</html>

运行结果如下：
在这里插入图片描述

注意：

元素之间是并列关系
ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd
li dt dd中可以放任意内容，比如文本或其他标签
列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)

3.12 表单标签

表单是让用户输入信息的重要途径.，用于用户和服务器进行数据的交换

表单分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签.

3.12.1 form 标签

<form action="test.html">
<!-- form 的内容 -->
</form>

action 中的属性即数据提交到哪去（在这里是 test.html）。form标签的内容即数据的组织格式，所以说 form 标签描述了要把数据按照什么方式, 提交到哪个页面中.

form 标签的重要属性：

属性	属性值	作用
action	网址	把用户传入的信息提交到目的网址
method	post、get	以何种方式发送信息
name	名字	当前表单的名称

3.12.2 input 标签

input的属性有很多，下面是对input属性的具体说明：

属性	属性值	作用
type	见下表	表单标签的类型
checked disabled	checked	选择当前表单
disabled	不需要属性值	禁用当前表单
name	自己选	当前表单的名字

input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性

type取值所对应的类型：

属性值	类型及作用
button	单击按钮，实现单击功能
checkbox	复选框，可以选择多个复选框
password	密码框，在密码框中输入内容会被密码化
radio	单选按钮，相对复选框只能选择一个
submit	提交按钮，单击后会将数据发送到服务器
text	文本框，用户可以输入文本信息

文本框

<input type="text">

常用属性如下：

属性	解释
name	数据的名称
value	输入框的默认输入值
maxlength	输入框最大可输入长度

密码框

<input type="password">

常用属性如下：

属性	解释
name	数据的名称
value	输入框的默认输入值（一般不用，无意义）
maxlength	输入框最大可输入长度

单选框

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

常用属性如下：

名称	描述
name	数据的名称。注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value	提交的数据值。
checked	让该单选按钮默认选中。

单选框之间必须具有相同的name属性，是因为当为多个单选框指定相同的name属性时，它们将成为一个单选按钮组，我们只能选择单选按钮组的一个选项。

复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏

常用属性如下：：

属性名	描述
name	数据的名称
value	提交的数据值
checked	让复选框默认选中

普通按钮

<input type="button" value="我是个按钮">

当前点击了没有反应. 需要搭配 JS 使用

提交按钮

<form action="test.html">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

当用户填写完表单，并点击提交按钮时，浏览器会将表单数据发送到 test.html 文件中进行处理。

清空按钮

<form action="test.html">
  <input type="text" name="username">
  <input type="submit" value="提交">
  <input type="reset" value="清空">
</form>

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.

注意：

button 不要指定 name 属性
input 标签编写的按钮，使用 value 属性指定按钮中的文字。

3.13 label 标签

当我们需要在HTML中创建可点击的文本标签，并将其与某个表单元素相关联时，可以使用<label>标签。

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

以下是一个示例的HTML代码：

<form>
  <p>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
  </p>
  <p>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
  </p>
  <p>
    <label for="remember">
      <input type="checkbox" id="remember" name="remember">记住我
    </label>
  </p>
  <p>
    <input type="submit" value="登录">
  </p>
</form>

在这里插入图片描述

当我们点击用户名这个标签的时候，能够让鼠标聚焦（选中）绑定的标签：

在这里插入图片描述

3.14 select 标签

select是下拉菜单：

option 中定义 selected=“selected” 表示默认选中.select中必须有至少一个标签，不然就没有内容可选了

<select>
  <option>北京</option>
  <option selected="selected">上海</option>
</select>

在这里插入图片描述

注意! 可以给的第一个选项, 作为默认选项

<select>
  <option>--请选择年份--</option>
  <option>1991</option>
  <option>1992</option>
  <option>1993</option>
  <option>1994</option>
  <option>1995</option>
</select>

在这里插入图片描述

3.15 textarea 标签

在HTML中，<textarea>标签可用于创建一个多行文本输入框。可以通过rows和cols属性来指定显示的行数和列数。示例代码如下：

<textarea rows="3" cols="50">
 
</textarea>

在这段代码中，<textarea>标签的rows属性设置为3，表示显示3行文本框；cols属性设置为50，表示显示50列文本框。

注意：文本域中的内容, 就是默认内容, 而且空格也会有影响，

3.16 无语义标签: div & span

div和span就是两个盒子. 用于网页布局

div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子.

<!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>
  <div>
      <span>咬人猫</span>
      <span>咬人猫</span>
      <span>咬人猫</span>
    </div>
    <div>
      <span>兔总裁</span>
      <span>兔总裁</span>
      <span>兔总裁</span>
    </div>
    <div>
      <span>阿叶君</span>
      <span>阿叶君</span>
      <span>阿叶君</span>
    </div>
</body>
</html>

在这里插入图片描述

四： Emmet 快捷键

快速输入标签

input[tab]，相当于这个：

<input type="text" tab="">

快速输入多个标签

div*3[tab]，相当于这个：

<div tab=""></div>
<div tab=""></div>
<div tab=""></div>

标签带id

div#sex[tab]，相当于这个：

<div id="sex" tab=""></div>

标签带类名

div.sex[tab]，相当于这个：

 <div class="sex" tab=""></div>

标签带子元素

ul>1i*3[tab]，相当于这个：

<ul>
    <1i tab=""></1i>
    <1i tab=""></1i>
    <1i tab=""></1i>
</ul>

标签带兄弟元素

span+span，相当于这个：

<span></span><span></span>

标签带内容

div{hel1o}，相当于这个：

<div>hel1o]</div>

标签带内容(带编号)

div{$.he1lo}，相当于这个：

<div>1.he1lo</div>

除此之外还有很多,大家可以在使用中自己积累.

4.1HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的, 例如:

特殊字符	书写格式	作用
空格	` `	显示一个空白效果
小于号	`<`	`<`
大于号	`>`	`>`
注册符号	`®`	®
版权符号	`©`	©
商标符号	`™`	TM

4.2 常用标签补充

标签名	标签含义	单/双标签
pre	按原文显示（一般用于在页面中嵌入大段代码）	双

特殊字符	书写格式	作用
空格	` `	显示一个空白效果
小于号	`<`	`<`
大于号	`>`	`>`
注册符号	`®`	®
版权符号	`©`	©
商标符号	`™`	TM

特殊字符	书写格式	作用
空格	` `	显示一个空白效果
小于号	`<`	`<`
大于号	`>`	`>`
注册符号	`®`	®
版权符号	`©`	©
商标符号	`™`	TM

javaEE -11（13000字 HTML4 入门级教程）

一：HTML 基础知识

1.1 C/S架构与B/S架构

1.2 浏览器相关知识

1.3 网页相关概念

1.4 相关国际组织（了解 ）

1.5 开发者文档

1.6 常见图片格式

二： HTML

2.1 HTML 代码基本结构

2.2 标签层次结构

2.3 快速生成代码框架

2.3.1 基本代码框架解释

2.4 HTML 设置语言

2.5 块级元素 与 行内元素

三： HTML 常见标签

3.1 分割线

3.2 注释标签

3.3标题标签: h1-h6

3.4 段落标签: p

3.5换行标签: br

3.6 格式化标签

3.7 图片标签: img

3.7.1 绝对路径和相对路径

3.8 超链接标签: a

3.8.1 链接的几种形式:

3.9 表格标签

3.10 合并单元格

3.11 列表标签

3.12 表单标签

3.12.1 form 标签

3.12.2 input 标签

3.13 label 标签

3.14 select 标签

3.15 textarea 标签

3.16 无语义标签: div & span

四： Emmet 快捷键

4.1HTML 特殊字符

4.2 常用标签补充

1.4 相关国际组织（了解）

2.5 块级元素与行内元素

特殊字符	书写格式	作用
空格	` `	显示一个空白效果
小于号	`<`	`<`
大于号	`>`	`>`
注册符号	`®`	®
版权符号	`©`	©
商标符号	`™`	TM