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

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 左边距大小

htmlyufa

相关推荐

  1. web开发基础的简明入门教程

    2024-03-19 19:10:02       43 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-19 19:10:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-19 19:10:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-19 19:10:02       87 阅读
  4. Python语言-面向对象

    2024-03-19 19:10:02       96 阅读

热门阅读

  1. Clicker - Linux

    2024-03-19 19:10:02       33 阅读
  2. MATLAB中的符号计算是什么?如何使用它?

    2024-03-19 19:10:02       43 阅读
  3. Python的Selenium库中的模块、类和异常的汇总

    2024-03-19 19:10:02       39 阅读
  4. 图像转pdf (python)

    2024-03-19 19:10:02       49 阅读
  5. C++/CLI学习笔记10(快速打通c++与c#相互调用的桥梁)

    2024-03-19 19:10:02       46 阅读
  6. Redis常见问题

    2024-03-19 19:10:02       42 阅读
  7. [蓝桥杯 2022 省 B] 修剪灌木

    2024-03-19 19:10:02       39 阅读
  8. JDK、JRE、JVM概念

    2024-03-19 19:10:02       44 阅读