HTML基础

看李南江老师视频学习记录。

了解什么是浏览器和服务器。

了解浏览器访问网页的原理和请求数据的过程。

了解什么是URL，HTTP协议等内容。

HTML是超文本标记语言。

描述文本语义的，告诉浏览器哪些是标题，哪些是段落，用于描述文本语义的文本，称为标签，并且在浏览器中不会显示，我们称这些文本为“超文本”。

利用标签描述一段文本之后，在浏览器中显示会被放大或加粗，但是要记住它是添加语义的，而不是修改样式的。

1993年IETF发布1.0——1995年W3C发布2.0——2000年W3C发布XHTML——2004年TWG发布HTML5——W3C放弃XHTML。

​ HTML基本结构所有的标签都是成对出现的，分为开始标签和结束标签。其他所有的标签都写在html标签中。

作用

给网站添加一些配置信息。

比如网站的标题，图片，关键字，SFO相关的，外挂一些css/js文件。

注意点：写在head内的内容都不会显示给用户查看。

专门用于指定网站的标题，作为用户保存网页的默认标题。

必须写在head标签内。

定义html文档中给用户查看的内容。

注意点：一对HTML标签中只能一对body标签。

，指定当前网页的字符集，解决网页没有指定字符集出现的乱码问题。

字符集，就是字符的集合，就像活字印刷术。

GBK（gbk2312）存储的字符比较少，存储了汉字和常用的外文。体积较小。

UTF-8存储了所有的字符。体积较大。

注意点：仅仅指定字符集不一定解决乱码，还要文件的保存编码与指定字符一致。

单标签

​ 只有开始标签，没有结束标签，如meta标签。

双标签

​ 由<>和</>组成。

并列关系（兄弟/平级）

嵌套关系（父子/上下)

​ DTD声明在网页第一行，告诉浏览器我们用的哪一个版本的HTML，能够正确的渲染/解析网页。

​ 每一个版本的声明都不一样。

​ DTD声明不是一个标签。不写也能正常运行。按规定写。

记事本：提示功能差；

editpus/nodepad：提示功能差。

Dreamwaver：偏向设计。

Sublime：轻量级，自带功能不全，插件丰富。

Webstorm：重量级，自带功能全面。

W3C网址：www.w3school.com.cn

给文本添加标题语义。

——H标签包裹的内容会独占一行；

——H标签最多6个，H1最大，H6最小。

——H标签要慎用，H1标签一个界面只能一个，和SFO有关。

段落标记

在浏览器中会独占一行。

在浏览器中显示一条分割线

在浏览中独占一行。

换行

——可以连续使用，一个br标签换一行。

——br标签的语义是补灵气一个段落换行，企业开发使用很少。

告诉浏览器显示一张图片

src是图片需要显示的图片名称。

——img标签不会独占一行。

——未指定宽高或按照默认的显示。。

——手动指定了宽高，可能会导致图片变形；只指定宽高一个值，会自动计算另一个值，保持等比。

——width：宽度

——height：高度

——title：当鼠标悬停到图片，显示什么内容。

——alt：应为alternate的缩写，显示的图片找不到时，显示什么内容。

src赋值有两种方式。

概念

从文件所在的文件夹开始查看。

方法

——同级

​ 图片和html文件存储在同一个文件夹

​ 格式

——下级

​ 存储图片的文件夹和html文件在同一个文件夹。

——上级

​ 图片和htnl文件夹在同一个文件夹。

每次都从指定的盘符查找。

格式

注意

路径不要出现中文，不能夸盘符，开发中基本不用。

用于控制页面与页面之间跳转。

——a标签可以让文字、图片点击。

——a标签必须有href属性，否则抓瞎了。

——Href属性是完整的URL地址或路径。

——可以跳转到网络地址，也可以跳转到本地html文件。

——Target：控制如何跳转，有两个属性。

​ _self：用于在当前选项卡中跳转，不新建界面跳转。

​ _blank：用于在新的选项卡跳转。

——title：鼠标悬停提示文本。

