基础小白快速入门web前端开发技术-----------＞htm基础

最新推荐文章于 2024-09-13 23:32:49 发布

jing静～

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量517

点赞数 14

分类专栏： css+js web前端软件知识文章标签：前端 javascript 软件知识

本文链接：https://blog.csdn.net/yuanbenshidiaos/article/details/136813476

版权

css+js 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

web前端

7 篇文章 0 订阅

订阅专栏

软件知识

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本结构，包括文档开始和结束标签、doctype声明、头部元素（包含元数据、样式和脚本）、body元素以及元信息的使用，重点讲解了title标记和body属性的作用。

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

HTML的文档结构

HTML 文档以<html>标记开始，以</html>标记结束

文档类型声明（Doctype）：告知浏览器正在使用哪个HTML版本

<!DOCTYPE html>

根元素（Root element）：通常是<html>元素，包裹着整个页面的所有内容

<html>

头部（Head）：包含元信息和其他一些与页面内容不直接相关的信息。

元数据（Metadata）：如字符编码声明、页面描述、关键词、作者等。
样式（Styles）：通过<link>元素引入CSS文件或内联样式。
脚本（Scripts）：通过<script>元素引入JavaScript文件或内联脚本。

<head>
  <meta charset="UTF-8">
  <meta name="description" content="页面描述">
  <title>页面标题</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

身体（Body）：包含可见的页面内容，如文本、图片、视频、游戏、可播放的音频等

<body>
  <!-- 页面内容 -->
</body>

注释（Comments）：对代码进行解释和说明，浏览器会忽略注释。

<!-- 这是一个注释 -->

一个简单的HTML文档结构如下所示：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>示例页面</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <img src="image.jpg" alt="描述图片内容">
</body>
</html>

head中的title

基本语法

<title>标记信息显示在浏览器的标题栏中</title>

<title>是开始标记，</title>是结束标记，两者之间内容为显示在浏览器的标题栏信息

meta 元信息类似于网页的属性

Meta 不会直接显示在网页上，但用来解析浏览器网页

Meta属性分为两组：

name属性

content属性

name属性是名称

content属性是分类

属性	值	说明
name	author description keywords generator	定义网页作者定义网页简短描述定义网页关键词定义编辑器
http-equiv	content-type expires refresh set-cookie	内容管理内容缓存过期时间刷新与跳转网页过期删除cookie
content	some_text	定义与http-equiv或name属性相关的元信息

值	说明
all	文件将被检索，且页面上的链接可以被查询
none	文件将不被检索，且页面上的链接不可以被查询
index	文件将被检索
noindex	文件将不被检索，且页面上的链接可以被查询
follow	页面上的链接可以被查询
nofollow	文件将被检索，但页面的链接不可以被查询

主体body

<body>开始标记

</body>结束标记

主体，网页的中间部分

是网页结构的主要骨架

body标记属性

设置body标技属性可以改变页面的显示效果，该标记主要属性有topmargin,leftmargin,text,bgcolor,background,link,alink,vlink

html是网页开发中的基本骨架，但由于刚开始的时候没有基础的规范，所以引进了css css能够让网页更加具可观赏性通俗来讲就是变得更加好看，并且代码还会很有规范

属性	值	说明
text	rab(r,g,b) rgb(r%,g%,b%) #rrggbb #rgb colorname	rgb函数（整数），r,g,b取值范围0——255 rgb函数（百分比）r,g,b取值氛围0-100 十六进制数据，取值范围0-9 A-F,可转换为#33FF00 颜色英文，red green...
bgcolor	同上	背景颜色
alink	同上	链接颜色
link	同上	未访问链接的默认颜色
vlink	同上	已经被访问的链接颜色
background	url	背景图像
topmargin	pixel	上边距大小
leftmargin	pixel	左边距大小