2019.10.11 THML

HTMLphp

1.Web basic 概念html

1.1web

Internet(英特网)数据库

internet是运行web的基础环境     英特网提供主要服务有:Telent  Email  WWW 等等浏览器

技术:在互联网中进行信息的交换   例如:看视频,购物,文字,听音乐等服务器

分组交换原理:把要传输的报文分红若干个小的数据块,成为分组(Packet),而后以分组为单位按照与报文交换一样的方法进行传输。微信

TCP/IP  协议互联网中定位人的地址网络

找到你的IP地址,找到你的电脑,而后经过分组交换原理,给你的电脑传输数据ide

1.2 Web(world  wide  web) 就是网页post

      Web  万维网 环球网   www

      web是创建在Internet上,能够为浏览者在Internet上查找和浏览信息提供了图形化的界面,Web可以将各种信息和服务类型进行谅解

   信息:文字。图像。视频。音频。文件

           服务 :www  Email

1.3 工做原理

B/S(B/S就是“Browser/Server”的缩写)网络结构模式的程序

客户端发出请求,让核心的业务处理在服务端完成,而后回应客户端。

你只须要在本身电脑或手机上安装一个浏览器,就能够经过web Server与数据库进行数据交互。

例如,百度等等之类的浏览器

      优势:
           不须要下载能够直接使用

           直接在服务器端更新

      缺点:很是依赖网络

C/S(C/S就是“Client/Server”的缩写)软件系统结构模式的程序 

是经过客户端发送请求到服务端,服务端进行并查询数据库得出结果最后处理结果反应给你  例如:微信  QQ 游戏等

优势:

        能够自定义用户习惯 界面  UI

        能够根据用户的硬件不一样来设置不一样的解析成程度

      缺点:

         不一样的操做系统须要不一样的版本

          更新须要客户端打补丁

      五大浏览器

          IE      火狐--Mozilla FireFox   Opera—欧朋   Apple Safari – 苹果 Google Chrome—谷歌

2.基本语法:

HTML超文本连接(Hyper Text Markup Language)

用于描述功能的符号   为标记 通常使用<>
            标记分两种:
                封闭式标签 <h1>标题标签</h1>
                非封闭式标签 <hr> <hr />

从语法角度是标记  从内容上来讲是元素
            能够嵌套使用

               <a href="">
                    <span>
                    <img src="" alt="" />
                    </span>
                </a>

2.HTML文档是由 HTML 元素定义的。  

3.属性是用来修饰元素的   常见属性 :

align 对其方式        id  独一无二的标识      title 鼠标移入到元素上显示的内容       

  class  定义元素的选择器          style  定义元素的行内样式  

<html> 根标记   有且仅有一对</html>                                               

<head> 网页头部 定义页面的全局信息</head>

<body>网页的主体部分</body>

<title>网页的标题</title>

<p>段落标签</p>

<a>连接标签</a>

<b>加粗</b> <i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<sup>上标</sup>
<sub>下标</sub>

(标签跟属性的量很大,因此只用记住经常使用的,不记得的能够上网查)

 

行内元素和块级元素             注意:p标签中不能嵌套块级元素
            1,行内元素: 不会换行  宽高由内容决定,所以没法设置对齐方式  默认没法设置宽高(内联元素)
            2. 块级元素:  独占一行  都是有align属性  宽度默认和父元素同宽 高度由内容决定

 

图片

<img src="URL"          URL(Uniform Resource Locator):统一资源定位器

路径三种表现形式:绝对路径   :        1.直接访问盘符                  2 .访问互联网资源

                                相对路径 :1. 当前文件和资源文件在同一个目录下   ---  直接经过名称引用

                                                   2 . 资源文件在当前文件的子目录中  -- 先进入在引用

                                                   3.  资源文件在当前文件的目录中   --- 先返回 在引用

                                根相对路径(服务端使用)

图像格式:png 无损压缩  8位  24位  32位     支持透明色

                 jpg jpeg  压缩  有损

                 gif  支持动

经常使用属性:src=“图片的路径”            alt="图片加载失败时候的显示文字"     title="对图片的解释 须要鼠标移入才能显示"

a标签:

a标签又叫作超连接标签

