发表于： 2019-10-21 23:15:00
1 1024
一、今天完成的事情
HTML标签--图文详解
头标签<html> <body>
排版标签<p> <div> <apan>''<br> <hr> <center> <pre>
字体标签<h1> <font> <b> <u> <sup> <sub>
超链接 <a href= >
图片标签<img src= >
Web标准
web标准介绍：
w3c：万维网联盟组织，用来制定web标准的机构（组织）
web标准：制作网页要遵循的规范
web标准规范的分类：规范标准、表现标准、行为标准。
结构：html。表现：css。行为：JavaScript。
web标准总结：
结构标准:相当于人的身体。HTML就是用来制作网页的
表现标准：相当于人的衣服。css就是对网页进行美化的
行为标准：相当于人的动作。JS就是让网页动起来，具有生命力的。
HTML的网络术语：
网页：由各种标记组成的一个页面就叫网页
主页（首页）：一个网站的起始页面或者导航页面
标记：<p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义
元素：<p>内容</p>称为元素。
属性：给每一个标签所做的辅助信息，应该就是href和src这一类的词
xhtml：符合语法标准的html
dhtml：dynamic，动态的。JavaScript+css+html合起来就是一个dhtml。
http：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议。 ftp：文件传输协议
HTML的编辑工具
notepad：记事本
editplus：语法高亮显示。技巧：根据颜色判断单词是否出错（不是100％）。不好的地方：没有代码提示
UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据
Sublime Text：新一代的代码编辑器（用的人很多）
dw（Dreamweaver），专业工具：建立web站点和应用程序的专业工具。他将布局功能、开发工具、代码编辑组合在一起。有代码提示。
PS：后缀名不能决定文件格式，只能决定打开文件的方式。
HTML颜色介绍：
颜色表示：
纯单词表示：red、green、blue、orange、gray等
10进制表示：rgb（255，0，0）
16进制表示：#FF0000、#0000FF、#00FF00等
RGB色彩模式：
自然界所有的颜色都可以用红绿蓝（RGB）这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理
RGB三原色也叫加色模式，这是因为当我们把不同的光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝=紫色，绿+蓝=青色
在数字视频中，对RGB三基色各采取8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
RGB各有256级（0-255）亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216
1、编写HTML规范：
（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>
（2）所有的标记都必须小写
（3）所有的标记都必须关闭。
双边标记：<span></span>
单边标记：<br>转成<br /> <hr>转成<hr/>， 还有<img src="URL"/>
（4）所有的属性值必须加引号。<font color="red"></font>
（5）所有的属性必须有值。<hr noshade="noshade">、<input type="radio" checked="checked" />
（6）XHTML文档开头必须要有DTD文档类型定义
2、HTML的基本语法特性
（1）HTML对换行不敏感，对tab不敏感
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，有良好的缩进，代码更易读。要求能正确缩进标签。
（2）HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
（3）标签要 严格封闭
3、文档声明头
任何一个标准的HTML页面，第一行一定是一个以
<!DOCTYPE ……
开头的语句。
这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
4、头标签
头标签都放在头部分之间。包括：<title>、<base>、<meta>、<link>
<title>：指定整个网页的标题，在浏览器最上方显示
<base>:为页面上的所有链接规标题栏显示的内容定默认地址或默认目标
<meta>：提供有关页面的基本信息
<body>: 用于定义HTML文档所显示的内容，也称为主体标签。我们所写的代码必须放在此标签内。
<link>:定义文档与外部资源的关系。
这个<meta>标签的意思是说，3秒之后，自动跳转到百度页面。
（1）字符集charset
我们发现，在头标签中，有下面这种标签：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
字符集用meta标签中的charset定义，mate表示“元”，“元”配置，就是表示基本的配置项目。
（2）定义“关键词”
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率，让别人能够找到你，搜索到你
（3）定义“页面描述”
meta除了可以设置字符集，还可以设置关键字和页面描述。
我们把含有mate标签的这一行代码抽象一下：
<meta name=" " content=" ">
name即名字，content即内容。只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（ search engine optimization，搜索引擎优化）
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
（4）title标签
<title>网页的标题</title>
title也是有助于SEO搜索引擎优化的
HTML的完整骨架：
综上所述，html的完整骨架是这样的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Keywords" content="牛逼，很牛逼，特别牛逼" />
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
<title>Document</title>
</head>
<body>
</body>
</html>
这里还有一道面试题：
问：网页的head标签里面，表示的是页面的配置，有什么配置？
答：字符集、关键词、页面描述、页面标题。
3、<body>标签的属性
其属性有：
<bgcolor>：设置整个网页的背景颜色
background：设置整个网页的背景图片
text：设置网页中的文本颜色
leftmargin:网页的页边距。IE浏览器默认是8个像素。
topmargin：网页的上边距
rightmargin：网页的右边距
bottommargin：网页的下边距
<body>标签另外还有一些属性，这里举个例子来解释：
<body link="red" alink="blue" vlink="green">
<a href="#">点我点我</a>
<br>
呵呵
</body>
上方代码中，当我们对点我点我几个字使用超链接时，link属性表示默认显示的颜色，alink属性表示鼠标点击但是没有松开时的颜色，vlink属性表示点击完成之后显示的颜色。
排版标签：HTML标签是分等级的，HTML将所有的标签分为两种：
文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。
错误写法：尝试把 h 放到 p 里面
块级标签<div>和<span>
div和span是非常重要的标签，div的语义是division“分割”，span的语义就是span“范围、跨度”。
这两个东西，在css中，是最最重要的“盒子”。
div：把标签中的内容作为一个块儿来对待（division）。必须单独占据一行。
div标签的属性：
align=“属性值”：设置块儿的位置。属性值可选择：left、right、center。
<span>和<div>唯一的区别在于：<span>是不换行，而<div>是换行的。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义css样式而生的。或者说，div+css来实现各种样式。
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大东西的。
所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。
二、明天要做的事情
把HTML看完，然后看css
三、遇到的困难
暂时没有
四、收获
学习了html的基础知识
返回列表
评论