资讯详情

h5 +css +js +jq 基础知识总结

l软件架构

1,C/Sclient/server客户端/服务器

本地需要安装客户端,远程需要服务器端

例如:在计算机上安装软件,QQ,迅雷

安装、部署、开发麻烦

更好的用户体验

2,B/Sbrowser/server浏览器/服务器

用户只需安装浏览器,然后输入不同的网站,访问不同的服务器

例如:淘宝、京东、百度...

安装、部署和开发相对简单

缺点:服务器硬件要求高,用户数量大,体验差

BS架构

资源划分

静态资源:

特征,所有用户访问都看到相同的‘

分类:文本、图片、视频HTML、CSS、JS...

动态资源:

当用户访问时,内容可能会有所不同

如果用户访问动态资源,服务器首先将动态资源转换为静态资源,并将其发送给浏览器

静态资源

HTML:构建基本网页,展示网页内容

CSS:用户美化页面,布局页面

JavaScript:控制页面元素,使页面与用户互动

HTML

概念:HyperTextMarkupLanguage:超文本标记语言

超文本:利用超链接组织不同空间的文本信息的网络文本

标记语言:由标签组成的语言

标签格式:

<div></div><img/>

HTML入门

<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title></title> </head> <body> </body> </html>

1,<!DOCTYPE html>  声明文档为html类型   lang=en /zh-CN 定义页面为英文或者中文,不区分大小写

<!doctype HTML>

2,<html>  :页面根元素

3,<head> :一般包含一些页面元数据

        如:<meta charset="utf-8" />  设置编码环境

                <meta name="author" > 定义页面的作者

                <meta http-equiv="refresh" content = "30"> 每30秒刷新页面

                <title>  标题

4,<body> :包含了可见的页面内容

HTML  :文件的格式   .html  或者  .htm

双标签:有开始和结束标签   如   <html> </html>

单标签:  开始 标签和结束标签写在一起    如  <br />  <img /> 

<hr />

标签的嵌套:

    错误的写法 <a>   <b>   </a>   </b>    

    正确的写法  <a>    <b></b>     </a>

标签不区分大小写,建议小写

标签的属性一般定义在开始标签中,以键值的形式出现  

如   <a href="">  </a>

    宽  width   高height    id  class

单标签属性的写法  :  <img src = "">

双标签属性的写法   :  <a href="">  </a>

标签的学习

1,文件标签

    <html>    <head>    <title>   <body>  <!DOCTYPE html>

    meta标签name值

2,文本标签:

<!-- 标题标签 --> <h1>标题1</h1> <h2>标题1</h2> <h3>标题1</h3> <h4>标题1</h4> <h5>标题1</h5> <h6>标题1</h6> <!-- 段落标签P --> <p>段落标签</p> <p>段落标签</p> <div>div标签</div> <div>div标签</div> <!-- 换行 --> <br /> <!-- 水平线 --> <hr > <hr color="red"> <hr width="200px"> <hr size="7" color="aqua"> <hr width="200px" align="right" color="red">

3,含有样式的标签

<!-- 含有样式的标签 --> <b>字体加粗</b> <i>斜体</i> <center>居中</center> <font color="red" size="7" face="宋体">字体</font>

color属性取值:

    1,颜色名称   red   yellow  green  blue  

    2,RGB()      rgb(值1,值2,值3)    值的取值范围  0-255

        rgb(0,0,255)  :蓝色  --> r=0,g=0,b=255

        rgba()  -->a表示透明的   值的范围  0-1

    3,#值1值2值3:  16进制的取值方式,3个值也是对应的rgb

        取值范围:    00-FF    

    

width/height属性 取值:

    1,数值  +单位    :100px

    2,数值% :表示相对于父元素的比例

    

图片标签

<!-- 图片标签 --> <img src="img/book.jpg" width="200px" alt="表示替换的文本"> <!-- 绝对路径 --> <!-- 相对路径  ./   ../  --> <img src="../../抽奖/img/1.jpg" alt="">

  相对路径:

        ./ :代表的是当前目录,找的是同级别的目录信息

        ../:代表上一级目录,找的是父级的兄弟目录

5、特殊字符

        空格: 

        大于 :  >    ge       >   <>

        小于  : <     le

        版权  :@copy

6、列表

<!--列表 --> <!-- 无序列表 --> <ul type="circle"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <!-- 有序列表 --> <ol type="I"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> <!-- 自定义 --> <dl> <dt> 城市</dt> <dd>北京</dd> <dd>上海</dd> <dd>南京</dd> </dl>

7,链接标签  a

<!-- 链接标签a -->