超连接是指从一个网页指向一个目标的链接关系,这个目标能够是另外一个网页,也能够是相同网页上的不一样位置,还能够是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序

<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">点我会跳转哦!</a> <!--target="_blank"表示从新打开一个网页进行跳转,"_self"表示就在当前网页进行跳转--> 
(1)连接到网页或浏览器支持的图片格式
(2)连接到压缩文件:用压缩命令或压缩软件将文件压缩,直接连接压缩文件名称便可。             
(3)连接到邮箱:
(4)连接到 Javascript脚本代码
(5)连接到空连接(空文档)

列表
无序ul,有序ol,列li
无序列表:

1.type属性:disc实心圆,circle空心圆,square实心方块;
有序列表:
_self"表示就在当前网页进行跳转

                    1.type属性: 默认整数,A字母,I罗马字符;

                    2.start属性:从某个数字开始;

                    3.value属性:用于li里,从某个数字开始;

  自定义列表:

             dl,dt,dd

表格

表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

 

                                                                                         colspan               合并行

                                                                                                      rowspan                合并列

 

表单标签(与用户进行交互)

 

表单是能够把浏览者输入的数据传送到服务器端,这样服务器端程序就能够处理表单传过来的数据。

语法:

        <form   method="传送方式"   action="服务器文件">

讲解:

        <form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

        action :浏览者输入的数据被传送到的地方,好比一个PHP页面(save.php)。

        method : 数据传送的方式(get/post)。

 

<input>输入框

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也能够转化为密码输入框。

语法:

<form>

<input type="text/password" name="名称" value="文本" />

</form>

    type:

                当type="text"时,输入框为文本输入框;

                当type="password"时, 输入框为密码输入框。

                name:为文本框命名,以备后台程序ASP 、PHP使用。

                value:为文本输入框设置默认值。(通常起到提示做用)

 

文本域,支持多行文本输入

当用户须要在表单中输入大段文字时,须要用到文本输入域。

语法:

          <textarea  rows="行数" cols="列数">文本</textarea>

         <textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

              cols :多行输入域的列数。

              rows :多行输入域的行数。

 

单选框,复选框

语法:

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

type:

                  当type="radio"时,控件为单选框

                  当type="checkbox"时,控件为复选框

                  value:提交数据到服务器的值(后台程序PHP使用)

                  name:为控件命名,以备后台程序ASP、PHP使用

                  checked:当设置checked="checked"时,该选项被默认选中

                  注意:同一组的单选按钮,name取值必定要一致,这样同一组的单选按钮才能够起到单选的做用。

 

下拉列表框,节省空间

下拉列表在网页中也常会用到,它能够有效的节省网页空间。既能够单选、又能够多选。

语法:<option value="提交值">选项</option>

提交值是向服务器提交的值,选项是显示的值。

<form action="save.php" method="post" >

 

<label>爱好:</label>

 

<select>

 

<option value="看书">看书</option>

 

<option value="旅游" selected="selected">旅游</option>

 

<option value="运动">运动</option>

 

<option value="购物">购物</option>

 

</select>

</form>

 

使用下拉列表框进行多选

下拉列表也能够进行多选操做,在<select>标签中设置multiple="multiple"属性,

就能够实现多选功能,进行多选时按下Ctrl键同时进行单击,能够选择多个选项。

以下代码:

<form action="save.php" method="post" >

 

<label>爱好:</label>

 

<select multiple="multiple">

<option value="看书">看书</option>

<option value="旅游">旅游</option>

<option value="运动">运动</option>

<option value="购物">购物</option>

 

</select>

</form>

 

在表单中有两种按钮可使用,分别为:提交按钮、重置。

提交按钮:当用户须要提交表单信息到服务器时,须要用到提交按钮。

语法:

                <input   type="submit"   value="提交">

           type:只有当type值设置为submit时,按钮才有提交做用

           value:按钮上显示的文字

重置按钮,重置表单信息

当用户须要重置表单信息到初始时的状态时,好比用户输入“用户名”后,发现书写有误,可使用重置按钮使输入框恢复到初始状态。只须要把type设置为"reset"就能够。

语法:

              <input type="reset" value="重置">

       type:只有当type值设置为reset时,按钮才有重置做用

                 value:按钮上显示的文字

相关文章
相关标签/搜索