一、基本概念

2021-12-16 23:33:11 阅读：179 来源： 互联网

一、概念

html: Hyper Text MarkUp Language，一种标记语言
浏览器内核：读取网页内容，进行渲染展示
chrome：blink 内核
web标准：结构（html），表现（css），行为（js）

二、标签

1. 基本使用

成对标签，单个标签
标签关系：并列，包含

<!--文档类型声明：代表html的版本： 是html5
    必须是 html的第一行-->
<!DOCTYPE html>

<!--文档语言：英文，仅仅进行提示作用-->
<html lang="en">
<head>
    <!--文档字符集合-->
    <meta charset="UTF-8">
    <title>I am title</title>
</head>
<body>
I am body
</body>
</html>

2. 常用标签

# 1. 标题标签:  1-6, 字体逐渐变小
<h1></h1>

# 2. 段落标签
<p></p>

# 3. 换行标签
<br/>

# 4. 加粗
<strong></strong>
<b></b>

# 5. 倾斜
<em></em>
<i></i>

#6. 删除线
<del></del>
<s></s>

# 7. 下划线
<ins></ins>
<u></u>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo02</title>
</head>
<body>

<!--段落标签： paragraph
    换行标签：-->

<p>
    近日，Asahi Linux 项目团队概述了其在 Apple Silicon/Apple M1 支持 Linux 的最新现状。<br/>
    通过该项目团队最新发表的公告显示，他们实现了让触摸板和键盘在 M1 驱动的 MacBook
    上工作，以及音频播放工作。同时耳机插孔也有开发补丁，用于在 M1 Pro/Max 启动时获得对 M1 的支持。时下，不论是在最初的 M1 芯片上，还是在最近的 M1 Pro 和 M1 Max SoC 上，他们都取得了良好的进展。随着
    Linux 5.16 和 5.17 的推出，2022 年 Asahi Linux 项目团队有望完成更多重大项目，以在苹果 M1 硬件上构建一个可用的日常 Linux 系统。（Phoronix）
</p>

<p>
    近日，Asahi Linux 项目团队概述了其在 Apple Silicon/Apple M1 支持 Linux 的最新现状。通过该项目团队最新发表的公告显示，他们实现了让触摸板和键盘在 M1 驱动的 MacBook
    上工作，以及音频播放工作。同时耳机插孔也有开发补丁，用于在 M1 Pro/Max 启动时获得对 M1 的支持。时下，不论是在最初的 M1 芯片上，还是在最近的 M1 Pro 和 M1 Max SoC 上，他们都取得了良好的进展。随着
    Linux 5.16 和 5.17 的推出，2022 年 Asahi Linux 项目团队有望完成更多重大项目，以在苹果 M1 硬件上构建一个可用的日常 Linux 系统。（Phoronix）
</p>

</body>
</html>

3. 盒子标签

将内容放在盒子里面，调整布局

# 一个div独占一行， 多个div是多行
# 多个span横向显示
<div>
    nihao
</div>

<span>
    nihao
</span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>nihao</div>
<div>nihao</div>

<span>百度</span>
<span>新浪</span>
<span>搜狐</span>
</body>
</html>

4. 图像标签

宽度和高度一般只需要修改一个，另外一个随比例缩放
属性之间，没有顺序，用空格分割

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 1. src: 图片路径
     2. title: 鼠标移动到图片，显示的文字
     3. alt: 图片加载不到的时候，显示的文字
-->

<img src="1.jpg" title="demo" width="800" height="500">
<img src="2.jpg" alt="not find">
</body>
</html>

标签：标签,Pro,nihao,Asahi,M1,Linux,基本概念
来源： https://blog.csdn.net/weixin_43374578/article/details/121985379

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。