前端简介

版权声明: https://blog.csdn.net/weixin_42051619/article/details/80724861

一、软件的架构

    1.C/S(客户端/服务器):一般我们使用的软件都是C/S架构,比如系统中的软件QQ、360安全卫士、office等。C表示客户端(通常为图形化界面),用户是通过客户端来使用软件;S表示服务器,服务器负责处理软件的业务逻辑。其特点如下:

        (1)软件使用前必须得安装

        (2)软件更新时,客户端和服务器端需要同时更新

        (3)C/S架构的软件不能跨平台使用(比如说windows平台的QQ在Linux平台上是不能使用的)

        (4)C/S架构的软件客户端和服务器端通信采用的是自有协议,相对来说比较安全。

    2.B/S(浏览器/服务器):B/S本质上也是C/S,只不过B/S架构的软件,使用浏览器作为软件的客户端。B/S架构的软件一般都是通过访问一个网页的形式来使用的,而将一些运算等操作放到远端的服务器上,这样就降低了对客户端的要求,我们的计算机只需要安装一个浏览器即可使用。比如:京东、淘宝、新浪微博等。其特点如下:

        (1)软件不需要安装,直接使用浏览器访问指定的网址即可。

        (2)软件更新的时候,客户端不需要更新

        (3)软件可以跨平台使用。只要系统中有浏览器就可以使用

        (4)B/S架构的软件,浏览器和服务器端之间通信采用的是通用的HTTP协议,相对来说不安全。

    3.根据W3C标准,一个网页主要由三部分组成:结构、表现、行为。

        (1)结构:HTML用于描述页面的结构

        (2)表现:CSS用于控制页面中元素的样式

        (3)行为:JavaScript用于响应用户操作

    4.万维网联盟(W3C):World Wide Web Consortium。W3C专门为了定义网页相关的标准而成立。W3C定义了网页中的HTML、CSS、DOM、HTTP、XML等标准。

    5.WHATWG:网页超文本应用技术工作小组,是一个以推动网络HTML5标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

二、HTML简介

1.HTML的概念

     HTML是超文本标记语言,即Hyper Text Markup language的简称,超文本标记语言是没有编译过程的语言。它不是编程语言,是使用一套标记标签来描述网页的。其特点是简易性、可扩展性、与平台无关、通用性。

2.HTML的规范

    HTML是一个弱势语言,不区分大小写,页面的后缀名是html或htm,HTML5之后要求小写。

3.HTML基本结构

(1)html文档基本结构

<!DOCTYPE html><!-- 文档引用的规范,HTML5因为是"妥协式"的规范,所以不需要引用严格意义上的DTD规范 -->
<html><!-- html文档的根元素标签,成对出现,代表了一个html文档的开始和结束 -->
<head><!-- html文档的头部标签,成对出现 -->
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Insert title here</title>
</head>
<body><!-- html文档的主体部分标签,成对出现,网页的大部分内容放在body标签内 -->
	<p>Test Page</p>
</body>
</html>

(2)head标签内包含的主要元素

         title:该元素用于定义文档标题

         meta:该元素用于HTML页面的元数据

         script:该元素用于包含javascript脚本

         link:该元素用于链接外部CSS样式

         style:该元素用于定义内部CSS样式

说明①:title标签一般写在head标签内,title标签它是直接能在浏览器窗口中看到的,title标签极其重要,title标签是用户以搜索引擎最看重的标签,它能帮助用户和搜索引擎判断当前页面的主旨和中心思想,对搜索引擎来说,title标签中出现的关键词基本上就是该网页最想要表达的内容,因此我们在做SEO搜索引擎优化的时候,写title标签的时候应当将当前页面最核心的关键词写进title标签中,使你的自然排名提高,从而让你的网站能够达到更多的浏览量。

说明②:meta标签用于定义页面元信息,也就是一些键值对,主要有以下三个属性:

       http-equiv:指定元信息的名称,该属性指定的名称具有特殊意义,它可以向浏览器传回一些有用的信息,帮助浏览器正确的处理网页内容。

       name:指定元信息名称,该名称可以随意指定。

       content:指定元信息的值。

说明③:HTML的每个标签都具有属性,属性分私有属性和公有属性。HTML中表示长度的单位是像素,而且只有一种。

4.HTML的常用标签

(1)常用的块级标签

         显示为“块”状,浏览器会在其前后显示折行,一个块级标签独自占据一行,常用的块级元素包括:p(段落标签),h1-h6(标题标签),div(该标签一半当做结构化块状元素使用,一般最常见的用途是对网页进行整体分块布局,即当容器来使用),ul(无序列表标签,默认情况下,列表的列表项使用圆点进行标记),ol(有序列表标签,默认情况下,列表的列表项使用数字进行标记),hr(水平线标签)等。

(2)常用的行级标签

         按行逐一显示,前后不会自动换行,也就是说多个行级标签可以在一行上面显示。

