HTML自我学习笔记简易理解


前言

提示:本文章关于自己对HTML的简易理解希望小白方便理解,


提示:以下是本篇文章正文内容,下面案例可供参考

一、HTML是什么?

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

二、如何编写HTML

1.使用记事本

1首先在桌面创建一个.txt文本文件(名字随你写)

我
2.把文件后缀名改为.hmtl
3.打开此文件

2.使用工具

1.对代码不太熟悉手写代码使用Editplus
链接:https://pan.baidu.com/s/1qpLZq_SE8myG6upury3EKA
提取码:zdsf
2.有代码提示还有很多插件用着非常的方便和舒服使用vscode
下载官网:https://code.visualstudio.com/

3.浏览器

1.chrome(谷歌)
2.ie(微软)
3.Firefox(火狐)
这边你可以选择都下载因为可能你会用到,经常用的应该还是谷歌浏览器。

三、HTML文档基本结构

1.网页的组成

1.html+css+javascript(JS)
2 .虽然说可能有点抽象但是可以把这种结构比作一个人,html像是人体骨架,css像是外貌,js像人的各种行为。
3.HTML文档由HTML元素定义的
4.HTML标签构成HTML元素

2.代码结构

下面展示一些 内联代码片

//hmtl基本结构
<!DOCTYPE html>
<html>
     <head>
        <meta charset = "UTF-8">
         <title></title>
     </head>
          <body>
          这是我的第一个网页
          </body>
</html>

1.文档声明

全称是(Document Type HyperText Mark-up Language) HTML文档类型声明这是一个HTML5文档类型,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令,网页编写格式必须按照HTML5规范来编写。

2.hmtl标签

html标签告知浏览器这是一个 HTML 文档,html是文档的根元素。html文档包含标签和标签。

3.head标签

head标签用来定义网页的头部,它是头部元素的容器。head标签里可以写title标签、link标签、meta标签、script标签、style标签

4.body标签

body标签定义文档主体,body 元素包含文档的所有内容。写在body标签里面的内容都会呈现在网页上。

四、块元素和行内元素

1.块元素

常见的块元素有h1标签,p标签,table标签,ul标签。默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

1.h1~h6主题标签

标题很重要,浏览者可以通过标题快速浏览页面,搜索引擎使用你的标题为你的网页结构和内容编制索引,此标签最好用于标题不要只是为了加粗和大号字体使用。
下面展示一些 内联代码片

// h1~h6标签
<body>
    <h1>标题1</h1>
    <h2>标题1</h2>
    <h3>标题1</h3>
    <h4>标题1</h4>
    <h5>标题1</h5>
    <h6>标题1</h6>
</body>

2.p段落标签

元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。

下面展示一些 内联代码片

// p标签
<p>这是一个段落</p>;

3.ul和ol列表标签

ul无序列表,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
下面展示一些 内联代码片

// ui有序列表
<body>
  <ul>
      <li>dnm</li>
      <li>美滋滋</li>
      <li>A1高闪</li>
  </ul>
</body>

浏览器显示:
•dnm
•美滋滋
•A1高闪

ol有序列表,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
下面展示一些 内联代码片

// An highlighted block
<body>
  <ol>
      <li>dnm</li>
      <li>美滋滋</li>
      <li>A1高闪</li>
  </ol>
</body>

浏览器显示:
1.dnm
2.美滋滋
3.A1高闪

table表格标签

2.内联元素(行内元素)


版权声明:本文为qq_43325480原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。