专门用来统一指定当前网页中所有的超链接（a标签）如何打开。

——必须写在head标签内。

——如果base和a都指定了，浏览器会按照a指定的执行。

点击之后不会跳转的链接，存在的意义，就是其他界面还未写出时，不知道跳转何处，用来代替。

分为两种

—— #：会自动回到网页的顶部。

—— javascript：不会自动回到网页的顶部。

​ 就像目录，点击跳转到页面的指定位置。

​ 要想通过a标签跳转的页面指定位置，必须给a标签添加一个id属性，id属性是跳转到指定地方的id。

——通过a标签跳转到当面页面指定位置，没有过度动画，一下子跳转到。

——a标签除了 可以跳转到当前指定位置，还可以跳转到其他界面的指定位置。就是在href属性“#”前面加上网页地址。

是给一堆数据添加列表语义，是一个整体。

有序列表（ordered list），有前后之分，用的最少。

无序列表（unordered list），用的最多。

定义列表（defintion list），其次。

是给一堆数据添加列表语义，并且无先后之分。

​ ul：unordered list的缩写。

​ li：list item的缩写。

​ 其他标签添加在li标签内，也可以在嵌套ul标签，表示多级列表形式。

——新闻列表

——商品列表

——导航条

​ dt：definition title的缩写，用来定义列表中的标题。

​ dd：definition description的缩写，用来定义列表对应的描述。

——网站尾部的相关信息。

——图文混排。

——成对出现，组合标签。

——一个dt可以没有对应的dd，也可以对应多个dd，推荐对应一个。

——在dt和dd里添加其他标签。

是一个时代的代表，以前经常用！

​ 给一堆信息添加表格语义，当数据量非常大的时候，是最为清晰的展现形式。

​ table：代表整个表格。

​ tr：代表整个表格中的一行数据。

​ td：代表表格中一行中的一个单元格。

——表格标签有一个边框属性，决定了边框的宽度，默认是0，看不到；

——是一个组合标签。

以下内容作为了解，开发中用CSS修改样式。

——宽度和高度：width/height

​ 给table标签和td标签使用。

​ 默认是按照内容的尺寸来调整的，也可以通过给table标签设置width/height属性手动指定。

​ 如果给td标签设置宽高，会修改当前单元格的宽高，不会影响整个表格的宽高。

——水平对齐：align

​ 水平对齐给table标签、tr标签、td标签都可以使用。

​ 给table设置align属性，控制表格在水平方向的对齐方式。

​ 给tr标签设置align属性，控制当前行所有单元格的对齐方式。

​ 给td标签设置align属性，控制当前单元格内容中的对齐方式。

——垂直对齐：valign

​ 垂直对齐只能给tr和td使用。

——外边距：cellspacing

​ 只能给table标签使用

​ 外边距就是单元格和单元格之间的距离。

​ 默认情况下外边距是：2px。

——内边距：cellpadding

​ 单元格的边框和文字之间的间隙。

——细线表格

​ 通过指定外边距为0是不靠谱的，是2条线合并为一条线。

​ 设置方式：给table设置bgcolor属性颜色，给tr标签设置bgcolor属性颜色，给table设置外边距等于1px。

——表格标题

​ caption标签 ，必须放到table标签，自动居中。

——列标题

​ th标签。表示为列标题，自动加粗。

——页尾信息

​ tfoot标签。

表格的标题

表格的表头

表格的主题

表格的页尾

——如果没有编写tbody，浏览器会自动添加。

——thead与tfoot，高度不会随着表格高度变化，手动指定也不会变化。

水平方向上的单元格合并

​ 方法：td添加colspan属性。向后合并——把某一个单元格当做多个单元格看待。需要注意的是，后面会多出一些单元格，需要手动删掉多出的单元格。

垂直方向上的单元格合并

​ 方法：td添加rowspan属性。

收集用户信息

表单元素

在HTML中，标签/标记/元素都是指标签，有自己的默认功能。

​ 属性值的不同，决定input各项功能和外观。

​ type属性值介绍

