前端小小小白:HTML是啥?能吃吗?真相在这里,吃货别哭……
2017-01-04 20:57
549 查看
对于IT相关专业的同学来说,HTML或许已经非常熟悉,而非IT专业的同学第一次听到“HTML,想必都会好奇:HTML是啥?能吃吗?
我是非IT专业小白一枚,想要自学前端技术,所以加入了CSDN大家庭,希望通过博客记录自己的所学所得,分享技术,交流经验。同时呢,也希望各位技术达人不吝赐教,小女子感激不尽。o( ̄▽ ̄)o
事实上,上网就是请求数据,一个真实的物理的文件传输。网页其实就是包括html文件、css文件、js文件、图片等文件在电脑上渲染、呈递的结果。
制作网页者将网页上传至服务器之后,访问者即可通过搜索引擎向服务器发出HTTP请求,服务器收到请求,就会把这些文件通过HTTP协议传输到计算机中,并保存进一个临时文件夹中,在本地浏览器中渲染、呈递之后,就获得这个网页了。如图1:
图1
注:什么是HTTP协议,即Hypertext Transfer Protocol 的缩写,意思是“超文本传输协议”。
HTML是英语HyperText Markup Language的缩写,超文本标记语言,她是一种负责描述文档语义的语言。
HTML是纯文本文件,只有文本,没有样式,文件后缀名是“html”。
HTML通过标签给文本添加语义。
HTML之所以称为“超文本”,是因为它可以通过超链接,连接不同空间的文档,进而与整个web网络连接起来。
2.2 HTML常用标签
常用标签简介
1.html基本骨架标签
2.其他重点标签
h系列
h标签没有嵌套关系,是一个容器级标签,理论上可以里面可以放文本级标签,比如
。
p标签
英语paragraph“段落”缩写,给文本添加段落语义。p标签是一个文本级标签,里面只能放文字、图片、表单元素。
1.HTML标签根据形式的不同,可分为对儿标签和自闭和标签。
对儿标签:
单标签(自封闭标签)
2.根据HTML标签容量的特性,可分为容器级和文本级标签。
容器级标签:
能嵌套其他所有标签
文本级标签
里面只能放文字、图片、表单元素,不能放其他任何标签。
好啦,这一章的知识就讲到这里啦,“纸上得来终觉浅,绝知此事要躬行”,现在呢,咱们就用电脑自带文本编辑器编写出人生第一个网页吧。
1.新建txt文本文件。
图2
2.在txt文档里写入以下代码。
图3
3.把txt文档后缀名改为html,改好文档图标样式也发生变化,如图5。
图5
4.右键单击html文档,选择用IE/谷歌/火狐等浏览器打开。效果如图6。
图6
哈哈哈,这是女神邓丽君的著名歌曲《微风细雨》的歌词,小编正单曲循环中<( ̄ˇ ̄)/︿( ̄︶ ̄)︿
在记事本里敲代码的时候有没觉得慢,一个符号一个符号敲,心情超级焦急,超级超级不愉快,别着急,下篇文章小编将为大家介绍几款常用代码编辑器,其中不乏女神男神级别的神器哦,敬请期待。再次谢谢大家支持(^o^)/
我是非IT专业小白一枚,想要自学前端技术,所以加入了CSDN大家庭,希望通过博客记录自己的所学所得,分享技术,交流经验。同时呢,也希望各位技术达人不吝赐教,小女子感激不尽。o( ̄▽ ̄)o
第一章 初识HTML
第一节 什么叫“上网”?
“上网”这个词对于我们来说并不陌生,打开电脑,打开浏览器,输入想关键词,然后就会找到相应的网页。为什么通过我们在电脑上能看到网页上的内容呢?事实上,上网就是请求数据,一个真实的物理的文件传输。网页其实就是包括html文件、css文件、js文件、图片等文件在电脑上渲染、呈递的结果。
制作网页者将网页上传至服务器之后,访问者即可通过搜索引擎向服务器发出HTTP请求,服务器收到请求,就会把这些文件通过HTTP协议传输到计算机中,并保存进一个临时文件夹中,在本地浏览器中渲染、呈递之后,就获得这个网页了。如图1:
图1
注:什么是HTTP协议,即Hypertext Transfer Protocol 的缩写,意思是“超文本传输协议”。
第二节 HTML基础
2.1 HTML基本知识HTML是英语HyperText Markup Language的缩写,超文本标记语言,她是一种负责描述文档语义的语言。
HTML是纯文本文件,只有文本,没有样式,文件后缀名是“html”。
HTML通过标签给文本添加语义。
HTML之所以称为“超文本”,是因为它可以通过超链接,连接不同空间的文档,进而与整个web网络连接起来。
2.2 HTML常用标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 <html>。 HTML 标签通常是成对出现的,比如 <p> 和 </p>。 标签对中的第一个标签是开始标签,第二个标签是结束标签。
常用标签简介
1.html基本骨架标签
<!DOCTYPE ……> <html> <head> <title>文档的标题</title> </head> <body> 文档的内容...... </body> </html> * <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令,没有结束标签,必须是 HTML 文档的第一行,位于 <html> 标签之前。 * <html>是文档的根元素,<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义,主体由 <body> 标签定义,所有html文档都有这个基本骨架。
2.其他重点标签
h系列
<h1></h1> 一级标题 <h2></h2> 二级标题 …… <h6></h6> 六级标题
h标签没有嵌套关系,是一个容器级标签,理论上可以里面可以放文本级标签,比如
。
p标签
英语paragraph“段落”缩写,给文本添加段落语义。p标签是一个文本级标签,里面只能放文字、图片、表单元素。
第三节 HTML标签分类
HTML是一种标记语言,所以存在大量用来给文本定义语义的标签,这些标签就是就是HTML语言的血肉。1.HTML标签根据形式的不同,可分为对儿标签和自闭和标签。
对儿标签:
1. <html></html> 2. <title></title> 3. <body></body> 4. <h1></h1> 5. <p></p> 未完待续……
单标签(自封闭标签)
1.<img/> 给文本定义图像 2.<br/> 给文本换行 3.<input/> 未完待续……
2.根据HTML标签容量的特性,可分为容器级和文本级标签。
容器级标签:
能嵌套其他所有标签
1.<div></div> division定义文档中的分区或节 2.<h></h> 3.<ul></ul> unorderlist 定义无序列表 4.<ol></ol> orderlist 定义有序列表 5.<dl></dl> definition 定义定义列表 6.<li></li> list 定义列表项目 7.<dt></dt> definition title 定义标题 8.<dd></dd> definition description 定义表述词儿
文本级标签
里面只能放文字、图片、表单元素,不能放其他任何标签。
1.<span></span> 组合行内元素,以便通过样式来格式化它们 2.<p></p>
好啦,这一章的知识就讲到这里啦,“纸上得来终觉浅,绝知此事要躬行”,现在呢,咱们就用电脑自带文本编辑器编写出人生第一个网页吧。
1.新建txt文本文件。
图2
2.在txt文档里写入以下代码。
图3
3.把txt文档后缀名改为html,改好文档图标样式也发生变化,如图5。
图5
4.右键单击html文档,选择用IE/谷歌/火狐等浏览器打开。效果如图6。
图6
哈哈哈,这是女神邓丽君的著名歌曲《微风细雨》的歌词,小编正单曲循环中<( ̄ˇ ̄)/︿( ̄︶ ̄)︿
在记事本里敲代码的时候有没觉得慢,一个符号一个符号敲,心情超级焦急,超级超级不愉快,别着急,下篇文章小编将为大家介绍几款常用代码编辑器,其中不乏女神男神级别的神器哦,敬请期待。再次谢谢大家支持(^o^)/
相关文章推荐
- 小白的前端学习日记HTML/CSS之---九宫格
- 前端小白进阶Day2-HTML写一首诗并配图
- 小白学Java Web 1 Web前端之HTML标签
- 小白学习前端---第一天 了解HTML
- 小白学习前端---第二天 HTML的基本属性————1
- 前端小白学习路线之HTML超文本标记语言
- 前端小白如何学HTML
- 常见前端面试题之HTML/CSS部分
- web前端小白入门教程
- 前端开发规范手册(二)--HTML
- iOS转前端之HTML基础知识学习
- 前端学习笔记之HTML DOM操作
- 前端面试常见HTML问题(一)
- 前端之HTML DOM操作
- 10款web前端基于html5/CSS3应用特效
- WP HTML Compression – 轻松压缩前端页面代码
- 前端面试学习笔记之HTML
- Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案
- 怎样使用chrome调试前端html和css
- 前端之html css常用单词