html学习摘记Part1

最新推荐文章于 2024-07-25 22:24:14 发布

JZYshuraK

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量249

点赞数 2

分类专栏： html学习摘记文章标签： html 学习前端

本文链接：https://blog.csdn.net/JZYshuraK/article/details/124442820

版权

html学习摘记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html学习摘记Part1

Hello World

每一个伟大的程序员都是从 $Hello\ World$ 开始的，学习一门新语言当然也要从 $Hello\ World$ 入门。

<html>
    <head>
        <title>This is a website</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

$h t m l$ 的程序大概就长这个样子，< $h e a d$ >表示头部分，< $b o d y$ >表示主体部分。
$h$ 表示标题，从 $1$ 到 $6$ 依次为一级标题到六级标题
$p$ 表示段落，其中可以写文本

简单语法

$<br\ />$ 表示换行，因为浏览器会自动忽略一个 $p$ 内的换行和空格
通过在 $h$ 中写入以下代码可以令标题居中

<h1 align="center">This is heading 1</h1>

$<hr\ />$ 表示分割线，也叫水平线。可以独立于 $p$ 外单独使用
$<! - -$ 和 $- - >$ 这两个东西中间包含的会被认为是注释，不会被显示。

文本格式化

<html>
    <body>
        <b>加粗</b>
        <br />
        <strong>还是加粗</strong>
        <br />
        <big>变大</big>
        <br />
        <small>变小</small>
        <br />
        <i>斜体</i>
        <br />
        <em>强调（其实还是斜体）</em>
        <br />
        这是一句话
        <sub>下侧注释</sub>
        <br />
        这还是一句话
        <sup>上侧注释</sup>
        <br />
    </body>
</html>

效果：
在这里插入图片描述

格式文本

$< p r e >$ 叫做预格式文本，会保留所有的空格和回车，所以 $< p r e >$ 很适合写代码，用法相当于 $p$

当然，对于代码我们有专门的部分， $c o d e, v a r, t t, k b d, s a m p$ 都可以用来保存代码

我们用 $a d d r e s s$ 来注明这篇 $h t m l$ 的地址，用如下语句来设置链接：

<a href = "www.xxxxx.xx">网址</a>

我们在 $b o d y$ 的后方，紧跟 $b g c o l o r =$ 就可以设置背景颜色，如下所示：

<body bgcolor="red"></body>

这样可以实现缩写

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

用 $b d o$ 可以控制方向：

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

$b l o c k q u o t e$ 和 $q$ 分别实现长短引用。
$d e l$ 和 $i n s$ 分别实现删除和下划线

关于背景颜色和标题居中，其实就是给我们的元素增加属性。
属性在开始标签中定义。
给予属性赋值的叫做标签

$H t m l$ 中的元素采用 $16$ 进制的 $R G B$ 值定义。

JZYshuraK

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html学习摘记Part1

html学习摘记Hello World每一个伟大的程序员都是从Hello WorldHello\ WorldHello World开始的，学习一门新语言当然也要从Hello WorldHello\ WorldHello World入门。<html> <head> <title>This is a website</title> </head> <body&g
复制链接

扫一扫

专栏目录