目录
整理仓促,文章中有任何问题,敬请提出,感谢支持,让我们共同进步吧!
前端的相关知识概述,从头学习前端“三剑客”(HTML5、Css、JavaScript),共分基础篇(HTML5)、进阶篇(Css)和高级篇(JavaScript)!
本篇为基础篇!
1、HTML概念
HTML是 HyperText Markup Language 的简称,中文名称: 超文本标记语言 ,它是一种用于创建网页的标准标记语言。 标记语言是由标签构成的语言,例如 html , xml ;注意:标记语言不是编程语言。HTML 运行在浏览器上, 由浏览器来解析。
2、属性
1. 后缀名.html和 .htm 两种都可以,没有区别。授课中都是 .html后缀名,个人习惯不同而已。2. 标签的分类围堵标签:有开始标签和结束标签,例如 <html></html>自闭和标签:开始标签和结束标签都在一个标签中 <br/>3. 嵌套标签可以嵌套,但是嵌套的语法要正确4. 定义属性标签的内部是可以定义属性的,属性由键值对组成,值需要用双引号引起来,多个属性用空格隔开
3、基本结构
(1)结构
<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ,围堵标签-->
<html>
<!--head,头元素:
作用:
1、用于指定HTML文章中的一些元数据, 例如元数据 meta:定义页面的编码格式 title:定义页面的标题 2、引入外部的资源文件
-->
<head>
<title>这是我的第一个HTML页面</title>
</head>
<!--
body,主体:
浏览器显示的内容都将在这里编写
格式化代码的快捷键:ctrl+shift+f(英文状态下使用)
-->
<body>
hello html 这是我的第一个HTML页面
</body>
</html>
(2)注释
语法:HTML 注释以 <!-- 开头 ,以 --> 结尾。注释的部分浏览器不解析,注释是为了给程序员看,更好的了解 html 代码
4、常用标签
(1)文本标签
标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
特点:字体逐渐缩小
(2)换行标签
<br>
(3)段落标签
<p></p>
(4)水平线标签
<hr>
(5)范围标签
一般在大段内容中,为了突出部分内容的时候使用的标签;很少独立使用,一般嵌套在其他的标签中使 用。不是因为有了范围标签,局部内容的样式才有变化;是为了改变局部内容样子,我们才通过范围标签包裹,然后修改它的样式。
(6)图片标签
<img src="xx.jpg">
(7)列表标签
一般用在导航
无序列表
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
(8)超链接
超链接标签一般有两个作用: 1 、用来实现页面间的跳转 2 、实现锚链接功能
<a href="www.baidu.com"></a>
(9)表单
概念:用于采集用户输入的数据。用于和服务器进行交互。
表单项元素中的一些属性:
id: 元素的唯一表示,不重复name: 表单项元素的名称,很重要 -- 提交数据到服务器之后,服务器获取数据通过该名称value: 表单项元素的值,服务器获取数据通过 name 获取到的就是 valuetype: 表示表单项元素的呈现形式class: 表示样式名称readonly: 表示只读,用户只能看不能改disabled :表示禁用,该元素不能改而且背景是灰色
(10)组合标签
div-ul-li/div-ol-li :常用于导航布局div-dl-dt-dd: 常用于图文混编布局div-form: 常用于表单布局div-table: 常用于局部规则数据展示布局
(11)转义符号
转义为空格<转义为小于号 <&le ;转义为小于等于号 ≤>转义为大于号>≥转义为大于等于号≥©转义为版权符号 ©
5、标签分类(面试)
html标签可以分为块状元素和行级元素两类。块状元素:一般都是新起一行,可以容纳行内元素和其他块级元素;行级元素:一般都是语义级别的基本元素,一般只能容纳文本或者其他行内元素。PS:区分的简单方法:是否独占一行。块状元素和行内元素的区别:1、 块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素会排列到同一行里,其宽度随元素的内容变化而变化。2、块级元素可以设置宽高;行内元素设置宽高无效。3、块级元素可以设置 margin , padding 属性;行内元素的水平方向的 padding会有边距效果,但是竖直方向的padding没有效果。属于块状元素的:标题标签 h1-h6,段落标签 p ,水平线标签 hr,有序列表标签 ol--li,无序列表标签 ul--li,定义描述标签 dl-dt-dd,容器标签 div:属于行级元素的:范围标签:span图像标签:img
6、HTML4与HTML5的区别
HTML4 和 HTML5 分别是超文本标记语言的第四次和第五次修改,他们分别是 html 语言第 4 和第 5 版本HTML4 是为了适应 pc 时代产生的, HTML5 是为了适应移动互联网时代 , 为了在移动设备上支持多媒 体。 HTML5 是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技 术之一。HTML 产生于 1990 年, 1997 年 HTML4 成为互联网标准,并广泛应用于互联网应用的开发。HTML5 将 Web 带入一个成熟的应用平台,在这个平台上,视频、音频、图像、动画以及与设备的交互都进行了规范。HTML5 技术在未来主要发展的市场还是在移动端互联网领域,现阶段移动浏览器有应用体验不佳、网页标准不统一的劣势,这两个方面是移动端网页发展的障碍,而 HTML5 技术能够解决这两个问题,并且将 劣势转化为优势,整体推动整个移动端网页方面的发展。HTML4: 使用 meta 元素的形式指定文件中的字符编码 ( 通过 content 元素的属性来指定 )HTML5: 使用对元素直接追加 charset 属性的方式来指定字符编码。从 H5 开始,对于文件的字符编码推荐使用UTF-8 。
7、推荐两个编辑器
HBuilder下载地址: HBuilderX-高效极客技巧sublime text
8、推荐两个学习网站
菜鸟教程
w3school
网址:HTML5 简介
9、两点建议
(1)纸上得来终觉浅,绝知此事要躬行。
(2)不经一番寒彻骨,怎得梅花扑鼻香。