HTML基础学习

buildkay

已于 2022-07-18 19:51:04 修改

阅读量257

点赞数

分类专栏： HTML学习笔记文章标签： html 学习前端

于 2022-06-24 20:05:54 首次发布

本文链接：https://blog.csdn.net/qq_46926371/article/details/125451562

版权

HTML学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

什么是HTML

超文本标记语言

文本标记语言：通过一些标记将文本标识出来的语言。
超：比普通的就多一些东西。
超文本标记语言：Hyper Text Mark-up Language。他通过一些符号将文本、图片、视频等标记出来。标记出来网页的各个部分，HTML是一种标准、是一种规范。

HTML的发展史

是在91年一个叫tim-Lee的写了一份名为HTML的文档，在文档里面他用20多个标记将文字进行标记。这就是传说中的1.0。
最早的HTML的官方规范是由IETF（因特网工程任务组）发布的HTML2.0，实际上不存在HTML1.0
继IETF之后，W3C（万维网联盟），成为了HTMl后续的标准制定者。90年代中期以后，W3C对HTMl进行了几次升级，直到1999年发布的HTMl4.01
HTMl4.01后的修订版为xhtml1.0（x的意思为可扩展的），实际上XHTML1.0规范内容与HTML4.01完全相同，没有添加任何新元素或新属性，这两个规范的唯一的差别是HTML语法作出了不同的规定，HTMl为开发人员提供了很大的自由度，可以按照自己的意愿去编写元素和属性，但XHTML要求开发人员遵从XML规则，XHTML1.0规则要求比较严格，要求所有标签和属性都必须为小写。
之后为了更加规范，W3C发布了xhtml1.1，但是很多浏览器厂商不配合不检查xhtml的规范
W3C开始着手开发XHTML2，但是XHTML2与所有的网页内容都不兼容，甚至于以前版本的HTML也不兼容。
这时有一些人开始反对XHML2.0尤其是来自opera、apple、moailla的代表，它们希望支持以前的版本并开发一些新功能，但是被驳回。
之后他们创建了WHATWG组织，开始开发一些规范，就是HTML5的前身，之后因为XHTML2.0的推进速度不快，人们又不愿意使用。所以W3C开始和WHATWG组织协商接受HTMl5。
2014年10月28日，HTML 5.0，W3C正式发布HTML 5.0推荐标准
html4.01->xhtml1.0->HTML5

HTML结构

告诉浏览器以什么方式来解释这个文档

在HTML4中：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

在HTML5中直接用：<!DOCTYPE html>

必须放在第一行。
不区分大小写。

document type

HTMl文档的最外层要有一组<html>标签。

是唯一的，是网页文件的最外层的标签。

<html>表示html文件的开始。

</html>表示html文件的结束。

html文档中的所有标记都应该在<html></html>中。

在html标签中，要有head和body标签。

1. head标签：头标签，这里面的内容不会显示在浏览器中。这个标签里面的东西用来描述这个网页的相关信息。

2. body标签：主题标签，这里面放置的是网页的真正内容，文字、图片。

对于主体结构来说即使你不写，浏览器解释的时候也会自动给你加上（不会加<!DOCTYPE html>）。

HTML语法

属性

loop="3"这种格式的叫属性。格式：属性名=属性值，用来修饰、控制标签。

属性是可以有多个的。

注意：

属性要写在标签里面。
写属性值的时候可以使用单引号、双引号包裹属性值，甚至不用引号也行。
多个属性是不区分先后的。

HTML中的颜色

颜色的单词：green、red、pink、white、black、yellow、blue
6位的16进制的值。

十进制：0-9

二进制：0-1

八进制：0-7

十六进制：0-9a~f

6位分成3组（每一组就是两位）。分别表示红、绿、蓝的比例。

蓝色+黄色就是绿色。。。。
使用取色器。

HTML对于空格及回车的处理

HTML中一个空格和多个空格都会被当作一个空格来处理。
HTML中一个回车和多个回车都会被当作一个空格来处理。

换行可以用前面所说的<br />标签。空格需要用到实体来表示。

