HTML精华三记（1）-CSDN博客

本文链接：https://blog.csdn.net/weixin_42512488/article/details/82842899

本文旨在将用简短的三讲，尽可能地覆盖HTML所有知识点及细节。

HTML第一讲

一、WEB基础概念

WWW：World Wide Web 万维网
WWW系统的组成部分：WWW服务器，浏览器（WWW客户端），HTML文件和网络。
WWW运行的三个概念：

URL：Uniform Resource Locator 统一资源定位器，本质就是找资源的一种路径。
HTTP：Hypertext Transfer Protocol 超文本传输协议
HTML：Hypertext Markup Language 超文本标记语言

二、HTML简介

超文本含义：旨在创建一个全球化的大文档，文档的各个部分分布在不同的服务器中。
超文本标记语言：强调“语言”，有了超文本的概念，总不能没有实现超文本的工具。这种语言是由浏览器解释执行，是一种标记语言。
编写工具：Editplus、Notepad++、Dreamweaver（但注意这些工具都不是必须的！）
执行工具：浏览器

三、HTML语法格式

标记的语法格式

<标记名称    属性=“属性值” 属性=“属性值”…>
    …… 
</标记名称>

标记是有属性的， 属性之间用空格隔开，有了属性标记才能变得丰富多彩。
标记可以嵌套使用，但一定要注意顺序。

标记的类型

单标记：只有开始标记，如<br/>、 <hr/>、<img/>等，这三个单标签是主要的。
双标记：具有开始标记和结束标记。
如<table> </table>

属性

功能：可以对标记进行简单的样式设置，比如颜色，显示的位置，字号等等。

文件命名的格式

文件扩展名尽量以.htm或者.html结束。
文件名中尽可能由字母、数字、下划线组成。
文件名中不要包含特殊符号，尽量不要用中文。

四、HTML文档

文档读到<html>就知道这是一段用超文本标记语言写的一段代码，如果写错该标记，那么你所写的文本原原本本就会输出到浏览器中。
换句话说HTML将所有的除了文字本身以外的各种样式（空格，换行，字体，图片等等）都用同化为HTML中的标签，所以你要想键盘打个空格、回车、tab，想让它在浏览器显示出来是不可能的。在<html>中的html的标签才能是被浏览器识别出来。
HTML不区分大小写，是一种弱语言类型。

五、页面头部标记

在这里插入图片描述

头标记就是用来设置上面圈住的内容的。
<title>标记是用来设置第一个圈的
<meta>标记用来设置剩下两个；meta是元的意思。
属性：

属性	中文释义	描述	属性值
http-equiv	equiv是当量，等量的意思	设置http的消息头	content-type：显示字符集设定。 refresh刷新并跳转
name	名字	设置页面的描述信息	keywords:设置关键字，就是第二个圈 description:网站内容，就是第三个圈
content	内容	我的观点是有的属性需要更精确的描述	…

<html>
<head>
<title>网页字符集设计示例</title>
<meta http-equiv = “Content-Type” content = “text/html; charset=gb18030”>
</head>
<body>
    中文乱码示例
</body>
</html>

<html>
<head>
<title>页面自动刷新设置示例</title>
<meta http-equiv = “refresh” content = “3;url=http://www.sina.com.cn”>
<meta http-equiv = “Content-Type” content=“text/html; charset=gb18030”>
</head>
<body>
    页面每隔3
</body>
</html>

<html>
<head>
	<title>网页制作三剑客Dreamweaver、Flash、Firework综合实例教程</title>
	<meta name = “keywords” content ="网页制作三剑客Dreamweaver、Flash、Fireworks综合实例教程，计算机类">
</head>
<body>
</body>
</html>

<style>用来嵌入CSS样式

五、body属性总结

属性	功能	案例
background	设置背景图片	<body background=“apple.JPG”>
link	设置网页文字未访问时的颜色	<body link=“black” alink=“green” vlink=“gray”>
alink	设置网页文字正在访问时的颜色	同上
vlink	设置网页文字已被访问时的颜色	同上
bgcolor	设置页面的背景颜色	<body bgcolor=“blue” text=“black”>
text	设置网页的文字颜色	同上
[left][right][top][bottom]margin	设置外边距	<body leftmargin=“120” topmargin=“20” rightmargin=“120” bottommargin=“20”>