html:不是一种编程语言，而是一种标记语言。应用.html与.htm作为HTML文件的后缀名；

html版本：HTML 1.0：1993年6月

HTML 2.0：1995年1 1月

HTML 3.2：1997年1月14日

HTML 4.0：1997年12月18日

HTML 4.01（渺小改良）：1999年12月24日

HTML 5：2014年10月

HTML特点：繁难性，可扩展性，平台无关性，通用性

html与css之间的关系：HTML是网页内容的载体；

CSS款式是体现；

html正文： <!--正文内容--> 记录编程思路，解释阐明业务性能

html外围属性：title、id、class、style

title：形容信息

id：惟一标识

class：标识一类元素

style 款式

空白：在文档中无论呈现多少个空白或者换行，浏览器都解析为一个空白

空格：&nbsp

<：&lt

&gt

块级元素：

特点：

  • 独占一行空间
  • 默认宽度为100%
  • 高度由子元素或内容决定

  • 能够通过css指定其宽度

    元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address

行内元素：

特点：

  • 与其余行内元素共享一行空间
  • 宽高由本身决定
  • 因为不用来搭建网页构造，所以也无需通过css指定其宽度
  • 行内元素中不能够嵌套块元素

  • 元素：span、a、img、strong、b、i、em、sub、sup

    块级元素与行内元素的区别：

    1.经典：块级元素独占一行，行内元素与其余元素共享一行。
    2.宽高：块级能够间接设置宽高，行内不能够间接设置宽高，须要通过
    display扭转元素属性来设置。（img、input 非凡的行内，置换元素）
    3.块级元素能够蕴含块级与行内，行内只能蕴含行内。

    根底标签的应用：

    h标签：h1标签十分重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签

    eg:<h1>这是一个h1标签</h1>

    p标签:p标签中的文字，会独占一行，并且段与段之间会有一个间距

    eg:<p></p>

    br标签:不另起一个段落换行

    hr标签:在页面中生成一个分割线

    字符实体:空格  
    < &lt;

    &gt;
    “ &quot;
    & &amp;
    ‘ '

img标签:

alt:能够用来设置在图片不能显示的时，对图片的形容

title：用于通知浏览器，鼠标悬停的时候，须要弹出的形容框中显示什么内容

eg:<img src="图片的url或本地门路地址" alt="" width="100px" height="100px" title="">

留神点：

1.px 单位名称为像素，绝对长度单位，像素px是绝对于显示器屏幕分辨率而言的。像素的应用性特

别广。

2.如果不设置img标签的宽度和高度，那么图片就会依照默认的款式显示，如果设置了宽高，img就

会依照设置的宽高来显示。

3.有时设置img的宽高会使图片失真，这时只须要设置宽度或者高度中的一个，另外一个会等比例调整。

4.个别除了自适应的页面，不倡议设置width和height。

5.和h标签以及p标签不同的是，img标签不会独占一行

a标签:管制页面与页面之间跳转

target:用于管制如何跳转

self:用于以后的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self
_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转

留神点:

1.a标签不仅能够让文字点击，也能够让图片被点击2.一个a标签必须有一个href属性，否则a标签不晓得要跳转到什么中央3.如果通过a标签href属性指定一个URL地址，那么必须在地址后面加上http://或者https://除了URL地址，还能够指定一个本地地址

eg:<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>

mailto链接:一种html链接，可能设置你电脑中邮件的默认发送信息

eg:<a href="mailto:name@email.com">Email</a>

base标签:对立指定以后页面中所有的a标签须要如何关上

留神点

    1.base标签必须要写在head标签之间    2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会依照a标签中指定的来执行

eg:<base target="_blank">

假链接:

1.# 间接回到页面的顶部
2.javascript: 不会主动回到页面的顶部

<a href="#">回到顶部</a>

<a href="javascript:">点我啊</a>

锚点:

留神点:

1.通过咱们的a标签跳转到指定的地位, 是没有适度动画的, 是间接一下子就跳转到了指定地位2.a标签除了能够跳转到以后界面的指定地位以外, 还能够在跳转到其它界面的时候间接跳转到其它界面的指定地位

跳转到其余页面：<a href="b.html#bottom" target="_blank">跳转</a>

