web的基础知识

最新推荐文章于 2025-06-11 16:22:19 发布

做一只向上爬的蜗牛

最新推荐文章于 2025-06-11 16:22:19 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html 页面简单元素文章标签： html

本文链接：https://blog.youkuaiyun.com/lwq_123456/article/details/71632389

html 同时被 2 个专栏收录

7 篇文章

订阅专栏

页面简单元素

4 篇文章

订阅专栏

本文为前端初学者提供了HTML的基础知识，包括HTML的基本语法、常用元素及其应用场景，适合刚入门的学习者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

勿忘初心，方得始终

作为非专业出身的半路出家的和尚，非常明白想入门时候的迷茫，想入而不可得！不得已辞去工作，去读了培训班！16年4月培训班出来正式成为前端大军的一员小喽啰，感觉有必要给未来的自己留下点痕迹……

web相关技术
1>.服务器端技术：提供数据库访问的技术
2>.客户端（浏览器端）技术：有浏览器负责解释运行（html,css,javascript）

html的简单介绍
HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。

一. HTML基础语法
1.标记语法（又称：元素）
不同的标记会有不同表现，主要用于描述功能。
分类：a. 封闭标记（双标记）<></>
–>例：<b>内容（加粗效果）<b/><s>内容（删除线效果）</s>
b.非封闭标记（单标记）<>或</>
–>例：<br/><hr/>
2. 标签的属性和属性值（对标签的功能加以修饰）。
语法：a.属性的社会年更名必须位于开始的标记里面
b.一个元素可能有多个属性，多个属性用空格隔开区分。

          标准属性（通用属性）：基本上每个标记都会有的属性。
          id:标记在页面中的唯一标识
          class:定义（引用）样式表中的类样式
          style:定义当前标记的行内样式
          title:鼠标一入到标记上时所显示的文字

3. 注释（指允许出现在html中，但不会浏览器所翻译执行的内容）
作用：对代码进行解释说明，展示思路
语法：<！– 注释内容 –>

html文档结构
文档组成–声明当前html文档版文及类型，位于整个html文档最顶端
现在是h5写法简单：<!DOCTYPE html>

 html页面组成：
 <html></html>文档根标记，里面的结构有
 1.<head></head>页面头部
 2.<body></body>主体内容
 3.head标记包含的都是全局信息
     title:网页标题
     meta:编码，关键字，描述
     script：js文件的引入或定义
     link:单标记，引入外部样式表
     style:定义内部样式表
 eg:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <title>我是这个网页的标题</title>
</head>
<body></body>
</html>

body是网页的主体内容，用来显示给用户看的信息。
特殊字符通过转义字符来实现：
1.空格：  2.> : >;
3<: &lt; 4©：© 来表示
html中的文本元素：

<b>文字加粗效果</b><i>文字倾斜效果</i><s>文字删除线效果</s><u>文字下划线效果</u><sub>下标</sub><sup>上标</sup>

对应的页面效果：
文字加粗效果 文字倾斜效果 ~~文字删除线效果~~ 文字下划线效果 _下标 ^上标
标题元素：

<hn></hn>;n这里取值1~6

对应的页面效果：

h1

h2

h3

h4

h5

h6

段落元素：<p>一个段落</p>

一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个段落一个

换行元素：

<br>或者</br>

分区元素（主要—用于元素分组，页面布局）
1.块分区元素<div></div>一个div默认独占一行，所有效果开发者自己定义，主要通过css实现布局
2.行内分区元素<span></span>多个span默认会在一行显示，很少用于布局，主要功能是包含普通文本
对应的页面效果：

我是第1个div

我是第2个div

我是第1个span我是第2个span
行内元素和块级元素
块级元素会独占一行，前后内容会自动分行，比如：div、p、h1~h6
行内元素多数包裹文本，去实现文本不同样式，比如：s、b、u、i、span 前面都有提及过
注意：** 块级元素可以嵌套行内元素，行内元素不可嵌套块级元素（无特殊情况说明之下）

这一部分大概介绍了一些html中最常见的一些普通元素下一篇会讲一下图像和链接