HTML基础-第一部分

最新推荐文章于 2024-11-11 17:28:03 发布

PaulTop1

最新推荐文章于 2024-11-11 17:28:03 发布

阅读量330

点赞数

分类专栏： html 文章标签： html 基础架构

本文链接：https://blog.csdn.net/a754635145/article/details/78325014

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今日课程导航：

今日课程导航

前言：这是为第一天更技术博客，最近我们也在学Web站点设计课程，其中之一涉及到HTML网页的基础部分，希望把我自己所学，分享给大家。(#^.^#)

1 HTML基础架构

（1）什么是HTML？

（1） HTML是一种超文本标记语言（Hyper Text Markup Language）由一套标记标签（文本、文字、列表、超链接等）因此HTML不是编程语言。
（2）HTML是用来描述网页的一种语言。
（3）HTML使用标记标签来表述语言。
（4）HTML文档也叫做web页面

（2）HTML标记长什么样？
HTML标记也通常叫做HTML标签（HTML tag）

<标签>内容


><title>HTML基础</title>

由上述例子可知：
- HTML标签由尖括号包围的关键词
- HTML标签通常是成对出现的。比如和，第一个叫做开始标签，第二个叫做结束标签。
（3）HTML元素是啥勒！
“HTML 标签” and “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:

<p>This is a paragraph.</p>

（4）HTML文档？网页？

HTML描述网页也称为网页
HTML文档包含HTML标签和纯文本即是由HTML元素组成
Web浏览器的作用是读取HTML文档，并以网页的形式显示HTML文档，浏览器不会显示标签，标签自身来解释页面的格式内容。

相信小伙伴们迫不及待想看HTML文档是什么面目了吧，接下来一个小小的例子，见识庐山正面目。

<!--DOCTYPE 声明了文档类型-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是我的第一个HTML文档</title>
</head>
<body>
        <h1>欢迎你来学习HTML基础课程</h1>
        <p>我也可以试试哦</p>
</body>
</html>

HTML文档

文档内容解析

！DOCTYPE html  声明了文档类型。一般来说这里是固定不变的。

 <html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

<title></title>这是网页的标题部分

<html lang ="en">告诉浏览器界面使用的语言 en-English
<title></title>定义文档的标题，即搜索引擎中页面的标题

大家可以动手试试哦！！

差点忘了大家可能还不知道开发工具，编写HTML语言有许多高效工具，在这里简单为大家介绍几款。
在介绍完基础之后，为大家详细的介绍软件的情况。

notepad++:这个百度一下就能找到
记事本：windows自带的，一般开发时比较繁杂
webstorm 百度下载或者我可以分享给大家，这也是我比较常用的一款开发工具。
Dreamweaver：这是一款明星前端开发软件，但是我还没用过。

（5）HTML（meta）元素
meta:元数据是关于数据的信息，不会显示在网页里。

标签始终位于head元素内
charset属性描述文档的语言，一般选用UTF-8

2 文字与段落标记

（1）标题字H

HTML 标题（Heading）

<h1> -<h6> 标签来定义
标题字的属性：对齐属性align
align=”left”/”right”/”center”

格式：<h align =""></h>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题字</title>
</head>
<body>
    <h1 align="center">告白气球</h1>
    <h2 align="left">赛乃河畔，左岸的咖啡</h2>
    <h3 align="left">我手一杯 品尝你的美</h3>
    <h4 align="right">亲爱的 爱上你 从那天起</h4>
    <h5 align="right">拥有你就拥有全世界</h5>
    <h6 align="center">甜蜜的很轻易</h6>
</body>
</html>

（2）文本基本标记

文本基本标记即字体font

> 字体属性：face
格式：

<font face="">内容</font>

> 字号属性：size
格式：

<font size="">内容</font>

> 字号颜色：color
格式：

<font color="">内容</font>

案例介绍：

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本基本标记</title>
</head>
<body>
<font face="微软雅黑">微软雅黑的字体</font>
<!--br是换行符-->
    <br>
    <font size="10px">字体的大小</font>
    <br>
    <font color="blue">我是字体颜色</font>
<!--字体基本标记属性的综合应用-->
    <br>
    <font
            face="微软雅黑" size="5px" color="#a9a9a9">
        我是5px灰色微软雅黑的字体
    </font>
</body>
</html>

微软雅黑的字体

字体的大小

我是字体颜色

（3）文本格式化标记

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本基本标记</title>
</head>
<body>
                <!--p为段落标记-->
    <p> <b ><font size="10px">浮夸</font></b></p>

     <p><i>你当我是浮夸吧</i></p>

    <p><em>夸张只因为我很怕</em></p>

    <p><small>似木头似石头的话</small></p>

    <p><strong>得到注意吗</strong></p>

    <p><del>>其实怕被忘记</del></p>

    <p><ins>至放大来演吧</ins></p>

</body>
</html>

浮夸

你当我是浮夸吧

夸张只因为我很怕

似木头似石头的话

得到注意吗

~~>其实怕被忘记~~

至放大来演吧

（4）段落标记

段落标记p 可以将HTML文档分割为若干段落。

- 格式:

<p></p>

换行标记br
-格式：

<br>

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本基本标记</title>
</head>
<body>

<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这个段落没有演示分行的效果</p>
<p>这个<br>段落<br>演示了分行的效果</p>
</body>
</html>

这是第一个段落

这是第二个段落

这个段落没有演示分行的效果

这个
段落
演示了分行的效果

（5）水平线hr
- 添加水平线
- 属性:

高度：width
宽度：size
水平线去掉阴影:noshade
水平线颜色:color
水平线排列:align

**讲完了文字与段落标记，我们来演练一个综合应用吧。
案例代码如下：可以按照代码来动手演示哦！**

代码如下：

<html>
    <head>
        <meta charset = "UTF-8">
        <title>  文字与段落标记</title>
    </head>

<!--标题字标记-->
    <!--标题字对齐属性align-->
      <!--left.center.right-->
    <h1>一级标题</h1>
    <h2 align = "left">二级标题</h2>
    <h3 align  ="center">一级标题</h3>
    <h4 align = "right">一级标题</h4>
    <h5>一级标题</h5>
    <h6>一级标题</h6>
    <br>
    <br>
    <!--<文字基本标记font-->
    <!--字体属性face-->
    <!--字号属性size-->
    <!--颜色属性color-->
    <p><font face ="宋体" size = "100" color ="red"> 有缘路上左手牵右手</font></p>
    <p><font face="楷体" size  = "80" color = "blue">温柔的说晚安</font></p>
    <p><font face="黑体" size  ="60"  color = "yellow">晚安宝贝</font></p>

    <br>
    <br>
    <br>
    <!--文本格式化标记-->
    <!--粗体标记b,strong-->
    <!--斜体标记i cite em-->
    <!--上标的标记sup-->
    <!--下标的标记sub-->
    <!--下划线u-->
        <center>
            <small><p><b>加粗文字1</b></p></small>
        <big><p><strong> 加粗文字2</strong></p></big>
        <big>
        <p><i>斜体文字</i></p>
        <p><em>你是不是斜体</em></p>
        <p><cite>我是斜体</cite></p>
        </big>
            <p><u>下划线字体</u></p>
        </center>
            <br>
            <br>
    <!--段落标记p-->
    <!--换行标记br-->
    <!--水平线标记hr-->
          <!--宽度width-->
        <!--高度size-->
        <!--去掉阴影noshade-->
            <p align = "center">动物世界</p>
            <hr  align ="center"
                 width = "500"
                 size  = "3"
                 noshade
                 color  = "red">
                东打一下西戳一下
                动物未必需要尖牙
                示爱的方法有礼貌或是我管它
                要将情人一口吞下
                还要显得温文尔雅
                螳螂委屈的展示旧伤疤
                求偶时候一惊一乍
                因为害怕时常倒挂
                走投无路的情况下舍弃了尾巴
                如果不能将它同化就寄生于它
                大不了一同腐化
                努力进化 笑动物世界都太假
                祖先 已磨去爪牙
                相爱相杀 一定有更好的办法
                攀比一下 谁先跪下
                不再进化 动物世界里都太傻
                为情表现到浮夸
                得到了你就该丢下
                人性来不及粉刷
                所以啊 人总患孤寡
                麋鹿本来约在树下
                说好一起浪迹天涯
        </body>
</html>