HTML基本元素 html+css day 02

最新推荐文章于 2024-05-17 15:34:29 发布

仗剑恬雅人

最新推荐文章于 2024-05-17 15:34:29 发布

阅读量31

点赞数 2

分类专栏： 0基础自学前端文章标签： html 前端 html5 css vscode ide

本文链接：https://blog.csdn.net/qq_45897045/article/details/131534959

版权

0基础自学前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文档声明

<!DOCTYPE html> 说明文档类型：html

html元素与HTML元素
- HTML元素：HTML语言下包含的所有元素
- html元素：是具体的<html>元素，是根元素，其他所有元素都是其后代元素
- <html lang="en"> lang属性作用：帮助语音合成，帮助翻译工具进行翻译

head元素

head元素中基本为整个页面相关的配置信息（也称为：元数据）

head元素中常用的两个标签：

<!-- 编码方式 --> 
 <meta charset="UTF-8">
<!-- 网页的标题 --> 
<title>head元素的学习</title

实例：

<html>
 <head>
<title>文档标题</title>
 </head>
</html>

body元素
- body元素是网页的主体内容
- 在body中 HTML常见的元素（90%使用率）
  - p元素、h元素
    - p元素：段落(Paragraph)
    - h元素：标题 (Heading) <h1> - <h6>
  - img元素、a元素、iframe元素
  - div元素、span元素
img元素
- img元素：图像，图片（image）
- 是一个可替换元素（别的元素可对其进行替换）
- 常见属性：src 、 alt
   必需元素
  alt属性，非必需元素，含义：当图片加载不成功，可显示文字提示；为语音阅读提供方便
- 设置img的src中，需要给图片设置路径：网络图片，本地图片
- 本地图片的路径两种方式
  - 绝对路径（几乎不用）
    - 从电脑的根目录开始一直到资源的路径
      eg： <img src="C:\Users\Administrator\Desktop\前端\HTML_CSS\images\day02.jpg" alt=""> （此处 \ 要换为 / ）
  - 相对路径（常用）
    - 相当于当前文件的一个路径
    - . 代表当前文件夹（可以省略）
    - .. 代表上级文件夹（可依次找出目录对应文件）
- 对于网页而言，无论什么操作系统，路径分隔符都是 / ，而不是 \
a元素
- a元素（anchor 锚点）：超链接，用于打开新的URL
- 常见属性
  - href（Hypertext Reference 超文本引用）：打开URL
  - target：该属性指定在何处显示链接的资源
    - _self：在当前窗口打开URL
    - _blank：在新的窗口打开URL
- 锚点链接
  - 在要跳转的元素上定义一个id属性
  - 定义a元素，并且a元素的herf指向对应的id
  - a元素和img元素结合使用
- a元素还可以进行发送邮件或者下载压缩包
iframe元素
- 可以在此页面中调用网页，但很多网站会拒绝调用
- 属性：frameborder（边框）：0（不显示）1（显示）
div元素、span元素
- div元素（division）：分开，分配
- span元素
- div元素、span元素是纯粹的容器
  - div元素：多个div元素包裹的内容会在不同行显示
  - span元素：多个span元素包裹的内容会在同行显示
不常用元素(可用css代替)
- strong...
全局属性（要求掌握）
- id：唯一标识符，文档中名字必须唯一
- class：给一个元素一个类名（添加多个时，以空格分割）
  - eg：
```
<span class="keyword name">JS</span>
```
- style：给元素添加内联样式
- title：鼠标在上面时可以显示解释说明，不必须

字符实体（重要）

用于浏览器解析无法识别的字符，比如：< 等
大于，小于号：

代码： <span>&lt;hhhhhhhhhhhhhh&gt;</span>
实现结果：<hhhhhhhhhhhhhh>

空格实现：
代码：<p>
hhhhhhhhhhhhhhhhfgdll
<span>xxx&nbsp;&nbsp;&nbsp;&nbsp;xx</span>
aksalkkkkkkkkkkkkkkkkkk
</p>
实现结果：hhhhhhhhhhhhhhhhfgdll xxx xx aksalkkkkkkkkkkkkkkkkkk