实体

用来表示系统中预留的或打印不出来的字符。就是用一些特殊的字符表示另外一些特殊的字符。

格式：&字母;

空格： 
<，<
>，>
'，'
"，"

标签嵌套问题

我们以后在写HTML标签的时候实际上都在用标签的嵌套。

<MARQUEE loop="3" bgcolor="#C2EA2B">陶哥<br/>真英俊！</MARQUEE>

HTML标签的格式

<标签名 属性1="值1" 属性2="值2".......>要标记的内容</标签名>
<标签名 属性1="值1" 属性2="值2"......./>

HTML的注释符

注释符不会被解释。

我们说明代码意思的时候，调试代码的时候会用到注释符。

上面讲的东西只不过是为了告诉你HTML的语法是什么，并不标准。

注释的快捷键在vscode中是ctrl+/，再按ctrl+/就取消注释了。

在head标签中的内容

<title>标签：

定义在整个HTMl文档中的标题是什么。title标签在整个HTMl文档中只能有一个。

作用：

显示网页的标题，让用户一看就知道网页要表达的意思
当在点击收藏按钮的时，title里面的内容会作为默认的内容存在
搜索引擎也会用到title中的内容。

字符集

任何和乱码相关的东西都是由于存储字符集和显示字符集不同导致的。

字符集，是字符的集合。
编码，规定字符集里面的字应该怎么存。

发展过程：

美国发明了电脑，他们需要控制电脑这个它们发明了一种编码叫单字节编码也就是ASCII码。

只包含英文字母和一些符号。
电脑开始普及了，各个国家的人都要控制电脑。所以大家一商量就开始制定自己的编码。

中国：GB2312和GBK。
GB2312、GBK只能存储自己国家的代码，其他国家的怎么办，所以国际标准化组织推出了UNICODE字符集（这个字符集里面包含了世界上所有国家的文字，也给他叫万国码），在这个UNICODE字符集里面包含了UTF-8、UTF-16编码。

meta标签：定义对页面的描述

更改显示字符集，告诉浏览器这个文档的编码是什么。

<meta charset="字符集编码" />

通过vscode建立的服务器即使不使用meta标签指定显示字符集也不会乱码，因为vscode建立的服务器默认的时候都会显示为utf-8
其他的用法

<meta name="" content="" />

name属性里面的值是规定好的：

keywords，指定网页的关键字。
description，指定网页的描述。

content属性里面的值是根据name属性的值来自定义的：

name的值为keywords的时候

作用：描述网页中的关键字：给搜索引擎用的。

可以设置多个关键字，但是多个关键字之间应该使用逗号（英文的逗号）进行分隔。越重要的关键字越应该放在前面。

name为description的时候

作用：简短的描述网页中的内容，给搜索引擎用的。

他们的功能是不一样的，keywords是设置关键字，description是用来设置描述。

搜索引擎具体怎么抓取。

其他的头标签

<script></script>，用来在里面写一段JavaScript。
<style></style>，用来在里面写一段CSS样式。
<link />，设置外部文件的连接标志，确定本页面和其他文档之间的关系。

body中的内容

段落标签（p），定义一个段落。段落标签会自动创建换行。
h标签，定义文字的标题标题使用h1~h6 h1是最大的标题，h6是最小的标题。

注意：
1. 被h标签标记出来的文本将会自动加粗并且自动换行。
2. h是标题的意思。h1～h6重要程序从h1～h6依次递减。
3. 一般来说我们的h标签只会从h1应用到h3。
<hr />标签，单标签用来定义一条水平线。
语义化标签
1. b标签&strong标签：加粗文本
2. i标签&em标签：斜体文本。
3. u标签&ins标签：文本下划线。
4. s标签&del标签：删除文本。
绝对路径和相对路径路径：当前文件和其他文件的位置关系。路径这种东西不单单在HTML中有，在CSS中、服务器脚本语言中、服务器上。。。
1. 绝对路径：从头（上层没东西了）开始计算文件出现的路径。
2. 相对路径：相对于编码文件现在的位置来计算路径。