在以后页面中进行跳转：<a href="#center">跳转</a>

<p id="center">我是中部</p>

em:强调，突出文章重点

strong:意为强调，内容更为有用

b:加粗

i:斜体

u:下划线

video(播放视频):

src:通知video标签须要播放的视频地址
autoplay:用于通知video标签是否须要自动播放视频
controls:用于通知video标签是否须要管制条
poster:用于通知video标签视频没有播放之前显示的占位图片
loop:个别用于做广告视频，用于通知video标签视频播放结束之后是否须要循环播放
muted:静音

eg1:`<video>

<source src="" type=""></source><source src="" type=""></source>

</video>`

eg2:<video src=""></video>

audio(播放音频)

有3个属性不能用, height/width/poster

HTML5新增语义化标签:

header: 具备疏导和导航作用的构造元素，通常用来搁置整个页面或页面内的一个内容区块的题目，但也能够蕴含搜寻表单或logo

nav: 用作页面导航的链接组，其中导航元素链接到其余页面或以后页面的其余局部

article: 代表文档，页面或应用程序中独立的，残缺的，能够单独被内部援用的内容，也能够嵌套应用。能够是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其余任和独立的内容

section: Html文档独立的性能

aside: 示意以后页面或文章的从属信息局部，它能够蕴含以后页面或次要内容相干的援用，侧边栏，广告，导航条，以及其余类型的有别于次要内容的局部

footer: 其下层父级内容区块或是一个根区块的脚注

address: 用来在文档中出现分割信息，包含文档作者或文档维护者名字

figure& figcaption: figure元素用来示意网页上一块独立内容，将其从网页上移除后不会对网页上的其余内容产生任何影响

figure元素所示意的内容能够是图片，统计图或代码示例，也能够是音频插件，视频插件，统计表格等。

figcaption元素示意figure元素的题目，它从属于figure元素，必须书写在figure元素外部。

一个figure元素内最多只容许搁置一个figcaption元素，然而容许搁置多个其余元素。

details: 标识该元素外部的子元素能够被开展,膨胀显示的元素。details元素内并不仅限于搁置文字，也能够搁置表单,插件或对于一个统计图提供的具体数据表格。

open属性: 属性值为true时，该元素外部的子元素应该被开展显示；当该属性的值为false时，其外部的子元 素应该被收缩起来不显示。默认值为false

summary子元素: summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其余所有隶属元素将会开展或膨胀。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供 单击。

性能元素

列表标签：给一堆数据增加列表语义, 也就是通知搜索引擎通知浏览器这一堆数据是一个整体

无序列表:ul>li

留神点:

1.ul标签是用来给一堆数据增加列表语义的, 而不是用来给他们增加小圆点的

2.ul标签和li标签是一个整体, 是一个组合. 所以个别状况下ul标签和li标签都是一起呈现, 不会单个呈现。也就是说不会独自应用一个ul标签或者独自应用一个li 标签, 都是联合在一起应用
3.因为ul标签和li标签是一个组合, 所以ul标签中不举荐蕴含其它标签, 也就是说当前你在ul标签中只会看到li标签

有序列表：

给一堆数据增加列表语义, 并且这一堆数据中所有的数据都有先后之分

有序列表款式：1 默认值。数字有序列表。（1、2、3、4）
a 按字母顺序排列的有序列表，小写。（a、b、c、d）
A 按字母顺序排列的有序列表，大写。（A、B、C、D）
i 罗马字母，小写。（i, ii, iii, iv）
I 罗马字母，大写。（I, II, III, IV）

定义列表：给一堆数据增加列表语义，先通过dt标签定义列表中的所有题目, 而后再通过dd标签给每个题目增加形容信息

留神点

1.和ul/ol一样, dl和dt/dd是一个整体, 所以他们个别状况下不会独自呈现, 都是一起呈现
2. 和ul/ol一样, 因为dl和dt/dd是一个组合标签, 所以dl中倡议只放dt和dd标签
3. 一个dt能够没有对应的dd,也能够有多个对应的dd, 然而无论有或者没有dd都不举荐应用.
4. 举荐应用一个dt对应一个dd
5.和li标签一样, 当须要丰盛界面时, 咱们能够在dt和dd标签中持续增加其它标签

