• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

HTML入门笔记一基础篇

武飞扬头像
星辰♚
帮助1

文章参考:菜鸟教程
内容部分借鉴该博主:轻松玩编程
前言:“所有目标都是黑暗的,只有行动才与光明相伴!当你停下脚步的时候,不要忘了别人还在奔跑。”
你好,我是星辰,期待与你相遇,和我一起进入HTML的世界吧!

学新通

01.HTML概述

1.知识的引入:

关于浏览器系统的结构:

B/S架构:
Browser/Server(浏览器/服务器的交互形式)

Browser支持哪些语言:HTML CSS JavaScript

写HTML CSS JavaScript代码的叫做:WEB前端开发工程师。

前端的图片需要UI设计师完成。

S是服务器端Server,Server端的语言有很多:如c/c ,Java,python…等等。

B/s架构的系统有什么优缺点?
优点:升级方便,只升级服务器端代码即可。维护成本低。
缺点:速度慢,体验差,界面不炫酷,无法运行大型游戏。(否则卡死)
企业内部的解决方案都是采用B/S的系统,因为办公不需要炫酷,只要能做数据的增删改查即可。并且维护成本低。

如:京东、腾讯视频、百度等

C/S架构

服务器-客户机,即Client-Server(C/S)结构。C/S结构通常采取两层结构。服务器负责数据的管理,客户机负责完成与用户的交互任务。
缺点:升级麻烦,维护成本较高。
优点:速度快,体验好,界面炫酷。(娱乐性的系统多数是C/S架构)
如:各种app。

2.什么是HTML?

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式,用以显示文本及与文本之间相关的内容。

HTML不是一种编程语言,而是一种标记语言(markup language)

标记语言是一套标记标签(markup tag)

HTML使用标记标签来描述网页

标签往往都是成对儿出现的,每个标签都有开始标签和结束标签。

  <标签>
    <标签>
     <标签 属性名=“属性值”属性名=“属性值”>
	 </标签>
  	</标签>
   </标签>

HTML是由W3C世界万维网联盟制订的协议:HTML/XML/http协议/https协议W3C制定了HTML的规范,每个浏览器厂家都会遵守。

HTML目前最高版本:HTML5.0,简称H5

02.HTML编辑器

目前HTML编辑器可以说是种类繁多,仅推荐几个我用过的编辑器吧。

记事本

不多说,Windows自带神器万物皆可记事本。可直接运行无需安装,简洁、实用

VS Code

Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器,编辑器中内置了扩展程序管理的功能。

官方网站:http://www.sublimetext.com/

Notepad

Notepad 是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。Notepad 是免费软件,可以免费使用,自带中文,支持众多计算机程序语言。

官方网站:https://notepad-plus-plus.org/

Sublime Text

Sublime Text 是一款具有代码高亮、支持语法提示、可以自动完成且反应速度快的编辑器,它的开发页面较为简单、使用者可以快速上手操作。相比于其他开发软件比如 Vim、Eclipse、VS 等较难上手的编辑器,Sublime Text 显得尤为简单。而与那些体积轻巧而且可以快速启动的编辑器如 Editplus、Notepad 来说也是突出的。

官方网站:http://www.sublimetext.com/

hBuilder X

我目前正在使用,体验非常好

HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能,清爽的界面,强大的功能和于一身。

官方网站:https://www.dcloud.io/hbuilderx.html

03.HTML实战

1.第一个HTML:

<!-- HTML的文件拓展名为:.html
1.HTML的注释 :<!-- 这是单行注释 -->
<!--2.HTML不区分大小写,语法松散
 -->
<!DOCTYPE html><!-- 根, -->
<html lang="zh"><!-- 头 -->
<head>
	<meta charset="UTF-8"> <!-- 声明文件的字符集类型为“UTF-8” -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- 这里是网页标题内容 -->
	<title>星辰,你好!</title>   
</head>
     <!-- 网页的主体内容 -->
<body>
	欢迎来到HTML!
