#1 什么是HTML CSS ？写一个基本的HTML网页原来很简单！

最新推荐文章于 2024-05-05 07:41:03 发布

Rainbow-彩虹桥

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量155

点赞数 1

分类专栏： Web前端基础知识文章标签： vscode html html5

本文链接：https://blog.csdn.net/m0_51553630/article/details/120187561

版权

Web前端基础知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、HTML 超文本标记语言

hyper text markup language 、简写HTML 。中文翻译为：超文本标记语言。它不是动态的编程语言，就是一系列用于表示浏览器页面，也就是web的静态标签语言。包括浏览器中的文字，图片，表格，等一系列用于人机交互的页面样式的表示。

二、什么是超文本标记语言？

在如今的移动端和PC端的时代，浏览网页的行为无时不在，比如说：查期末的考试成绩。（虽然心里由有预期，但是挂科的数目总是大于心里预期! 悲惨啊！！！）。Web浏览器用于读取HTML文件，将其作为网页显示。HTML标记语言使用一套标记标签来描述网页。标签由尖括号来表示，且成对的出现，分为开始标签 < > 和结束标签 </ >。

三、一个基本网页的最简单组成

以下几行代码是一个网页最基本的架构组成标记语言！详细的请看第三标题的基本页面HTML代码内容展示。

<! Doctype html>
<html>
<!-- 头部元素-->
	<head>
		<title> 这里写HTML文档的标题<title>
	</head>
	<body>
	<!--可见页面内容-->
		<p> 这是一段页面文字的内容 </p>
	</body>
</html>

三、基本页面HTML代码展示

在 VS code (写代码的集成开发环境) 中打开代码运行一个简单的网页！！没有vs code 的同学，可以在微软APP store官方应用商店搜索下载。新建一个HTML文件，并按Ctrl + F1 运行下面代码，就可以在电脑上安装的浏览器中看到页面，这就是一个基本的网页。

<!--测试HTML语言 页面显示基础-->
<!doctype html>
<html>
    <head> <!-- head 元素包含了所有有头部元素标签,可插入<tittle><style> <meta> <base> <link> <script>-->
        <meta charset="utf-8">
        <title> 测试页面标题 </title>
        <base href="https://www.simpaon.com/image/" target="_top">
        <meta name="simpson" content="hello html !">
        <style></style>
        <script></script>
        <!--script 定义了客户端的脚本文件，用JavaScript编写的程序 -->
        <!--style 定义了样式文件的引用的地址 -->
        <!--meta  定义了了HTML的基本元数据 -->
        <!--base 定义了基本链接地址和页面中的所有默认链接地址-->
        <!--link 定义了页面文档与外部的资源之间的关系 ，常用于链接到样式表 -->
    </head>
    <body>
<!-- h1 到 h5 来表示标题标签-->
        <h1> H1大标题 </h1>
        <hr>
        <h2> h2级标签</h2> 
        <hr>
        <h3> h3级标签</h3>
        <hr>
        <h4> h4级标签</h4>
        <hr>
        <h5> h5级标签</h5>
        <hr />
        <h6> h6级标签</h6>
<!--段落 及换行标签-->
        <p> 段落 </p>
        <p> 另一个段落,br 进行换行操作 <br> 这是下一行内容</p>
        <b> 春晓 </b>
        <p> 春眠不觉晓 <br> 处处闻啼鸟 <br> 夜来风雨声 <br> 花落知多少</p>
<!--格式化标签 改变文本的字体样式-->
        <strong> 加粗的字体</strong>  <br />
        <sup>  上标</sup>  <br />
        <small>  缩小的字体</small> <br />
         <sub> 下标</sub>
         <br />
<!--预格式文本 pre--> 
        <pre>预格式文本的段落用标签 pre  空格 
回车换行  任意安排文本的样式 </pre> 
<!--计算机输出标签-->
        <code>计算机输出标签</code>
        <br />
        <kbd>键盘输入</kbd>
        <br />
        <t>打字机文本</t>
        <br />
        <var>计算机变量</var>
<!--地址-->
        <address> writen by <a href="www.simpsonRainbow.con">simpsonRainbow</a> </address>
        <p>href 属性指定链接地址</p>
        <hr />
<!-- 缩写和首字母缩写-->
        <abbr title="simpsonRainbow"> sim. </abbr>
        <br />

<!--块引用 <q>引用的块 被加了“ ” 双引号！-->
        <p> life  is: <q>a beautful things  </q>you should cherise it! </p> 
        <br />
<!--删除字和插入字的示例-->
        <p> life is happy,work is <del>hard </del><ins>easy!</ins> </p>        

<!--链接标签 -->
        <a href="https://www.baidu.com"> baidu首页</a>
        <hr />
        <p>
<!-- 插入图片的HTML标签-->
        <img src="/images/前端学习路线.png" width="200" height="200">
        </p><hr/>
<!-- 当前连接到指定的id位置:可以给链接编辑id 号，用链接标签 <a 的href 属性找到对应id号码所在的位置-->         
        <p>  <a href="#c4"> 查看章节 4  </a> </p>
        <h1>章节一</h1> <br>
        <p>章节一的内容如下：</p>
        <h1>章节二</h1> <br>
        <p>章节二的内容如下：</p>
        <h1>章节三</h1> <br>
        <p>章节三的内容如下：</p>
         <h2><a id="c4"> 章节四</a> </h2>  <br>
         <p>章节四的内容如下：</p>
         <h1>章节五</h1> <br>
         <p>章节五的内容如下：</p>
<!--链接 返回，跳到别的页面-->
        <p> 回到百度首页！！</p>
        <img src="images/点击运行.png">
        <a href="https://www.baidu.com" target="_top"> 返回百度首页 </a>

    </body>
