最新web前端开发基础#HTML语言基础

最新web前端开发基础#HTML语言基础
  HTML是一种描述性标记语言,用来描述页面内容的显示方式。
 
  HTML文件是一种纯文本文件,以“。html”或“。htm”为后缀。
 
  HTML的基本组成元素,语法结构如下:
 
  <标签>
 
  内容
 
  <标签>
 
  HTML文档结构是由< html>,< head>,< body>这三大元素组成:
 
  < html>元素: 文档以标签开始,以标签结束,所有内容都要放在这两个标签之间。
 
  < head>元素:页面头部信息,用于向浏览器提供整个页面的基本信息,但不包含页面的主体内容。头部信息中主要包含页面的标题、元信息、CSS样式、JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示,标题元素(标签的内容)除外,会显示在浏览器的窗口的左上角。
 
  < body>元素:页面的正文,是用户在浏览器主窗口看到的信息,包括图片、表格、段落、图片、视频等内容,且需要位于标签之内,但不是所有的内部标签但是可见的。
 
  代码如下:
 
  编写HTML文件的注意事项:
 
  HTML不区分大小写,而XHTML区分大小写;
 
  HTML标签的属性与属性值;
 
  HTML中的空格;
 
  HTML中的注释;
 
  标签可以嵌套使用。
 
  HTML文档的元素包含很多标签,用于向浏览器提供整个页面的基本信息。
 
  中可以包含以下子元素:< title>、< meta>、< base>、< link>、< script>以及< style>等。
 
  页面的标题位于< title>标签内,可以包含任何字符或实体。
 
  网页标题的作用:
 
  在浏览器的标题栏中显示标题;
 
  标题可以用作默认快捷方式或收藏夹的名称;
 
  标题还可以作为搜索引擎结果中的页面标题。
 
  例如:
 
  meta元素用于向客户的浏览器传递信息和命令,而不是用来显示内容的。
 
  一个< head>标签中可以包含一个或多个< meta>标签。
 
  < meta>标签主要分为两大类:
 
  对页面的设置,通过http-equiv属性进行指定
 
  对搜索引擎的设置,通过name属性进行指定
 
  例如:
 
  HTML文档中的文本元素包括:内容标题、文本修饰以及特殊字符
 
  内容标题:< h1>< h2>< h3>< h4>< h5>< h6>
 
  文本修饰:< font>< b>< i>< s>< u>< sup>< sub>< strong>< big>< small>
 
  特殊字符:双引号(“) &号 空格小于号(<) 大于号(>)
 
  小于等于(≤)大于等于(≥)版权号(?)商标符号(?)注册商标(?)
 
  分数(?)分数(?)等
 
  标签是双标签,默认情况下,在大多数浏览器中显示的< h1>< h2>< h3>元素内容大于文本在网页中的默认尺寸,< h4>元素的内容与默认文本的大小基本相同,而< h5>和< h6>元素的内容较小一些。
 
  例如:
 
  效果图:
 
  文本修饰标签:
 
  注意:HTML 5为< strong>标签增加了语义,使用< strong>标签包起来的文本表示重要的文本。
 
  HTML 5中删除了原有的标签,并对标签进行重新定义,用于标识所谓的“小字印刷体”,通常用来标注诸如注意事项、法律规定、免责声明或版权相关的声明性文字。
 
  标签可以用来控制更多的文本字体外观样式,通过face、size和color属性来设定文本的字体、大小和颜色。
 
  特殊字符
 
  文档结构元素:
 
  段落标签< p>用于对网页内容提供块级格式。当浏览器解析< p>标签时,通常在下一个段落之前插入一个新的空白行。
 
  < br />标签,可以在文本内容不结束的情况下需要对文本进行换行
 
  标签是空标签, br和“/”之间存在一个空格。
 
  < hr />标签可以在页面中产生一条水平线,将文本区域内容分开。
 
  列表元素:
 
  在HTML页面中,使用列表将相关信息放在一起,会使内容显得更具有条理性。HTML中的列表有以下三种类型:
 
  有序列表:使用一些数值或字母作为编号;
 
  在有序列表中,每一项的前缀可以通过数字或字母进行编号。
 
  HTML中提供了
 
  标签来实现有序列表有序列表:使用一些数值或字母作为编号;
 
  其中:
 
  < ol>中允许包含多个列表项,每一个列表项都嵌入在< ol>< /ol>之间;
 
  < li>标签用于展示某一列表项,其内容包含在< li>之间。
 
  通过type属性可以指定有序列表编号的样式,取值方式有如下几种:
 
  “1”代表阿拉伯数字(1、2、3…);
 
  “a”代表小写字母(a、b、c…);
 
  “A”代表大写字母(A、B、C…);
 
  “i”代表小写罗马数字(i、ii、iii…);
 
  “I”代表大写罗马数字(I、II、III…)。
 
  通过start属性指定列表序号的开始位置,例如start="3"表示从3开始编号。
 
  效果图:
 
  无序列表:使用项目符号作为编号;
 
  无序列表与有序列表不同,无序列表每一项的前缀显示的是图形符号,而不是编号。
 
  HTML中提供了< ul>标签来实现无序列表:
 
  其中:
 
  每一个列表项< li>嵌入在< ul>< /ul>之间,使用方式基本与有序列表一致;
 
  type属性用于设置列表的图形前缀,取值可以是circle(圆)、disc(点)、square(方块)、none等类型;当缺省type属性时大部分浏览器默认是disc类型。
 
  效果图:
 
  定义列表:列表中的每个项目与描述配对显示。
 
  定义列表是一种特殊列表,将项目与描述成对显示,使用
 
  标签来实现
 
  其中:
 
  一个定义列表中可以包含1——n个子项;
 
  每一子项都由两部分构成:标题(dt)和描述(dd),且成对出现;
 
  < dt>< /dt>标签用于存放标题内容;< dd>< /dd>标签用于存放描述内容。
 
  效果图:
 
  div与span标签
 
  标签属于行内块,用于指定行内元素
 
  通过标签来选择特定的文本,以便赋予特殊的样式;
 
  其中:
 
  style属性用于设置span元素的行内样式;
 
  class属性用于引用CSS的类选择器;
 
  align属性用于设置span元素中的内容的对齐方式,取值范围是left、right、center或justify
 
  注意:如果只是用< div>标签不使用CSS样式,在页面中的效果与< p>基本相同,且独占一行。通过< div>标签可以对页面进行整体划分,并使用CSS进行修饰,以实现页面的布局。
 
  URL简介:
 
  协议、主机地址和文件路径共同组成了一个完整的URL:
 
  网页通常采用HTTP超文本传输协议传递信息,对应的网址基本使用http://前缀
 
  电子商务等网站对安全性更高时,多采用https协议(https://前缀)
 
  文件上传下载时,多采用ftp://前缀
 
  主机地址(Host Address)一般是网站的域名,如
 
  主机地址也可以使用IP地址(数字形式),例如:192.168.1.100、115.239.210.27等
 
  文件路径通常与网站的目录结构相对应,以斜杠(/)开始,以文件夹名或文件名结束,中间可以包含一级或多级目录,例如:/web/test/index.html或/web/test/
 
  绝对路径:
 
  绝对路径是指一个完整的路径
 
  d:/web/movie/index.html
 
  绝对地址相对比较长,而网站的每个页面可能包含很多链接,页面代码显得比较臃肿。
 
  相对路径:
 
  相对路径比绝对路径更加简洁,方便后期网站的维护
 
  当浏览器访问Web资源时,浏览器需要完整的URL才能获取到资源内容;当页面中提供的地址是相对路径时,浏览器会将相对URL转成完整的绝对URL后再获取资源。
 
  相对路径的访问方式有以下几种形式:同一目录、子目录、父目录、根目录
 
  注意:相对路径仅适用于链接相同网站中的内容,不能用于链接其他域名下的资源。
 
  根目录方式在本地访问时无法实现,只有站点内容上传到Web服务器上才能展示效果。
 
  图像标签:
 
  在页面中,使用标签向HTML文档中添加一幅图像
 
  文本链接与锚点链接:
 
  文本链接是指链接内容是文本内容。链接目标可以是站内链接,也可以是站外链接;
 
  效果图:
 
  < a>标签的title属性用于给链接添加标题,当鼠标悬停在超链接之上时,会提供该链接的更多相关信息。
 
  锚点链接分为同一页面的锚点链接和跨页面的锚点链接,实现步骤如下:
 
  (1)在目标页面中,使用< a>标签创建锚点标记
 
  (2)在页面中,创建超链接链接到锚点
 
  < a>标签的href属性是由“#”+“目标锚点名称”两部分构成
 
  跨页面的锚点链接
 
  href属性由“目标页面的绝对路径(或相对路径)”+“#”+“目标锚点名称”构成
 
  图片链接与图片热区链接:
 
  图片链接也是使用< a>标签来实现
 
  将< img />标签放在< a>和< /a>标签之间即可
 
  空链接
 
  空链接是未指派的链接,多用于向页面中的对象或文本附加行为时使用
 
  href属性为“#”
 
  Email链接
 
  浏览者可以通过点击Email链接时,操作系统会使用默认的程序打开一封新的电子邮件,并准备好发送该电子邮件到链接指向的地址
 
  href属性由“mailto:”+“邮箱地址”两部分构成
 
  超链接的target属性:
 
  默认情况下,链接会在当前活动窗口打开目标链接文档,目标文档的内容将替换当前显示的页面内容。
 
  < a>标签的target属性可以改变目标文档的显示窗口。

推荐阅读