目 录CONTENT

文章目录

探索前端世界:从零开始学习前端开发,打造属于你的网页世界!(一)

萧瑟
2023-03-06 / 0 评论 / 0 点赞 / 350 阅读 / 17,136 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-08-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

一、前端介绍、HTML相关概念,HTML发展历史

本专业介绍

移动前端/WEB前端

网站建站流程

clipboard

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

WEB标准的概念及组成

clipboard (1)

组织解析:
  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基金会和苹果这些浏览器厂商组成。

HTML及相关概念的介绍

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。
  • XHTML指可扩展超文本标记语言(标识语言)(EXtensible - HyperText Markup Language)是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。
  • HTML5指的是HTML的第五次重大修改(第5个版本)(HTML5 是 W3C 与 WHATWG 合作的结果)

HTML发展历史

clipboard (2)

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

1. 站点的作用

A/ 用来归纳一个网站上所有的网页、素材以及他们之间的联系
B/ 规划网站的所有内容和代码 整合资源

2. 创建站点的步骤

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

3. 文件的命名规则

A、文件命名规则:用英文,不用中文
B、名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;必须以英文字母开头。@#¥%……! -_
C、网站的首页必须命名为index.html不建议使用shouye.html

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

1. HTML基本结构

clipboard (3)

扩展知识点1:

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>
就可以了。

2. HTML的基本语法

1、<常规标记>

<标记 属性=“属性值” 属性=“属性值”></标记>
例如:<head></head>

2.空标记

<标记 属性=“属性值” />
例如:<meta charset=”utf-8”> <br/>
说明:
1.写在<>中的第一个单词叫做标记,标签,元素。
2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。
3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
4.空标记没有结束标签,用“/”代替。

五、HTML常用标记

1、文本标题(h1-h6)

<h1>LOGO或一级标题</h1> 

LOGO或一级标题

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

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


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

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


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

文中分类小标题H4


<h5>二级标题</h5>
二级标题

<h6>六级标题</h6>
六级标题

html标题标签使用原则:
H1在一个网页中最好只使用一次,如对一个网页LOGO使用。

2、段落文本§

<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距)

3、空格

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

4、换行(br)

<br />
换行是一个空标记(强制换行)

5、加粗 加粗有两个标记

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

6、倾斜

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

7、水平线

   <hr />空标记

8、列表(ul,ol,dl)

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

无序列表

无序列表组成:

<ul>
  (unordered list)
  <li></li>
  <li></li>
  ......
</ul>
有序列表

有序列表组成:

<ol>
  (ordered list)
  <li></li>
  <li></li>
  ......
</ol>
自定义列表
<dl>
  (definition list)
  <dt>名词</dt>
  <dd>解释</dd>
  (definition description)
  ......
</dl>

tips----有序列表的属性
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>

9、插入图片

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

注:所要插入的图片必须放在站点下
title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方。

相对路径的写法:
  • 当 当前文件与目标文件在同一目录下,直接书写目标文件文件名+扩展名;<img src=”q12.jpg”/>
  • 当 当前文件与目标文件所处的文件夹在同一目录下,写法如下:
    文件夹名/目标文件全称+扩展名;<img src=”images/q12.jpg”/>
  • 当 当前文件所处的文件夹和目标文件所处的文件夹在同一目录下,写法如下:
    ../目标文件所处文件夹名/目标文件文件名+扩展名;
    <img src=”../images/q12.jpg”/>

10、超链接的应用

  • 语法:

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

<a href="#"></a>空链接
  • 属性:target:页面打开方式,默认属性值_self
  • 属性值:_blank 新窗口打开
    <a href="#" target="_blank">新页面打开</a>

11、div和span的用法

<div ></div>
没有具体含义,统称为块标签,
用来设置文档区域,是文档布局常用对象
<span> </span>
文本结点标签
可以是某一小段文本,或是某一个字。

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

  • 作用:显示数据
  • 表格组成
<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=“单元格与内容之间的空隙”
  8. 对齐方式:align=“left/center/right”;
  9. 合并单元格属性:
    colspan=“所要合并的单元格的列数"合并列;
    rowspan=“所要合并单元格的行数”合并行;

13、表单的作用及组成

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

1. 表单框

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

2. 文本框

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

3. 密码框

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

4. 重置按钮

<input type="reset" 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” :默认选中)

