关于HTML知识点的小总结

最新推荐文章于 2023-06-27 09:56:48 发布

地中海养成记

最新推荐文章于 2023-06-27 09:56:48 发布

阅读量289

点赞数

分类专栏：码农养成文章标签： html

本文链接：https://blog.csdn.net/weixin_42262738/article/details/108108008

版权

这篇博客总结了HTML的基础知识，包括B/S与C/S架构的区别、网页构成、HTML语法、常用标签如标题、段落、换行、加粗、列表、图片、超链接、表格和表单的介绍，以及标签的常用属性。重点讲解了HTML在网页布局和交互中的应用。

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

一、网页的构成

1.1 概念：B/S 与 C/S

1.1.1 现在的软件开发的整体架构主要分为B/S架构与C/S架构：

b/s：浏览器/服务器
c/s：客户端/服务器

客户端：需要安装在系统里，才可使用

浏览器：浏览网页，读取HTML并显示

服务器：处理浏览器的请求

1.1.2 B/S 与 C/S优劣

b/s只要能上网就能使用，因为基本每台电脑都会有浏览器，维护方便。
c/s必须安装在系统中，安装成功才可使用。在新的系统中没有安装不能使用，便携性差，维护成本高。

1.1.3 网页

浏览器中显示的内容，浏览器是网页的展示器。编写好的网页，放在浏览器中即可运行。编写网页我们使用的就是HTML语言。

1.2 网页的构成

摘要	说明
结构(HTML)	HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
表现(CSS)	CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
行为(JavaScript / jQuery)	JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的

二、 HTML简介

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)，由一组<>包围的关键字
HTML网页的后缀名一般为.html
HTML 使用标记标签来描述网页

在这里插入图片描述

HTML文件的结构
- <html></html>为HTML页面中的根标签，所有的HTML网页中的标签都在<html></html>中。
- 这里<head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签。
- 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

三、 HTML语法

标签的语法
- 标签由英文尖括号 < 和 > 括起来,如：<html>
- html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多一个 / ,<title>…</title>;还有一些是自结束标签，如：<br/>
- 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。如： <div><p>…</p></div>
- 注释是不可以嵌套的,如： -->
- HTML标签不区分大小写,<h1>和<H1>是一样的,但万维网联盟（W3C）建议小写。
元素模型

在这里插入图片描述

四、 HTML的常用标签

4.1 标题标签

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

默认占用浏览器的一整行，并且前后要空一行

4.2 段落标签

<p>两个黄鹂鸣翠柳</p>
<p>是否还没女朋友</p>

段落标签也会独占浏览器的一行，而且前后还会空出一行。
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br />标签代替它！

4.3 换行标签

<br />：是个自结束标签

<br />

4.4 加粗标签

<b>天王盖地虎</b>

4.5 无序列表

<ul type="square">
    <!-- 定义导航栏 -->
    <li>网页</li>
	<li>新闻</li>
	<li>

最低0.47元/天解锁文章