2023年6月21日发(作者：)
HTML原⽣学习⽬标:了解常⽤浏览器掌握WEB标准理解标签语义化掌握常⽤的排版标签掌握常⽤的⽂本格式化图像链接等标签掌握三种列表标签掌握表格标签掌握表格标签掌握表单标签掌握H5新增表单和表单属性认识⽹页⽂字，图像，超链接组成，视频，⾳频，和Flash⽹页是怎么形成的？常见浏览器介绍浏览器是⽹页运⾏的平台，常⽤的浏览器有IE、⽕狐（Firefox）、⾕歌（Chrome）、Safari和Opera等。我们平时称为五⼤浏览器。查看浏览器占有的市场份额（知晓）浏览器内核（理解 ⾯试题）浏览器内核⼜可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎 它负责取得⽹页的内容（HTML、XML、图像等等）、整理讯息（例如加⼊ CSS 等），以及计算⽹页的显⽰⽅式，然后会输出⾄显⽰器或打印机。浏览器的内核的不同对于⽹页的语法解释会有不同，所以渲染的效果也不相同。JS 引擎 则是解析 Javascript 语⾔，执⾏ javascript语⾔来实现⽹页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独⽴，内核就倾向于只指渲染引擎。有⼀个⽹页标准计划⼩组制作了⼀个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么⼈使⽤的⾮商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。（1）Trident(IE内核)国内很多的双核浏览器的其中⼀核便是 Trident，美其名⽈ “兼容模式”。代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。（2）Gecko(firefox)Gecko(Firefox 内核)： Mozilla FireFox(⽕狐浏览器) 采⽤该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很⾼，全世界的程序员都可以为其编写代码，增加功能。 可惜这⼏年已经没落了， ⽐如 打开速度慢、升级频繁、猪⼀样的队友flash、神⼀样的对⼿chrome。（3） webkit(Safari)Safari 是苹果公司开发的浏览器，所⽤浏览器内核的名称是⼤名⿍⿍的 WebKit。代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian⼿机浏览器、Android 默认浏览器，（4） Bink(chrome)在 Chromium 项⽬中研发 Blink 渲染引擎（即浏览器核⼼），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分⽀。 ⼤部分国产浏览器最新版都采⽤Blink内核。（5） Presto(Opera)Presto 是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从⽽投⼊到了⾕歌怀抱了。了解⼀点：移动端的浏览器内核主要说的是系统内置浏览器的内核。⽬前移动设备浏览器上常⽤的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分⽀ Blink，Windows Phone 8 系统浏览器内核是 Trident。Web标准（重点）由于浏览器的内核不同，所以解析出的页⾯⼀定有不同因此需要⼀套标准来规范我们的浏览器解析Web 标准的好处发展更⼴阔2.内容能被更多设备访问3.更容易被搜索引擎搜索4.使⽹站更易维护Web 标准构成Web标准不是某⼀个标准，⽽是由W3C和其他标准化组织制定的⼀系列标准的集合。主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。结构标准：结构⽤于对⽹页元素进⾏整理和分类，主要包括XML和XHTML两个部分。样式标准：表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的是CSS。⾏为标准：⾏为是指⽹页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分 js理想状态我们的源码： .HTML .css .js专业的⼈，写专业的代码直观感受：总结WEB标准：结构标准： 决定你是否有个好天然⾝体样式标准： 决定你是否打扮的美丽外观⾏为标准： 决定你是否有吸引⼈的⾏为HTMLHyper text markup language 超⽂本标记语⾔ 主要是对⽹页的⽂本，图⽚，声⾳进⾏描述HTML⾻架格式html标签 是所有标签的根节点head标签 ⽤于存放title meta base style script linktitle标签 展⽰页⾯标题body标签 页⾯的主题部分，⽤于存放所有标签HTML标签分类1.双标签 有闭合标签的叫做双标签2.单标签(⾃闭标签) ⽐较少
HTML标签关系嵌套同级测试题：请问下列哪个标签是错误的？A
B
C
</head> D
开发⼯具这些⼯具你认识⼏个？普通青年 Dreamweaver⽂艺青年 sublime⾼⼿和傻⼦ ⽤记事本其实。。。。⽂档类型这句话就是告诉我们使⽤哪个html版本？ 我们使⽤的是 html 5 的版本。 html有很多版本，那我们应该告诉⽤户和浏览器我们使⽤的版本号。标签位于⽂档的最前⾯，⽤于向浏览器说明当前⽂档使⽤哪种 HTML 或 XHTML 标准规范，必需在开头处使⽤标签为所有的XHTML⽂档指定XHTML版本和类型，只有这样浏览器才能按指定的⽂档类型进⾏解析。注意： ⼀些⽼⽹站可能⽤的还是⽼版本的⽂档类型⽐如 XHTML之类的，但是我们学的是HTML5,⽽且HTML5的⽂档类型兼容很好(向下兼容的原则)，所以⼤家放⼼的使⽤HTML5的⽂档类型就好了。字符集（charset）**不写出现乱码问题**gb2312 简体中⽂ 六千多个汉字BIG5 繁体中⽂GBK(扩展) 兼容GB2312，同⽀持繁体字UTF-8 包含所有语⾔，全世界⽤的字符HTML标签的语义化指标签的含义为什么要有语义化标签1.⽅便阅读和维护2.让浏览器，爬⾍可以更好的解析，可以分析到更优质的数据3.为搜索引擎提供优化HTML标签（*）排版标签就是⾻架的⼀些标签标题标签 (熟记)、、、、、标题标签语义： 作为标题使⽤，并且依据重要性递减其基本语法格式如下：
标题⽂本 h1 标签很重要，所以少⽤，⼀般⽤于logo或标题段落标签( 熟记)单词缩写： paragraph 段落在⽹页中要把⽂字有条理地显⽰出来，离不开段落标签，就如同我们平常写⽂章⼀样，整个⽹页也可以分为若⼲个段落，⽽段落的标签就是
⽂本内容
最常见的标签，默认情况下，⽂本或根据我们的浏览器⼤⼩来进⾏换⾏⽔平线标签(认识)单词缩写： horizontal 横线在⽹页中常常看到⼀些⽔平线将段落与段落之间隔开，使得⽂档结构清晰，层次分明。这些⽔平线可以通过插⼊图⽚实现，也可以简单地通过标签来完成，就是创建横跨⽹页⽔平线的标签。其基本语法格式如下：
是单标签在⽹页中显⽰默认样式的⽔平线。练习换⾏标签(熟记)单词缩写： break 打断 ,换⾏在HTML中，⼀个段落中的⽂字会从左到右依次排列，直到浏览器窗⼝的右端，然后⾃动换⾏。如果希望某段⽂本强制换⾏显⽰，就需要使⽤换⾏标签
这时如果还像在word中直接敲回车键换⾏就不起作⽤了。为什么不⽤演⽰div span标签(重点)
这是头部
今⽇价格“链接⽂本"创建链接⽂本。2.使⽤相应的id名标注跳转⽬标的位置。base 标签base 可以设置整体链接的打开状态base 写到 之间特殊字符标签 （理解）less thangreat than注释标签在HTML中还有⼀种特殊的标签——注释标签。如果需要在HTML⽂档中添加⼀些便于阅读和理解但⼜不需要显⽰在页⾯中的注释⽂字，就需要使⽤注释标签。其基本语法格式如下： 注释内容不会显⽰在浏览器窗⼝中，但是作为HTML⽂档内容的⼀部分，也会被下载到⽤户的计算机上，查看源代码时就可以看到。注释重要性：路径(重点、难点)实际⼯作中，通常新建⼀个⽂件夹专门⽤于存放图像⽂件，这时再插⼊图像，就需要采⽤“路径”的⽅式来指定图像⽂件的位置。路径可以分为： 相对路径和绝对路径相对路径1. 图像⽂件和HTML⽂件位于同⼀⽂件夹：只需输⼊图像⽂件的名称即可，如。2. 图像⽂件位于HTML⽂件的下⼀级⽂件夹：输⼊⽂件夹名和⽂件名，之间⽤“/”隔开，如。3. 图像⽂件位于HTML⽂件的上⼀级⽂件夹：在⽂件名之前加⼊“…/” ，如果是上两级，则需要使⽤ “…/ …/”，以此类推，如。绝对路径绝对路径列表标签什么是列表？把…制成表,以表显⽰容器⾥⾯装载着⽂字或图表的⼀种形式，叫列表。列表最⼤的特点就是 整齐 、整洁、 有序⽆序列表 ul （重点）⽆序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：⽐如下⾯这些，新闻是没有顺序的，不⽤排队，先到先得，后发布先显⽰。脚下留⼼： 1. 中只能嵌套与 之间相当于⼀个容器，可以容纳所有元素。 3. ⽆序列表会带有⾃⼰样式属性，放下那个样式，⼀会让CSS来！有序列表 ol （了解）有序列表即为有排列顺序的列表，其各个列表项按照⼀定的顺序排列定义，有序列表的基本语法格式如下： 列表项1 列表项2 列表项3 ...... 所有特性基本与ul ⼀致。但是实际⼯作中， 较少⽤ ol ，因此我们⽤⼀句话来总结下 ol：⾃定义列表（理解）定义列表常⽤于对术语或名词进⾏解释和描述，定义列表的列表项前没有任何项⽬符号。其基本语法如下： 名词1 名词1解释1 名词1解释2 ... 名词2 名词2解释1 名词2解释2 ... ⽤的还可以：总结表格 table(会使⽤)存在即是合理的。 表格的现在还是较为常⽤的⼀种标签，但不是⽤来布局，常见处理、显⽰表格式数据。ps: 这些地⽅⽤表格，你会觉得⽣活还是那么美好。。。。忍不住想说 PPAP i hava a pen创建表格在HTML⽹页中，要想创建表格，就需要使⽤表格相关的标签。创建表格的基本语法格式如下：在上⾯的语法中包含三对HTML标签，分别为 、 ，他们是创建表格的基本标签，缺⼀不可，下⾯对他们进⾏具体地解释⽤于定义⼀个表格。 ⽤于定义表格中的⼀⾏，必须嵌套在 table标签中，在 table中包含⼏对 tr，就有⼏⾏表格。 /td：⽤于定义表格中的单元格，必须嵌套在
标签中，⼀对
中包含⼏对
，就表⽰该⾏中有多少列（或多少个单元格）。注意：1.
中只能嵌套
2.
标签，他就像⼀个容器，可以容纳所有的元素表格属性表头标签表头⼀般位于表格的第⼀⾏或第⼀列，其⽂本加粗居中，如下图所⽰，即为设置了表头的表格。设置表头⾮常简单，只需⽤表头标签
替代相应的单元格标签
即可。表格结构（了解）在使⽤表格进⾏布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所⽰：
：⽤于定义表格的头部。必须位于
标签中，⼀般包含⽹页的logo和导航等头部信息。
：⽤于定义表格的主体。位于
标签中，⼀般包含⽹页中除头部和底部之外的其他内容。表格标题表格的标题： caption定义和⽤法caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义⼀个标题。通常这个标题会被居中于表格之上。合并单元格(难点)跨⾏合并：rowspan 跨列合并：colspan合并单元格的思想： 将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成⼀个， 那就多余了2个，需要删除。 公式： 删除的个数 = 合并的个数 - 1合并的顺序 先上 先左总结表格1. 表格提供了HTML 中定义表格式数据的⽅法。2. 表格中由⾏中的单元格组成。3. 表格中没有列元素，列的个数取决于⾏的单元格个数。4. 表格不要纠结于外观，那是CSS 的作⽤。表格的学习要求： 能⼿写表格结构，并且能合并单元格。表单标签(掌握)现实中的表单，类似我们去银⾏办理信⽤卡填写的单⼦。 如下图⽬的是为了收集⽤户信息。在我们⽹页中， 我们也需要跟⽤户进⾏交互，收集⽤户资料，此时也需要表单。在HTML中，⼀个完整的表单通常由表单控件（也称为表单元素）、提⽰信息和表单域3个部分构成。表单控件： 包含了具体的表单功能项，如单⾏⽂本输⼊框、密码输⼊框、复选框、提交按钮、重置按钮等。提⽰信息： ⼀个表单中通常还需要包含⼀些说明性的⽂字，提⽰⽤户进⾏填写和操作。表单域： 他相当于⼀个容器，⽤来容纳所有的表单控件和提⽰信息，可以通过他定义处理表单数据所⽤程序的url地址，以及数据提交到服务器的⽅法。如果不定义表单域，表单中的数据就⽆法传送到后台服务器。input 控件(重点)在上⾯的语法中，
标签为单标签，type属性为其最基本的属性，其取值有多种，⽤于指定不同的控件类型。除了type属性之外，
标签还可以定义很多其他的属性，其常⽤属性如下表所⽰。label标签(理解)label 标签为 input 元素定义标注（标签）。作⽤： ⽤于绑定⼀个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输⼊焦点如何绑定元素呢？for 属性规定 label 与哪个表单元素绑定。
Male textarea控件(⽂本域)如果需要输⼊⼤量的信息，就需要⽤到
标签。通过textarea控件可以轻松地创建多⾏⽂本输⼊框，其基本语法格式如下：
下拉菜单使⽤select控件定义下拉菜单的基本语法格式如下
选项1 选项2 选项3 ... 注意：1.
中⾄少应包含⼀对
。2. 在option 中定义selected =" selected "时，当前项即为默认选中项。表单域在HTML中，form标签被⽤于定义表单域，即创建⼀个表单，以实现⽤户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
常⽤属性：1. Action在表单收集到信息后，需要将信息传递给服务器进⾏处理，action属性⽤于指定接收并处理表单数据的服务器程序的url地址。2. method⽤于设置表单数据的提交⽅式，其取值为get或post。3. name⽤于指定表单的名称，以区分同⼀个页⾯中的多个表单。注意： 每个表单都应该有⾃⼰表单域。HTML5新标签与特性⽂档类型设定documentHTML: sublime 输⼊ html:4sXHTML: sublime 输⼊ html:xtHTML5 sublime 输⼊ html:5字符设定：HTML与XHTML中建议这样去写：HTML5的标签中建议这样去写常⽤新标签header：定义⽂档的页眉 头部nav：定义导航链接的部分footer：定义⽂档或节的页脚 底部article：定义⽂章。section：定义⽂档中的节（section、区段）aside：定义其所处内容之外的内容 侧边
语义 :定义导航栏 语义: 定义⽂章 datalist 标签定义选项列表。请与 input 元素配合使⽤该元素
刘德华 刘若英 刘晓庆 郭富城 张学友 郭郭 fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使⽤
⽤户登录 标题 ⽤户名: 新增的input type属性值：类型****email****tel****url****number****search****range****time****date****datetime****month****week****使⽤⽰例****含义****输⼊邮箱格式输⼊⼿机号码格式输⼊url格式输⼊数字格式搜索框（体现语义化）⾃由拖动滑块⼩时分钟年⽉⽇时间⽉年星期 年常⽤新属性属性****⽤法****含义****placeholder****autofocus****multiple****占位符 当⽤户输⼊的时候 ⾥⾯的⽂字消失 删除所有⽂字，⾃动返回规定当页⾯加载时 input 元素应该⾃动获得焦点多⽂件上传规定表单是否应该启⽤⾃动完成功能 有2个值，⼀个是on ⼀个是off on 代表记录已经输⼊的值 mplete ⾸先需要autocomplete****提交按钮
2.这个表单您必须给他名字required****accesskey****必填项 内容不能为空规定激活（使元素获得焦点）元素的快捷键 采⽤ alt + s的形式综合案例
总结HTML 第⼆天的主题：熟悉列表— 会使⽤表格 — 掌握常⽤表单ype=“email” />
所属学院:
java学院前端学院php学院设计学院 出⽣⽇期: 成绩: 毕业时间: ⼊学⽇期:
毕业⽇期:
2023年6月21日发(作者：)
HTML原⽣学习⽬标:了解常⽤浏览器掌握WEB标准理解标签语义化掌握常⽤的排版标签掌握常⽤的⽂本格式化图像链接等标签掌握三种列表标签掌握表格标签掌握表格标签掌握表单标签掌握H5新增表单和表单属性认识⽹页⽂字，图像，超链接组成，视频，⾳频，和Flash⽹页是怎么形成的？常见浏览器介绍浏览器是⽹页运⾏的平台，常⽤的浏览器有IE、⽕狐（Firefox）、⾕歌（Chrome）、Safari和Opera等。我们平时称为五⼤浏览器。查看浏览器占有的市场份额（知晓）浏览器内核（理解 ⾯试题）浏览器内核⼜可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎 它负责取得⽹页的内容（HTML、XML、图像等等）、整理讯息（例如加⼊ CSS 等），以及计算⽹页的显⽰⽅式，然后会输出⾄显⽰器或打印机。浏览器的内核的不同对于⽹页的语法解释会有不同，所以渲染的效果也不相同。JS 引擎 则是解析 Javascript 语⾔，执⾏ javascript语⾔来实现⽹页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独⽴，内核就倾向于只指渲染引擎。有⼀个⽹页标准计划⼩组制作了⼀个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么⼈使⽤的⾮商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。（1）Trident(IE内核)国内很多的双核浏览器的其中⼀核便是 Trident，美其名⽈ “兼容模式”。代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。（2）Gecko(firefox)Gecko(Firefox 内核)： Mozilla FireFox(⽕狐浏览器) 采⽤该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很⾼，全世界的程序员都可以为其编写代码，增加功能。 可惜这⼏年已经没落了， ⽐如 打开速度慢、升级频繁、猪⼀样的队友flash、神⼀样的对⼿chrome。（3） webkit(Safari)Safari 是苹果公司开发的浏览器，所⽤浏览器内核的名称是⼤名⿍⿍的 WebKit。代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian⼿机浏览器、Android 默认浏览器，（4） Bink(chrome)在 Chromium 项⽬中研发 Blink 渲染引擎（即浏览器核⼼），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分⽀。 ⼤部分国产浏览器最新版都采⽤Blink内核。（5） Presto(Opera)Presto 是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从⽽投⼊到了⾕歌怀抱了。了解⼀点：移动端的浏览器内核主要说的是系统内置浏览器的内核。⽬前移动设备浏览器上常⽤的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分⽀ Blink，Windows Phone 8 系统浏览器内核是 Trident。Web标准（重点）由于浏览器的内核不同，所以解析出的页⾯⼀定有不同因此需要⼀套标准来规范我们的浏览器解析Web 标准的好处发展更⼴阔2.内容能被更多设备访问3.更容易被搜索引擎搜索4.使⽹站更易维护Web 标准构成Web标准不是某⼀个标准，⽽是由W3C和其他标准化组织制定的⼀系列标准的集合。主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。结构标准：结构⽤于对⽹页元素进⾏整理和分类，主要包括XML和XHTML两个部分。样式标准：表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的是CSS。⾏为标准：⾏为是指⽹页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分 js理想状态我们的源码： .HTML .css .js专业的⼈，写专业的代码直观感受：总结WEB标准：结构标准： 决定你是否有个好天然⾝体样式标准： 决定你是否打扮的美丽外观⾏为标准： 决定你是否有吸引⼈的⾏为HTMLHyper text markup language 超⽂本标记语⾔ 主要是对⽹页的⽂本，图⽚，声⾳进⾏描述HTML⾻架格式html标签 是所有标签的根节点head标签 ⽤于存放title meta base style script linktitle标签 展⽰页⾯标题body标签 页⾯的主题部分，⽤于存放所有标签HTML标签分类1.双标签 有闭合标签的叫做双标签2.单标签(⾃闭标签) ⽐较少
HTML标签关系嵌套同级测试题：请问下列哪个标签是错误的？A
B
C
</head> D
开发⼯具这些⼯具你认识⼏个？普通青年 Dreamweaver⽂艺青年 sublime⾼⼿和傻⼦ ⽤记事本其实。。。。⽂档类型这句话就是告诉我们使⽤哪个html版本？ 我们使⽤的是 html 5 的版本。 html有很多版本，那我们应该告诉⽤户和浏览器我们使⽤的版本号。标签位于⽂档的最前⾯，⽤于向浏览器说明当前⽂档使⽤哪种 HTML 或 XHTML 标准规范，必需在开头处使⽤标签为所有的XHTML⽂档指定XHTML版本和类型，只有这样浏览器才能按指定的⽂档类型进⾏解析。注意： ⼀些⽼⽹站可能⽤的还是⽼版本的⽂档类型⽐如 XHTML之类的，但是我们学的是HTML5,⽽且HTML5的⽂档类型兼容很好(向下兼容的原则)，所以⼤家放⼼的使⽤HTML5的⽂档类型就好了。字符集（charset）**不写出现乱码问题**gb2312 简体中⽂ 六千多个汉字BIG5 繁体中⽂GBK(扩展) 兼容GB2312，同⽀持繁体字UTF-8 包含所有语⾔，全世界⽤的字符HTML标签的语义化指标签的含义为什么要有语义化标签1.⽅便阅读和维护2.让浏览器，爬⾍可以更好的解析，可以分析到更优质的数据3.为搜索引擎提供优化HTML标签（*）排版标签就是⾻架的⼀些标签标题标签 (熟记)、、、、、标题标签语义： 作为标题使⽤，并且依据重要性递减其基本语法格式如下：
标题⽂本 h1 标签很重要，所以少⽤，⼀般⽤于logo或标题段落标签( 熟记)单词缩写： paragraph 段落在⽹页中要把⽂字有条理地显⽰出来，离不开段落标签，就如同我们平常写⽂章⼀样，整个⽹页也可以分为若⼲个段落，⽽段落的标签就是
⽂本内容
最常见的标签，默认情况下，⽂本或根据我们的浏览器⼤⼩来进⾏换⾏⽔平线标签(认识)单词缩写： horizontal 横线在⽹页中常常看到⼀些⽔平线将段落与段落之间隔开，使得⽂档结构清晰，层次分明。这些⽔平线可以通过插⼊图⽚实现，也可以简单地通过标签来完成，就是创建横跨⽹页⽔平线的标签。其基本语法格式如下：
是单标签在⽹页中显⽰默认样式的⽔平线。练习换⾏标签(熟记)单词缩写： break 打断 ,换⾏在HTML中，⼀个段落中的⽂字会从左到右依次排列，直到浏览器窗⼝的右端，然后⾃动换⾏。如果希望某段⽂本强制换⾏显⽰，就需要使⽤换⾏标签
这时如果还像在word中直接敲回车键换⾏就不起作⽤了。为什么不⽤演⽰div span标签(重点)
这是头部
今⽇价格“链接⽂本"创建链接⽂本。2.使⽤相应的id名标注跳转⽬标的位置。base 标签base 可以设置整体链接的打开状态base 写到 之间特殊字符标签 （理解）less thangreat than注释标签在HTML中还有⼀种特殊的标签——注释标签。如果需要在HTML⽂档中添加⼀些便于阅读和理解但⼜不需要显⽰在页⾯中的注释⽂字，就需要使⽤注释标签。其基本语法格式如下： 注释内容不会显⽰在浏览器窗⼝中，但是作为HTML⽂档内容的⼀部分，也会被下载到⽤户的计算机上，查看源代码时就可以看到。注释重要性：路径(重点、难点)实际⼯作中，通常新建⼀个⽂件夹专门⽤于存放图像⽂件，这时再插⼊图像，就需要采⽤“路径”的⽅式来指定图像⽂件的位置。路径可以分为： 相对路径和绝对路径相对路径1. 图像⽂件和HTML⽂件位于同⼀⽂件夹：只需输⼊图像⽂件的名称即可，如。2. 图像⽂件位于HTML⽂件的下⼀级⽂件夹：输⼊⽂件夹名和⽂件名，之间⽤“/”隔开，如。3. 图像⽂件位于HTML⽂件的上⼀级⽂件夹：在⽂件名之前加⼊“…/” ，如果是上两级，则需要使⽤ “…/ …/”，以此类推，如。绝对路径绝对路径列表标签什么是列表？把…制成表,以表显⽰容器⾥⾯装载着⽂字或图表的⼀种形式，叫列表。列表最⼤的特点就是 整齐 、整洁、 有序⽆序列表 ul （重点）⽆序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：⽐如下⾯这些，新闻是没有顺序的，不⽤排队，先到先得，后发布先显⽰。脚下留⼼： 1. 中只能嵌套与 之间相当于⼀个容器，可以容纳所有元素。 3. ⽆序列表会带有⾃⼰样式属性，放下那个样式，⼀会让CSS来！有序列表 ol （了解）有序列表即为有排列顺序的列表，其各个列表项按照⼀定的顺序排列定义，有序列表的基本语法格式如下： 列表项1 列表项2 列表项3 ...... 所有特性基本与ul ⼀致。但是实际⼯作中， 较少⽤ ol ，因此我们⽤⼀句话来总结下 ol：⾃定义列表（理解）定义列表常⽤于对术语或名词进⾏解释和描述，定义列表的列表项前没有任何项⽬符号。其基本语法如下： 名词1 名词1解释1 名词1解释2 ... 名词2 名词2解释1 名词2解释2 ... ⽤的还可以：总结表格 table(会使⽤)存在即是合理的。 表格的现在还是较为常⽤的⼀种标签，但不是⽤来布局，常见处理、显⽰表格式数据。ps: 这些地⽅⽤表格，你会觉得⽣活还是那么美好。。。。忍不住想说 PPAP i hava a pen创建表格在HTML⽹页中，要想创建表格，就需要使⽤表格相关的标签。创建表格的基本语法格式如下：在上⾯的语法中包含三对HTML标签，分别为 、 ，他们是创建表格的基本标签，缺⼀不可，下⾯对他们进⾏具体地解释⽤于定义⼀个表格。 ⽤于定义表格中的⼀⾏，必须嵌套在 table标签中，在 table中包含⼏对 tr，就有⼏⾏表格。 /td：⽤于定义表格中的单元格，必须嵌套在
标签中，⼀对
中包含⼏对
，就表⽰该⾏中有多少列（或多少个单元格）。注意：1.
中只能嵌套
2.
标签，他就像⼀个容器，可以容纳所有的元素表格属性表头标签表头⼀般位于表格的第⼀⾏或第⼀列，其⽂本加粗居中，如下图所⽰，即为设置了表头的表格。设置表头⾮常简单，只需⽤表头标签
替代相应的单元格标签
即可。表格结构（了解）在使⽤表格进⾏布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所⽰：
：⽤于定义表格的头部。必须位于
标签中，⼀般包含⽹页的logo和导航等头部信息。
：⽤于定义表格的主体。位于
标签中，⼀般包含⽹页中除头部和底部之外的其他内容。表格标题表格的标题： caption定义和⽤法caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义⼀个标题。通常这个标题会被居中于表格之上。合并单元格(难点)跨⾏合并：rowspan 跨列合并：colspan合并单元格的思想： 将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成⼀个， 那就多余了2个，需要删除。 公式： 删除的个数 = 合并的个数 - 1合并的顺序 先上 先左总结表格1. 表格提供了HTML 中定义表格式数据的⽅法。2. 表格中由⾏中的单元格组成。3. 表格中没有列元素，列的个数取决于⾏的单元格个数。4. 表格不要纠结于外观，那是CSS 的作⽤。表格的学习要求： 能⼿写表格结构，并且能合并单元格。表单标签(掌握)现实中的表单，类似我们去银⾏办理信⽤卡填写的单⼦。 如下图⽬的是为了收集⽤户信息。在我们⽹页中， 我们也需要跟⽤户进⾏交互，收集⽤户资料，此时也需要表单。在HTML中，⼀个完整的表单通常由表单控件（也称为表单元素）、提⽰信息和表单域3个部分构成。表单控件： 包含了具体的表单功能项，如单⾏⽂本输⼊框、密码输⼊框、复选框、提交按钮、重置按钮等。提⽰信息： ⼀个表单中通常还需要包含⼀些说明性的⽂字，提⽰⽤户进⾏填写和操作。表单域： 他相当于⼀个容器，⽤来容纳所有的表单控件和提⽰信息，可以通过他定义处理表单数据所⽤程序的url地址，以及数据提交到服务器的⽅法。如果不定义表单域，表单中的数据就⽆法传送到后台服务器。input 控件(重点)在上⾯的语法中，
标签为单标签，type属性为其最基本的属性，其取值有多种，⽤于指定不同的控件类型。除了type属性之外，
标签还可以定义很多其他的属性，其常⽤属性如下表所⽰。label标签(理解)label 标签为 input 元素定义标注（标签）。作⽤： ⽤于绑定⼀个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输⼊焦点如何绑定元素呢？for 属性规定 label 与哪个表单元素绑定。
Male textarea控件(⽂本域)如果需要输⼊⼤量的信息，就需要⽤到
标签。通过textarea控件可以轻松地创建多⾏⽂本输⼊框，其基本语法格式如下：
下拉菜单使⽤select控件定义下拉菜单的基本语法格式如下
选项1 选项2 选项3 ... 注意：1.
中⾄少应包含⼀对
。2. 在option 中定义selected =" selected "时，当前项即为默认选中项。表单域在HTML中，form标签被⽤于定义表单域，即创建⼀个表单，以实现⽤户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
常⽤属性：1. Action在表单收集到信息后，需要将信息传递给服务器进⾏处理，action属性⽤于指定接收并处理表单数据的服务器程序的url地址。2. method⽤于设置表单数据的提交⽅式，其取值为get或post。3. name⽤于指定表单的名称，以区分同⼀个页⾯中的多个表单。注意： 每个表单都应该有⾃⼰表单域。HTML5新标签与特性⽂档类型设定documentHTML: sublime 输⼊ html:4sXHTML: sublime 输⼊ html:xtHTML5 sublime 输⼊ html:5字符设定：HTML与XHTML中建议这样去写：HTML5的标签中建议这样去写常⽤新标签header：定义⽂档的页眉 头部nav：定义导航链接的部分footer：定义⽂档或节的页脚 底部article：定义⽂章。section：定义⽂档中的节（section、区段）aside：定义其所处内容之外的内容 侧边
语义 :定义导航栏 语义: 定义⽂章 datalist 标签定义选项列表。请与 input 元素配合使⽤该元素
刘德华 刘若英 刘晓庆 郭富城 张学友 郭郭 fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使⽤
⽤户登录 标题 ⽤户名: 新增的input type属性值：类型****email****tel****url****number****search****range****time****date****datetime****month****week****使⽤⽰例****含义****输⼊邮箱格式输⼊⼿机号码格式输⼊url格式输⼊数字格式搜索框（体现语义化）⾃由拖动滑块⼩时分钟年⽉⽇时间⽉年星期 年常⽤新属性属性****⽤法****含义****placeholder****autofocus****multiple****占位符 当⽤户输⼊的时候 ⾥⾯的⽂字消失 删除所有⽂字，⾃动返回规定当页⾯加载时 input 元素应该⾃动获得焦点多⽂件上传规定表单是否应该启⽤⾃动完成功能 有2个值，⼀个是on ⼀个是off on 代表记录已经输⼊的值 mplete ⾸先需要autocomplete****提交按钮
2.这个表单您必须给他名字required****accesskey****必填项 内容不能为空规定激活（使元素获得焦点）元素的快捷键 采⽤ alt + s的形式综合案例
总结HTML 第⼆天的主题：熟悉列表— 会使⽤表格 — 掌握常⽤表单ype=“email” />
所属学院:
java学院前端学院php学院设计学院 出⽣⽇期: 成绩: 毕业时间: ⼊学⽇期:
毕业⽇期:
发布评论