7.下拉菜单
<option>菜单内容</option>
</select>
8.多行文本框(文本域)
</textarea>
9.按钮
<input name="'" type="submit" value=“按钮内容” />
<button></button>

button和submit的区别是:
submit是提交按钮起到提交信息的作用,type类型是button只起到跳转的作用,不进行提交。

对于不同的输入类型,value 属性的用法的意义
value 属性为 input 元素设定值。
对于不同的输入类型,value 属性的用法也不同:
type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
type=“text”, “password” - 定义输入字段的初始值
type=“checkbox”, “radio” - 定义与输入相关联的值
注释: 中必须设置 value 属性。

tips4:

<form name="表单名称" method="post/get" action=""></form>
Form中的获取数据的两个方式get和post的区别?

  1. get是从服务器上获取数据,post是向服务器传送数据。
  2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
  3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
  4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。
  5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
    建议:
  1. get方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式;
  2. 在做数据查询时,建议用Get方式;而在做数据添加、修改或删除时,建议用Post方式;
    代码区
    表格1
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>出差报销</title>
</head>
<body>
	<table border="1px" width="800px" cellspacing="0" height="40px" align="left">
       <tr align="center">
       	<td colspan="2">姓  &nbsp; 名</td>
       	<td></td>
       	<td>职务</td>
       	<td colspan="2" width="60px"> &nbsp; &nbsp; </td>
       	<td colspan="2">出差事由</td>
       	<td colspan="4"></td>
        </tr>
        <tr align="center">
       	<td>起日</td>
       	<td>止日</td>
       	<td>起讫地点</td>
       	<td>项 &nbsp; 目</td>
       	<td>张数</td>
       	<td colspan="3">金额</td>
       	<td>项目</td>
       	<td>天数</td>
       	<td colspan="2">金额</td>
       </tr>
       <tr align="center">
       	<td></td>
       	<td></td>
       	<td></td>
       	<td>火车费</td>
       	<td></td>
       	<td colspan="2"></td>
       	
       	<td></td>
       	<td>途中补助</td>
       	<td></td>
       	<td>  &nbsp;   &nbsp;    &nbsp;   &nbsp;  </td>
       	<td>  &nbsp;   &nbsp;    &nbsp;   &nbsp;  </td>
       </tr>
        <tr align="center">
       	<td></td>
       	<td></td>
       	<td></td>
       	<td>汽车费</td>
       	<td></td>
       	<td colspan="2"></td>
      
       	<td></td>
       	<td>住勤补助</td>
       	<td></td>
       	<td></td>
       	<td></td>
       </tr>
       <tr align="center">
       	<td></td>
       	<td></td>
       	<td></td>
       	<td>市内交通费</td>
       	<td></td>
       	<td colspan="2"></td>
       	
       	<td></td>
       	<td>夜间乘车费</td>
       	<td></td>
       	<td></td>
       	<td></td>
       </tr>
        <tr align="center">
       	<td></td>
       	<td></td>
       	<td></td>
       	<td>住宿费</td>
       	<td></td>
       	<td colspan="2"></td>
       
       	<td></td>
       	<td>其他</td>
       	<td></td>
       	<td></td>
       	<td></td>
       </tr>
        <tr align="center">
       	<td></td>
       	<td></td>
       	<td></td>
       	<td>邮电费</td>
       	<td></td>
       	<td colspan="2"></td>
       	<td></td>
       	<td></td>
       	<td></td>
       	<td></td>
       	<td></td>
       </tr>
        <tr align="center">
       	<td></td>
       	<td></td>
       	<td></td>
       	<td colspan="2"> &nbsp;小 &nbsp;  &nbsp;  &nbsp; 计 &nbsp;  &nbsp; </td>
       	<td colspan="2">&nbsp; &nbsp; &nbsp; &nbsp; </td>
       	<td></td>
       	<td colspan="2"> &nbsp; 小 &nbsp;  &nbsp;  &nbsp; 计 &nbsp;  &nbsp; </td>
       	<td></td>
       	<td></td>
       </tr>
        <tr>
       	<td colspan="3"><center>合 &nbsp;  &nbsp; 计</td>
       	<td colspan="9"> &nbsp; (大写) &nbsp;  &nbsp; 仟 &nbsp;  &nbsp; 佰 &nbsp;  &nbsp; 拾 &nbsp;  &nbsp; 元 &nbsp;  &nbsp; 角 &nbsp;  &nbsp; 分 &nbsp; ¥: &nbsp;  &nbsp; </td>
       </tr>
	</table>
