HTML布局

最新推荐文章于 2024-09-10 14:15:01 发布

三观156

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量73

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_53714112/article/details/115793150

版权

HTML标记语言

html指的是超文本标记语言，它是用来描述网页的一种语言；它不是一种编程语言

HTML的规范

所有的标签都必须包含在中括号“< >”之间，

大多数都是成对出现的

<html>(开始标签)和</html>（结束标签），称之为双标签
<br/>为单标签

标签的关系分为：并列关系和包含关系

注：body和head是并列关系

lang 是用来定义当前文档显示的语言

其中，en 定义为英语，zh-CN定义为中文
字符集指的是多个字符的集合，以便计算机能够识别和储存各种文字
```
  例：<meta charset="UTF-8">
```
charset常用到的值有：GB2312（简体中文）、B1G5（繁体中文）、GBK（国标）、UTF-8，其中UTF-8也被称为万国码，指基本上包含了全世界所有国家需要用到的字符

HTML常用标签

标题标签

在这里插入图片描述

标签语义：作为标题使用，并且依据重要性递减

特点：

加了标题的文字会变得加粗，字号也会一次变大
一个标题独占一行

段落标签
```
例：<p>是一个段落标签</p>
```
特点：
- 文本在一个段落中会根据浏览器的大小自动换行
- 段落与段落之间有空隙

换行标签

<br/>

特点：

他是一个单标签
他只能简单的开始另一行，不会有空隙

4.文本格式

| **语义** | **标签**                     | **说明**           |
| -------- | ---------------------------- | ------------------ |
| 加粗     | <strong></strong>或者<b></b> | 更推荐使用<strong> |
| 倾斜     | <em></em>或者<i></i>         | 更推荐使用<em>     |
| 删除线   | <del></del>或者<s></s>       | 更推荐使用<del>    |
| 下划线   | <ins></ins>或者<u></u>       | 更推荐使用<ins>    |

5.特殊标签

他们没有语义，只装内容

特点：

<div>标签用来布局，但是一行只能放一个<div> 
<span>标签用来布局，一行可有多个<span>

6.图像标签
img标签用于定义HTML页面中的图像

例：<img src="图像URL"/>

src是img标签的必须属性，他用于指定图像文件的路径和文件名
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>land</title>
</head>
<body>
    <h4>图像标签的使用</h4>
    <img src="1.png"/>
    <h4>alt 替换文本 图像显示不出来的时候用文字替换</h4>
    <img src=".jpg" alt="这是莱昂纳多"/>
    <h4>title 提示文本 鼠标放到图像上，提示文字</h4>
    <img src="1.png" title="这是莱昂纳多"/>
    <h4>width 给图像设定宽度</h4>
    <img src="1.png" title="这是莱昂纳多" width="200"/>
    <h4>heigth 给图像设定高度</h4>
    <img src="1.png" title="这是莱昂纳多" height="100"/>
    <h4>border 给图像设定边框</h4>
    <img src="1.png" title="这是莱昂纳多" height="100" border="15"/>

</body>
</html>