HTML基础总结【1】

爱好是吃的蓝胖

已于 2022-03-02 12:56:56 修改

阅读量150

点赞数

分类专栏： html基础总结文章标签： html 前端

于 2022-03-02 12:53:57 首次发布

本文链接：https://blog.csdn.net/m0_61044901/article/details/123224439

版权

html基础总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.什么是HTML？

HTML--超文本标记语言。

超文本--超越文本格式，可以显示图片,视频，音频数据。

超越空间

标记--标签--使用html的时候实际上就是他4提供的标记，可以表示我们的元素

我们学习的重点就是这些常用的标记

2.HTML的作用？

制作网页----软件界面

3.常见的HTML的开发工具

1.记事本

步骤1:在指定的位置下创建一个新的记事本文件
   步骤2:打开记事本文件编辑html代码
   步骤3:保存，修改记事本文件名称[后缀名{.html / .htm}]
   步骤4:在浏览器中运行
   效率低下【不建议使用】

2.常用的html编辑工具

Notepad++：http://www.html.cn/tool/edit/2.html
Sublime Text：http://www.html.cn/tool/edit/6.html
WebStorm:https://www.html.cn/tool/edit/8.html
HBuilderX: https://www.dcloud.io/hbuilderx.html
VS Code：https://code.visualstudio.com/
工作中HBuilderX / VS Code 比较常用

3.使用HBuilderX
   HBuilderX: https://www.dcloud.io/hbuilderx.html
   “HBuilderX.2.9.3.20201014.zip”
   安装--指定目录下解压缩就可以啦
   创建html文件---文件---新建---html文件
修改文件名称，注意不要删除.html后缀名
   选择文件保存位置创建文件完成

<!DOCTYPE html>

<html>

<head>

<title>HBuilderX</title>

</head>

<body>

<h1>使用HBuilderX编辑HTML</h1>

</body>

</html>

运行--运行到浏览器--选择自己的浏览器

修改html文件的字体大小【Ctrl+Shift+[+]---放大字体；Ctrl+Shift+[-]---缩小字体】

4.使用VS Code
   VS Code：https://code.visualstudio.com/
   "VSCodeUserSetup-x64-1.56.2.exe"
   开始---控制面板---程序和功能--VSCodeUser--选中---右键---卸载
   安装
   在指定目录下新建一个文件夹，保存安装好的文件
   双击运行VSCodeUserSetup-x64-1.56.2.exe，修改安装路径
   创建文件
       文件--新建文件---Ctrl+S【保存】
       修改文件保存路径
       文件名:xxxx.html
       修改文件类型: HTML
   保存
   编辑代码

<!DOCTYPE html>

<html>

<head>

<title>VSCode</tltie>

</head>

<body>

<h1>使用VSCode编辑html</h1>

</body>

</html>

运行---选中当前文件---右键---opent in default Browser

问题1:我们安装好的VS Code有时可能在运行的时候找不到Open in Default Browser选项，这是怎么办？
首先点击扩展（也就是四个小方格），在搜索栏内输入 Open。
下载安装open in browser，点击 install,就可以了。

问题2:操作菜单是英文，如何汉化？
首先点击扩展（也就是四个小方格），在搜索栏内输入 Chinese。
下载安装简体中文，点击 install ，在右下方会出现 restart 点击就好。

4.浏览器

1.Trident 内核：代表产品为 Internet Explorer，又称其为 IE 内核。Trident（又称为 MSHTML），是微软开发的一种排版引擎。使用 Trident 渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯 TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser 和 KKman 等。
2.Gecko 内核：代表作品为 Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器Firefox、Netscape6 至 9。
3.WebKit 内核：代表作品有 Safari、Chrome。WebKit 是一个开源项目，包含了来自 KDE 项目和苹果公司的一些组件，主要用于 Mac OS 系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。
4.Presto 内核：代表作品 Opera。Presto 是由 Opera Software 开发的浏览器排版引擎，供 Opera 7.0 及以上使用。它取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎，包括加入动态功能，例如网页或其部分可随着 DOM 及 Script 语法的事件而重新排版。

不同的浏览器可能因为采用的内核不同，网页也会呈现出不同的效果。

5.html的文件结构

<!DOCTYPE html>

<html>

<head>

<tiltlr>HBuilderX</title>

</head>

<body>

<h1>使用HBuilderX编辑HTML</h1>

</body>

</html>

