HTML基础知识

都是网上收集的资料，非原创。仅供自己学习做笔记用的，只是为了分享自己的笔记，侵权就删

HTML

笔记

 

网页之所以能查看源代码，是因为html文件已经存在了本地电脑的临时文件夹里

<!DOCTYPE ……>  这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范

 

html和xhtml和xml的区别

最近参加面试老是被问到这个问题，所以专门查了下资料，总结如下：
1、html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；
2、xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；
3、xml即时可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签。
4、网页编码从html>>xhtml>>xml这个过程发展

       XHTML 是 XML 风格的 HTML 4.01。
　　HTML5 是下一代 HTML，取代 HTML 4.01。
　　XHTML是基于XML发布的HTML规范，旨在规范HTML的格式。

html与xhtml之间的区别：

1、xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：1、元素必须要有结束标签；2、元素必须嵌套；
2、对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的，<li>和<LI>是不同的标签；
3、xhtml的属性值必须在引号之中；
4、xhtml不支持属性最小化，什么是属性最小化了？
　　正确:非最小化属性(unminimized attributes)
　　<input checked="checked">
　　不正确:最小化属性(minimized attributes)
　　<input checked>
5、 在xhtml中，name属性是不赞成使用的，在以后的版本中将被删除。

再说说为什么网页编码要从html>>xhtml>>xml这么发展？
话说早起的网页使用html语言编写的，但是它拥有三个严重的缺点：
1、编码不规范，结构混乱臃肿，需要智能的终端才能很好的显示；
2、表现和结构混乱，不利于开发和维护；
3、不能使用更多的网络设备，比如手机、PDA等；
因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML 过度的一个桥梁。而xml是web发展的趋势。



引进外部css文件
<link type="text/css" href="style.css" rel="stylesheet" />

 

准备文档流

宏观的讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画

微观现象

1、空白折叠现象

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

2、高矮不齐，底边对齐

3、 自动换行，一行写不满，换行写

 

字符集


中文能够使用的字符集两种：字符集用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。

第一种：UTF-8

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

第二种：gb2312

  1. <meta http-equiv="Content-Type"content="text/html;charset=gb2312">

也可以写成gbk

  1. <meta http-equiv="Content-Type"content="text/html;charset=gbk">

字体库

有两个字库UTF-8和gb2312。

UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、……

gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。

字库规模：  UTF-8（字全） > gb2312（只有汉字）

注意，由于UTF-8里面保存了世界上所有人类语言，所以描述一个汉字需要的码更多。

UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。

保存大小：   UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）

总结：

UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；

gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。

列出2个使用情形：

1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。

2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。

 

页面描述

meta除了可以设置字符集，还可以设置关键字和页面描述。

设置页面描述：

  1. <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

抽象一下：

  1. <meta name=”” content=”” />

name就是“名字”的意思，content是“内容”的意思。

也就是说，我们定义了一个名字是“Description”（描述）的meta。内容是网易是中国领先……

定义关键词：

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

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

Keywords就是“关键词”的意思。

 

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上

 

HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。

顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。

容器级 div h ul（ul里面只能有li标签，而不能有别的 但是li是容器级别标签 可以放其他标签） ol dl li dt dd ...。 文本级 span p strong em ins del ...

 

元素和标签

比如<p>这就是一个标签； <p>这里是内容</p>这就是一个元素，也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容； 这里有一个值得注意的例外，即<br/>本身既是开始标签也是结束标签，但不包含任何内容，所以这只是个标签

 <q>标签

<q> 标签定义短的引用。浏览器会自动加引号

<q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。

<blockquote>标签会自动换行，缩进（增加外边距）

给超链接添加点击事件

<a onclick="alert('1')">超链接1</a>
<a href="#" onclick="alert('2')">超链接2</a>
<a href="javascript:alert('3')">超链接3</a>

  第1个超链接中，没有设置href属性，因此，从中看起来好像只是一行文字，并且鼠标放在上面的时候，也不会显示小手的形状。因此，很难让用户知道这是一个可以点击的超链接。但是如果用户单击了该超链接，会弹出一个警告框，而且单击警告框中的【确定】按钮之后，不会跳转到任何URL上。

  第2个超链接中，href属性值为"#"，如果单击该超链接，先会执行onclick属性值中的JavaScript，弹出一个警告框。在单击警告框中的【确定】按钮之后，浏览器会自动跳转到当前网页的顶部。

  第3个超链接中，直接将JavaScript语句写在href属性值中。在单击该超链接时，可以执行href属性值中的JavaScript语句，而且不会有任何跳转。

 

锚点

页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。

锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。

跳转到某个锚点

  1. <a name="myWorks">我的作品</a>

  2. 或者：

  3. <a id="myWorks">我的作品</a>

  4. <a href="#firstAnchor">跳至第一个锚点</a>

 js中有element.scrollIntoView()

 

