HTML文档基础_html/css_WEB-ITnose
一.HTML(Hyper Text Markup Language超文本标记语言)是一种用来制作超文本文档的简单标记语言,HTML在正文的文本中编写各种标记,通过Web浏览器进行编译和执行才能正确显示。此篇文章主要介绍HTML文档基础和常用标记,此篇文章的内容框架如下,但是只先介绍HTML文档基础:
上图在HTML文档的常用标记中,少画了一个多媒体标记,请见谅!
1.HTML文档基础:
1.1 HTML标记:HTML是超文本标记语言。主要由文本和标记两部分构成。HTML的标记通常是由“”以及其中所包含的标记元素组成的。例如:
就是一对标记,此标记称为主体标记,用来指明文档中的主体内容。(1).在HTML超文本标记语言中,大多数标记都是成对出现的,一般是由一个开始标记和一个结束标记组成的,其中开始标记告诉Web浏览器从此处开始执行该标记所表示的功能,而结束标记告诉Web浏览器在这里结束该功能。这类标记称为“双标记”,其语法格式如下:
内容标记>
其中“内容”部分就是要被这对标记起作用的部分,例如在页面中输出y的平方,可以通过标记来实现。
(2).接着附上一个“双标记”的例子,启动Dreamweaver CS5工具,也可以用其它编写网页的工具,在创建新项目中选择HTML,在“代码”窗口中编写如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>输出y的平方</title></head><body>输出y的平方:y<sup>2</sup></body></html>
接着新建一个站点,点击工具栏的站点,然后这样选择:
然后将这个网页保存到这个站点里,名字改为sup.html,运行效果如下:
(3).虽然在HTML超文本标记语言中,大多数的标记为“双标记”,但是也有一些是以单独形式存在的标记,此类标记称为“单标记”。这类标记只需单独使用就能完整地表达其意思,语法格式为:<标记>
在HTML超文本标记语言中,最常用的“单标记”是
,此标记为换行标记。其实写成
也可以达到换行的效果。
(4).接下来附上一个“单标记”的例子,通常在页面中用一行显示一段文字,由于此行文字太长显得页面很不美观,此时可以使用单标记
将此段文字分为两行显示,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>单标记</title></head><body>梦想遥不可及,但是不可放弃<br>只要再坚持一下,成功的路就在脚下!</body></html>
然后依旧保存到那个JavaScript站点下,改为br.html,运行后如下:
(5).在使用大多数单标记和双标记的开始标记内通常可以包含一些属性,其语法格式为:<标记 属性1 属性2 属性3...>
在上面的语法中,所有属性必须在开始标记的尖括号“<”中编写,各属性之间用空格分隔,无先后次序之分,属性也可以省略(即取其默认值)。属性值需要使用英文半角双引号("")标注。
(6).接下来附上一个标记中带属性的例子,使用单标记
在页面中画一条水平线,并设置其size属性、noshade属性、width属性和color属性,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>绘制一条水平线</title></head><body><hr size="6" noshade="noshade" width="70%" color="#CCFF55"></body></html>
其中代码中的size属性表示水平线的粗细,noshade属性表示将水平线的阴影去掉,水平线默认为空心带阴影的立体效果,width属性表示水平线的宽度,color属性表示水平线的颜色。
保存此文件到站点上,文件名改为br.html,运行效果如下:
1.2 HTML文档的基本结构:使用HTML语言编写的超文本文件称为HTML文件。可以在Windows下的文本编辑器中手工直接编写HTML文件,也可以使用FrontPage、Dreamweaver等可视化编辑软件编写HTML文档。
(1).在HTML超文本标记语言中,定义了3种标记用于描述页面的基本结构。HTML中的基本结构如下:
<html><head>...头部信息<body>...主体内容</body></head></html>
(2).下面详细介绍各种标记的功能及用法:
? ...标记:HTML文档中的第一个标记,该标记用于表示该文档是HTML文档,当浏览器遇到标记时,就会按HTML的标准来解释文本。结束标记出现在HTML文档的尾部。
?
...标记:此标记出现在标记内起始的部分,此标记称为头部标记。头部标记用于提供与Web页面有关的各种信息。在头部标记中,可以使用标记模拟HTTP协议的响应头报文,用于鉴别作者、标注内容提要和关键字、设定页面字符集、刷新页面等,在HTML头部可以包括任意数量的标记;使用?
...标记:此标记称为主体标记,在头部标记之后。它定义了HTML文件显示的主要内容和显示格式。作为网页的主体部分,此标记有很多内置属性,这些属性用于设定网页的总体风格。例如,定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等。(3).接下来附上一个使用...标记的例子,标记应用于HTML文件的主体标记与之间,并且只影响它所标识的文字。
这里例子通过标记的face属性定义字体为“黑体”,通过size属性定义大小为“16px”,通过color定义颜色为蓝色,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>定义文字字体</title></head><body>应用<font>标记来定义文字字体:<br><font face="黑体,宋体" size="16px" color="#3399FF">蓝色的天空下,让我们一起飞翔!</font></body></html>
保存此文件为font.html到站点下,运行后如下:
这个例子中,使用了<和>来输出""这些符号,即在HTML中为一些特殊的字符设置了特殊的代码。字符的实体名称都以一个“&”符号开始,以一个“;”符号结束。在这个例子代码中,,特殊符号“
二.此篇文章介绍了HTML文档的基础,HTML文档的常用标记下次再介绍了,以上内容仅供大家学习参考,写得不好,请见谅,如有错误,请指出,谢谢!
??
版权声明:本文为博主原创文章,未经博主允许不得转载。

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
