视觉派Pie
视觉派Pie

【前端进阶100天】Day01 HTML基础

今日内容：

  • 1、本专业介绍、HTML相关概念，HTML发展历史
  • 2、WEB标准，W3C/WHATWG/ECMA相关概念
  • 3、相关软件的应用以及站点的创建
  • 4、HTML基本结构和HTML语法
  • 5、HTML常用标记

一、本专业介绍、HTML相关概念，HTML发展历史

本专业介绍

移动前端/WEB前端

网站建站流程

【前端进阶100天】Day01 HTML基础_第1张图片
网站建站流程

HTML及相关概念的介绍

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。

XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。

HTML5指的是HTML的第五次重大修改（第5个版本）(HTML5 是 W3C 与 WHATWG 合作的结果)。

HTML发展历史

【前端进阶100天】Day01 HTML基础_第2张图片
image

二、WEB标准，W3C/WHATWG/ECMA相关概念

WEB标准的概念及组成

【前端进阶100天】Day01 HTML基础_第3张图片
image

组织解析

（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C 制定了结构(xhtml、xml)和表现(css)的标准，非赢利性的。

（2）ECMA(European Computer Manufactures Association) 欧洲电脑场商联合会。

ECMA制定了行为(DOM(文档对象模型)，ECMAScript)标准。

（3）WHATWG网页超文本应用技术工作小组是：

一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

三、相关软件的应用以及站点的创建

站点的作用

  • 用来归纳一个网站上所有的网页、素材以及他们之间的联系

  • 规划网站的所有内容和代码 整合资源

创建站点的步骤

创建网页所需各个文件夹 css、js、images、html

文件的命名规则

  • 文件命名规则：用英文，不用中文；

  • 名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；

  • 必须以英文字母开头；

  • 网站的首页必须命名为index.html不建议使用shouye.html。

四、HTML基本结构和HTML基本语法

HTML基本结构

【前端进阶100天】Day01 HTML基础_第4张图片
image

网页标题

声明文档类型，告知浏览器以何种方式解析页面。

拓展知识点：

HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容

声明了文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Transitional//EN" 的 DTD(Document Type Definition 文档类型定义) 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置

另外，需要知道的是，HTML 4.01 规定的三种文档类型、XHTML 1.0 规定的三种

XML 文档类型都是：Strict、Transitional 以及 Frameset。

定义文档类型 分为四种：Strict（严格型)、Trasitional（过渡型 常用这种）、Frameset（框架型）、手机浏览器DTD mobile

而这句，是在文档中的 标签中使用 xmlns 属性，以指定整个文档所使用的主要命名空间。

对于文档声明，了解这些就足够了，现在的html5不再这么繁琐，只需要：

就可以了。

HTML的基本语法

1.<常规标记>双标记

<标记 属性=“属性值” 属性=“属性值”>

例如：

2.空标记 单标记

<标记 属性=“属性值” />

例如：

说明：

1.写在<>中的第一个单词叫做标记，标签，元素。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标记没有结束标签，用“/”代替。

五、HTML常用标记

1.文本标题（h1-h6）

LOGO

次要栏目或标题-小标题H2

再次要栏目或分类小标题H3

文中分类小标题H4

五级标题

六级标题

html标题标签使用原则：

h1在一个网页中最好只使用一次，如对一个网页LOGO使用。

h1 最重要的标题只有一个

h只到h6

h1-h6是块元素，独占一行。

h标签尽量不要嵌套

2.段落文本(p)

段落文本内容

标识一个段落(段落与段落之间有段间距)

p最多可以嵌套a和span标签

p为常规标记，必须成对出现。

段落标签

中可以包含多行文字，文字内容将随浏览窗口大小自动换行。

p标签是小标签，不能嵌套p标签。

3.空格（& nbsp;）

所占位置没有一个确定的值，这与当前字体字号都有关系。

4.换行(br)


单标签

换行是一个空标记(强制换行)

5.加粗 加粗有两个标记/

A、加粗内容

B、加粗内容

html是语义化标签，会比更粗。

6.倾斜

,

///都是内联元素（行内元素）

7.水平线

是空标记

8.列表(ul,ol,dl)

HTML中有三种列表，分别是：无序列表，有序列表，自定义列表。

无序列表

无序列表组成：

    (unordered list)

  • 一般用于编写导航

有序列表

有序列表组成：

    (ordered list)

拓展知识点：有序列表的属性

（1）type:规定列表中的列表项目的项目符号的类型

