前端入门之——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>
