一、基本概念

2021/12/16 23:41:42

本文主要是介绍一、基本概念,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、概念

  • 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>


这篇关于一、基本概念的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程