HTML 语言入门基础重点知识归纳整理

1.什么是HTML?

HTML是用来描述网页编制规则的一种语言,又叫超文本标记语言 (Hyper Text Markup Language)。

  • HTML不是一种编程语言,而是一种标记语言 (markup language)。
  • 标记语言规定了一套相适应的标记标签 (markup tag)——做标记的规则方法,因此网页是使用HTML语言的标记标签来“定制”的一种文档。
  • HTML 标签是由尖括号包围的关键词,比如 <html>。
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>。
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签。
  • HTML文档=网页。

HTML基础重点知识归纳整理

2.HTML基础重点知识归纳
  • 仅<body> 与 </body> 之间的文本是可见的页面内容,其它地方是“高屋建瓴”和“统筹协调”。
  • 标题是通过 <h1> ~ <h6> 等标签进行定义的,注意:只能到<h6>。
  • HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码,元素的内容是开始标签与结束标签之间的内容。
  • 大多数HTML元素可以嵌套(可以包含其他HTML元素),HTML文档由嵌套的HTML元素构成。
  • <!---下面的例子包含三个HTML元素的嵌套--->
    <html>
      <body>
        <p>This is a HTML.</p>
      </body>
    </html>
  • 没有内容的HTML元素被称为空元素,空元素是在开始标签中关闭的。<br>就是没有关闭标签的空元素(<br>标签定义换行),所有元素都必须被关闭。在开始标签中添加斜杠,比如<br/>,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
  • HTML标签对大小写不敏感,推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
  • HTML标签可以属性有,属性提供了有关HTML元素的更多的定制特性。属性总是以名称/值对的形式出现,比如:name=”value”。属性总是在 HTML 元素的开始标签中规定。
  • 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。如果属性值本身就含有双引号,那么必须使用单引号。常用属性名称(即name的替代内容)有“class”、“id”(唯一id)、”style”(行内样式(inline style),值包括对齐、颜色、背景色、字体及其尺寸,但建议这些特性在css文件中定义)和“title”。
  • 使用水平线 <hr/>标签来分隔文章中的小节是一个办法(并不是唯一的办法)。
  • 浏览器会自动地在段落的前后添加空行。(因<p> 是块级元素)。使用空的段落标记(<p> ,</p> )去插入空行是个坏习惯。用 <br/>标签代替!如果希望在不产生一个新段落的情况下进行换行(新行)用 <br/>标签!
  • HTML注释用 <!– 与 –p>,条件注释仅IE8支持。
  • HTML4.0所有的格式化代码均可独立于HTML文档,然后移入一个独立的样式表。 外部样式表(link rel=”stylesheet” type=”text/css” href=”.css”);内部样式表(<style type=”text/css”>…</style>);内联样式(特殊的样式需要应用到个别元素,style=”color: …; margin-left:…”)。
  • 有两种使用<a>标签的方式:1.使用href=”url”形式属性——指向另一个文档的链接(也可创建邮件链接,触发Email程序)2.使用name=”label”形式属性(可用id代替name) – 创建文档内的书签(即锚)
  •      <!---首先,我们在HTML文档中对锚进行命名创建一个书签--->
          <a name="tips">基本的注意事项 - 有用的提示</a>
     
         <!---然后,在同一个文档中创建指向该锚的链接--->
          <a href="#tips">有用的提示</a>
     
         <!---也可以在其他页面中创建指向该锚的链接--->
           <a href="http://www.go2do.net/index.html#tips">有用的提示</a>
         <!---将#符号和锚名称添加到URL的末端,就可直接链接到tips这个命名锚--->
  • <a>标签的Target 属性:target=”_blank”表示:新窗口打开链接页面;当网页没有框架时,target=”_self”和target=”_parent”以及target=”_top”三种方式的显示方式几乎相同表示:当前窗口打开。
  • <img>是空标签,意思是说,它只包含属性,并且没有闭合标签,语法:<img src=”url” />;alt属性用来为图像定义一串预备的可替换的文本,在浏览器无法载入图像时,替换文本将告诉读者图片的信息内容。图片位置属性align=”bottom/middle/top”;通过改变<img>标签的 “height” 和 “width” 属性的值,可放大或缩小图像。
  • 将<img>标签内嵌于<a>标签,可构成图片链接效果;图像映射功能可以实现点击图片某一区域内的东西,调出/打开其它信息/详细内容页面(img元素中的 “usemap” 属性,“map”元素、“area”元素等)。
  • 表格用<table>标签定义,常用有<caption>(表格标题)、<th>(表头)、<tr>(表格的行,一对标签构成一行)、<td>(单元格,用于填充内容,一对标签构成一列)。
  • 无序列表始于<ul>标签,每个列表项始于<li>标签,列表项使用粗体圆点(•)进行标记。
  • 有序列表始于<ol>标签,每个列表项 也是 始于 <li>标签,列表项前会自动有数字序号。
  • 定义列表始于<dl>标签,每个自定义列表项以 <dt> 开始,每个自定义列表项的定义(释义)以 <dd> 开始。
  • 可以通过<div>和<span>将HTML元素组合起来。块级元素在浏览器显示时,通常会自动换行,块级元素如:<h1>, <p>, <ul>, <ol>,<table>;内联元素在显示时不会自动换行,内联元素如:<b>, <td>, <a>, <img>等。
  • RWD指的是响应式Web设计(Responsive Web Design),即能适用各种屏幕尺寸的Web页面。创建方式有CSS自定义和使用Bootstrap (是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架)。
  • 通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。<frameset>标签及rows(纵向分割)/columns(水平分割)属性规定如何将窗口分割为框架及%比例;<frame>标签设置放置在每个框架中的HTML文档。
  •      <!---下面的例子包含三个纵向分割的框架页面--->
          <frameset cols="25%,50%,25%">
            <frame src="frame_a.htm">
            <frame src="frame_b.htm">
            <frame src="frame_c.htm">
          </frameset>
  • 若框架有可见边框,可以拖动边框来改变它的大小,<frameset>标签中加入:noresize=”noresize”将禁用改变大小。
  • 不能将 <body></body> 标签与 <frameset></frameset>标签同时使用!不过,添加包含一段文本的<noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。框架还可实现导航框架如(cols=”120,*”)、混合框架等等功能。
  •      <!---不支持框架的浏览器需使用 <noframes> 标签--->
          <html>
           <frameset cols="25%,50%,25%">
               <frame src="/example/frame_a.html">
               <frame src="/example/frame_b.html">
               <frame src="/example/frame_c.html">
             <noframes>
               <body>您的浏览器无法处理框架!</body>
             </noframes>
           </frameset>
          </html>
  • 内联框架<iframe>用于在网页内显示网页。语法:<iframe src=”URL” width=”200″ height=”200″ frameborder=”0″></iframe>,src=”URL”指向框架内显示页面的链接,height和width属性用于规定 iframe 的高度和宽度(可以是像素或%),frameborder设置属性值为 “0” 就可以移除边框。iframe 可用作链接的目标(target)。链接的 target 属性必须引用 iframe 的 name 属性。
  •         <!---注意看iframe标签的name与a标签的target--->
            <iframe src="URL" name="iframe_a"></iframe>
            <a href="https://www.go2do.net" target="iframe_a" rel="noopener noreferrer">go2do.net</a>
  • <head>元素是所有头部元素的容器。&t;head>内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。以下标签都可以添加到 head 部分:<title>(浏览器/搜索引擎/收藏夹/等显示的标题)、<base>(页面上的所有链接规定默认URL或默认target)、<link>(引入外部资源,最常用于连接样式表)、<meta>(机器可读,主要被用于规定页面的描述、关键词、文档的作者、修改时间等其他元数据。始终位于 head 元素中,没有结束标签)、<script>(客户端脚本,如JavaScript等)以及 <style>(为页面设定样式信息)。
  • <meta>元素提供有关页面的元信息,http-equiv或name属性与content=“…”属性必需一起使用;http-equiv =“expires/set-cookie/charset/refresh/Content-Type/…”属性用于把content=”31 Dec 2018/www.go2do.net/iso-8859-1
    /5;url=https://www.go2do.net(5s后重定向)/text/html; charset=gb2312/…”的内容填充到HTTP头部;name=”keywords/description/…”属性用于把content属性的内容关联到一个名称,利于搜索引擎;scheme属性用于指定要用来翻译属性值的协议/格式。
  • 在HTML中预留字符的显示用字符实体,因浏览器会误认为是标签。因此在文章中要插入这些预留字符时,用该字符的字符字体替代。
  •      <!---常用字符实体,注意:实体名称对大小写敏感!--->
          <   为  &lt;
          >   为  &gt;
          &   为  &amp;
          "   为  &quot; 
          '   为  &#39; 
         空格  为  &nbsp;
  • HTML 表单用于接收用户输入。<form > 元素定义HTML表单,表单元素指的是各类型的 input 元素、复选框、单选按钮、提交按钮等;action 属性指明在提交表单时执行的处理页面或脚本/后台程序等(如果省略,则为当前页面);method 属性规定在提交表单时所用的 方法(GET(最适合少量数据的明文提交) 或 POST(表单正在更新数据,或者包含敏感信息(例如密码),页面地址栏中被提交的数据是不可见的));Name 属性每个输入字段必须设置一个 name 属性;enctype 规定被提交数据的编码;accept-charset=”UTF-8″
    (使用的字符集);…….
  • <input type=”text/radio/submit/select/textarea/button/password/number/…” value=”初始值” readonly >:定义用于输入的为单行文本/单选按钮/向处理程序提交表单数据/下拉列表/多行文本/按钮/密码/数字/日期/时间/位置/颜色…等类型;HTML Input 属性如value/readonly/size/maxlength/disabled/checked/…规定该input项的内容:初始值/内容只读/以字符计尺寸/允许输入字段的最大长度/不可用和不可点击且不提交/默认被选中/…
  • XHTML 指的是可扩展超文本标记语言,通过结合 XML(是一种必须正确标记且格式良好的标记语言。) 和 HTML 的长处,开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。目的:用严格的HTML语法规则,提高页面的广泛适应性。
  • 不常用HTML标签:文本格式化、HTML引文、引用、定义元素、联系信息及著作标题;还有,HTML计算机代码元素———略……
  • <!DOCTYPE> 帮助浏览器正确地显示网页,不是HTML标签,所以需放在<html>标签之前。它告诉浏览器页面文件是用什么版本编写的。如HTML5为<!DOCTYPE html >
  • HTML页面颜色由一个十六进制符号来定义,由红色、绿色和蓝色的值组成(RGB),每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF),因此组合起来为#000000~#FFFFFF或rgb(0,0,0)~rgb(255,255,255)。
  • URL语法规则:scheme://host.domain:port/path/filename 其中,scheme为http/https/ftp/file(本地文件)等;host定义域主机(如www);domain因特网域名,比如go2do.net;path指明了相对于网站根目录的路径,若省略则为根目录。URL只能使用 ASCII 字符集,非 ASCII 字符编码使用 “%” 其后跟随两位的十六进制数来替换。不能包含空格,使用 + 来替换空格。

注:本文为博主在www.w3school.com.cn上自学HTML内容时写成,因此相关内容也参考自w3school,才疏学浅之处欢迎大家指正。

欢迎投稿、分享转载,转载请保留如下信息:格物躬行博客[https://www.go2do.net]

本文由 [go2do] 原创,本文链接: https://www.go2do.net/vps/what-html-getting-started-generalization.html



You may also like...

发表评论

电子邮件地址不会被公开。

本页共执行140次数据库查询,耗时0.345秒,使用内存 1.76 MB