HTML笔记

标签：定义标签笔记表单 HTML 文本属性

什么是网站：

网站其实是由一个个的网页构成的
- 网页就是放在服务器上面的一个文件
  - 我们浏览网页的时候这个文件里的所有代码会被下载到我们本地的电脑，然后再由浏览器解析，渲染
而网站就是一个绑定了域名的文件夹，该文件夹中可以包含子文件夹以及各种各样的文件，这些文件都可以通过域名来访问
- 因此当我们在地址栏中输入一个URL时，它其实已经展示了服务器上的目录结构
- 如果我们给顶级目录绑定一个域名如www.bilibili.com，那么用户就可以通过www.bilibili.com来访问文件夹中所有文件
互联网上所有的服务器都是通过IP地址来定位的，域名只是IP地址的一种助记符，帮助用户记住网站的链接以及品牌
- 使用域名访问网站时，浏览器会先找到域名对应的IP地址，然后再通过IP地址请求服务器上的文件
  - 这个过程叫做域名解析，是通过DNS服务器来完成的。

什么是服务器

网站是放在服务器上面运行的，而服务器其实就是一台计算机，他和普通的笔记本、台式本并无区别
不过，服务器一般是没有显示器的键盘，音响等外部设备的，当然也支持这些设备。
因为服务器唯一的用途就是运行网站，并无其他的作用，所以也可以称为二十四小时运行的电脑。

什么是html

HTML是Hyper Text Markup Language的缩写，翻译为"超文本标记语言"，是用来设计网页的。
使用HTML编写的文件称为"HTML"文件，后缀是.html(也可以.htm)
HTML是一种纯文本文件，可以使用Windows记事本，Linux Vim，Notepad++，Sublime Text，VS Code等编辑器来打开或创建。
每个网页都是一个HTML文档，使用浏览器访问一个链接(URL)，本质就是把文件从服务器上下载到电脑里面，然后由浏览器解析HTML这个文档。
HTML并不是编程语言，因为它没有处理逻辑的能力，没有计算的功能，不能动态的生成内容，只能静态的展示网页信息。
保存HTML文件的时候必须把文件保存为.html或者.htm格式才可以在浏览器中打开。

超文本：

即超越文本，表示着HTML不仅可以包含文本(文字)。
- 它与txt文本的区别在于他可以包含：图片，音频，表格，列表，链接，按钮，输入框等内容。
超链接是互联网的纽带，是它将各种网页链接起来，没有超链接就没有互联网。
- 这个东西可以是另外一个网页的地址，也可以当前网页中其他的位置，比如点击回到顶部，还可以是图片，文件，应用程序等
- 链接的两端分别称为源锚点(当前锚点)和目标锚点(其他的网页)，通过点击源锚点就可以跳转到目标锚点。

标记语言

HTML是一种计算机语言，它不仅可以编程，还可以用来标记网页的中的内容，它通过不同的标签来标记不同的内容，格式，布局等
示例：

<img>//该标签表示一张图片
<a>//该标签表示一个链接
<div>//该标签表示块级布局

总结：

HTML是一种专门用来开发网页的计算机语言，它通过标签(标记式指令)将文本，音视频，图片，表格，按钮，输入框等内容显示出来，因此HTML是一种标记语言

html标签

HTML标签由尖括号包围的关键字构成，如：<!DOCTYPE>.
除了少数几个标签是是单个出现，其他的都是成双成对如<p>内容</p>.
成对出现的标签中，第一个标签为开始标签，第二个标签为结束标签(闭合)
语法格式：由开始的标签，属性，内容和结束的标签组成，标签的名字不区分大小写，但大多数属性的值需要区分大小写
- 示例：

<p class="change">此表示可以显示一段文本</p>

注意：
- 所有HTML都有<>如果没有就会被认为是文本
- html中不同标签可以有不同的效果
- 如果使用了某个标签，则必须使用对应的结束标签来结尾(自闭合标签除外，也称为单标签)。

自闭合标签

没有单独的结束标签，而是在开始标签中添加/来进行闭合。
自闭合标签不用包围内容，所以不需要单独的结束标签，只有少部分标签时自闭合标签。

嵌套html标签

一个html标签里面可以包含其他的html标签，我们写的html文档就是由相互嵌套的html标签构成的

html网页基本结构

