5.23

• 1、 更改文件扩展名：f2
• 2、HTML就只有一个作用, 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.
• 3、HTML其实是HyperText Markup Language的缩写, 超文本标记语言
• 4、企业开发代码文件，必须用英文或者拼音命名
• 5.html发展史:

1993--IETF HTML1.0
1995--w3c HTML2.0
1999--w3c HTML4.01
2004--HTML草案
2008--HTML5正式版

什么是URL

• 1.我们在浏览器的地址栏中输入的地址其实就是URL
• 2.URL格式：127.0.0.1/index.html （浏览器会自动补全http:和：80）
  http://127.0.0.1/index.html （浏览器会自动补全：80）
  http://127.0.0.1:80/index.html （完整格式）
  协议类型://ip地址:端口号/资源路径/资源名称

补充

• URL全称Uniform Resource Locator(统一资源定位符)， 互联网上的每一个资源都有一个唯一的URL地址
• 由于IP地址全都是数字， 没有任何的含义，比较难以记忆。 所以在访问网页时最-
  常见的不是IP地址而是“域名”（一串有含义的字母OR数字）
• 好比： http://www.baidu.com AND http://111.13.100.92:80/

什么是HTTP协议

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

什么是HTML

• HTML其实是HyperText Markup Language的缩写, 超文本标记语言

HTML的作用

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

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

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

html标签

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

• 注意点:

  • 其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

head标签

• 作用:

  • 用于给网站添加一些配置信息
    例如:
  • 指定网站的标题 / 指定网站的小图片
  • 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
  • 外挂一些外部的css/js文件
  • 添加一些浏览器适配相关的内容

• 注意点:

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

title标签

• 作用:

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

• 注意点:

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

body标签

• 作用:

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

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

• 一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

meta标签

• 如何解决乱码现象?

• 在head标签中添加, 指定字符集

• GBK(GB2312)和UTF-8区别

  • GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文
    体积比较小
  • UTF-8里面存储的世界上所有的文字
    体积比较大

• 那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?

  • 如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快
  • 如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8
  • 懒人推荐: 不管三七二十一, 一律写UTF-8即可

• 注意点:

  • 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
  • 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

Paste_Image.png

HTML标签

HTML标签分类

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

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

HTML标签关系分类

• 并列关系(兄弟/平级)

• 嵌套关系(父子/上下级)

DTD文档声明

• DTD文档声明格式:

注意事项:

 -声明必须是 HTML 文档的第一行，位于  标签之前
 声明不是 HTML 标签
 声明没有结束标签
 声明对大小写不敏感
这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制
不写也能运行
H5网页里面用H4也能运行

htm 和 .html扩展名区别

• DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
• 但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
• 所以htm是为了兼容过去的DOS命名格式存在的

WebStorm常见快捷键

• 如何在WebStorm中利用快捷键创建一个新的.html的文件

同时按下键盘上的Ctrl + Alt + Insert

• 如何在WebStorm中让光标移动到当前行的末尾

按下键盘上的End键即可

• 如何在WebStorm中让光标移动到当前行的最前面

按下键盘上的Home键即可

• 如何在WebStorm中让光标在多行中闪烁

按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可

• 如何在WebStorm中快速的复制光标所在的那一行

按下键盘上的Ctrl + D

• 如何在WebStorm中快速的删除光标所在的那一行

按下键盘上的Ctrl + X

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

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

基础标签学习

H系列标签(Header 1~Header 6)

作用:

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

-
xxxxxx

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

P标签(Paragraph)

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

-
xxxxxxxx

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

Hr标签(Horizontal Rule)

• 作用:
• 在浏览器上显示一条分割线
• 格式:

• 注意点:
• 在浏览器中会单独占一行
• 通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
• 由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做