HTML01基础知识

2018-06-02  本文已影响18人  宁君26

1 HTML骨架

1.1 文档声明头

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3<head>
4   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5   <title>Document</title>
6</head>
7<body>
8   
9</body>
</html>

1.2 字符集

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

charset就是charactor set“字符集”的意思。
中文能够使用的字符集两种:
第一种:UTF-8
第二种:gb2312 也可以写成gbk

UTF-8和gb2312。
UTF-8是国际通用字库,里面涵盖了所有地球上所有人类的语言文字,比如阿拉伯文、汉语、鸟语……
gb2312 是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,比如日文片假名,和常见的符号。
UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节

1.3 关键字和页面描述

<meta name="Description" content="网易是中国领先的互联网技术公司。" />

只要设置的Description页面面熟,那么百度搜索结果,就能够显示这些语句

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。
Keywords就是“关键词”的意思。

1.4 title标签

title也是有助于SEO搜索引擎优化的.

2 HTML的基本语法特性

2.1 HTML对换行不敏感,对tab不敏感

HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。
换不换行、tab不tab,都不影响页面的结构。

2.2 空白折叠现象

HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

2.3 标签要严格封闭

3 h和p标签

3.1 h系列

<h1></h1> 一级标题
<h2></h2> 二级标题
……
<h6></h6> 六级标题

h是容器级的标签。理论上里面可以放置p、ul,只是法律上的允许,在语义上,不要这么写。

3.2 p标签

HTML标签是分等级的,HTML将所有的标签分为两种:容器级、文本级。
顾名思义,容器级的标签,里面可以放置任何东西;文本级的标签里面,只能放置文字、图片、表单元素。

p标签是一个文本级标签。从学习p的第一天开始,就要死死记住:p里面只能放文字、图片、表单元素。其他的一律不能放

4 图片

4.1 能用的图片类型

页面上可以插入图片,能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别,css课上讲。
不能往网页中插入的图片格式是:psd、ai

4.2 语法

HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。
<img src="baby.jpg" />

4.3 alt属性

当这个图片无法被显示的时候,出现的替代文字(有的浏览器不支持)。

<img src="baby.jpg" alt="巴黎结婚照" />

4.4 相对路径

例如:

<img src="../../images/jiehunzhao/baby.jpg" alt="" />

5超级链接

5.1 基本写法

<a href="1.html">结婚照</a>
<a href="09_img.html" title="很好看哦">结婚照</a>
<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>(新的空白标签页中打开。)

5.2 页面内的锚点

页面当中可以有锚点,所谓的锚点,就是一个小标记
锚点用name属性来设置,一个a标签如果name属性(或者id属性),那么就是页面的一个锚点。

1<a name="wdzp">我的作品</a>
2或者:
<a id="wdzp">我的作品</a>

如果有一个超级链接,指向页面中的锚点,那么就是:

<a href="#wdzp">点击我就查看我的作品</a>
上一篇下一篇

猜你喜欢

热点阅读