Html阶段学习总结

Posted 2021-09-03 南风知我意

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;

  >
“ "
& &
‘ \'

img标签:

alt:可以用来设置在图片不能显示的时，对图片的描述

title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容

eg:<img src="图片的url或本地路径地址" 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:[e-mail]">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：连接已保持，在等待本次连接的后续请求；
空行
    分隔响应头与响应体
响应体
    返回给前端的数据，响应信息