</body>
</html>

表格2:

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<tbody>
    <caption><h2><center>项目增补单</h2></caption>
	<table cellspacing="0" border="1px" width="800px" height="60px" align="center">
	   <tr align="center">
	   	<td>序号</td>
	   	<td>维修项目及更换配件</td>
	   	<td>单价</td>
	   	<td>数量</td>
	   	<td>小计</td>
	   	<td>工时费</td>
	   	<td>合计</td>
	   	<td>故障原因</td>
	   </tr>
	  <tr align="center">
   	   	<td>1</td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
	   </tr>
	 <tr align="center">
       <td>2</td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
   	   	<td></td>
	   </tr>
	  <tr align="center">
	   <td>3</td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   </tr>
	   <tr align="center">
	   <td>4</td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   </tr>
	   <tr align="center">
	   <td>5</td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   </tr>
	   <tr align="center">
	   <td>6</td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   </tr>
	   <tr align="center">
	   <td>7</td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   	<td></td>
	   </tr>
	   <tr align="center">
	    <td rowspan="4">&nbsp;</td>
	   	<td>&nbsp;</td>
	   	<td rowspan="4" colspan="2">&nbsp;</td>
	   
	    <td rowspan="4">&nbsp;</td>
	    <td rowspan="4">&nbsp;</td>
	   	<td rowspan="4">&nbsp;</td>
	   	<td rowspan="4"></td>
	   </tr>
	   <tr align="center">
	   	<td>&nbsp;</td>
	   </tr>
	   <tr align="center">
	   	<td>&nbsp;</td>
	   </tr>
	   <tr align="center">
	   	<td>&nbsp;</td>
	   </tr>
	   <td colspan="2">备件费用小计:</td>
	   	<td colspan="5">工时费用小计:</td>
	   	<td>合计:</td>
	   </tr>
	</table>
</tbody>
</html>

表格3

<!DOCTYPE html>        <!-- 声明文档类型,告知浏览器以何种方式解析当前文件 -->
<html lang="en">     
<head>                          
	<meta charset="UTF-8">
	<title>列表</title>     <!-- 网页标题 -->
</head>
<body>	
	<caption><h2><center>项目增补表</h2></caption>
	<table border="1px" cellspacing="0" width="800px" height="50px" align="center">
		<tr align="center">
			<td width="80px">工单号</td>
			<td width="80px"></td>
			<td>车牌号</td>
			<td width="60px"></td>
			<td></td>
			<td>车型</td>
			<td></td>
			<td>技师</td>
			<td></td>
			<td>检修时间</td>
			<td width="100px"></td>
		</tr>
		<tr align="center">
			<td>序号</td>
			<td colspan="3">维修项目及跟换配件</td>
			<td>单价</td>
			<td>数量</td>
			<td>小计</td>
			<td>工时费</td>
			<td>合计</td>
			<td colspan="2">故障原因</td>
		</tr>
		<tr align="center">
			<td>1</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr align="center">
			<td>2</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr align="center">
			<td>3</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr align="center">
			<td>4</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr align="center">
			<td>5</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr align="center">
			<td>6</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr align="center">
			<td>7</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr align="center">
			<td>8</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr align="center">
			<td>9</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
  		<tr align="center">
			<td>10</td>
			<td colspan="3"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr align="left">
			<td colspan="4"> &nbsp;备件费用小计:</td>
			<td colspan="5"> &nbsp;工时费用小计:</td>
			<td colspan="2">合计:</td>
		</tr>
	</table>
</body>
</html>

表单1

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
</head>
<body>
	
	<form action="">
	<p>如有账号,请登录</p><br>
		<input type="text" placeholder="邮箱/手机号/QQ号" style="width:150px;height:30px"/>
	</form><br>
	<form action="">
		<input type="password" placeholder="密码" style="width:150px;height:30px"/>
	</form><br>
	<form action="">
		<input type="text" placeholder="验证码" style="width:85px;height:30px"/>
	</form>
	<form action="">
	<img src="../img/img4.png" alt="">
	</form><br>
	<form action="">
		<input type="submit" value="登录" style="width:80px;height:30px;background:cornflowerblue">
		</form>
</body>
</html>```
0

评论区