通过上面的代码，我们可以了解到一个HTML网页有2个部分组成;

<html></html>----就相当于整个网页

<head></head>----网页的开头，头部

<body></body>----网页的框架，身体

6.html中的常用标记

html是超文本标记语言，所以它提供了制作网页的一组标记

1.标记不能自我发明创建
2.绝大部分的标记都是有三部组成:

<title>HBuilderX</title>

<title>---开始标记
</title>-----结束标记
HBuilderX--位于开始标记与结束标记之间---文本内容

3.也有一些单标记【只有开头，没有文本内容和结束标记】

eg：<br>或者<br/> <meta charset="utf-8">

1.<!DOCTYPE html>

<!DOCTYPE html>----html声明[html5版本]

【用来告知 Web 浏览器页面使用了哪种 HTML 版本】

<!DOCTYPE html>---是html5版本声明

doctype 声明是不区分大小写的，以下方式均可:<!DOCTYPE html> / <!DOCTYPE HTML> / <!doctype html> / <!Doctype Html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> ---- 是html4.01版本声明

2.<html></html>----双标记，整个网页，最大的。其他的标记都要被包含进来。

3.<head></head>----双标记，网页头部部分。

4,<title></title>----设置当前网页的标题

5.<body></body>----网页身体部分,是我们制作网页的主要操作区域，因为body中的元素是对用户可见的。

6.<h1></h1>----网页中内容的标题标记。

7.<meta>介绍

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">










<title>meta标记</title>

</head>

<body>

<h3>meta标记---出现在head里面，meta标记为浏览器运行html文件提供附加信息的主要标记</h3>
<h3>meta标记---是一个单标记</h3>
<h3>meta标记中的charset="utf-8"是这个标记的一个属性</h3>
</body>

</html>

8.网页中内容的标题标记

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>h系列的标记</title>
   </head>
   <body>
       <h3>标题的设置--head中的title标记,设置的是当前网页的标题</h3>
       <h3>标题的设置--h系列的标题,设置内容的标题</h3>
       <h3>内容的标题共有6个从h1~h6</h3>
       <h3>h1设置的标题字体最大,h6设置的标题字体最小,自动加粗</h3>
       <h3>这一类标记会自动换行，自成一体</h3>
       <h1>设置内容的标题</h1><h2>设置内容的标题</h2><h3>设置内容的标题</h3>
       <h4>设置内容的标题</h4><h5>设置内容的标题</h5><h6>设置内容的标题</h6>
   </body>
</html>

9.hr--设置一条水平分割线

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>标记</title>
   </head>
   <body>
       <h1>hr标记--设置一条水平分割线</h1>
       <hr color="blue" size="7" width="400" align="left">
       <h1>color--设置分割线的颜色</h1>
       <h1>size--设置分割线的粗细</h1>
       <h1>width--设置分割线的长短</h1>
       <h1>align--设置分割线的水平对齐方式【left/center/right】</h1>
   </body>
</html>

10.p--表示一个段落标记

主要用来在网页中显示一段文本

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>p--标记</title>
   </head>
   <body>
       
       
       <p>各班的甲菜只是在小脸盆里盛一点，看来吃得起肉菜的学生没有几个。丙菜也用小脸盆盛一点，说明吃这种下等伙食的人也没有多少。只有乙菜各班都用烧瓷大脚盆盛着，海海漫漫的，显然大部分人都吃这种既不奢侈也不寒酸的菜。主食也分三等：白面馍，玉米面馍，高粱面馍；白、黄、黑，颜色就表明了一种差别；学生们戏称欧洲、亚洲、非洲
       </p>
       <h5>内容简介</h5>
   </body>
</html>

11. HTML 注释

注释是用来标注，解释说明html代码的含义。
   方便别人/以后的自己阅读，看懂代码。
   注释的内容不会被执行。

爱好是吃的蓝胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础总结【1】

1.什么是HTML？HTML--超文本标记语言。超文本--超越文本格式，可以显示图片,视频，音频数据。超越空间标记--标签--使用html的时候实际上就是他4提供的标记，可以表示我们的元素<table> <img>我们学习的重点就是这些常用的标记2.HTML的作用？制作网页----软件界面3.常见的HTML的开发工具1.记事本步骤1:在指定的位置下创建一个新的记事本文件步骤2:打开记事本文件编辑html代码步骤3:保存，...
复制链接

扫一扫