前端HTML基础知识（二）

最新推荐文章于 2024-09-09 11:03:57 发布

freedom122198

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量133

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/m0_47800094/article/details/108794668

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

课程简介

做什么
前端工程师做什么：软件的开发
软件主要分为两种架构C/S和B/S。（我们主要从事的是B/S的软件的开发）
什么是B/S？
（1）B/S中的B指的是browsers，是浏览器的意思，S值Server指服务器的意思。
（2）B/S架构的软件
一般都是通过访问一个网页的形式来使用的，而将一些运算等操作放到远端的服务器上。
（3）这样就降低了对客户端的要求，我们的计算机上只需要安装一个浏览器即可使用。
（4）像我们常用的京东、taobao、12306等这些网站都是B/S架构的软件。
软件开发流程
（1）网页设计师根据客户需求设计网页
（2）前端工程师将网页设计成静态网页
（3）后台工程师将静态网页修改成动态网页
学习内容
根据W3C标准，一个网页主要由三部分组成：结构、表现还有行为。
（1）结构——HTML用于描述页面的结构
（2）表现——CSS用于控制页面中元素的样式
（3）行为——JavaScript用于响应用户操作
学习内容
HTML和CSS的基础知识，主要包括：HTML 、CSS 、网页布局
学习工具
（1）学习HTML和CSS开发我们不需要太复杂的工具有其是前一阶段，我们主要使用的工具有：
（2）浏览器：火狐、IE、Chrome
（3）编辑器：记事本、NotePad++、HBuilder
（4）调试工具：FireBug
（5）图片工具：Photoshop

7.辅助学习
（1）万维网联盟（W3C——World Wid Web Consortium）
W3C专门为了定义网页相关的标准而成立。
W3C定义了网页中的HTML、CSS、DOM、HTTP、XML等标准。
（2）WHATWG
网页超文本应用技术工作小组（WHATWG）
是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

HTML和CSS简介

HTML（Hypertext Markup Language）超文本标记语言
（1）HTML简介
它负责网页的三个要素之中的结构。
HTML使用标签的的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。

（2）一个基本的HTML页面包括：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片标题</title>
	</head>
	<body>
		<h1>网页正文</h1>
	</body>
</html>

（3）标签
HTML中的标记指的就是标签。
HTML使用标记标签来描述网页。
结构：
<标签名>标签内容</标签名>
<标签名 />

（4）元素
将一个完整的标签称为元素。可以将元素和标签认为是一个同义词。

<h1>一级标题</h1>

	上边的h1我们就称为元素

<p>我是一个<em>段落</em></p>

p也是一个元素，em是p的子元素，p是em的父元素。

<body> 
	<p><em>内</em></p> 
</body>

body也是一个元素。 body是p和em的祖先元素。 p和em是body的后代元素。

（5）属性
可以为HTML标签设置属性。
通过属性为HTML元素提供附加信息。
属性需要设置在开始标签或自结束标签中。
属性总是以名称/值对的形式出现。比如：name=“value”
有些属性可以是任意值，有些则必须是指定值。

<h1 title="我是一个标题">标题</h1> 
<img src="" alt="" />

（6）常见属性
id属性：作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
class属性：用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性,可以为一个元素指定多个class。
title属性：用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

（7）注释
HTML注释中的内容不会在网页中显示。
格式:

<!-- 注释内容 -->

合理的使用注释可以帮助开发人员理解网页的代码。
注释不能嵌套！

（8）HTML的发展
1993年6月：HTML第一个版本发布。
1995年11月：HTML2.0
1997年1月：HTML3.2（W3C推荐）
1999年12月：HTML4.01（W3C推荐）
2000年底：XHTML1.0（W3C推荐）
2014年10月：HTML5（W3C推荐）

（9）doctype
为了让浏览器知道我们使用的HTML版本我们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本。
html4
• 过渡版
• 严格版
• 框架集
xhtml1.0
• 过渡版
• 严格版
• 框架集
html5
我们使用的是html5的文档声明，而且非常简单：

<!DOCTYPE html>

（10）怪异模式
为了兼容一些旧的页面，浏览器中设置了两种解析模式：
–标准模式（Standards Mode）
–怪异模式（Quirks Mode）
怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。
避免的最好方式就是在页面中编写正确的doctype。

编码问题

（1）编码问题
在计算机的内部，文件都是以二进制编码保存的。
所谓的二进制编码就是指1和0，也就是所有内容都需要转换为1和0。
中国两个字在计算机的底层保存的可能要转换为10100101这种二进制码，这
一过程称为编码。
计算机在读取文件时需要将10100101在转换为中国给我们显示这一过程称为解码。

（2）字符集
字符集规定了如何将文本转换为二进制编码。
常见的字符集：ASKII、ISO8859-1、GBK、 GB2312、UTF-8。

（3）乱码
如果我们保存文件时使用的是utf-8进行编码，而浏览器读取页面时使用gb2312，这样就会导致页面中的内容不能正常显示，也就是我们所说的乱码。
所以我们只需要统一两者使用的字符集就可以解决乱码问题。
这里为了页面有更好的使用性，我们一般使用utf-8。

（4）解决
保存文件的编码我们直接通过编辑器即可指定，接下来就是要告诉浏览器使用什么字符集去解析文件。
在html5中只需要使用meta标签即可完成这个任务：

<meta charset="utf-8"/>
<meta>

作用：
– 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
– 标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

（5）meta的用法
设置页面的字符集

<meta charset="utf-8">

设置网页的描述

<meta name="description"content="">

设置网页的关键字

<meta name="keywords"content="">

请求的重定向

 <meta http-equiv="refresh"content="5;url=地址"/>

第一个网页代码

<html>
	<head>
		<title>这是一个网页</title>
	</head>
	<body>
		<h1>这是我编写的第一个网页</h1>
	</body>
</html>

freedom122198

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录