表格标签：用来给一堆数据增加表格语义，一种数据的展示模式

留神点：

表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认状况下这个属性的值是0, 所以看不到边框表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起呈现, 要么一起不呈现, 不会单个呈现

表格的宽高：默认是依照内容的尺寸来调整的

                  手动扭转：table的width、height                  单元格的宽高：td的 width、height               （行内款式：style=“color:red;background-color:white”  优先级最高）

表格内单元格的程度、垂直对齐：

                  程度：align   table(表格程度对齐形式)、tr、td（以后单元格内容的程度对齐形式）                  垂直：valign   tr、td（单元格中的内容, 在垂直方向的对齐形式.）

表格的外边距与内边距属性：

                  cellspacing外边距：单元格和单元格之间的间隔，默认状况下是2px                  cellpadding内边距：单元格的边框和文字之间的间隙（调整表格内内容与边框的间隔） 默认状况下是1px

单元格合并：

                  colspan  程度方向上的单元格合并，合并列                   rowspan  垂直方向上的单元格合并，也就是合并行

form表单：

表单元素肯定要写在表单中

    `<for`m>`      `<表单元素>`    </form>`根本表单元素    明文输入框 <input type="text">    暗文输入框 <input type="password">   加密操作    单选框 <input type="radio" name="xx" value="xxx" checked>    checked  默认选中    互斥操作：给每一个单选框设置雷同的name属性还必须设置雷同的值。    多选框 <input type="checkbox" name="xxx" value="xxx" checked>    提交按钮 <input type="submit">    作用: 将表单中曾经填写好的数据, 提交到近程服务器。（action属性：服务器地址）    【注：若想将表单数据提交给后盾，表单元素须要有name属性。】    一般按钮 <input type="button" value="xxx">    图片按钮 <input type="image" src="">    重置按钮 <input type="reset" value="xx">  清空表单中曾经填写好的数据

Http协定：

http协定是超文本传输协定，罕用于BS架构中，为数据在网络传输中规定协定。

HTTP是一种可能获取如 HTML 这样的网络资源的 protocol(通信协定)。它是在 Web 上进行数据交换的根底，是一种 client-server 协定，也就是说，申请通常是由像浏览器这样的接受方发动的。

HTTP报文的分类有两种：申请报文和响应报文。顾名思义，申请报文就是客户端向服务端发送申请的信号，响应报文就是服务端响应解决后回传给客 户端的信号。

申请报文：浏览器会将前端申请封装成申请报文发送给后端，申请报文中蕴含申请行、申请头、申请体

响应报文：服务器接管到前端发来的申请，会将响应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示进去。响应报文中蕴含响应行、响应头、响应体

GET /index.php HTTP/1.1，GET是申请办法，/index.php是URL，HTTP/1.1示意应用的HTTP版本为1.1。

申请形式  get与post申请的区别？ 面试题      get  传输数据量小  参数携带在URL前面  没有申请体  没有数据保密性  /index.php?id=100&slec=yes    post  传输数据量大  参数携带在申请体里  数据保密性强（swagger-login/register）cookie    把用户的爱好在电脑本地进行了一个记录，当用户下次再浏览雷同网页时，会在电脑本地拿到cookie，进行爱好筛选举荐。申请头    Host：申请的主机名，容许多个域名同处一个IP地址，即虚拟主机。eg: 百度 ---- sp1.baidu.com。空行用作申请头与申请体之间的内容宰割申请体蕴含申请携带数据，所以，get是没有申请体的。

响应报文：状态行、响应头、空行、响应体

状态行   通知前端申请是否正确，若谬误，通过状态码剖析谬误起因，调整bug    200  胜利    4XX  前端申请谬误，url/申请数据格式谬误/语法错误/...    5XX  服务器端谬误，分割后盾人员解决响应头      Content-Type：返回的资源类型 (MIME)；    Connection：连贯形式；close/keep-alive    close：连贯曾经敞开；    keep-alive：连贯已放弃，在期待本次连贯的后续申请；空行    分隔响应头与响应体响应体    返回给前端的数据，响应信息