HTML标签

常见标签

a链接

链接：网站实际上是可以相互跳转的。你可以通过一些可以点击的东西跳转到其他页面，这种可以点击跳转的东西叫链接。

a标签，链接到指定的文档
href属性：写要跳转的页面，值为一个URL，可以是绝对路径也可以是相对路径。

注意：

目录大小写问题，windows系统下不区分大小写，在Linux中严格区分大小写。
href的值不要写本地的绝对路径（本地绝对路径不会经过网络）。
如果值为绝对路径记着要加上协议名，否则找的是当前目录的值为url的文件。
如果你在写链接的时候暂时不知道要链接到哪里，可以使用#来表示一个空链接。

C:\xampp\htdocs\0410\2\xxx.html以盘符开头的都不会经过网络，包括以file协议开头的也不会经过网络，如果要在网络中正常用需要使用http或https协议。

title属性：鼠标移动上去的时候，给出提示，值是你自己定义的任意的文字。
target属性：点击链接之后在哪里打开链接。
- _self：本窗口打开（默认）
- _blank：新窗口打开。
- 其他的值，后面再说。

**锚点：URL中的片段标识符。**用来请求指定资源的子资源，点击指定链接的时候跳转到指定的位置。

分块 编程中只要涉及到起名称的就不用数字开头。

  <a name="标记名">
    要进行分块的内容
</a>

标记链接

<a href="#标记名">标记值</a>

注意：第一步分块的时候name的值是自己定义的，第二步标记链接的时候#后面的值需要和name的值对应起来。

img标签

图像标签****

src属性：必须的，告诉浏览器你的图在哪里，写URL地址。
alt属性：图片不能正确显示的时候，显示出来的文字
width属性：设定图片的宽度（像素）
height属性：设定图片的高度（像素）

px是像素，px（pixel）的全称是什么，像素是什么：不是自然界中的单位，他是图像中的最小的点，一张图片就是由这些点组成的。

如果同时设置宽度和高度有可能会导致图片比例发生改变，失真。

块级元素和行内元素

块状元素和行内元素直观的区别就在于块状元素自己独占一行，行内元素多个会排列在一行放不下才会换行。

列表

无序列表

没有顺序。

ul标签表示无序列表。

无序列表中要有一个一个的列表项我们使用li标签。

<h2>美女的类型</h2>
<ul>
    <li>聪明睿智</li>
    <li>
        <h3>狐媚妖娆</h3>
        <img src="./img/lipeiqian.jpg" />
        <br/>
        <a href="http://www.baidu.com" target="_blank">点击查看详情!</a>
    </li>
</ul>

注意：

无序列表的直接子元素应该是li。ul -> li。
多个项目，但是项目顺序的调整对列表没有影响的时候使用无序列表。
虽然ul的直接子元素是li，但是li里面可以包含其他内容。

有序列表

使用ol来表示有序列表

ol的直接子标签应该是li

li里面可以包含其他的东西

有序有序、拥有顺序。

<ol>
    <li>哈士奇</li>
    <li>藏獒</li>
    <li>圣伯纳</li>
    <li>边境牧羊犬</li>
    <li>德国牧羊犬</li>
    <li>中华田园犬</li>
</ol>

不要只看列表的样式（有序列表还是无序列表），要注意意思。

自定义列表：由于项目的主题和项目的描述组成。

自定义列表使用dl标签，里面的内容属于自定义列表。

dt用来表示自定义列表的主题。

dd用来表示自定义列表的主题的描述。

<dl>
    <!-- 这个是我定义的主题 -->
    <dt>我喜欢喝什么!</dt>
    <dd>茶</dd>
    <dd>果汁</dd>
</dl>

<dl>
    <dt>我喜欢吃什么？</dt>
    <dd>薯条</dd>
    <dd>炸鸡</dd>
    <dt>我喜欢喝什么？</dt>
    <dd>啤酒</dd>
    <dd>饮料</dd>
    <dd>矿泉水</dd>
</dl>

表格

