HTML基础知识

本文介绍了HTML的基本概念,如何通过它创建网页,浏览器的工作原理,以及如何利用CSS增强样式。重点讲解了HTML标记、元素属性、标签使用和组织页面的方法,包括列表、链接和块内联元素的区别。

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

认识HTML-这门Web语言

HTML:超文本标记语言的缩写

宏观角度

通过HTML编写的文件来建立Web页面

然后可以把文件放到服务器上,任何浏览器就可以访问到你的HTML网页

  • Web服务器作用
  • 就是一个连接到互联网的计算机,等待来自浏览器请求
  • 存储HTML文件,图像,声音等文件

浏览器认识知道如何显示HTML,另外甚至可以在手机和其他设备中显示

  • HTML告诉浏览器页面的内容和结构
  • 浏览器根据内置的默认规则翻译HTML的标记
  • 你哈可以通过CSS来增加自己的样式

创建HTML文件

HTML文件都是文本文件-只要能创建纯文本的应用都可以

在使用强大的IDE之前可以使用简单的文本编辑器来了解原理

选择浏览器?

  • HTML是行业标准,所有浏览器都会尽可能支持
  • 不同浏览器处理页面方式存在细微差别
  • 为了测试,至少下载两个不同的浏览器

标记剖析

<h1>....</h1>
  • 元素=开始标记+内容+结束标记
  • 匹配标记没必要在一行上,浏览器不关系制表,回车,和大多数空格

标记支持属性

  • <style type=“text/css”>…
  • 值用双引号括起来

标签学习

<h1>:标记标题
<h2>:标记子标题
<p>:标记段落
<html>:告诉浏览器这个是html文件
<head>: 包含web页面相关信息
<title>:顶部标题
<body>:页面主体

HTML描述了内容的骨架,而CSS进一步表现你的内容

  • 在HTML中可以通过

认识HTML中的HT

HT:超文本

摆脱单个页面束缚,链接到其他页面

超文本引用就是互联网或者你的计算机上一个资源的别称–通常是web页面,也可以是其他资源

ML:标记语言

标签学习

<a>:创建指向另一个页面的链接
  • 内容是链接文本
  • href属性指定链接的URL或者目标文件
  • 可以把一个<img>放到<a>下面,点击图像就会链接

组织你的页面

建议把网页,图片和其他资源放在不同文件夹下面维护,容易管理

即便都是HTML文件,也建议按照业务分文件夹

追求简单可扩展

规划你的链接路径

如果移动了HTML文件,你会发现链接至此的<a>失效了

相对路径

  • …实现上行文件夹
  • 最多走到网站根目录

网站文件夹层级太多说明组织过于复杂,建议优化

对于网页只用/,通用的,不像操作系统分隔符有的是\

Web页面建设

写HTML之前

画粗略的草图 - 页面设计的基础

把草图翻译成HTML的蓝图

  • 分别研究草图各个区域,细化
  • 用html构建模块描述

翻译成真正的HTML

标签学习

<q>:支持文字引用,添加对应样式
  • 让页面结构化
  • 浏览器知道这个是引用-会去优化
  • 当然你也可以通过样式设置来完成
<blockquote>:支持长引用,例如引用一首诗歌
  • 浏览器会自动缩进,让其看起来像引用
  • 一般是自成一段的引用
  • 本身是一个新的段落,而是嵌入在段落的
<br>:提供换行功能,在希望换行的地方加一个<br>
  • 该元素没有任何内容,是一个void元素
  • img也是
  • 所以可以简写
  • br也是一个意思

块元素与内联元素

上述标签区别

<blockquote>是块元素
<q>是内联元素

视觉上

  • 块元素好像前后各有一个换行
  • 内联元素在文本流总是在行内出现

功能

  • 块元素通常用于Web页面的构建模块
  • 内联元素标记小段内容
  • 设计界面先从大区域到小细节

理解区别有助于后面CSS布局相关内容学习和使用

构建HTML列表

第一步:将每个列表项放在一个<li>元素中

<li>hello</li>

第二步:用ul或ol标签包围列表项

  • ol是有序列表
  • ul是无序列表
  • ol或ul只能包含li元素

可以列表嵌套列表,把一个ul放在一个li下面

嵌套

嵌套在HTML很常用,也是其构造方式

避免标记不匹配的情况

HTML中使用"<" ">"两个字符

直接使用会有问题,因为这是标记的特殊字符

这种情况使用一种字符实体的字符

  • 查找对应的缩写来在HTML中输入
  • >字符缩写是’&gt’;
  • <字符缩写是’&lt’;
  • 例如The element --> The <html> element
  • &字符对应的是’&amp’;
  • 不要直接写&,除非你是使用字符实体
  • 因为用来作为字符实体标志了
  • w3cschools上面可以查到,还有一种对应的字符编号也可以使用,作用一样
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值