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

时间 2020-01-28

标签前端进阶100天 day01 day html 基础栏目 HTML 繁體版

原文原文链接

今日内容：css

一、本专业介绍、HTML相关概念，HTML发展历史
二、WEB标准，W3C/WHATWG/ECMA相关概念
三、相关软件的应用以及站点的建立
四、HTML基本结构和HTML语法
五、HTML经常使用标记

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

本专业介绍

移动前端/WEB前端html

网站建站流程前端

HTML及相关概念的介绍

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

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

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

HTML发展历史

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

WEB标准的概念及组成

组织解析

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

W3C 制定告终构(xhtml、xml)和表现(css)的标准，非赢利性的。网络

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

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

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

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

3、相关软件的应用以及站点的建立

站点的做用

用来概括一个网站上全部的网页、素材以及他们之间的联系
规划网站的全部内容和代码整合资源

建立站点的步骤

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

文件的命名规则

文件命名规则：用英文，不用中文；
名称所有用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；
必须以英文字母开头；
网站的首页必须命名为index.html不建议使用shouye.html。

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

HTML基本结构

<title>网页标题</title>

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

拓展知识点：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/D...;

声明了文档的根元素是 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

而这句<html xmlns="http://www.w3.org/1999/xhtml">，是在文档中的<html> 标签中使用 xmlns 属性，以指定整个文档所使用的主要命名空间。

对于文档声明，了解这些就足够了，如今的html5再也不这么繁琐，只须要：

<!DOCTYPE html>

<html>

就能够了。

HTML的基本语法

1.<常规标记>双标记

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

例如：<head></head>

2.空标记单标记

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

例如：<meta charset=”utf-8”> <br/>

说明：

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

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

3.一个标记能够没有属性也能够有多个属性，属性和属性之间不分前后顺序。

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

5、HTML经常使用标记

1.文本标题（h1-h6）

<h2>次要栏目或标题-小标题H2</h2>

<h3>再次要栏目或分类小标题H3</h3>

<h4>文中分类小标题H4</h4>

html标题标签使用原则：

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

h1 最重要的标题只有一个

h只到h6

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

h标签尽可能不要嵌套

2.段落文本(p)

<p>段落文本内容</p>

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

p最多能够嵌套a和span标签

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

段落标签<p>中能够包含多行文字，文字内容将随浏览窗口大小自动换行。

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

3.空格（& nbsp;）

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

4.换行(br)

单标签

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

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

A、加粗内容

B、加粗内容

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

6.倾斜

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

7.水平线

是空标记

8.列表(ul,ol,dl)

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

无序列表

无序列表组成：

<ul>(unordered list)

通常用于编写导航

</ul>

有序列表

有序列表组成：

<ol>(ordered list)

</ol>

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

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

语法：<ol type="a"></ol>

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 属性规定有序列表的开始点。

语法：<ol start="5"></ol>

自定义列表

<dl>(definition list)

<dt>名词</dt> 在dl中只能写一个

<dd>解释</dd> 能够写多个

(definition description)

</dl>

9.图片

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

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

全部的标签均可以加title属性。

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

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

相对路径的写法：

（1）当当前文件与目标文件在同一目录下，直接书写目标文件文件名+扩展名；<img src="q12.jpg"/> 或者<img src="./q12.jpg"/>

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

文件夹名/目标文件全称+扩展名；<img src=”images/q12.jpg”/>

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

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

一、图片的三种格式：

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

gif：体积小，能够作动图，不清晰，可作透明背景；

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

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

IE6中png24背景不透明

二、图片高级-透明图片

（一）网页上经常使用的图片格式（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半透明图片）：

样式：

.alpha{display:none;_display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="图片路径",sizingMethod="scale");width:value;height:value;}

.ie6hidden{_display:none;}

</style>

结构：

三、网页上经常使用的图片格式

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

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

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

10.超连接的应用

语法：

连接文本/图片

空连接

属性：

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

不加target在当前页面打开

属性值：_blank 新窗口打开

新页面打开

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

11.div和span的用法

<div ></div>

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

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

<div>全部标签均可以嵌套，包括自身。

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

<span>只嵌套文本，通常不嵌套其余标签。

能够是某一小段文本，或是某一个字。

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

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

表格组成

<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">

<tr >

</tr>

</table>

注：一个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=“所要合并单元格的行数”合并行;

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

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

用空格&nbsp；把空的内容撑开

（10）caption

<caption> 标签订义表格的标题。

<caption> 标签必须直接放置到 <table> 标签以后。

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

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

（11)th

<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）下拉菜单双标签父子级嵌套

</select>

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

（9）按钮

<input name="'" type="button" value=“按钮内容” /> 默认为空

<input name="'" type="submit" value=“按钮内容” /> 默认为提交

button和submit的区别是：

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

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

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

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

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

value 属性为 input 元素设定值。

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

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

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

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

注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

拓展知识点：Button标签

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

1、html button标签订义和用法：

button标签是什么意思：<button> 标签订义一个按钮。

在 button 元素内部，您能够放置内容，好比文本或图像。这是该元素与使用 input 元素建立的按钮之间的不一样之处。

<button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的全部内容都是按钮的内容，其中包括任何可接受的正文内容，好比文本或多媒体内容。例如，咱们能够在按钮中包括一个图像和相关的文本，用它们在按钮中建立一个吸引人的标记图像。

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

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

二：HTML <button> 标签实例

如下代码标记了一个按钮

三：浏览器支持

全部主流浏览器都支持 <button> 标签。

重要事项：若是在 HTML 表单中使用 button 元素，不一样的浏览器会提交不一样的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其余浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来建立按钮。