</html>

四、什么是CSS ? 让世界充满色彩的样式

CSS ，cascading style sheets 层叠样式表，用于渲染HTML元素标签的样式，就是让页面变得有色彩，漂亮，观赏性强。
CSS 一般通过一下三种方式来添加到HTML中：
一：内联样式：使用style 属性。
二、内部样式表：在HTML文档头部 < head> 区域使用 < style> 元素来包含CSS。
三、外部引用样式表：使用< link > 来使用CSS 文件，这是最好的使用样式方式。
来看看加入CSS 后的页面变成什么样子了？？？对比之前的代码，你发现了什么。是哪里发生了区别呢？

<!--测试HTML语言 页面显示基础-->
<!doctype html>
<html>
    <head> <!-- head 元素包含了所有有头部元素标签,可插入<tittle><style> <meta> <base> <link> <script>-->
        <meta charset="utf-8">
        <title> 测试页面标题 </title>
        <base href="https://www.simpaon.com/image/" target="_top">
        <meta name="simpson" content="hello html !">
        <style></style>
        <script></script>
        <!--script 定义了客户端的脚本文件，用JavaScript编写的程序 -->
        <!--style 定义了样式文件的引用的地址 -->
        <!--meta  定义了了HTML的基本元数据 -->
        <!--base 定义了基本链接地址和页面中的所有默认链接地址-->
        <!--link 定义了页面文档与外部的资源之间的关系 ，常用于链接到样式表 -->
    </head>
    <body style="background-color:blanchedalmond;">
<!-- h1 到 h5 来表示标题标签-->
        <h1 style="font-family:'Courier New', Courier, monospace; color:red"> H1大标题 </h1>
        <hr>
        <h2 style="color: blue;"> h2级标签</h2> 
        <hr>
        <h3> h3级标签</h3>
        <hr>
        <h4> h4级标签</h4>
        <hr>
        <h5> h5级标签</h5>
        <hr />
        <h6> h6级标签</h6>
<!--段落 及换行标签-->
        <p> 段落 </p>
        <p> 另一个段落,br 进行换行操作 <br> 这是下一行内容</p>
        <b> 春晓 </b>
        <p style="font-size: 20xp; color: blueviolet;"> 春眠不觉晓 <br> 处处闻啼鸟 <br> 夜来风雨声 <br> 花落知多少</p>
<!--格式化标签 改变文本的字体样式-->
        <strong> 加粗的字体</strong>  <br />
        <sup>  上标</sup>  <br />
        <small>  缩小的字体</small> <br />
         <sub> 下标</sub>
         <br />
<!--预格式文本 pre--> 
        <pre style="color: darkgreen;">预格式文本的段落用标签 pre  空格 
回车换行  任意安排文本的样式 </pre> 
<!--计算机输出标签-->
        <code>计算机输出标签</code>
        <br />
        <kbd>键盘输入</kbd>
        <br />
        <t>打字机文本</t>
        <br />
        <var>计算机变量</var>
<!--地址-->
        <address> writen by <a href="www.simpsonRainbow.con">simpsonRainbow</a> </address>
        <p>href 属性指定链接地址</p>
        <hr />
<!-- 缩写和首字母缩写-->
        <abbr title="simpsonRainbow"> sim. </abbr>
        <br />

<!--块引用 <q>引用的块 被加了“ ” 双引号！-->
        <p> life  is: <q>a beautful things  </q>you should cherise it! </p> 
        <br />
<!--删除字和插入字的示例-->
        <p> life is happy,work is <del>hard </del><ins>easy!</ins> </p>        

<!--链接标签 -->
        <a href="https://www.baidu.com"> baidu首页</a>
        <hr />
        <p>
<!-- 插入图片的HTML标签-->
        <img src="/images/前端学习路线.png" width="200" height="200">
        </p><hr/>
<!-- 当前连接到指定的id位置:可以给链接编辑id 号，用链接标签 <a 的href 属性找到对应id号码所在的位置-->         
        <p>  <a href="#c4" style="color: brown;">  查看章节 4  </a> </p>
        <h1>章节一</h1> <br>
        <p>章节一的内容如下：</p>
        <h1>章节二</h1> <br>
        <p>章节二的内容如下：</p>
        <h1>章节三</h1> <br>
        <p>章节三的内容如下：</p>
         <h2><a id="c4"> 章节四</a> </h2>  <br>
         <p>章节四的内容如下：</p>
         <h1>章节五</h1> <br>
         <p>章节五的内容如下：</p>
<!--链接 返回，跳到别的页面-->
        <p style="font-size: large; color: lime;"> 回到百度首页！！</p>
        <img src="images/点击运行.png">
        <a style="font-size: large; color: lime;" href="https://www.baidu.com" target="_top"> 返回百度首页 </a>

    </body>
</html>

运行上面的代码，你会发现这才是一个正常的有色彩和文本样式的页面！

Rainbow-彩虹桥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
#1 什么是HTML CSS ？写一个基本的HTML网页原来很简单！

目录一、HTML 超文本标记语言二、什么是超文本标记语言？三、一个基本网页的最简单组成三、基本页面HTML代码展示一、HTML 超文本标记语言hyper text markup language 、简写HTML 。中文翻译为：超文本标记语言。它不是动态的编程语言，就是一系列用于表示浏览器页面，也就是web的静态标签语言。包括浏览器中的文字，图片，表格，等一系列用于人机交互的页面样式的表示。二、什么是超文本标记语言？在如今的移动端和PC端的时代，浏览网页的行为无时不在，比如说：查期末的考试成绩。
复制链接

扫一扫