HTML新人基础笔记总结加“思维导图”

3259392566

已于 2024-03-14 10:29:07 修改

阅读量878

点赞数 20

分类专栏： html 思维导图基础总结文章标签：笔记 html 前端框架

于 2024-03-08 09:54:27 首次发布

本文链接：https://blog.csdn.net/J3259392566/article/details/136552825

版权

基础总结同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

思维导图

16 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

备注：接下来你看到的都是干货~

一，首先来说什么是网页？

网站是指在因特网上根据一定的规则，使用html等制作的用于展示特定内容相关网页的集合。
网页是网站中的一“页”，通常是html格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片链接，文字，声音，视频等元素组成。通常我们看到的网页，常见以.html或.html后级结尾的文件，因此将其俗称为html文件

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是标签的含义，即这个标签是用来干嘛的。根据标签的语义，再合适的地方给一个最合适的标签，可以让页面结构更清晰。

二，什么是html？

HTML指的是超文本标记语言(Hyper Text，它是用来描述网页的一Markup Language)，种语言。
HTML不是一种编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签(markup tag)

三，网页是怎么形成的？

网页是由元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码------->浏览器显示代码(解析，渲染)-->生成最后的web页面

四，网页总结~

网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件(后缀名是html)
网页生成制作:有前端人员书写html文件，然后浏览器打开，就能看到网页。
html:超文本标记语言，用来制作网页的一门语言，有标签组成的，比如，图片标签链接标签，视频标签等。

1，基本语法的概述

1.html标签是由尖括号包围的关键词，例如.

2.html标签通常是成双成对出现的，例如。标签对<html>和</htmI>，我们称为双标签。中第一个标签是开始标签。第二标签是结束标签
3.有些特殊的标签必须是单个标签(极少情况)，例如<br/>我们称为单标签。

二、标签关系:

双标签关系可以分为两类:包含关系和并列关系。
包含关系(父子关系）

并列关系(兄弟关系）

<head>
    <title>我的第一个页面</title>
</head>
<body>  
</body>

<!DOCTYPE html>
<html lang="en">
<head><!-- 头部 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!-- 眼睛 -->
</head>
<body><!-- 身体 -->
    <!-- ait+b 运行 -->
    <!-- 1.内容加粗  2.独占一行  3.他是双标签 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>

2，标题标签<h1>-<h6>(重要)：

为了使网页更具有语义化，我们经常会在页面中用到标题标签，html提供了6个重要的网页标题，即h1-h6

单词head的缩写，意为头部、标题。标签语义:作为标题使用，并依据重要性递增。
特点:
1.加了标题的文字会变得加粗，!字号也会依次变大。
2.一个标题独占一行

3，段落和换行标签(重要）

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示，在html标签中，<p>标签用于定义段落，他可以将整个网页分成若干个段落。

标签语义:可以把html文档分割为若干个段落
特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

在html中，一个段落的文字从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，如果希望某段文本强制进行换行显示，就需要使用换行标签<br/>

标签语义:强制换行

特点:
1.<br/>是个单标签
2.<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到html中的文本格式化标签，使文字以特殊方式显示
标签语义:突出重要性，比普通文本更重要。

div和span标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

div表示分割，分区;span意为跨度，跨距。特点:
1.<div>标签用来布局，但是现在一行只能用-个div。大盒子
2.<span>标签用来布局，一行上可以多个<span>。小盒子
图像标签和路径(重点)
1.图像标签
在html标签中，<img>标签用于定义html页面中的图像。

单词image的缩写，意为图像
src是<img>标签必须属性，它用于指定图像文件的路径和文件名
所谓属性:简单理解就是属于这个图像标签的特性。

<!-- p标签 段落 
         1：独占一行 2：当一行文字满了之后会自动换行 3：双标签
         4：p与p直接会有段落间距 而换行内容则不会有-->
    <!-- br/ 强制换行 -->
    <p>这是一个段落<br>殴打上访回复第四u返回打碎~~~~~~~~~</p>
    <!-- 文本标签  strongo和b加粗.. -->
    <strong>加粗标签</strong><b>加粗标签</b>
    <!-- 斜体em和i -->
    <em>斜体文字</em><i>斜体文字</i>
    <!-- 删除线del和s -->
    <del>删除线</del><s>删除线</s>
    <!-- 下划线ins和u -->
    <ins>下划线</ins><u>下划线</u>
    <hr> <!-- 创建一条水平线hr -->
    <!-- 快级标签标签 div大盒子标签用来布局独占一行
          span行级标签用来布局单独占一个空间-->
    <span>小盒子</span><div>大盒子</div>
    <!-- 图像标签img -->
    <!-- ./+图片名称（必须是在同一个级别同一个文档里面）（/显示下级）（../显示上级） -->
    <img src="./762f712caae2e03ef400423e5f78ab0.jpg" alt="图片的名称（不显示）" title="名称（显示）" >
    <!-- a超链接 -self:默认值 在原先的页面中跳转新的页面
           -blank：开启一个新的网页并跳转 -->
    <a href="./02.html" class="" target="_blank">超链接</a>
    <a href="http://www.7k7k.com">.7k7k</a>
    <a href="https://v.qq.com">腾讯视频</a>
    <!-- #: #相当于占位符
        javascript:; -->
    <a href="#">仅是个占位符</a>
    <a href="JavaScript">&</a>
    &emsp; &nbsp; <!-- &emsp；大空格 &nbsp；空格-->
     
    &lt; 小于号    
     <!-- 小于号 &lt; -->
    &gt; 大于号
     <!-- 大于号 &gt; -->
    &amp; 和号
     <!-- 和号 &amp; -->
    &yen; 人民币
     <!-- 人民币 &yen; -->
    &copy; 
    <!-- 版权 &copy; -->
    &reg;
    <!-- 红色商标 &reg; -->
    &deg;
    <!-- 摄氏度 &deg; -->
    &plusmn;
    <!-- 正负号 &plusmn; -->
    &times;
    <!-- 乘号 &times; -->
    &divide;
    <!-- 除号 &divide; -->
    &sup2;
    <!-- 平方二（上标2） -->
    &sup3;
    <!-- 平方3（上标3） -->