HTML基础——基础标签

基础标签学习

• 如何在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）

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

<h1>xxxxxxxxxxxx</h1>

• 注意点：
  -H标签是用来给文本添加标题语义的，而不是修改文本样式的
  • H标签一共有6个，从H1~H6（一到六级标题）
  • 被H系列标签包裹的内容独占一行
    -在H系列标签中，H1最大，H6最小
    -在企业开发中，慎用H标签，一个界面中只能出现一个H1标签

P标签（Paragraph）

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

<p>xxxxxxxxxxxxx</p>

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

Hr标签（Horizontal Rule）

• 作用：
  • 在浏览器上显示一条分割线
• 格式（单标签）：

<hr />

• 注意点：
  • 单独占据一行
  • hr标签可以写/也可以不写/，若不写/，则是按照HTML规范来编写，若写则是按照XHTML规范来编写——按照高级开发工具自动生成的规格来写，比如：Webstorm中，Tab键自动生成的为

    ---

img标签

• 作用：
  • 告诉浏览器要显示一张图片
• 格式：

<img src="">

src即为source的缩写，为需要显示的图片名称

• 注意点：
  • img标签不会独占一行
• 其余属性：
  • width：宽度
  • height：高度
  • title：告诉浏览器当鼠标悬停在图片上时，需要弹出的描述框中显示什么内容
  • alt：告诉浏览器当需要显示的图片找不到时显示什么内容

br标签

• 作用：
  -作用：换行
• 格式：

<br>

• 注意点：
  • 可以连续使用，使用多少个就换多少行
  • 不另起一个段落换行，在企业开发中很少使用

相对路径和绝对路径

• 给src属性赋值有两种方式：相对路径和绝对路径
• 通过相对路径赋值：
  • 同级
    • 图片和.html文件存储在同一个文件夹中
    • 格式：

<src="xxxx.jpg">

• 下级
  • 存储图片的文件夹和.html文件在同一个文件夹中
  • 格式：

<src="image/xxxxx.jpg">

• 上级
  • 存储图片的位置和存储代码的文件夹在同一个文件夹中
  • 格式：

<src="../xxxxx.jpg">

(../表示从当前位置找到上一级文件夹)

• 通过绝对路径赋值（可移植性不好）
  • 从指定的盘符开始查找
  • 格式：

<src="C:\xxx\xxx\xxx.jpg">

• 注意：
  • 路径中不能出现中文
  • 相对路径指定不能跨盘符

a标签

• 作用：控制页面之间的跳转
• 格式：

<a href="目标界面">内容</a>

• 注意点：
  • 不仅能让文字被点击，还能让图片被点击
  • 一个a标签必须有一个href属性
  • 若通过a标签的href属性指定一个URL地址，必须加上http://或https://
• target属性
  • 作用：控制如何跳转
  • _self:不新建界面，在当前页面跳转
  • _blank:在新的选项卡中跳转，即新建界面跳转
• title属性：控制鼠标悬停时显示提示文本
• 假链接
  • 点击之后不会跳转的链接
  • 格式：

<a href="#">XXXX</a>
<a href="javascript:">XXXX</a>

• 区别：
  • #：自动回到网页顶部，网页中回到顶部可以用此方法
  • javascrpt: ：不会回到网页顶部
• 锚点
  • 通过a标签跳转到指定位置
  • 给目标位置的标签添加一个id属性，指定一个独一无二的值
  • 告诉a标签需要跳转的目标标签的id属性的值
• 格式：

<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>

• 注意点：
  • 通过a标签跳转到指定位置时，是没有过渡动画的，而是直接跳转到指定位置
  • 也可以跳转到其他界面的指定位置
    • 格式：

<a href="13-锚点测试.html#three" target="_blank">跳转到锚点测试界面</a>
<h2 id="three">我是锚点测试界面3</h2>

base标签

• 专门用来统一指定当前网页中的所有的超链接的打开方式
• 必须写在head的开始和结束标签内
• base标签和a标签内同时指定target值时，以a标签内的为主
• 格式：

<base target="_blank">