HTML基础

1.编写网页的步骤:
1.1新建一个文本文档
1.2.利用记事本打开
1.3.编写THML代码
1.4.保存并且修改纯文本文档的扩展名为.html
1.5.利用浏览器打开编写好的文件

2.网页基本结构:

html标签

• 作用:

  • 用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML
    文档
    • 用于给网站添加一些配置信息
      例如:
      指定网站的标题 / 指定网站的小图片
      添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
      外挂一些外部的css/js文件
      添加一些浏览器适配相关的内容
  • 注意点:其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

title标签

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

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

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

• 注意点:

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

body标签

• 作用:专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
• 注意点:虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

meta标签

• 作用 防止网页乱码
  在head标签中添加, 指定字符集
• 注意点:
  • 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
  • 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

• 文档声明 告诉浏览器用哪套规范去编译和渲染解析我们的网页
• 注意点
  • 任何一个网页第一行一定是一个DTD文档声明，也就是说DTD文档声明必须写在网页的第一行
  • 文档声明不区分大小写
  • 文档声明不是一个标签

webstrom常用快捷键

Paste_Image.png

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

  • 同时按下键盘上的Command +Shift + N

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

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

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

  • 按下键盘上的Command + D

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

  • 按下键盘上的Command + X

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

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

---

基础标签学习

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

• 作用：给文本添加语义
• 格式：

  xxxxxxxxx

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

P标签(Paragraph)

• 作用：告诉浏览器那些文字是段落
• 格式：

  xxxxxxxxxxxx

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

Hr标签(Horizontal Rule)

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

  ---

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

image标签

• 作用：在网页中插入一张图片
• 格式：![](图片路径)
• 标签属性：标签中 xxx="xxx" 的格式我们成为标签的属性

属性名称 作用
src(source)： 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
alt(alternate)： 规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本
title ： 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
height： 设置图片显示的高度
width： 设置图片显示的宽度

• 注意点
  • img添加的图片默认不是占据整一行空间
  • 如果想让图片等比例缩放 只设置高度或者宽度就行

br标签(Break)

br标签(Break)

• 作用:让内容换行
• 格式:
  
• 注意点:br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做

相对路径和绝对路径

• 图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径

• 绝对路径:从电脑的具体盘符开始寻找我们需要的资源![](F:/lnj/girl.png)

• 相对路径:一个文件相对于另外一个文件的位置寻找我们需要的资源![](girl.png)

• 绝对路径缺点：可移植性差->可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行

• 相对路径几种查找方式:

  • 同级

    • 直接编写, 例如:girl.png

    • 加上./ 编写, 例如:/girl.png

    • ./代表当前目录,./girl.png代表在当前目录下查找

  • 上级
    • 直接编写, 例如abc/girl.png
    • 加上./ 编写, 例如./abc/girl.png
    • 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
  • 下级
    • ../代表访问上级目录
    • 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png

• 注意事项：

  • 注意事项:相对路径不会出现这种格式aaa/../bbb/girl.png
  • 虽然可以显示, 但是企业开发中千万不要这么写

a标签(anchor)

格式：江哥博客
作用：用于从一个页面链接到另一个页面

注意事项：
- 在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
- a标签也叫做超级链接或超链接

a标签的属性：

• href：指定调到目标的地址
• target：告诉浏览器是否保留原始界面, _blank保留, _self不保留
• title：悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

base标签和a标签结合使用：

• 在项目开发中如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开

• 格式：

• 注意事项：
  - base必须嵌套在head标签里面
  - 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行

• a标签的其它用法

  • 假链接(本质是跳转到当前页面)
    • 格式：内容 内容
    • 锚点链接：调到当前页面指定的位置
      • 格式：跳转到指定位置
      • 在页面的指定位置给任意标签添加一个id属性例如

        这个是目标

    • 跳转到指定页面的指定位置
      • 格式：跳转到指定位置

• 下载(极力不推荐使用)例如下载福利资源