表格用来展示数据，不用来布局了（在盘古开天地的时候确实有段时间用来布局）。

表格的组成部分：

表格的标题
表格的表头
表格的主体部分
表格的脚注部分

<table>标签：告诉浏览器在table内包含的内容属于表格。

border属性：边框。

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

cellspacing属性：规定单元格和单元格之间的空隙。
<caption>标签：给表格添加标题。
<thead>标签：用来表示一个表格的表头
<tbody>标签：用来表示一个表格的主体部分
<tfoot>标签：用来表示一个表格的脚注部分

每一行我们使用tr来表示

tr也支持align属性：
- left
- right
- center
thead中的tr里面的每个单元格我们一般使用th来表示。
tbody和tfoot中的tr里面的每个单元格我们一般使用td来表示。

td、th属性都支持align的属性：定位内容的水平位置。
- left
- right
- center

可以省略thead、tfoot甚至于tbody，但是浏览器在解释的时候会自动将所有的tr都算作tbody里面的内容。

JSbom、dom以及CSS里面如果你不知道这一点将会导致你选不中标签。

table->(thead\tbody\tfoot)->tr->td/th

table->tbody->tr->td/th

td的两个属性（colspan和rowspan不是用来合并单元格的）

colspan，单元格可以横跨的列数
rowspan，单元格可以竖跨的行数。

内框架

<iframe>标签，创建一个包含另外一个文档的框架。

src属性：载入框架的时候要载入的文档地址。
width属性：规定iframe的宽度
height属性：规定iframe的高度
frameborder属性：规定是否显示边框，1为显示，0为不显示。
name属性：给这个iframe起一个名字。可以配合着a标签的target属性来使用让其在对应的iframe里面打开链接地址。

如果要在顶层窗口打开，那么可以使用a标签的target的_top这个值。

表单

用来向服务器提交（传）数据的。

****告诉浏览器这个双标签中包含的内容是表单的内容。

method属性：
action属性：

input标签：定义输入框

type属性：定义输入框的类型（根据type的值来配合使用其他的属性）

text值：表示一个文本框，让用户输入的。
- name属性：该文本框传递到服务器上的标识是什么。
- value属性：用来定义文本框的默认值。
- maxlength属性：表示允许你输入的最大的字符数。
- disabled属性：表示禁用此输入框。直接就是一个值disabled
- readonly属性：表示这个输入框只读。直接就是一个值readonly
  
  disbaled和readonly都可以用来不让用户输入，他们的区别在于disbaled之后该输入框不会像服务器传值，readonly的输入框依然会像服务器传值。
password值：表示一个密码框。
- name属性：该文本框传递到服务器上的表示。
- value属性：用来定义密码框的默认值。
虽然password输入的时候看着好像是加密了，但是实际上并没有加密还是明文传输。
radio值，单选框，只能选择一个。
- name属性：
  - 第一个作用：必须将多个单选项分成一个组否则不会出现单选效果。
  - 第二个作用：传递到服务器上的标识。
- value属性：默认不指定value属性的时候选中提交时候值是on，如果要定义其他的值就需要可使用value属性。
- checked属性：默认选中该单选按钮。
checkbox值，多选框。可以选择多个。
- name属性：传递到服务器上的标识。
- value属性：选中后传递到服务器上的值。
file值：上传框
- name属性：传递到服务器上的标识。
- multiple属性：使用它之后按照ctrl键可以一次选择多个文件上传。
submi值：提交按钮。
- value属性：表示按钮要显示的值。
image值：使用图片代替submit按钮。

使用image作为提交按钮的时候，点击提交会多一个x=267&y=402，指的是点击图片提交的时候光标所在的位置。
- width属性：指定图片按钮的宽度。
- height属性：指定图片按钮的高度。
reset，重置，重置表单内容。
label标签：用来为表单元素定义标注。

for属性和input标签的id属性进行绑定，他们的值需要设置成一样的。就完成了绑定。
```
<label for="douxing">男：</label><input type="radio" name="sex"
 value="1"  id="douxing"/>
```