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

今日内容:

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

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

本专业介绍

移动前端/WEB前端

网站建站流程

网站建站流程

HTML及相关概念的介绍

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

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

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

HTML发展历史

image

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

WEB标准的概念及组成

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基本结构

image

<title>网页标题</title>

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

拓展知识点:

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

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

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

说明:

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

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

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

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

五、HTML常用标记

1.文本标题(h1-h6)

<h1>LOGO</h1>

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

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

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

<h5>五级标题</h5>

<h6>六级标题</h6>

html标题标签使用原则

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

h1 最重要的标题只有一个

h只到h6

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

h标签尽量不要嵌套

2.段落文本(p)

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

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

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

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

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

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

3.空格(& nbsp;

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

4.换行(br)

<br />单标签

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

5.加粗 加粗有两个标记<b>/<strong>

A、<b>加粗内容</b>

B、<strong>加粗内容</strong>

html是语义化标签,<strong>会比<b>更粗。

6.倾斜

<em></em> ,<i></i>

<b>/<strong>/<em>/<i>都是内联元素(行内元素)

7.水平线

<hr />是空标记

8.列表(ul,ol,dl)

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

无序列表

无序列表组成:

<ul>(unordered list)

<li></li>

<li></li>

一般用于编写导航

</ul>

有序列表

有序列表组成:

<ol>(ordered list)

<li></li>

<li></li>

</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.图片

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />

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

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)当当前文件所处的文件夹和目标文件所处的文件夹在同一目录下,写法如下:

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

<img src=”../images/q12.jpg”/>

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半透明图片):

样式:

<style type="text/css">

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

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

.ie6hidden{_display:none;}

</style>

结构:

<span class="alpha"></span>

<img class="ie6hidden" src="" />

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

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

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

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

10.超链接的应用

语法:

<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片

</a>

<a href="#"></a>空链接

属性:

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

不加target在当前页面打开

属性值:_blank 新窗口打开

<a href="#" target="_blank">新页面打开

</a>

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

11.div和span的用法

<div ></div>

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

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

<div>所有标签都可以嵌套,包括自身。

<span ></span>

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

<span>只嵌套文本,一般不嵌套其他标签。

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

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

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

表格组成

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

<tr >

<td></td>

<td></td>

</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>

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

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

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

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

(11)th

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

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

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

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

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

13.表单的作用及组成

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

(1)表单框

<form name="表单名称" method="post/get" action="网址"></form>

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)文本框

<input type="text" value="默认值"/>

文本框必须写在form里。

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

type是当前input的显示状态。

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

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

(3)密码框

<input type="password" />

<input type="password" placeholder="密码" />

IE6不兼容placeholder属性

(4)重置按钮

<input type="reset" value="按钮内容" />

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

(5)单选框/单选按钮

<input type="radio" name="ral" />

<input type="radio" name="ral" checked="checked" />

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

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

disabled="disabled"禁用

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

(6)复选框

<input type="checkbox" name="like" />

<input type="checkbox" name="like" disabled="disabled" />

(disabled="disabled" :禁用)

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

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

(7)下拉菜单 双标签 父子级嵌套

<select name="">
<option>菜单内容</option>

</select>

(8)多行文本框(文本域)双标签

<textarea name="textareal" cols="字符宽度" rows="行数">
</textarea>

(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标签

<button></button>

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

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

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

在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

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

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

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

二:HTML <button> 标签实例

以下代码标记了一个按钮

<button type="button">点击我</button>

三:浏览器支持

所有主流浏览器都支持 <button> 标签。

重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 1,715评论 1 40
  • HTML HTML简介 1、什么是HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言...
    小山居阅读 167评论 0 5
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 153评论 0 1
  • 内容概括: 1、介绍、HTML相关概念,HTML发展历史 2、WEB标准,W3C/WHATWG/ECMA相关概念 ...
    溜溜球的嘛阅读 58评论 0 1
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 836评论 2 21