前端基础知识——HTML（一）

来源：互联网发布：服装设计自学软件编辑：程序博客网时间：2024/05/23 02:06

简单来讲web前端可以分为三层：
结构层 HTML 从语义的角度，描述页面结构
样式层 CSS 从审美的角度，美化页面
行为层 Javascript 从交互的角度，提升用户体验

在HTML中所有的内容都是节点，下面是W3C（出web规范的组织机构）给出的HTML DOM节点树：

在sublime中输入！或者html:5，再tab会得到HTML的基本骨架：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body></body></html>

<!DOCTYPE html>：网页的声明头，术语叫做DocType Defintion，文档类型定义，简称DTD。网页声明头可以告诉浏览器，这是一个什么标准的页面。这里是HTML5的标准。
<html lang="en">：html标签对，是根节点。所有的网页内容，都要包裹在这个标签对儿里面。
我们可以看到html里面有一个属性：lang=”en” 表示语言是英语。但是，我们网页中大多数是中文，所有多数使用的lang=”zh-CN”表示中文。
<head>：head标签，里面是页面的配置。
<meta charset="UTF-8">：字符集的配置，这里需要强调的是：我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则页面乱码。——sublime中，file—>set file encoding to 设置保存字符类型。
设置字符类型
补充：
sublime里面默认保存类型是UTF-8。但中文可以使用的字符集有两种：UTF-8和gb2312（gbk）。
UTF-8是国际通用字库，里面涵盖了地球上所有人类的语言文字，比如萨瓦迪卡泰语、汉语、鸟语……
gb2312 是国标，是中国的字库，里面仅涵盖了与汉字相关的内容。
字库规模： UTF-8（字全） > gb2312（只有汉字）
存储模式：UTF-8存储一个汉字用3个字节。而gb2312中存储一个汉字2个字节。
保存效率： UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
关键字和页面描述：
meta除了设置字符集以外，还可以设置关键字和页面描述。
关键字：
<meta name="Keywords" content="夏小妖儿，大纵子" />，如果你的网页设置了关键字，别人搜索时，可以提高搜索命中率。
页面描述：<meta name="Description" content="《权力的游戏》（Game of Thrones），是美国HBO电视网制作推出的一部中世纪史诗奇幻题材的电视剧。强力推荐，真的好看，一定要坚持到第一季完" />，只要设置了Description页面描述，那么浏览器搜索结果，就能够显示这些语句，该神技叫做SEO，search engine optimization，搜索引擎优化。
<title>Document</title>：<title>艾斯，大发</title> 网页的标题，自己写，可以显示在浏览器的标签栏中。title也有助于SEO搜索引擎优化。
body：body标签里面的是网页的内容，用户能够看见。
head里面还有一些其他配置：IE适配、视口、小图标等等……以后会慢慢介绍。

阅读全文

0 0