怎样创建一个HTML文件

一、网页文件的组成部分

HTML用于描述页面的结构
CSS用于控制页面中元素的样式
JavaScrpt用于响应用户操作

二、HTML简介

HyperText Markup Language(超文本标记语言)
HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)

三、准备知识

1、HTML的总体结构
怎样创建一个HTML文件_第1张图片
(1)head部分是填入给浏览器看的内容
注:在Title下行可从外部引入CSS样式。从外部引入方法有:
a.导入式


<style type="text/css">
@import "example.css";
style>

b.链表式

"example.css" rel="stylesheet" type="text/css"/>

(2)框红线部分(Title)写网页标题
(3)body部分,填入在网页上可见的内容,也就是给别人看的内容

2、基本语法
(1)长标签:双标签。由开始标签和结束标签组成
如:


(2)单标签:自结束标签。因为内部不需要内容,但推荐加上斜杠
如:

(3)标签的属性:例如font标签的color
如:这是文字
(4)注释:在页面中不会显示,而在源码中会显示
如:

3、语法规范
(1)HTML标签需要正确关闭,否则会对页面中的其他内容造成影响
如:文字1文字2
由于第一个font标签没有正确关闭(没有结束标签),所以文字2的颜色也成了红色。
(2)标签可以嵌套,但不能交叉嵌套
如:

文字


这是错误的!
(3)注释不能嵌套
(4)属性必须有属性值,属性值必须要用引号引起来。单引号、双引号都可以

四、常见标签

1、


定义
可定义文档中的分区或节(division/section)。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记
,那么该标签的作用会变得更加有效。
用法
是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是
固有的唯一格式表现。可以通过
的 class 或 id 应用额外的样式。
不必为每一个
都加上类或 id,虽然这样做也有一定的好处。
可以对同一个
元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
**案例分析



 

NEWS WEBSITE

some text. some text. some text...

...
"news">

News headline 1

some text. some text. some text...

...
"news">

News headline 2

some text. some text. some text...

...
...

案例解释:上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起,也就是说,div 为文档添加了额外的结构。同时,由于这些 div 属于同一类元素,所以可以使用 class=”news” 对这些 div 进行标识,这么做不仅为 div 添加了合适的语义,而且便于进一步使用样式对 div 进行格式化,可谓一举两得。

2、

-

定义和用法

-

标签可定义标题。

定义最大的标题,
定义最小的标题。
由于 h 元素拥有确切的语义,因此需要慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。

实例

<h1>这是标题 1h1>
<h2>这是标题 2h2>
<h3>这是标题 3h3>
<h4>这是标题 4h4>
<h5>这是标题 5h5>
<h6>这是标题 6h6>

3、


  • 定义和用法
  • 标签定义列表项目。
  • 标签可用在有序列表(
      )和无序列表(
  • 你可能感兴趣的:(html5)