Html阶段学习总结

Posted 南风知我意

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html阶段学习总结相关的知识,希望对你有一定的参考价值。

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或本地路径地址" 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:连接已保持,在等待本次连接的后续请求;
空行
    分隔响应头与响应体
响应体
    返回给前端的数据,响应信息

以上是关于Html阶段学习总结的主要内容,如果未能解决你的问题,请参考以下文章

学习总结

学习总结

Html阶段学习总结

学习总结

阶段学习总结

阶段性总结 -- ruby系列