前端三大件（html+css+javascrip）的基础入门知识体系

最新推荐文章于 2024-09-06 22:20:29 发布

Great robot

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量125

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_57231429/article/details/132527473

版权

本文介绍了HTML的基础框架，包括doctype声明、lang属性、head和body部分，详细讲解了字体标签、图片引用的绝对和相对路径，以及列表的使用。重点强调了块级和内联元素的区别。适合初学者学习前端设计和网页制作的基本要素。

摘要由CSDN通过智能技术生成

前言：

人生若只如初见，何事秋风悲画扇；

**
目点：
1.为学习的东西做一些简单的笔记和回顾：
2.熟悉前端的设计方法和理念；
3.设计一个网页，并制作出来;
4.制作一个简单的APP；

1.html的基本框架：

## 1.1框架图

主体框架图
1.2文档的基本结构
!DOCTYPE html：表明是最新的HTML5的规范写的，具有更多的功能；
html lang=“en”：向搜索引擎表示该页面是html语言，语言为英文而“en”即表示english
head->头部标签元素：一般用来插入脚本文件和链接；
:表明一些网页基础信息，这是说明了他的编码格式具体可看链接https://zhuanlan.zhihu.com/p/372363004；
body：主要是放置一些网页的具体内容决定显示内容的主体架构；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comaptible" content="IE=edge">
    <meta name="viewport" content="with=device-with, initial-scale=1.0">
    <title>
        Document
    </title>
</head>
<body>
    <h1 align="left">一级标题</h1>
    <h2 align="center">二级标题</h2>
    <h3 align="right">三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!--注释，html的框架-->
</body>
</html>
```html

	1.3代码示例及相关知识；
	1.3.1字体内容的标签

<!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>
    <p>定义段落</p>
    <em>定义着重文字</em>
    <b>定义粗体文字</b>
    <i>定义斜体字</i>
    <strong>定义加重语气</strong>
    <span>白菜</span>
    <del>白菜</del>
</body>
</html>

1.3.2图片的引用
1.绝对引用和相对引用：通过绝对定义的图片位置来引用，相对引用是指引用以html为参考系的方式应用

    <!--绝对路径-->
   <img src="E:\picture\ture.webp" alt="美丽的风景" title="风景">
    <!--相对路径关系-->
   <img src="5.webp" alt="美丽的风景" title="风景">
   <img src="./5.webp" alt="美丽的风景" title="风景">
   <img src="./image/6.jpg" alt="美丽的女孩" title="女孩">
   <img src="./image/../5.webp" alt="美丽的女孩" title="女孩">

1.3.3列表的使用
主要分为有序列表（ol）和无序列表ul）
以下是有序列表和无序列表的基本使用方法

 <ol type="1">
        <li>苹果</li>
        <li>橘子</li>
        <li>菠萝</li>
        <li>火龙果</li>
    </ol>

    <ol type="a">
        <li>苹果</li>
        <li>橘子</li>
        <li>菠萝</li>
        <li>火龙果</li>
    </ol>

    <ol type="A">
        <li>苹果</li>
        <li>橘子</li>
        <li>菠萝</li>
        <li>火龙果</li>
    </ol>

    <ol type="I">
        <li>苹果</li>
        <li>橘子</li>
        <li>菠萝</li>
        <li>火龙果</li>
    </ol>
    <ul type="disc">
        <li>苹果</li>
        <li>橘子</li>
        <li>菠萝</li>
        <li>火龙果</li>
    </ul>

    <ul type="circle">
        <li>苹果</li>
        <li>橘子</li>
        <li>菠萝</li>
        <li>火龙果</li>
    </ul>

    <ul type="squre">
        <li>苹果</li>
        <li>橘子</li>
        <li>菠萝</li>
        <li>火龙果</li>
    </ul>

    <ul type="none">
        <li>苹果</li>
        <li>橘子</li>
        <li>菠萝</li>
        <li>火龙果</li>
    </ul>
    <ul type="disc">
        <li>水果</li>
        <ul>
            <li>橘子</li>
            <li>菠萝</li>
            <li>火龙果</li>
        </ul>
    </ul>
    <ul>
        <li>红米手机</li>
        <li>荣耀手机</li>
    </ul>

    </ol>

html需记忆的内容

标签	作用
h	标题分级，可分为6级, h1–h6
p	段落，段落标签
href	超链接
em	定义着重文字
b	定义粗体字
br	换行
i	定义斜体字
strong	定义加重语气
span	行内元素
del	删除元素
img	图片引用