在VSC中可以使用!（英文的）然后回车就可以生成出一个网页的基本结构

<!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>

可以看到很多的<>包围起来的特殊标记，这就是HTML标签(Tag),浏览器识别这些标签来渲染出代码对应的效果，然后就构成了网页。
html代码要通过浏览器打开

基本标签

<!DOCTYPE html>：

文件声明。声明此文档为html文档。
- 该标签不区分大小写
  <html></html> ：
html网页的根标签，包含整个网页，所有代码都需要写在html中。
`：
网页头部，用来定义一些信息。如标题、编码等
<meta charset="UTF-8">：
说明了网页使用的编码是UTF-8(全球通用编码格式)
<html></html>：
网页的标题，标题会显示在浏览器的标题栏中。
<body></body>：
书写我们可以在网页的所看到的内容的代码

常见单标签

<b>

此标签用来加粗文本。
<hr>
此标签用来设置分隔线。
<br>
此标签用来换行。

注释标签，...中为注释内容
<img>
定义一张图片。
专有属性：src;alt
- src（必选属性）：source的简称，为<img>提供对应的图片路径。可以使用相对路径，也可以使用绝对路径。
- alt（可选属性）：用来描述图像信息，当图像无法正常显示的时候就会显示alt里面的信息

其他常见双标签

<a></a>

定义一个超链接
<a>和</a>之间的内容可以是图片，文本，内容被<a>标签覆盖后只要点击就可以跳到<a>标签href填写的网址处。
默认样式：
- 鼠标样式：鼠标移入链接区域时，变成一只小手；移出链接区域时，变回箭头形状。
- 颜色及下划线:超链接被点击之前为蓝色，超链接被点击之后为紫色。超链接默认带有下划线，下划线颜色和文本颜色保持一致。
专有属性：href;target
- href：提供链接地址(URL)
  - href本质上就是指向一个文件，这个文件可以随便格式，只要是浏览器支持此文件，那么他就可以在浏览器上显示，如果浏览器不支持这个格式，那么就提示用户下载。
  - href可以是绝对路径，也可以是相对路径，绝对路径往往以域名为起点,如：https://www.bilibili.com/,相对路径往往以当前文件或者当前域名为起点，如/.../img/ag.jpg.
  - 示例

 <a href="https://www.bilibili.com/">点击跳转bilibili</a>

target（可选属性）：用来指定在浏览器中打开的方式
- 没有设置target属性的话那么就是浏览器默认的打开方式，如果设置了的话那就是按照对应的方式打开
- 属性值：
  - _self:默认，在点击链接的窗口处打开，原来的窗口被覆盖。
  - _blank:新建一个窗口里面的内容就是点击链接的网页。
  - _parent:在当前框架的上一层打开新的页面。
  - _top:在顶层框架中打开新页面。
  - 示例：

<a target="_blank">此链接到bilibili</a>

<picture></picture>

按照比例来放大或缩小图片的尺寸以适应不同的设备
可以包含<source>标签
通过<soucre>标签的media属性可以==设定匹配条件=
通过srcset属性可以定义图片的路径，另外，在<picture>标签的最后还需要定一个<img>标签
示例

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="C语言中文网默认Logo">
</picture>

浏览器将评估每个<source>标签，并选择最合适的<source>标签，如果没有找到匹配项，则使用<img>标签所定义的图片
另外<img>必须是<picture>标签的最后一个元素

<p></p>

段落标签
定义一个文本，将文档中的内容分割为若干个段落
开始标签和结束标签里面的内容会被视为段落
浏览器内置样式会在段落上下自动添加一定的空白区域(外边距)，可以使用CSS中的margin属性来设置空白区域的大小

段落中的空格/换行：

默认情况下，段落标签会对文本中的空格符进行合并，将多个空格显示为一个空格的效果
- 如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个。
- 如果段落中出现多个连续的行，浏览器会将这些换行转换成一个空格。
在想要在段落标签中换行，需要专门的换行的标签<br>
<ul></ul>
定义列表。
<li></li>
定义列表的每一项。
<input>
定义一个输入框。
<h1/~/6></h1/~/6>
标题标签
<h1>标签的级别最高，<h6>标签的级别最低，通过这些标签可以定义网页的标签
在网页上使用标签时，浏览器内置的样式会在每个标题上下添加一定的空白区域(外边距)，后续可以通过CSS中的margin来设置空白区域的大小。
开始标签和结束标签里面的内容会被视为标题

文本格式化标签

<b></b>

加粗标签中的字体。
<strong></strong>
强调标签中的内容，并将字体加粗。
默认情况下，<strong>和<b>标签都可以使文本以粗体展示其中的文本，但是<strong>标签是说明标签里内容具有很高的重要性，而<b>标签仅仅只是加粗并没有别的含义
<i></i>
定义标签中的字体为斜体。
<em></em>
强调标签中的内容，并使标签中的字体倾斜。
<em>标签具有强调的语义，用来表示内容的重要性，但是<i>标签仅仅只是用来定义斜体文本的。
`
定义标签中的字体为小号字体。
`
定义上下标文本。
<sup></sup>
定义上标文本。
<ins></ins>
定义文档的其余部分之外的插入文本。
<del></del>
在文本内容上添加删除线。
<code></code>
定义一段代码。
<kbd></kbd>
用来表示文本是通过键盘输入的。
<samp></samp>
定义程序的样本。
<var></var>
定义变量。
<pre></pre>
定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体。
<abbr></abbr>
用来表示标签中的内容为缩写形式。
<address></address>
用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行。
<bdo></bdo>
定义标签中的文字方向。
<blockquote></blockquote>
定义一段引用的文本，例如名人名言，文本会以换行输入，并在左右两边进行缩进。
<q></q>
定义一段短引用，浏览器会将引用的内容使用双引号包裹起来。
<cite>...</cite>
表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示。
<dfn></dfn>

html属性

属性就是对一个标签额外的设置
属性需要添加在开始的标签里面，语法格式为:
- class="chang"
  - 其中class为属性名，value是属性的值，属性值必须使用双引号""或者单引号' '包围。但是在大部分时候都是使用双引号。
一个标签可以没有属性，也可有多个属性
通用属性：可以在大部分或者所有的html标签里面使用
专用属性：只能在一个或者几个特定的html标签里面使用

常见通用属性

id

赋予某个标签唯一的名称(标识符)，当我们使用CSS或者JavaScript操作这个标签时，就可以通过id属性来找到这个标签。
- 当使用CSS或者JavaScript操作HTML标签时，如果标签中带有id属性作为唯一标识符，通过id属性可很方便的定位到该标签
- 如果html文档中包含多个同名标签，利用id属性的唯一性，可以很方便的区分他们。
- 示例：

<b id="url">https://www.bilibili.com/</b>
<a href="https://www.bilibili.com/" id="content">bilibili</a>

class

为标签定义名称(标识符)，不同的是class属性在整个html文档中不是唯一的，我可以为多个标签定义相同的class属性值，还可以为一个标签定义多个class属性值（他们之间需要使用空格隔开）
当使用CSS或者JavaScript操作HTML标签时，同样可以使用class属性来找到对应的HTML标签
- 由于class属性并不是唯一的，所以通过CSS或JavaScript对HTML标签的操作会作用于所有具有同名的class属性的标签上。
示例：

<div class="Name1 Name2 Name3"></div>
<p class="cont"></p>
<div class="cont Name1"></div>

title

用来对标签内容进行描述说明，当鼠标移动到该标签上面的时候会显示出title属性的值。
示例：

style

为所有的标签定义CSS的样式，如设置颜色，字体
示例：

<ul>
    <li style="color: aquamarine;">此文本的颜色为青色</li>
    <li>
        <a href="https://www.bilibili.com/" style="color:red;">点击跳转bilibili</a>
    </li>
</ul>

设置宽度和高度：

width;hight;style

默认情况下这些属性都是以像素为单位
width和height只是临时修改图片的尺寸，并不会改变图片原始文件的大小
示例：

<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" 
alt="此图片加载成功了？？" title="此图片加载成功了" 
width="150" height="150">

<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
alt="此图片加载成功了？？" title="此图片加载成功了" 
style="width: 150;height: 150;">

一般建议为图片设置width和height属性，以便浏览器可以在加载图片之前为其分配足够了空间，否则图片加载过程可能会到最后网页布局失真或闪烁
如果页面使用了响应式布局(自适应布局)，建议在上图图片之前裁剪好尺寸，不要设置width和height属性，，这样图片会跟着屏幕的宽度自动改变尺寸，从而不会变形，或者超出屏幕宽度

图片映射

图像映射允许在一个图片中定义超链接，其实就是在图像中划分一些区域，并在这些区域定义超链接

示例

<!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>
    <img src="./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg" usemap="#objects" alt="bilibili">
    <map name="objects">
        <area shape="rect" coords="0,0,82,126" href="https://www.bilibili.com/" alt="首页">
        <area shape="circle" coords="90,58,3" href="https://www.bilibili.com/anime/?spm_id_from=333.1007.0.0" alt="动漫">
        <area shape="circle" coords="124,58,8" href="https://game.bilibili.com/platform/?spm_id_from=666.4.0.0" alt="游戏">
    </map>
</body>
</html>

<map>标签的name属性对应<img>标签的usemap属性，<area>标签用于定义图片可以点击的位置(区域)，不仅如此还可以再一张图片中定义多个可点击区域。
shape和coords属性：
- 在<area>标签中可以通过shape属性来定义可点击区域的形状，并通过coords属性来定义==形状所对应的坐标=
- 其中shape属性的可选值
  - rect(矩形)，circle(圆形)和poly(多边形)
- coords属性中坐标的值取决于可点击区域的形状。

表格、表单与列表

表格标签

<table>

表示表格，表格的所有内容需要写在<table>和</table>之间。
一般情况下，HTML定义的表格是没有边框的，但是我们可以通过设置<table>标签的border属性来设置表格的边框宽度，单位是像素(px).
HTML的<table>标签也支持单元格的合并，跨行合并和跨列合并
- rowspan：表示跨行合并，rowspan表示向下合并单元格。
- colspan：表示跨列合并，colspan表示向右合并单元格。
- 每次合并n个单元格记得要n-1个<td>标签。

<tr>

是table row的简称，表示表格的每一行，表格中有多少个<tr>标签就表示有多少行数据。
<td>
是table datacell的简称，表示表格的单元格，这是存放表格数据的标签，单元格的数据可以是文本，图片，列表，段落，表单，水平线，表格等多种形式。
<th>
是table heading的简称，表示表格的表头。<th>其实是<td>单元格的一种变体，本质上还是一种单元格。
<th>一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。
<caption>
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>
 
    <!-- border这里是设置边框为1像素 -->
    <table border="1" style="border-collapse: collapse;">
        <!-- 整个表格的标题 -->
        <caption>此表格为网页信息表</caption>
        <tr>
            <!-- 第一行 -->
            <th>网站名</th>
            <th>网站地址</th>
            <th>网站作用</th>
        </tr>
 
        <tr>
            <td>bilibili</td>
            <td>https://www.bilibili.com/?from_start_menu</td>
            <td>以视频为主流的网站</td>
        </tr>
 
        <tr>
            <!-- 向下合并一个单元格 -->
            <td rowspan="2">淘宝</td>
            <td>https://www.taobao.com/</td>
            <td>以购物为主流的网站</td>
        </tr>
 
        <tr>
            <!-- 向右合并一个单元格 -->
            <td colspan="2">
                https://uland.taobao.com/sem/tbsearch?refpid=mm_26632360_8858797_29866178&keyword=%E5%A5%B3%E8%A3%85&clk1=2d5e46421962bba06c0498319872fcd7&upsId=2d5e46421962bba06c0498319872fcd7
            </td>
        </tr>
    </table>
 
</body>
 
</html>

表单标签

表单可以接收用户输入的信息，然后将其发送到后端应用程序，如PHP,Java,Python等，后端应用程序将根据定义好的业务逻辑对表单传递进来的数据进行处理。
其中包含了输入框，复选框，单选按钮，提交按钮等不同的表单控件，用户通过修改表单中的元素(如输入文本，选择某个选项等)来完成表单，通过表单中提交按钮将表单数据提交给后端的程序
表单是用来收集用户数据的，但是用户的数据需要填写在表单控件里
<form>
创建表单
示例

<form action="URL" method="GET|POST">
    表单里的元素
</form>

专有属性

属性	可选值	描述
accept（不重要）	MIME_type	HTML5中不再支持，设置服务器接收的文件类型。
accept-charset	character_set	设置表单数据的字符集(默认为HTML文档字符集)。
action	URL	设置要将表单提交到何处(默认为当前页面)。
autocomplete	on，off	设置是否启用表单的自动完成功能(默认打开)。
enctype	application/x-www-form-urlencoded,multipart/form-data,text/plain	设置在提交表单数据之前如何对数据进行编码(适用于method="post"的情况)。
method	get，post	设置使用哪种HTTP方法来提交表单数据(默认为get)。
name	text	设置表单的名称。
novalidate	novalidate	如果使用该数据，则提交表单时不进行验证。
target	_blank,_self,_parent,_top	设置在何处打开action属性设定的链接(默认为_self)

表单控件

控件/标签	描述
`<input>`（单标签）	定义输入框
`<textarea>`	定义文本域(一个可以输入多行文本的控件)
`<label>`	为表单中的各个控件定义标题
`<fieldset>`	定义一组相关的表单元素，并使用边框包裹起来
`<legend>`	定义`<fieldsel>`元素的标题
`<select>`	定义下拉列表
`<optgroup>`	定义选项组
`<option>`	定义下拉列表中的选项
`<button>`	定义一个可以点击的按钮
`<datalist>`	指定一个预先定义的输入控件选项列表
`<keygen>`	定义表单的密钥对生成器字段
`<output>`	定义一个计算结果

表单示例

<!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="./userinfo.php" method="POST">
            <!-- 文本输入框控件 -->
            <label>用户名： </label><input name="username" type="text"><br>
            <!-- 密码框控件 -->
            <label>密&emsp;码： </label><input name="password" type="password"><br>
            <!-- 下拉菜单控件 -->
            <label>性&emsp;别：</label>
            <select name="sex">
                <option value="1">男</option>
                <option value="2">女</option>
                <option value="3">未知</option>
            </select>
            <br>
            <!-- 复选框控件 -->
            <label>爱&emsp;好：</label>
            <input type="checkbox" name="hobby" value="1">听音乐
            <input type="checkbox" name="hobby" value="2">看电影
            <input type="checkbox" name="hobby" value="3">运动
            <br>
            <!-- 单选按钮控件 -->
            <label>学&emsp;历：</label>
            <input type="radio" name="education" value="1">小学
            <input type="radio" name="education" value="2">中学
            <input type="radio" name="education" value="3">本科
            <input type="radio" name="education" value="4">硕士
            <input type="radio" name="education" value="5">博士
            <br>
            <!-- 按钮 -->
            <input type="submit" value="提 交">&emsp;&emsp;
            <input type="reset" value="重 置">
        </form>

    </body>

</html>

列表标签

有序列表

<ol>+<li>标签

<ol>标签是用来表示有序列表，有序列表的每一项前面都会有一个数字表示这一项是这个列表的第几个。其中的<li>表示列表的每一项，前面默认使用阿拉伯数字
一般都是<ol>和<li>一起出现，在有序列表中可以包含图片，文本，链接，另一个列表。

无序列表

<ul>+<li>标签

<ul>无序列表中没有顺序之分，每一项前面使用●表示，一般都是跟<li>标签配合使用的。其中<li>表示列表的每一项，前面使用●符号作为每一项的标记

定义列表

<dl>+<dt>+<dd>标签

<dl>标签是用于创建列表的，定义的列表由标题和描述两部分组成，描述是对标题的解释，标题是最描述的总结和提炼
<dt>是定义标题的
<dd>是定义描述的、
一般情况下，每个<dt>搭配一个<dd>,一个<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>这里存放了一个网页的标题</title>
</head>
 
<body>
    <dl>
        <dt>有序列表示例</dt>
        <dd>
            <ol>
                <li>有序列表第一项</li>
                <li>有序列表第二项</li>
                <li>有序列表第三项</li>
            </ol>
        </dd>
        <dd>
            上面定义了3个有序列表
        </dd>
 
        <dt>无序列表示例</dt>
        <dd>
            <ul>
                <li>无序列表第一个</li>
                <li>第二个</li>
                <li>第三个</li>
            </ul>
        </dd>
        <dd>上面定义了3个无序列表</dd>
 
        <dt>为啥没有定义列表的，因为它本身就是</dt>
    </dl>
</body>
</html>

标签：定义,标签,笔记,表单,HTML,文本,属性
From： https://www.cnblogs.com/mycrictfchuyin/p/18490291