HTML的基础

Zz1173

已于 2022-03-02 13:34:11 修改

阅读量262

点赞数

文章标签： html p2p linq

于 2022-03-02 13:28:22 首次发布

本文链接：https://blog.csdn.net/Zz1173/article/details/123212532

版权

1：什么是htm?

html------超文本标记语言

标记-----标签-----使用html的时候实际上就是使用它提供的标记，

可以表现我们需要的元素<table>表格 <img>图片

2：HTML的作用？

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

3：常见的html的开发工具

1：记事本

步骤1：在指定的文件夹里新建一个记事本

步骤2：打开记事本文件编辑html代码

步骤3：保存修改记事本文件后缀名 ctrl--s{.html}

步骤4:在浏览器中运行

效率低下不建议使用

4：常用的html编辑工具

Notepad++：Notepad++免费下载_2019最新 - html中文网

Sublime Text：Sublime Text免费下载_2019最新 - html中文网

WebStorm:https://www.html.cn/tool/edit/8.html

HBuilderX: HBuilderX-高效极客技巧

VS Code：Visual Studio Code - Code Editing. Redefined

5:使用HBuilderX

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>HBuilderX</title>
   </head>
   <body>
       <h1>使用HBuilderX编辑HTML</h1>
   </body>
</html>

运行--- 运行到浏览器----选择自己的浏览器
修改html文件的字体大小【Ctrl+Shift+[+]---放大字体 Ctrl+Shift+[-]---缩小字体】

6：使用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>
<meta charset="utf-8">
<title>VSCode</title>
</head>
<body>
<h1>使用VSCode编辑html</h1>
</body>
</html>

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

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

7：浏览器

浏览器是html的运行环境浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成。
   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 语法的事件而重新排版。
   不同的浏览器可能因为采用的内核不同，网页也会呈现出不同的效果。

8：html的文件结构

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>HBuilderX</title>
   </head>
   <body>
       <h1>使用HBuilderX编辑HTML</h1>
   </body>
</html>

<html></html>/ <head></head> / <title></title> / <body></body>

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

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

<head></head>-------网页头部部分

<body></body>-------网页身体部分

9：html中的常用标记

html是超文本标记语言，所以它提供了制作网页的一组标记
   1.标记不能自我发明创建
   2.绝大部分的标记都是有三部组成:
       <title>HBuilderX</title>
   <title>----开始标记
   </title>-----结束标记
   HBuilderX--位于开始标记与结束标记之间---文本内容
    3.也有一些单标记【只有开头，没有文本内容和结束标记】<br>或者<br/>
    <meta charset="utf-8">
4.<html></html>-----双标记，整个网页,做大的。其他的标记都要被包含进来。

5.head></head>----双标记，网页头部部分为浏览器运行html文件提供附加信息的。

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

10：<meta>介绍dib

<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>

11：网页中内容的标题标记

<!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>
12：hr--设置一条水平分割线

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

13：p--表示一个段落标记

主要用来在网页中显示一段文本
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>p标记</title>
   </head>
   <body>
       <h1>p标记---主要用来在网页中显示一段文本【会自动换行】</h1>
       <h1 align="center">平凡的世界</h1>
       <h5 align="right">作者:路遥</h5>
       <hr />
       <p>
           １９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
       </p>
       <h5>内容简介</h5>
   </body>
</html>

14： HTML 注释

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

Zz1173

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的基础

1：什么是htm?html------超文本标记语言标记-----标签-----使用html的时候实际上就是使用它提供的标记，可以表现我们需要的元素<table>表格 <img>图片2：HTML的作用？制作网页-----软件界面3：常见的html的开发工具1：记事本步骤1：在指定的文件夹里新建一个记事本步骤2：打开记事本文件编辑html代码步骤3：保存修改记事本文件 ctrl--s...
复制链接

扫一扫