1 html基础

一、web标准

1w3c万维网联盟组织     用来制定web标准的机构(组织)

2web标准:制作网页要遵循的规范

3web标准规范的分类:  结构标准              表现标准            行为标准

4:结构: html              表现: css              行为:javascript

     web标准总结:

     结构标准:相当于人的身体

     表现标准: 相当于人的衣服

     行为标准: 相当于人的动作


二、常见浏览器介绍

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、SafariOpera等。

  


Html就是用来制作网页的。

Css就是对网页进行美化的(网页的美化师)

Js就是让网页动起来,具有生命力的。




三、html简介

1html (Hyper   Text   Markup   Language )   中文译为“超文本标记语言”,主要是通过html标记对网页中的文本,图片,声音等内容进行描述

2HTML之所以称为超文本标记语言,不仅是因为他通过标记描述网页内容,同时也由于文本中包含了所谓的“超级链接”,通过超链接可以实现网页的跳转。从而构成了丰富多彩的Web页面。

HTML基本文档格式—<html> 标记

<html> 称为根标记,用于告知浏览器其自身是一个 HTML 文档, <html> 标记标志着 HTML 文档的开始, </html> 标记标志着 HTML 文档的结束,在他们之间的是文档的头部和主体内容。
<html  lang="en">  向搜索引擎表示该页面是html语言,并且语言为英文网站,其"lang"的意思就是“language”,语言的意思,而“en”即表示english
这个主要是给搜索引擎看的,搜索引擎不会去判断该站点是中文站还是英文站,所以这句话就是让搜索引擎知道,你的站点是中文站,对html页面本身不会有影响


HTML基本文档格式—<head> 标记

<head>标记用于定义HTML文档的头部信息,也称为头部标记,紧跟在<html>标记之后,主要用来封装其他位于文档头部的标记。

一个HTML文档只能含有一对<head>标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

HTML文档头部相关标记<title>

<title>标记用于定义HTML页面的标题,即给网页取一个名字,必须位于<head>标记之内。一个HTML文档只能含有一对<title></title>标记,<title></title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下:

 <title>网页名称</title>

HTML基本文档格式—<body> 标记

<body> 标记用于定义 HTML 文档所要显示的内容,也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于 <body> 标记内, <body> 标记中的信息才是最终展示给用户看的。
一个 HTML 文档只能含有一对 <body> 标记,且 <body> 标记必须在 <html> 标记内,位于 <head> 头部标记之后 .


四、html标签关系

   

1.嵌套关系

2.并列关系

嵌套关系:类似父亲和儿子之间的关系

                  <html>

                       <head></head>

                       <body></body>

                 </html>

并列关系:类似与兄弟之间的关系

                     <head></head>               

                      <body></body>       


五、html标签分类

   

HTML标记双标记    

双标记也称体标记,是指由开始和结束两个标记符组成的标记。其基本语法格式如下:

       <标记名></标记名>

该语法中“<标记名>”表示该标记的作用开始,一般称为“开始标记(starttag)”,“</标记名>”表示该标记的作用结束,一般称为“结束标记(end tag)”。和开始标记相比,结束标记只是在前面加了一个关闭符“/”。

HTML标记单标记

单标记也称空标记,是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下:

   <标记名/>

六、开发工具

          


七、单标记详解

水平线标记<hr />


在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标记来完成,<hr/>就是创建横跨网页水平线的标记。其基本语法格式如下:

 <hr/>是单标记,在网页中输入一个<hr/>,就添加了一条默认样式的水平线。


注释标记

HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标记。其基本语法格式如下:

 

注释内容不会显示在浏览器窗口中,但是作为 HTML 文档内容的一部分,也会被下载到用户的计算机上


换行标记<br />

HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标记<br />,这时如果还像在word中直接敲回车键换行就不起作用了。


图像标记<img />

HTML网页中任何元素的实现都要依靠HTML标记,要想在网页中显示图像就需要使用图像标记,接下来将详细介绍图像标记<img/>以及和他相关的属性。其基本语法格式如下:

 

该语法中src属性用于指定图像文件的路径和文件名,他是img标记的必需属性。

<img />标记属性

属性

属性值

描述

src

URL

图像的路径

alt

文本

图像不能显示时的替换文本

title

文本

鼠标悬停时显示的内容

width

像素(XHTML不支持%页面百分比)

设置图像的宽度

height

像素(XHTML不支持%页面百分比)

设置图像的高度

相对路径

相对路径不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。

        <imgsrc="img/logo.gif"alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构"/>

相对路径设置分为以下三种:

图像文件和 html 文件位于同一文件夹:只需输入图像文件的名称即可,如 < img src =" logo.gif " />
图像文件位于 html 文件的下一级文件夹:输入文件夹名和文件名,之间用“ / ”隔开,如 < img src =" img /img01/ logo.gif " />
图像文件位于 html 文件的上一级文件夹:在文件名之前加入“ ../ ”,如果是上两级,则需要使用 “ ../../ ”,以此类推,如 < img src ="../ logo.gif " />


绝对路径

 绝对路径一般是指带有盘符的路径。

例如:

D:\HTML+CSS网页制作\chapter02\img\logo.gif”,

或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。




八、双标记详解

段落标记

在网页中要把文字有条理地显示出来,离不开段落标记,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标记就是<p>

<p>HTML文档中最常见的标记,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

标题标记

为了使网页更具有语义化,我们经常会在页面中用到标题标记,HTML提供了6个等级的标题,即<h1><h2><h3><h4><h5><h6>,从<h1><h6>重要性递减。其基本语法格式如下:

文本样式标记

多种多样的文字效果可以使网页变得更加绚丽,为此 HTML 提供了文本样式标记 <font> ,用来控制网页中文本的字体、字号和颜色。其基本语法格式如下:


文本格式化标记

在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到 HTML 中的文本格式化标记,使文字以特殊的方式显示。
文本格式化常用标记

标记

显示效果

<b></b><strong></strong>

文字以粗体方式显示(XHTML推荐使用strong

<i></i><em></em>

文字以斜体方式显示(XHTML推荐使用em

<s></s><del></del>

文字以加删除线方式显示(XHTML推荐使用del

<u></u><ins></ins>

文字以加下划线方式显示(XHTML不赞成使用u

<sup>3</sup>  上标
<sub>2</sub>  下标
九、超链接

创建超链接

HTML中创建超链接非常简单,只需用<a></a>标记环绕需要被链接的对象即可,其基本语法格式如下:


在上面的语法中,<a>标记是一个行内标记,用于定义超链接,hreftarget为其常用属性,下面对它们进行具体地解释。

href :用于指定链接目标的 url 地址,当为 <a> 标记应用 href 属性时,它就具有了超链接的功能。
target :用于指定链接页面的打开方式,其取值有 _self _blank 两种,其中 _self 为默认值, _blank 为在新窗口中打开方式。
<base />   可以设置整体链接的打开状态

注意:

暂时没有确定链接目标时,通常将 <a> 标记的 href 属性值定义为 “#”( href ="#") ,表示该链接暂时为一个空链接。
不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。



锚点链接

通过创建锚点链接,用户能够快速定位到目标内容。

创建锚点链接分为两步:

使用“ <a href =”#id “> 链接文本 </a> ”创建链接文本。
使用相应的 id 名标注跳转目标的位置。

十、特殊符号标记

特殊字符

描述

字符的代码

 

空格符

&nbsp;

小于号

&lt;

大于号

&gt;

&

和号

&amp;

人民币

&yen;

©

版权

&copy;

®

注册商标

&reg;

°

摄氏度

&deg;

±

正负号

&plusmn;

×

乘号

&times;

÷

除号

&divide;

²

平方2(上标2

&sup2;

³

立方3(上标3

&sup3;


十一、列表


无序列表 (ul)

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

在上面的语法中, < ul ></ ul > 标记用于定义无序列表, <li></li> 标记嵌套在 < ul ></ ul > 标记中,用于描述具体的列表项,每对 < ul ></ ul > 中至少应包含一对 <li></li>

无序列表中 type 属性的常用值有三个,它们呈现的效果不同 .
默认值 :disc
方块 :square
空心圆 :circle





有序列表(ol)

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:



在上面的语法中, < ol ></ ol > 标记用于定义有序列表, <li></li> 为具体的列表项,和无序列表类似,每对 < ol ></ ol > 中也至少应包含一对 <li></li>


-有序列表其他属性  type   start

-语法格式:

                <ol  type=value1   start=value2>

                          <li></li>       

                  </ol>

value1表示有序列表项目符号的类型, value2表示项目开始的数值. start是编号开始的数字,如start=2则编号从2开始,如果从1开始可以省略,或是在<li>标签中设定value"n"改变列表行项目的特定编号,例如<li value="7">type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母。使用这些属性,把它们放在<ol><li>的的初始标签中。


Type 属性如下图

   type类型

        描述

Type=1

表示列表项目用数字表示(1,2,3…..

Type=a

表示列表项目用小写字母表示(a,b,c..)

Type=A

表示列表项目用大写字母表示(A,B,C..)

Type=i

表示列表项目用小写罗马数字表示(i,ii,iii….)

Type=I

表示列表项目用大写罗马数字表示(I,II,III…)


一般 type 的设置同样在 css 中设置


自定义列表(dl)

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:



猜你喜欢

转载自blog.csdn.net/weixin_41906828/article/details/79974104
今日推荐