<a href="http://www.baidu.com">链接到百度</a> <a href="test.html">跳转页面</a> <a href="mailto:1111111@qq.com">联系我们</a> <a href="#top">回到顶部</a> <a href="http://www.baidu.com"><img src="img/book.jpg" width="100px" alt=""></a> <a href="http://www.baidu.com" target="_blank">链接到百度</a> <a href="http://www.baidu.com" target="_self">链接到百度</a>

link:定义文档和外部文件的关系

8、表格标签

<table width="1000px" border="1px" cellspacing="0px" cellpadding="10px"> <caption>标题</caption> <tfoot> <tr> <th >Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </tfoot> <tr bgcolor="aquamarine"> <td colspan="3">Data</td> <td align="center">Data</td> <td>Data</td> <!-- <td>Data</td> --> <!-- <td>Data</td> --> </tr> <tr> <td bgcolor="bisque">Data</td> <td rowspan="3">Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <!-- <td>Data</td> --> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <thead> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </thead> <tbody> </tbody> </table>

 

    border: 外边框的宽度

    width:表格宽度

    height:表格高度

    cellspacing:边框之间的距离

    cellpadding:内容和边框之间的距离

    bgcolor:背景颜色

    algin:对齐方式

    th:表头

    td:列

    tr:行

    cospan:合并列

    rowspan:合并行

    thead:表示声明表头

    tfoot:声明表尾

    tbody:表的内容

    caption:表格标题

表单   form

    表单标签:用于采集用户输入的数据,和服务器进行交互。

    form标签定义了一个供用户输入的html表单,可以声明一个范围,这个范围代表了采集用户数据的范围

<form action="http://www.baidu.com" method="post"> 用户名: <input type="text" name="username"> <br> 密码: <input type="password" name="password" ><br> <input type="submit" value="提交"/> </form>

    action:指定提交数据的url(表示数据要提交到的地方)

    method:指定提交的方式

        值:

            get:请求的参数会在地址栏中显示,url的长度是有限制的,get方法是不安全的

            post:请求的参数不会在地址栏中显示,会封装在请求体中,请求参数没有大小的限制,post方法比较安全

        

    注意:如果表单中的数据想要被提交,需要在表单中加一个name属性

    

    

    表单项标签

    

    input :定义了输入的控件,可以通过修改type属性的值,从而改变元素展示的样式

<form action="#" method="get">
 <label for="user">用户名:</label> 
 <input id="user" type="text" name="username"> <br> 
密码:  <input type="password" name="password" ><br> 
性别:  <input id="man" type="radio" name="gender"> <label for="man">男</label>    <input type="radio" name="gender">女  <br> 
爱好:  <input id="bas" type="checkbox" name="hobby"/> 
<label for="bas">打篮球</label> <input type="checkbox" name="hobby"/> 踢足球 <input type="checkbox" name="hobby"/> 看电影 
<input type="checkbox" name="hobby"/> 学习  <br> 
文件 : <input type="file"/> <br> 
按钮 : <input type="button" value="按钮" />  <br> 
颜色: <input type="color" />                 <br> 
时间: <input type="date" />                  <br>
 邮箱: <input type="email"  />    <br> 
图片: <input type="image" src="">   <br> 
自我介绍 : <textarea rows="5" cols="10"></textarea> <br> 
籍贯: <select name="city"> <option value="nj">南京</option> <option value="sh">上海</option> <option value="hz">杭州</option> </select> <br> <input type="submit" value="提交"/> </form>

    

<h1>注册页面</h1> <table width="300px" > <tr> <td width="100px"> 用户名: </td> <td width="200px"> <input type="text" /> </td> </tr> <tr> <td width="100px"> 密码: </td> <td width="200px"> <input type="password" /> </td> </tr> <tr> <td width="100px"> 邮箱: </td> <td width="200px"> <input type="email" /> </td> </tr> <tr> <td width="100px"> 手机号: </td> <td width="200px"> <input type="text" /> </td> </tr> <tr> <td width="100px"> 性别: </td> <td width="200px"> <input type="radio" name="gender" />男 <input type="radio" name="gender" />女 </td> </tr> <tr> <td width="100px"> 爱好: </td> <td width="200px"> <input type="checkbox" name="hobby" />唱歌 <input type="checkbox" name="hobby" />打球 <input type="checkbox" name="hobby" />旅游 </td> </tr> <tr> <td width="100px">籍贯</td> <td width="200px"> <select> <option value ="">南京</option> <option value ="">上海</option> </select> </td> </tr> <tr> <td width="100px">个人介绍:</td> <td width="200px"> <textarea rows="4" cols="25"></textarea> </td> </tr> <tr> <td align="center" colspan="2"> <input type="checkbox" /> 是否同意本公司的协议 </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="注册"> </td> </tr> </table>