——明文输入属性：text

——暗文输入属性：password

——默认值属性：value

——单选框属性

​ 默认情况下是不互斥的，要想互斥，必须设置一个name属性，name属性的值要相同，值随便写。

​ 要想设置默认选择某一个，添加checked属性。

——多选框属性

​ 要想设置默认选择某几个，添加checked属性。

——按钮属性

定义一个普通按钮

​ 作用：配合js完成一些操作。onclick会有弹窗

定义一个图片按钮

定义一个重置按钮

​ 作用：清空表单中的数据，有默认的标题。通过value修改。

提交按钮

​ 作用：将表单中的数据提交到远程服务器，条件，需要指定哪个服务器，哪些数据需要提交。

​ 通过form标签的action属性告诉表单，提交的服务器。

​ 通过input的name属性代表的提交的内容。

——隐藏域：hidden

​ 作用：悄悄咪咪的收集信息。

仅供了解，很多浏览器不支持。

邮箱——自动校验输入的是否为邮箱格式

域名——校验域名

电话号码——数字

时间——通过日历选择时间

颜色——通过取色版选择颜色

默认情况下，文字和输入框是没有关联关系的，如果想点击文字时让对应的输入框聚焦，需要进行绑定，使用Label标签。

将文字用label标签包裹起来；

给输入框添加一个ID属性；

将ID属性值赋给label进行绑定。

不用id，将文字和输入框整个放到label也可以绑定，但有局限性，不建议使用。

给输入框绑定待选项。

很多浏览器不支持，仅供了解。

给dlist添加一个id属性，将该属性值赋值给input的list属性。

定义一个下拉列表。

可以通过给option添加一个 selected属性更改默认内容。

定义一个可以换行的文本框，多行输入文本框。

默认，输入框可以无限换行，有默认的宽度和高度。

修改宽高参数，即使指定了也可以无限往下输入，也可以手动拉伸。

不想手动拉伸，通过css修改（reseze:none）。

了解HTML5新增标签，学习浏览器用过的标签，不支持的了解即可，不建议重点掌握学习。

播放视频

src：视频地址，必须的属性。

autoplay：是否需要自动播放。

controls：是否需要显示控制条。

poster：没有自动播放之前的占位图片等。

loop：做广告视频，视频播放完毕之后，是否需要循环播放。

preload：预加载视频。（不是自动播放使用）

muted：静音播放

width：视频宽度

height：视频高度

存在的意义，解决浏览器适配不同视频格式的问题。

当前通过video标签，想要浏览器都通过video播放，浏览器必须支持HTML5，不然无法播放；若想所有浏览器都支持，可通过js的media标签。

播放音频。

和video一样。

——使用方式基本和video一样。

——有三个属性不能用：height、width、poster。

利用summary描述概要信息，用details描述详情，默认情况下，是折叠模式。

跑马灯效果。

滚动方向：direction，上下左右方向控制

滚动速度： scrollamount

循环次数： loop，默认是-1，无限。

滚动类型：behavior，两个值，slide滚动到边界停止，alternate滚动到边界弹回。

——不是W3C推荐的，在其文旦各种查找不到，但各浏览器都支持。

——还可以设置图片滚动。

因为当前HTML标签只有一个作用就是添加语义，有部分标签是修改样式的，虽有被废弃了。

分割线

大小

文本加粗：bold的缩写。

文本添加下划线：underlined的缩写。

文本倾斜：italic的缩写。

文本删除线：strikethrough的缩写。

——不到万不得已不能使用。

——如果要使用，一般作为css的钩子来使用。

strong == b：定义重要性强调的文字。（strong）

ins == u：定义插入的文字。（inserted）

em == i：定义强调的文字。（emphasized）

del == s：定义删除的文字。（deleted）

在HTML中对空格/tab/回车不敏感，会把空格/tab/回车当一个空格处理。

实体区分大小写哦！

一个代表一个空格，记得后面还有分号。

查找吧，网址：https://www.w3school.com.cn/html/html_entities.asp。

------结束-----