侧边栏壁纸
博主头像
萧瑟

  • 累计撰写 183 篇文章
  • 累计创建 15 个标签
  • 累计收到 24 条评论
标签搜索

目 录CONTENT

文章目录
HTML系列

探索前端世界：从零开始学习前端开发，打造属于你的网页世界！（一）

萧瑟
萧瑟
2023-03-06 / 0 评论 / 0 点赞 / 482 阅读 / 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
前端 html
  1. qrcode alipay
  2. qrcode weixin
版权归属： 萧瑟
本文链接： https://foreval.cn/archives/qianduanshijieyi
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区