1.HTML(html即超文本标记语言)
HTML5是什么?
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(Hyper Text Markup Language)的第五次重大修改
1.W3C制定的关于HTML技术约定的规范
2.行业的技术标杆
3.规定最新HTML5+CSS3+Javascript api
4.跨平台开发的最终解决方案
5.Web App的时代
HTML5新特性
1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
3.对本地存储、离线缓存的更好的支持
4.新的特殊内容元素,比如 article、footer、header、nav、section
5.新的表单控件,比如date、time、email、url、search
前端工程师必备技能?
1.热门的JS框架
2.技能要全面
3.需要掌握的核心技能
标记以及网页的基本结构
HTML发展史
HTML页面结构
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: Hyper Text Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML 文档也叫做 web 页面
1 使用HTML语言标记文本。例如,定义标题文本、段落文本、列表文本和预定义文本等。
2 使用HTML语言建立超链接,通过超链接可以访问互联网上的所有信息,当使用鼠标单击超链接时,会自动跳转到链接页面。
3 使用HTML语言创建列表,把信息有序组织在一起,以方便浏览
4 使用HTML语言在网页中显示图、声音、视频等多媒体信息,把网页设计得更富冲击力。
5 使用HTML语言制作表格,以便显示大量的数据
6 使用HTML语言制作表单,允许在网页内输入文本信息等。
结构页面标签代表什么?
DOCTYPE 声明了文档类型
html标签 描述了文档类型
head标签 包含了所有的头部标签元素
title标签 定义了浏览器工具栏的标题
meta标签 对页面的元信息进行设置
body标签 为可视化网页内容
HTML的标签
1.HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
2.HTML 标签是由尖括号包围的关键词,比如
3.HTML 标签通常是成对出现的,比如 和
4.标签中的第一个标签是开始标签,第二个标签是结束标签
5.开始和结束标签也被称为开放标签和闭合标签
6.Eg:
7.<标签>我是内容</标签>
web浏览器
1.Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。
2.浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容是给用户;
3.**:只有区域才会在浏览器中显示
HTML文档类型声明
1.<!DOCTYPE>声明有助于浏览器中正确显示网页。
2.网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
3.doctype 声明是不区分大小写的,以下方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
4.标签位于head之内
meta元素可提供有关页面的元信息
meta常用的属性:charset name content
name 和 content属性必须配合使用,基本语法如下:
示例:
5.声明页面的编码格式:
这句话来声明整个网页的字符串集的格式
title标签:
用来定义这个页面的标题,需要放在编码声明下面
HTML页面重构
页面重构:简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单的直接把PSD从PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。
2.开发环境搭建
常用编译器
常用浏览器
常用HTML的标记
文本、链接、列表、图像
表格
表单
基本标签
基本标签–块标签
特征:独占一行,换行显示,可以设置宽高,块可以套块和行
css的border属性:
border语法:
border : 线条宽度 线条类型 线条颜色
线条类型: solid(实线) dotted(点状) dashed(虚线) double (双线)
基本标签
基本标签–行标签
var: 显示为斜体 定义文本的变量部分
strong: 定义强调文本(逻辑元素)
b: 定义粗体文本(效果与strong标签展示效果一样)(物理元素)
em: 定义斜体 强调文本(逻辑元素)
i: 定义斜体(物理元素)
table标签
table:(块级元素标签)
定义表格标题
tr:表格的行
th:表头单元格
td:单元格
form标签
method属性:规定用于发送表单数据的HTTP方法
- get是从服务器上获取数据,post是向服务器传送数据。
- get是把参数数据队列加到提交表单的ACTION属性所指的URL中,在URL中可以看到。post是通过HTTP post机制,用户看不到这个过程 。
- get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。
- get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
特殊符号
空格:
大于(>):>
小于(<): <
引号(”):"
版权号() :©
HTML 特殊符号编码对照表 http://tool.chinaz.com/Tools/HtmlChar.aspx
浏览器调试
书写代码养成好习惯,代码要规范
1、文档声明。
2、页面编码。
3、关键字与描述。
4、页面中不要使用 进行缩进,如需缩进,使用CSS控制。
5、代码缩进,最好使用四个空格的TAB键。
6、HTML标签名、属性名最好全部采用小写,属性必须加引号,并且必须闭合,单标签也必须闭合。
7、行内元素禁止包裹块级元素。
8、HTML标签使用必须语义化。
9、a标签不能嵌套a标签。
10.要为img标签填写alt和title属性。