标签语义

在合适的地方给一个最为合理的标签，可以让页面结构更加清晰

标签的书写注意规范

1、< p ></ p > 有开始有结束

2、< br /> 有些是自闭合的

3、标签分为包裹和兄弟关系

<html>
  <head><head>
  <body></body>
</html>

head 和body 属于兄弟关系

head 、body和html 属于包裹关系

html骨架标签

<html>
      <head><head>
      <title></title>
      <body></body>
</html>

使用vscode编写代码

快捷键输出头部 ,使用英文!

1、< !DOCTYPE>
文档类型声明，就是告诉浏览器应该用按一个html版本来显示网页

要求：必须要写到文档类型的第一行，它不是html标签，就叫文档类型声明标签

2、lang 语言种类告诉是哪一种语言的网站

en ：英文； zh-CN ：中文

注：写哪一个都可以使用，写en也可以写中文的

3、charset 规定html应该使用哪种字符编码

一般是 UTF-8 ，若不写，会导致乱码

    <meta charset="UTF-8">

标题标签

h1~h6

<h1></h1>
<h2></h2>
......
<h6></h6>

h1最大，以此递减

段落标签和换行标签

段落标签

<p></p> 一段一段的

换行标签

<br/> 属于自闭合标签

文本格式化标签

需要为文字设置一些效果 , 突出重要性 !!

    粗体 <strong></strong>  |  <b></b>
    斜体 <em></em>          |  <i></i>
    删除写 <del></del>      |  <s></s>
    下划线 <ins></ins>      |  <u></u>
    
    都推荐使用第一个，语义更强烈

div 和 span标签

它俩没啥意义，就是一个盒子，往里面放东西的

<div>
    我是一个大盒子，我一个人单独占一行
</div>


<span>
    我是一个小盒子 ，一行里面可以有很多的我
</span>

超链接标签

图片标签

图片标签 < img /> 是单标签

<img src = '图像url'  
    alt='图片显示不出来时显示' 
    title='提示文本' 
    width='500' 
    height='200'
    border = '13'/>

alt : 指图像显示不出来的时候，就用alt后面的文字显示

title ： 鼠标放到图像上面，提示的文本

width ： 宽度 （一般宽高设置一个即可，让另一个等比缩放）

height : 高度

border ： 加边框

属性和属性之间用空格隔开；属性和属性值采取键值对的形式

相对路径

一般来说，网页中的图片很多，所以我们应该把图片放到一个文件夹中

指：图片相对于html页面的位置，就是从代码所在的这个文件中开始，去找图片

 <img src="dk.jpg" alt="">  同一级路径
 <img src="测试图/dk.jpg" alt=""> 下一级路径  图片相对于html文件属于下一级
 <img src="../测试图/dk.jpg" alt="">  上一级路径

绝对路径

是图片相对于电脑中的位置，通常从盘符开始的，也可以从网络上拿取 (用的少)

<img src="http://www.baidu.com" alt="">  上一级路径

链接标签

<a href='跳转目标' target='目标窗口的弹出方式'>此处就是超链接</a>


target : _self 在当前窗口打开，就是用新窗口覆盖当前窗口了

         _blank ： 新窗口打开

链接分类

外部链接

<a href='http://www.baidu.com'>百度</a>  去百度了

内部链接

网站内部之间的相互链接 

<a href='index.html'>首页</a>

空链接

<a href='#'>首页</a>

下载链接

<a href='img.zip'>下载链接 .exe / .zip</a>  

点击后直接可以下载了就  ； 注意 ：href里面的文件必须是 exe 或者zip格式

 <a href="../测试图/张张.zip">点击即可下载</a>

网页元素的链接

图片，音频，视频，文字，表格等都可以变成超链接

锚点链接

点击即可快速定位到页面中的某个具体的位置

先给一个a链接，再在具体位置上面加id

直接在后面写一个空链接，即可返回顶部

注释标签

ctrl+/

<!-- ctrl + /  --> 快捷键

注释是给程序员看的

特殊字符

空格 &nbsp;

<   &lt;

>   &gt;

02 html标签（上）