HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45825818/article/details/103039541

day01

HTML 语言:

HyperText Markup Language 超文本标记语言

超:? 超越文本文件文本文件 .txt : 只能写字符

超在网页html文件可以插入图片，音频，视频，链接

形式：标签形成


成对标签  闭合标签  双标签
<开始标签>内容（可以是标签+文字）</结束标签>

w3c规范的关键字  <div></div> 区域 大容器   <span></span>  <p></p>
单标签
<img >

标签默认属性

<img  src=" " >
<开始标签  属性1=“属性值1”  属性2 = “属性值2”>

标签的关系

<html lang="en">
<head>
  
</head>
<body>
    <!-- 用户看到的  在这写  -->
    
</body>
</html>  嵌套关系 父子关系

html是body和head是父亲
head和 body 并列关系  兄弟关系

编码

charset=“UTF-8” 字符编码方式 UTF-8 万国码

charset 字符编码集

UTF-8 是可变字节长度 1字节 = 8位二进制 11101110 1-4字节

常见编码方式:

ASCII 美国标准信息交换 7位2进制 1111111 128个字符 52+10

Unicode编码 256字符

GB2312 汉字编码 6000+

GBK 20000+

GB18030 繁体字的支持

特殊字符编码： ctrl+b 文字加粗

 空格  &nbsp;

    大于号  &gt;  great than 

    小于号  &lt; less than

    版权符号 &copy;

    钱币  &yen;

开发者工具

F12 or ctrl+shift+i or 鼠标右键检查弹出开发者工具前端人员调试代码

图片标签

路径

在这里插入图片描述

 src : 图片路径
    相对 :从当前文件出发  同级  ./   跳出的文件夹 ../ ../../ 
    绝对: (1)从根目录出发 C:/Users/Administrator/Desktop 左斜杠
    (2)网上图片  http:// f12 点住图片  open in new tab  复制地址栏即可
    

     width 宽度
     height 高度 
     一般来说 宽高只设置一个 默认的缩放  3:2   300px*200px  宽度 500px 自动计算高度


     alt: 图片加载失败时的提示 更多的是用在图片的文字提示

     title : 图片的标题  提高用户体验

超链接标签

关键字 : a anchor 锚跳转作用

<a>热点内容</a>

<a>
  <img src=" ">
</a>

href: 跳转文件的地址默认跳转方式为当页跳转
target 设置跳转方式
- _blank 以新页打开
- _self 默认打开方式本页打开

1:抛锚设置目标跳转点

id = “id值” id 是唯一识别

2:联系 href = “#id值”

target 设置跳转方式
- _blank 以新页打开
- _self 默认打开方式本页打开