第二天的学习

joleen
172 阅读6分钟

第五课

HTTP协议

-HTTP是Hypertext Transfer Protocol的缩写,超文本传输协议

什么是协议?

-在现实生活中有很多协议,例如租房协议,买卖协议,离婚协议

-无论是什么协议他们都有一个共同点,就是用来规范/约束某一类事物

HTTP是用来规范/约束哪一类事物?

-HTTP协议就相当于我们让两个人都说中文或者都说英文一样,就是提前规范两个人之间如何沟通,也就是规范/约束浏览器和服务器之间如何沟通.

第六课

在windows系统中如何查看文件的扩展名,默认情况下windows系统是不显示文件的扩展名的,但是作为一个开发者而言,查看文件的扩展名是我们的必备功能

-win10:随便打开一个文件夹-->点击查看-->将文件扩展名的选项勾选上

-html文件的扩展名就是.html

-电脑上的一个文件是可以"同时"被打开的,不同的软件打开可能会有不同的效果

-例如:html文件通过浏览器打开不可以编辑,通过记事本打开可以被编辑

-什么是纯文本文件?

-windows电脑上有一款默认安装好的软件叫做记事本,这款软件就是专门用来打开纯文本文件的,所以只要能够被记事本打开,并且能够正常显示的文件就是纯文本文件

-.html的文件可以被记事本打开,并且能够正常显示,所以.html文件是一个纯文本文件.

第七课

HTML的作用 -专门用来描述文本语义的,也就是说我们可以利用HTML来告诉浏览器哪些是标题,哪些是段落

-这些用于描述其他文本语义的文本,我们称之为标签.并且这些用于描述其他文本语义的标签将来在浏览器中是不会被显示出来的.

-所以因为HTML的这些标签是专门用来描述其他文本语义的,并且在浏览器中不会被显示出来,所以我们称这些文本为"超文本",而这些文本又叫作标签,所以HTML被称为"超文本标记语言".

H1标签的作用是什么:

-H1标签的作用是用来告诉浏览器,那些文字是标题,也就是H1标签是专门用于给指定的文字添加标题语义的

第十课

网页基本结构

-编写网页的步骤:

1.新建一个文本文档

2.利用记事本打开

3.编写THML代码

4.保存并修改纯文本文档的扩展名为.html

5.利用浏览器打开编写好的文件

-基本结构:

<html>
    <head>
        <meta charset="GBK"/>
        <title></title>
    </head>
    <body>
    </body>
</html>

第十一课

  • 通过观察我们发现,HTML基本结构中所有的标签都是成对出现的,这些成对出现的标签中有一个带/ 有一个不带/,那么这些不带/的标签我们称之为"开始标签",这些带/的标签我们称之为"结束标签".

html标签的作用: 用于告诉浏览器这是一个网页,也就是说告诉浏览器我是一个HTML文档

注意点:

  • 其他所有的标签都必须写在html开始标签和结束标签中间

head标签的作用: 用于给网站添加一些配置信息

-例如:

  • 指定网站的标题/指定网站的小图片

  • 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)

  • 外挂一些外部的css/js文件

  • 添加一些浏览器适配相关的内容

注意点:

  • 一般情况下,写在head标签内部的内容都不会显示给用户查看,也就是说一般情况下写在head标签内部的内容我们都看不到

title标签的作用: 专门用于指定网站的标题,并且这个指定的标题将来还会作为用户保存网站的默认标题

注意点:

  • title标签必须写在head标签里面

body标签的作用:

  • 专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)

注意点:

  • 虽然说有时候将内容写到了别的地方在网页中也能看到,但是千万不要这样干,一定要将需要显示的内容写在body中

  • 一对html标签中只能有一对body标签

第十二课

meta标签的作用: 就是指定当前网页的字符集

  • BGK(GB2312) 体积小 兼容性差
  • UTF-8 体积大 兼容性高

第十三课

标签的分类

单标签 只有开始标签没有结束标签,也就是由一个<>组成的.

双标签 有开始标签和结束标签,也就是由一个<>和一个</>组成的.

HTML标签关系分类

  • 并列关系(兄弟/平级)
  • 嵌套关系(父子/上下级)

第十八课

基础标签学习

如何在Webstorm中利用快捷键创建一个新的.html的文件 -同时按下键盘上的Ctrl+Alt+Insert

如何在Webstorm中让光标移动到当前行的末尾 -按下键盘上的End键即可

如何在Webstorm中让光标移动到当前行的最前面 -按下键盘上的Home键即可

如何在Webstorm中让光标在多行闪烁 -按住键盘上的Alt键不放,再按住鼠标的左键,拖动鼠标即可

如何在Webstorm中快速的复制光标所在的那一行 -按下键盘上的Ctrl+D

如何在Webstorm中快速的删除光标所在的那一行 -按下键盘上的Ctrl+X

如何在Webstorm中让标签包裹一段内容,也就是自动在一段内容前后加上标签

  • 按下键盘上的Ctrl+Alt+T ,然后按下回车,然后输入对应的标签即可.

H系列标签(Header1~Header6)

  • 作用:

    • 用于给文本添加标题语义

  • 格式:

    • '

      xxxxx

      '

  • 注意点:

    • H标签是用来给文本添加标题语义的,而不是用来修改文本样式的
    • H标签一共有6个,从H1~H6,最多就只能到6,超过6则无效
    • 被H系列标签包裹的内容会独占一行
    • 在H系列的标签中,H1最大,H6最小
    • 在企业开发中,一定要慎用H系列的标签,特别是H1标签,在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)

P标签(Paragraph)

  • 作用:
    • 告诉浏览器哪些文字是一个段落
  • 格式:
    • '

      xxxxxxx

      '
  • 注意点:
    • 在浏览器中会单独占一行

Hr标签(Horizontal Rule)

  • 作用:
    • 在浏览器上实现一条分割线
  • 格式:
    • '
      '
  • 注意点:

    • 在浏览器中会单独占一行

    • 通过我的观察发现HR标签可以写/也可以不写/,如果不写/那么就是按照HTML的规范来编写的,如果写上/那么就是按照XHTML的规范来编写的

    • 但是在HTML5中,由于HTML5兼容HTML和XHTML所以写不写都可以

    • 那么以后我们在做前端开发时到底写不写? 按照高级开发工具的提示来写即可.

avatar
文章
阅读
粉丝