前端入门之——html day1

具备三个要素的项目,就是web项目

1、浏览器

--向服务器阿奇请求,下载服务器中的网页(HTML),然后执行HTML显示出的内容。

2、服务器

--接收浏览器的请求,发送相应的页面到浏览器。

3、HTTP协议

--浏览器与服务器的通讯协议

XML 和 HTML 

可扩展标签语言

标签,属性,标签的嵌套关系都可以扩展

扩展,自定义

超文本标签语言

语法是固定的 w3c

用来显示数据

有一些特定的版本严格遵守XML规范

可以将HTML理解为标签固定的XML

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

第一个网页:

 1 <!DOCTYPE html>
 2 <html>
 3     <!--
 4         在head 标签中对网页做一些基本的配置
 5     -->
 6     <head>
 7         <!--
 8             描述:在meta中 charset设置解码utf-8
 9         -->
10         <meta charset="utf-8" />
11         <title></title>
12     </head>
13     <!--
14         描述:在body里面写网页具体的内容
15     -->
16     <body>
17         你好,世界!
18     </body>
19 </html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  •  <标签>内容</标签> 

HTML 网页结构

HTML版本

从初期的网络诞生后,已经出现了许多HTML版本:

版本 发布时间
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

以X开头的版本是严格遵守w3c语法。不建议使用。

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html> 

<!DOCTYPE HTML> 

<!doctype html> 

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。

<head>
        <!--
            描述:在meta中 charset设置解码utf-8  声明网页的编码
        -->
        <meta charset="utf-8" />
        <title></title>
</head>

示例

 1 <!DOCTYPE html>
 2 <!--
 3 声明使用的HTML版本
 4 html 是唯一的根元素
 5 -->
 6 <html>
 7     <!--
 8         在head 标签中对网页做一些基本的配置
 9     -->
10     <head>
11         <!--
12             描述:在meta中 charset设置解码utf-8
13         -->
14         <meta charset="utf-8" />
15         <!--
16             在title中 声明网页的标题
17         -->
18         <title>第一个网页</title>
19     </head>
20     <!--
21         描述:在body里面写网页具体的内容
22     -->
23     <body>
24         你好,世界!
25         good html
26     </body>
27 </html>

HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.

HTML 段落

HTML 段落是通过标签 <p> 来定义的.

HTML 链接

HTML 链接是通过标签 <a> 来定义的.

<a href="http://www.runoob.com">这是一个链接</a>

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <!-- 标题    -->
 9         <h1>道君</h1>
10         <h2>剑动山河</h2>
11         <h3>魔天记</h3>
12         <h4>辰南</h4>
13         <h5>莽荒纪</h5>
14         <h6>红楼梦</h6>
15         
16         <!-- 段落  -->
17         
18         <p>此时的清塞军身处吞云岭,四面尽是山歌</p>
19         <p>此时的清塞军身处吞云岭,</p><p>四面尽是山歌</p>
20         
21         <a href="http://www.runoob.com">这是一个链接</a>
22         <img src="http://p0.so.qhimgs1.com/t016997d986a16ebe7a.jpg" width="258" height="39" />
23     
24     </body>
25 </html>

猜你喜欢

转载自www.cnblogs.com/Mengchangxin/p/9240121.html