HTML学习笔记

最新推荐文章于 2024-11-15 10:26:18 发布

想飞的鱼98

最新推荐文章于 2024-11-15 10:26:18 发布

阅读量114

点赞数

文章标签： html css js

本文链接：https://blog.csdn.net/qq_44620552/article/details/104680604

版权

快速创建HTML的初始代码
每个.html文件都有的代码，按下“! + Tab键”可快速生成。

<!DOCTYPE html> 文档声明：告诉浏览器这是一个HTML文件
<html lang="en"> HTML文件的最外层标签（文档根元素）：包裹着所有HTML标签代码 lang = "en" 表明网站是英文网站
<head> HTML文档中的第一个元素。
    <meta charset="UTF-8"> 元数据：是编写网页中的一些辅助信息
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 文档标题 "Document"
</head>
<body> 文档的主体：与页面显示有关的

</body>
</html>

HTML的注释
注释的代码，只有在代码中看得到，但是浏览器显示不出来
```
 
```
- 快捷键:
  - Ctrl键 + /
  - Ctrl键 + Alt + A

HTML语义化
根据网页中内容的结构，选择合适的HTML标签进行编写。
好处：
1. 在没有CSS的情况下，页面也能呈现出很好的内容结构；
2. 有利于SEO，让搜索引擎爬虫更好的理解网页；
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器）；
4. 便于团队开发与维护。

标题与段落
标题 -> 双标签：

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

在一个网页中，

<h1> </h1>  极为重要且只能出现一次
<h5> </h5>和<h6> </h6> 不常见

段落 -> 双标签

<p> </p>

文本修饰标签

<strong> </strong>：加粗
<em> </em>:斜体
<sub> </sub>：下标
<sup> </sup>：上标
<del> </del>:删除文本
<ins> </ins>：插入文本

图片标签与图片属性

<img src="" alt="">:单标签
 src：图片地址
 alt：图片出现问题时的提示
 title：鼠标移动到图片上时出现的提示信息
 width、height：图片大小

引入文件的相对路径
- 相对路径
  - 在路径中表示当前路径
  - 在路径中表示上一级路径
```
<img src="./wallpaper.jpg" alt="">
<img src="./img/wallpaper2.jpg" alt="">
<img src="../img/wallpaper3.jpg" alt="">
```
- 绝对路径
C:\Users\HP\Desktop\program\front-end web developer\img 可不写盘符，“/”与“\”均可识别
http://newimg.jspang.com/xiaomiquan.png 只能写"/"

跳转链接

<a href=""> </a>：双标签
href：链接的地址
target：可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank

<base href=""> 单标签：改变链接的默认行为
写在<head> </head>

跳转锚点
- 实现方式一
  - #号
  - id属性

+ 实现方式二
  - #号
  - name属性（加给a标签）

特殊符号
编写文本时，无法直接输入的特殊字符和空格字符需用特殊符号
1. &+字符
2. 解决冲突例如 “<>”、添加多个空格