(3)超链接标签

         <a href="链接地址" target="目标窗口" >链接文本或图片</a>

              href:指定超链接所关联的另一个资源

              target:指定框架集中的哪一个框架来转载另一个资源,该属性可以是_self、_blank、_top、_parent四个值,分别代表         自身、新窗口、顶层框架、父框架。

(4)图像标签(自结束标签)

         <img src="图片地址" alt="提示文字" />

(5)span标签

         一般块级标签不要组合在span标签内,span标签主要是对需要突显的内容或强调的内容进行显示,div标签是块级标签,所以其内容既可以放块级标签也可以放行级标签,类似于body标签,而span标签主要强调的是文本和行级标签。

(6)常用的特殊符号

         空格:&nbsp;

         大于:&gt;

         小于:&lt;

         双引号:&quot;

         &号:&amp;

         版权号:&copy;   

         单引号:&#39;       ():&#40;&#41;    =:&#61;

(7)文本格式化元素

        <b>:定义粗体文本

        <i>:定义斜体文本

       <em>:定义强调文本,实际效果与斜体文本差不多

      <strong>:定义粗体文本,与<b>的作用基本相同

      <sub>:定义下标文本

      <sup>:定义上标文本

      <bdo>:定义wenben文本显示方向,内有dir属性,只能取值ltr或rtl

      <u>:下划线      <s>:中划线(一般用在价格,折后价)

5.表格标签

     table:用于定义表格

     tr:定义表格行,该元素只能包含<td>或<th>两种元素

     th:定义表格页眉的单元格

     td:定义单元格,包含两个主要属性:

            colspan:指定单元格横跨多少列

            rowspan:指定单元格纵跨的行数

     caption:用于定义表格标题

     tbody:定义表格的主体

     thead:定义表格的头

     tfoot:定义表格的脚

注:tbody、thead、tfoot写与不写的区别:当表格非常大的时候,如果不写,则必须等表格的内容全部下载完成才能显示,但是用tbody标签的话,边下载边显示。如果不写,那么浏览器解析表格内容的时候是从上到下解析,如果写了,那么顺序任意,浏览器解析的时候还是按照tbody、thead、tfoot的顺序显示内容。

6.表单标签

   (1)form标签

            <form action="表单提交地址" method="提交方式">

                。。。文本框、按钮等表单元素

           </form>

  (2)form标签的常用属性

           action:指定表单提交后交由服务器上的哪个处理程序进行处理

           enctype:用于指定表单数据的编码方式

                            application/x-www-form-urlencode:默认的编码方式,将表单控件中的值处理成URL编码方式

                            multipart/form-data:以二进制流的方式来处理表单数据

                            text/plain:当表单的action的属性值为mailto:URL的形式时使用

            method:指定向服务器提交的方式,一般为get和post两种方式。

                             get方式的请求会将请求参数的名和值转换成字符串,并附加在原URL之后,因此可以在地址中看到请求参数的名和值,且get请求传递的数据比较小,一般不能大于2KB.

                           post方式的请求传递的数据量比较大,通常认为可以不受限制,往往取决于服务器的限制。post方式的请求参数是放在HTML的HEADER中传输的,用户在地址栏中看不到请求参数,安全性相对较高。

(3)常见的表单元素

         客户端向服务器传输的数据,这个数据必须要通过载体进行传递,这个载体一般都是表单元素。表单元素不能直接传递到服务器端,它必须通过表单才能传递过去,所以一般表单与其它表单控件元素结合使用,我们可以认为表单是表单元素的一个容器。

    单行文本框:<input type="text" />

    密码输入框:<input type="password" />

    隐藏域:<input type="hidden" />

    单选框:<input type="radio" />

    复选框:<input type="checkbox" />

    图像域:<input type="image"  /> 可以指定width和height属性

    文件上传域:<input type="file" />

    提交、重置、普通按钮:指定input属性为submit、reset、button即可

(4)input元素常用的几个属性

        checked:设置单选框、复选框初始状态是否处于选中状态,只有type属性为checkbox或radio时才可指定(值:checked)

        disabled:设置首次加载时禁用此元素。当type属性为hidden时不能指定该属性(值:disabled)

        maxlength:该属性是一个数字,设置文本框中所允许输入的最大字符数

        readonly:指定该文本框内的值不允许被修改(值:readonly)

        size:该属性是一个数字,用于指定该控件的长度,当type属性的值为hidden时不能指定该属性

        src:指定图像域所显示的图像的url,只有当type属性为image时才可以指定该属性

7.textarea标签

    该标签用于定义多行的文本输入控件。文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

(1)常用属性如下:

         cols:规定文本区域内可见的宽度。

         rows:规定文本区域内可见的行数。

         disabled:规定禁用文本区域。(值:disabled)

         maxlength:规定文本区域允许的最大字符数。

         placeholder:规定一个简短的提示,描述文本区域期望的输入值。

         readonly:规定文本区域为只读。(值:readonly)

展开阅读全文

没有更多推荐了,返回首页