</body>
</html>
学新通

2.基本标签

1、body标签

网页身体标签,所有网页内容都在里面,存放各种标签

2、div盒子模型

一般划分一个个区域,构建骨架

3、p文本段落标签

为文本段落标签,可存放大段落文字

4、 h1~h6标题标签

  • h1到h6级别逐渐减小
  • 书写规范,一个页面只允许出现一个h1(一级标题标签),若重复出现网页会分不清主次内容,就像一篇作文只能有一个作文题目一样。

5、b标签和strong标签(文字加粗标签)

都是用于加粗文字的。二者区别是:

strong标签是为了突出重点

6、 span文字包裹标签

  • 包裹文字的标签。
  • p标签和span标签的区别是:p标签会自动换行,而span标签不会自动换行。一般短的语句可以用span标签包裹。长点的用p标签包裹。

7、 br换行标签和hr分隔符标签

  • br标签和hr标签都是单标签
  • br标签是换行标签
  • hr标签是分隔符标签(水平分割线)

8、 i标签和em标签

  • 二者都是斜体标签,使文字呈现效果
  • 二者区别:em标签更容易被浏览器识别到

9、del删除标签

一般用于价格删除线

10、center居中标签

使文本居中

11、 sup上标和sub下标

标签的内容将会在当前字符高度的一半为基准线的下/上方,字体大小会小一点。

12、 pre预格式化标签

被包围在pre标签中的文本通常会保留空格和换行符,而文本也会呈现出等宽字体。

上述标签使用方法及代码展示:

 <body>
    <!-- 这是身体标签,网页的正文内容 -->

   <div class="div1">
        <!--这是一个盒子标签-->
        <p>我是段落文本p标签</p >
        <h1>我是一级标题标签</h1>
        <h2>我是二级标题标签</h2>
        <h3>我是三级标题标签</h3>
        <h4>我是四级标题标签</h4>
        <h5>我是五级标题标签</h5>
        <h6>我是六级标题标签</h6>
    </div>
    <hr>

    <div class="div2">
       <!--这也是一个盒子标签-->

        <!-- 区别是p会自动换行,而span不会自动换行,共用一行 -->
        <p>你好</p >
        <p>我爱前端</p >
        <p>好好学习</p >
        <hr>
        <!--分隔符-->
        <span>你好</span>
        <span>我爱前端</span>
        <span>好好学习</span>
        <br>
        <span>我被br强制换行了</span>
    </div>
    <hr>

    <div class="div3">
        <!--这还是一个盒子标签-->
        <p>我是正常的p</p >
        <p><i>我是被斜体i定义后的p</i></p >
       <p><em>我是被斜体em定义后的p,我更容易被浏览器识别</em></p >
    </div>
    <hr>

    <div class="div4">
        <span>现价:¥99
            <del>原价:¥399</del>
            <!--这是删除符-->
            <center>我是居中对齐</center>
            H<sub>2</sub>O
            CO<sup>2</sup>

        </span>
    </div>
    <hr>

    <div class="5">
        <p>
            你好 我是星辰
            我爱学前端
            我的空格和换行没有被p保留
        </p >

        <pre>
            你好   我是星辰
            我爱学前端
            我是被pre保留了空格和换行
        </pre>
    </div>
  </body>
学新通

呈现效果:
学新通

写在最后:

在下决心以前,犹豫也许是必要的。然而,一旦下了决心,就应该一直往前走。

每当你想放弃的时候,想一想是什么支撑着你一路坚持✨✨✨

结语

  • HTML 、css、JavaScript组成了我们现在看到的互联网世界,炫酷的效果。
  • 大道至简,化繁为简是许多标准、规范、框架的终极目标。HTML5很好的诠释了这一点,
  • HTML标签何其多,一篇文章怎么写的下,路漫漫其修远兮,唯上下求索不断前行,学无止境!

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhbcgaj
系列文章
更多 icon
同类精品
更多 icon
继续加载