块级元素

    宽度默认是根父级宽度是一样的

    块级元素是占据父元素的一行,不可以和其他元素共处一行

    可以调节宽高

     p  ,div, ul ,li,h1-h6...

行内元素

    大小是自身内容的宽高

    可以和其他元素共处一行,如果显示不下会自动换行

    没有宽高属性,无法通过宽高属性调整大小

    span em  

补充内容

    URL :统一资源定位符  俗称 网址

    URL的格式:

        协议://主机地址(ip地址) + 目录路径 +参数

        常见的协议:

        ftp:  文件传输协议,可以通过ftp访问服务器上的文件

            使用方式:  ftp://admin:123456@192.168.1.1/xxx.pdf

        file:用来访问本地计算机中的文件

            使用方式: file:///C:/windows/system/win32.dll

        telent:允许用户通过一个协商过程与远程设备进行通信

        http:超文本传输协议  Hyper  Text  Transfer Protocol 用来从万维网的服务器传输超文本到本地浏览器中的传输协议

        

        

Web标准

结构标准  XML,HTML,XHTML

表现标准  CSS

行为标准 DOM  JavaScript

Web浏览器

常见的浏览器

IE               Trident     

Opera        Blink

Safari   Webkit

Firefox    Gecko

Google Chrome  Blink

Microsoft  Edge       Blink

HTML5语法变化主要是为了兼容各种不规范的HTML文档

某些元素可以省略结束标签

1,仅仅可以省略结束标签的元素有:p,li,dt,dd,rb,rt,rtc,rp,thead,tbody,tfoot

     tr,td,th,optgroup,option,colgroup

2,绝对没有结束标签的元素有:area,base,br,col,command,embed,hr,img,input,

     keygen,link,menuitem,meta,param,source,track,wbr

3,可以将开始标签和结束标签一起省略的元素:html,head,body,colgroup,tbody

4,属性值可以不用引号括起来

5,标签不用区分大小写

6,某些标志性的属性可以省略属性值,通常为布尔型。

HTML5 的基本元素,与html概念差不多

<html>,<head>,<title>,<style>,<meta>,<base>,<body>,

<h1>~<h6>,<p>,<br>,<hr>,<div>,<span>

HTML5 的文本格式化元素与html概念差不多

<b>,<label>,<small>,<em>,<i>,<sub>,<sup>,<bdo>

HTML5特殊的文本格式化元素

<abbr>,<address>,<blockquote>用于定义块引用,<q>,<code>,<cite>

<dfn>,<del>,<ins>,<kbd>,<pre>,<samp>,<var>

<b>:定义加粗字体

<big>:定义大号字

<em>:着重文字,斜体

<i>:斜体字

<small>:小号字

<label>:着重文字,加粗

<sub>:定义下标字

<sup>:定义上标字

<ins>:定义插入字

<del>:定义删除字

计算机输出:

<code>:定义计算机代码

<kbd>:定义键盘输出样式

<samp>:定义计算机代码样本

<tt>:定义打字机输入样式

<var>:定义变量

<pre>:定义预格式文本

引用、术语:

<abbr>:定义缩写

<acronym>:定义首字母缩写

<address>:定义地址

<bdo>:定义文字方向

<blockquote>:定义长的引用

<q>:定义短的引用语

<cite>:定义引用,引证,通常用于著作

<dfn>:定义一个概念,项目,缩写,定义等

超链接和锚点

基于<a>标签HTML5里面新增的属性

download:此属性只是浏览器下载URL而不是导航到它,因此提示用户将其保存 为本地文件

    media:此属性规定目标URL是为什么类型的媒介/设备进行优化的

HTML5里面的废弃属性

charset,cords,name,rev,shape

列表相关元素

标签属性同HTML,无变化

表格相关元素

标签属性同HTML,无变化

1,新增的文档结构元素,如<header>,<footer>,<aside>,<nav>

2,新增的文本格式化元素,

<bdi>,

<mark>用于定义高亮显示文本

time 用于显示被标注的内容是日期或者时间,采用24小时制,会用到以下2个属性

     datetime:该属性表示此元素的时间和日期。

 pubtime:这个属性指是time元素中的日期时间是文档的发布日期

    3,新增的页面增强元素

      meter:用于表示一个已知最大值和最小值的计数器

 progress:用于表示一个进度条,常用于下载进度,加载进度等

4,新增的多媒体元素

  audio:定义了声音,如音乐

      常用属性:src:表示歌曲的路径

           controls:设置是否使用播放控制

  video:定义了视频,如电影片段

      常用属性:src:设置视频路径

标签: 4080连接器2p3p间距连接器th矩形电连接器

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台