语法：

    1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。

    a 字母顺序的有序列表，小写（a, b, c, d）。

    A 字母顺序的有序列表，大写（A,B,C,D)

    i 罗马数字，小写（i, ii, iii, iv）。

    I 罗马数字，大写（I, ii, iii, iv）。

    （2）start 属性规定有序列表的开始点。

    语法：

      自定义列表

      (definition list)

      名词
      在dl中只能写一个

      解释
      可以写多个

      (definition description)

      9.图片

      图片替换文本

      注:所要插入的图片必须放在站点下

      title的作用: 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的。

      所有的标签都可以加title属性。

      alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。

      alt和title一是起到提示作用，二是让网络爬虫识别。搜索引擎优化时需要有alt，没有alt时，title也有alt功能。

      相对路径的写法：

      （1）当当前文件与目标文件在同一目录下，直接书写目标文件文件名+扩展名； 或者

      （2）当当前文件与目标文件所处的文件夹在同一目录下，写法如下：

      文件夹名/目标文件全称+扩展名；

      （3）当当前文件所处的文件夹和目标文件所处的文件夹在同一目录下，写法如下：

      ../目标文件所处文件夹名/目标文件文件名+扩展名；

      1、图片的三种格式：

      jpg：清晰，体积大，背景不透明；

      gif：体积小，可以做动图，不清晰，可做透明背景；

      png8：png比gif体积更小，背景透明；

      png24：比png8更清晰，背景透明，体积小；

      IE6中png24背景不透明

      2、图片高级-透明图片

      （一）网页上常用的图片格式（jpg,png,gif）

      支持透明：gif，png(png8,png24,png32)

      （二）网页上的图片形式（插入图片和背景图）

      （三）插入图片透明

      A.图片背景透明：

      .gif：支持

      .png8：支持(建议使用)

      .png24：IE6不支持，其它内核浏览器支持（PS制作)

      .png32：IE6不支持，其它内核浏览器支持

      B.图片本身透明

      .png24：IE6不支持（ps制作)，可用filter兼容。

      .png32：IE6不支持，可用filter兼容。

      半透明插入图片兼容IE6做法:（使用png32或PS制作的png24半透明图片）：

      样式：

      结构：

      3、网页上常用的图片格式

      （1）jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )

      （2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

      （3）png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;

      10.超链接的应用

      语法：

      链接文本/图片

      空链接

      属性：

      target:页面打开方式，默认属性值_self。 在当前窗口打开

      不加target在当前页面打开

      属性值：_blank 新窗口打开

      新页面打开

      a标签的默认字体是蓝色，必须在a上修改字体颜色。

      11.div和span的用法

      没有具体含义，统称为块标签，独占一行。

      用来设置文档区域，是文档布局常用对象。

      所有标签都可以嵌套，包括自身。

      文本结点标签，直接嵌套文本。

      只嵌套文本，一般不嵌套其他标签。

      可以是某一小段文本，或是某一个字。

      12.数据表格的作用及组成

      作用：显示数据 用于后台信息管理页面

      表格组成

      注：一个tr表示一行;一个td表示一列(一个单元格)

      数据表格的相关属性

      （1）width="表格的宽度"

      （2）height="表格的高度"

      （3）border="表格的边框"

      （4）bgcolor="表格的背景色" bg=background

      （5）bordercolor="表格的边框颜色"

      （6）cellspacing="单元格与单元格之间的间距"

      （7）cellpadding="单元格与内容之间的空隙" cellpadding/cellspacing 只能加在table上

      （8）水平对齐方式：align="left/center/right";

      垂直对齐方式：valign=“top/middle/bottom“；加在table上无效

      （9）合并单元格属性：添加给td的属性 必须写在结构里

      colspan=“所要合并的单元格的列数"合并列;

      rowspan=“所要合并单元格的行数”合并行;

      先做列合并，再做行合并。

      合并的时候从后往前合并，不影响前面。

      用空格 ；把空的内容撑开

      （10）caption

      表格名称

      标签定义表格的标题。

      标签必须直接放置到

      标签之后。

      您只能对每个表格定义一个标题。

      提示：通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

      （11)th

      标签定义 HTML 表格中的表头单元格。

      HTML 表格有两种单元格类型：

      • 表头单元格 - 包含头部信息（由 th 元素创建）
      • 标准单元格 - 包含数据（由 td元素创建）

      th 元素中的文本呈现为粗体并且居中。

      td 元素中的文本是普通的左对齐文本。

      13.表单的作用及组成

      表单的作用：用来收集用户的信息的;

      （1)表单框

      form必须写，form中的action是链接网址，把个人信息提交给服务器。

      form是数据传输通道。

      action=“”；写服务器域名或网址。

      method是提交方式，post：传输，向服务器提交、修改、删除都用post，get不安全；get：获取，不作为提交来使用；

      Form中的获取数据的两个方式get和post的区别？

      （1）get是从服务器上获取数据，post是向服务器传送数据。

      （2）get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。get是显式提交，post是隐式提交。

      （3）对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

      （4）get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。

      （5） get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

      建议：

      （1）get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

      （2）在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

      （2）文本框

      文本框必须写在form里。

      input是表单控件，类型通过type的属性值来决定，表单控件必须写在form里。

      type是当前input的显示状态。

      value是提示信息，需要手动删除。是个老属性。

      input不获取焦点，使用属性：outline:none;

      （3）密码框

      IE6不兼容placeholder属性

      （4）重置按钮

      文本框的value值可以手动删除，重置按钮不可以。

      （5）单选框/单选按钮

      单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。

      checked="checked"(默认选中；)

      disabled="disabled"禁用

      属性与属性值相同时属性值可以不写，只写属性。

      （6）复选框

      (disabled="disabled" :禁用)

      (checked="checked" :默认选中)

      checkbox和radio必须设置value属性值。

      （7）下拉菜单 双标签 父子级嵌套

      （8）多行文本框（文本域）双标签

      （9）按钮

      默认为空

      默认为提交

      button和submit的区别是：

      submit有提交表单功能，button没有。

      submit是提交按钮，起到提交信息的作用。button只起到跳转的作用，不进行提交。

      按钮宽度和文本框宽度相加不可以等于form，按钮和文本代码中间有空格时中间会有空隙。

      添加边框会侵占元素的height，不会添加在宽高之外，点击边框也能选选中按钮。

      对于不同的输入类型，value 属性的用法的意义:

      value 属性为 input 元素设定值。

      对于不同的输入类型，value 属性的用法也不同：

      type="button", "reset", "submit" - 定义按钮上的显示的文本

      type="text", "password" - 定义输入字段的初始值

      type="checkbox", "radio" - 定义与输入相关联的值

      注释： 和 中必须设置 value 属性。

      拓展知识点：Button标签

      使用input创建的button只是提供按钮样式，有跳转功能，使用双标签button创建的按钮有提交功能。

      一、html button标签定义和用法：

      button标签是什么意思： 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

      唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

      请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中的默认值是 "submit"。

      二：HTML

      三：浏览器支持

      所有主流浏览器都支持