字体实符

空格 ：&nbsp;

<  :   &lt；

©  版权（copyright）：&copy；

™ 商标：&trade;

® 注册商标：&reg;

 

 

定义列表

  定义列表也是一个组标签，不过比较复杂，出现了三个标签：

  dl表示definition list 定义列表

  dt表示definition title    定义标题

  dd表示definition description 定义表述词儿

  dt、dd只能在dl里面；dl里面只能有dt、dd，dl定义列表 dt定义术语 dd定义描述

 

  1.        <dl>

              <dt>北京</dt>

  1.               <dd>国家首都，政治文化中心</dd>

  2.               <dt>上海</dt>

              <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

  1.               <dt>广州</dt>

  2.               <dd>中国南大门，有珠江、小蛮腰</dd>

  3.        </dl>

表达的语义是两层：

1) 是一个列表，列出了北京、上海、广州三个项目

2）每一个词儿都有自己的描述项。

 

​​

<th>和<td>标签都是用于表格单元格显示的。不同的是<th>在单元格中加粗显示。

<th>：定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗​

<tr>
<th>Company</th>
<th>Address</th>
</tr>

<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>

 

 

 

相对路径 绝对路径

我们一直在用的是相对路径，就是从自己出发找到别人。用相对路径的好处很明显，就是站点文件夹可以拷着走。

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。

相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

比如，你现在想插入一个新浪网上的图片，那么就不能用相对路径。就要用绝对路径。

绝对路径非常简单，所有以http://开头的路径，就是绝对路径。

 

标签

em是什么？——em是一个浏览器识别的长度单位，但是它不是绝对的、固定的，而是相对的。大家都知道px是一个绝对的长度单位制，它永远不会改变。浏览器默认情况下令1em === 16px。现在你知道为何p默认是16px了吧。而且你还知道了h1是p高度的两倍，h2是p高度的1.5倍…当然，我们可以通过css修改1em的值。

 

HTML中<strong>与<b>,<em>与<i>标签的区别

转载出处：http://www.yin.cc/blog/html_b_strong/


用在网页上，默认情况下它们起的均是加粗字体的作用，二者所不同的是，<b>标签是一个实体标签，它所包围的字符将被设为bold（粗体），而<strong>标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。

     注意：什么是物理标记？什么是逻辑标记？

    物理元素所强调的是一种物理行为，比如说我把一段文字用b标记加粗了，我的意思是告诉浏览器应该给我加粗了显示这段文字，从单词的语义也可以分析得出，b是Bold(加粗)的简写，所以这个B标记所传达的意思只是加粗，没有任何其它的作用。

    而Strong我们从字面理解就可以知道他是强调的意思，所以我们用这个标记向浏览器传达了一个强调某段文字的消息，而这个Strong就是我们所说的逻辑元素，他是强调文档逻辑的，并非是通知浏览器应该如何显示。

    同样，I是Italic(斜体)，而em是emphasize(强调)。

    所以说：物理元素是告诉浏览器我应该以何种格式显示文字，逻辑元素告诉浏览器这些文字有怎么样的重要性。

     总结：简单的说strong是web标准中xhtml的标签，strong的意思是“强调”；b是html的，b的意思是bold（粗体）。web标准主张xhtml不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用其它方式来强调，比如下划线，比如字体加大，比如红色，等等，可以通过css来改变strong的具体表现。

     并不是说有了strong，就淘汰了b，只是这个b很无辜，就因为自己表示的是字体加粗，恰巧跟strong默认情况下强调的效果一致，其实这个strong完全可以定义成别的样式的强调效果

    WEB标准提倡样式与内容分离，所以纯粹为了达到加粗而使用B已经不建议这样做。

    从XHTML文档有意义性及用户体验角度来说，strong更有益，更被建议使用。而SEO方面，则针对优化情况而定。

结论：对于搜索引擎来说<strong>和<em>比<b>和<i>要重视的多。为了符合现在W3C的标准，还是推荐使用strong标签。

    

    2)<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

    在文本中加入强调也需要有技巧。如果强调太多，有些重要的短语就会被漏掉；如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。

    尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。除此之外，文档中还可以包括用来改变文本显示的级联样式定义。

    除强调之外，当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候，也可以考虑使用 <em> 标签。例如，W3School 经常对重要的术语使用 <em> 标签。<em> 标签可以用来把这些名称和其他斜体字区别开来。

   结论同上，为了符合现在W3C的标准，还是推荐使用<em>标签。

   3）注意：<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。

 

posted @ 2020-06-10 20:12  Ren小白  阅读(433)  评论(0)    收藏  举报
levels of contents