共计 3638 个字符，预计需要花费 10 分钟才能阅读完成。
1. 什么是 HTML?
HTML 是一种超文本标记语言，而不是编程语言2. 什么是 CSS?
css 是层叠样式表，用于润饰文档的语言，能够将文档以更优雅的模式出现给用户3.HTML 和 CSS、JavaScript 的关系
html 和 css、js 为网页三要素
html: 网页框架的构建 构造
css: 款式的设置 页面
js：事件、动静、行为 相应用户的操作4. 在 VSCode 软件下的快捷键：
正文：ctrl+/
换行：ctrl+enter
生成文档构造：shift+！回车即可
间接写 HTML:5 回车即可
5.HTML 页面构造的具体介绍
(1)<!DOCTYPE html>
html5 规范网页申明，不加这一行的话，就示意页面采纳浏览器自身的解析规范，这样会造成页面在不同的浏览器可能会呈现不同的显示成果。h5 的文档申明，申明以后的网页是依照 html5 规范编写的编写的。如果不写文档申明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式后，浏览器解析页面会导致页面无奈失常显示，所以为了防止进入该模式，肯定要写文档申明。(2)<html lang="en">
a.html 是根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在 html 根标签中
b. 属性 lang 是 language 的缩写，意思是语言，en 代表的是英语，zh—CN 代表中文
c.html 根标签中只有两个子标签，head: 浏览器的设置，body: 可视区展现
(3)<head></head>
head 标签中的内容不会间接在网页中显示，是用来帮忙浏览器解析页面的
(4)<meta charset="UTF-8">
a.meta 标签用来设置网页的一些元数据，比方网页中的字符集，关键字，简介
b.meta 是一个自完结标签，编写一个自完结标签时，能够在开始标签中增加一个
c. 字符编码：浏览器会依据字符编码进行解析，常见的字符编码有：gb2312、gbk、unicode、utf-8
(5)<meta name="viewport" content="width=device-width,initial-scale=1.0">
a.viewport: 设施的屏幕
b.width=device-width:width 属性管制屏幕设施的宽度，如果你的网站将被带有不同屏幕分辨率的设施浏览，那么将它设置为 device-width 能够确保它可能正确出现在不同的设施上。c.initial-scal=1.0: 确保网页加载时，以 1:1 的比例出现，不会有任何的缩放。(6)<title></title>
浏览器选项卡上的名字
(7)<body></body>
设置网页的主体内容，网页中所有可见的内容，都应该在 body 中编写，在 body 里的内容都是显示在浏览器的视区内的。6. 实体
空格：
小于号：<
大于号：>
版权：©
注册商标：®7. 块级元素
(1)作用：搭建网页构造
(2)罕用元素：htm、body、div、p、ht~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav，artice、section、aside、adderss、(3)特点：a. 独占一行空间
b. 默认宽度为 100%（如果有父元素，则绝对于父元素来说，如果没有，则绝对于浏览器而言）c. 高度由子元素或内容决定（撑起来）d. 能够通过 css 指定其宽度
e. 块级元素能够嵌套块级元素和行内元素8. 行内元素
(1)作用：在构造中填充网页内容
(2)罕用元素:span、a、img、strong、b、i、em、sub、sup...
(3)特点：a. 与其余行内元素共享一行空间
b. 高度由本身决定
c. 因为不必搭建网页构造，所以也无需通过 css 指定其宽度
d.a 标签
a: 链接内部或外部网址 href="相对路径./../ / 绝对路径:http://ip: 端口号 / 我的项目 / 文件名"(https://)
经典利用：锚点 定义锚点、链接锚点
1. 给一个跳转按钮，也就是触发跳转的按钮 返回顶部 <a href="#"> 回到顶部 </a>
2. 要跳转到的地位：<div id="center"> 找到我 </div>
3.<a href="#center"> 返回顶部 </a>
target: 定义点击后页面加载的地位 默认取值_self
_blank 在新窗口关上 / 新标签页
e.img 标签
img : 放图片
src 放图片地址
width 图片宽度
height 图片高度
alt 图片加载呈现问题时给用户展示的内容
title 鼠标悬停时的文字提醒9. 块级元素与行内的区别 面试题（80%）
(1). 经典：块级元素独占一行，行内元素与其余元素共享一行
(2). 宽高：块级能够间接设置宽高，行内不能够间接设置宽高。(3)img、input 属于非凡的行内元素，也称为置换元素，img 和 input 能够设置宽高，然而为行内元素，须要用 display 扭转元素属性来设置
(4). 块级元素能够蕴含块级与行内，行内只能蕴含行内10.web 的第一门编程语言
JavaScript11. 列表元素
(1)无序列表：给一堆数据增加列表语义，并且这一堆数据中所有的数据都没有先后之分
a.ul、li 相当于班级与同学的关系、城市
b.<ul type="value">
<li></li>
</ul>
c.type 取值
disc 实心 默认值
circle 圆心 空心
square 实心 方块
(2)有序列表：给数据增加列表语义，并启动这一堆数据中所有的数据都有先后之分（排行榜）a.<ol type="value">
<li></li>
</ol>
b.type 取值：数字
大写字母
小写字母
罗马字母大写
罗马字母小写（3）定义列表：dl-dt/dd（没有那么重要）先通过 dt 标签定义列表中的所有题目，而后再通过 dd 标签给每个题目增加形容信息
12. 表格标签
（1）一对 table 标签就是一个表格
（2）一对 tr 标签就是表格中的一行
（3）一对 td 标签就是一行中的一个单元格（4）<table>
<tr>
<td> 内容 <td>
</tr>
</table>（5）留神：a. 表格标签有一个 border 边框属性, 这个属性决定了边框的宽度. 默认状况下这个属性的值是 0, 所以看不到边框
b. 表格标签和列表标签一样, 它是一个组合标签, 所以 table/tr/td 要么一起呈现, 要么一起不呈现, 不会单个呈现
c. 如果给 td 标签设置 widht/height 属性, 会批改以后单元格的宽度和高度, 不会影响整个表格的宽度和高度
d. 表格的宽度和高度: 默认是依照内容的尺寸来调整的，手动扭转 table 的 width/height 属性
e. 单元格的宽高：td 的 width、height
(行内款式：style="color：red;background-color：red";)（6）表格内单元格的程度、垂直对齐
程度：align table（表格程度对齐形式）、tr（以后单元格内容的程度对齐形式）、td（以后单元格内容的程度对齐形式）垂直：valign tr/td（以后单元格内容在垂直方向的对齐形式）（7）表格的外边距与内边距属性
a.cellspacing 外边距：单元格和单元格之间的间隔 默认状况下是 2px
b.cellpadding 内边距：单元格的边框和文字之间的间隙（调整表格内容与边框的间隔）默认状况下是 1px（8）单元格合并
a.colspan 程度方向上的单元格合并，合并列
b.rowspan 垂直形式上的单元格合并，合并行3.form 表单
（1）<form action="提交的服务器接口地址">
< 表单元素 >
</form>
留神：表单元素肯定要写在表单中（2）根本表单元素
a. 明文输入框
<input type="text" name="account" placeholder="请输出用户名">
name: 表单提交时，会作为参数的名称，联合输出的值进行匹配，组成参数名 = 参数值的构造
placeholder: 提醒
b. 暗文输入框 加密操作
<input type="password" name="password" placeholder="请输出明码">
c. 单选框
<input type="radio" name="xx" value="xxx" checked>
互斥操作：给每一个单选框设置雷同的 name 属性，还必须设置雷同的值
checked: 默认选中
d. 多选框
<input type="checkbox" name="xxx" value="xxx" checked>
checked：默认选中
e. 提交按钮
<input type="submit">
作用: 将表单中曾经填写好的数据, 提交到近程服务器
交到服务器地址（action 属性：服务器地址）留神：若想将表单数据提交到后盾，表单元素须要有 name 属性
f. 一般按钮
<input type="button" value="xxx">
g. 图片按钮
<input type="image" src="">
h. 重置按钮 清空表单中曾经填好的数据
<input type="reset" value="xx">
正文完