于东亮 发表于 2018-12-13 10:07

前端语言基础概述笔记和指南手册

本帖最后由 于东亮 于 2018-12-13 10:11 编辑


前端三大技术   html   css   javascript
结构html
样式css
行为javascript
浏览器:网景   ie   360   火狐   谷歌欧鹏等

颜色表示形式:三种
             1.单词
             2.6位十六进制格式 :每两位代表一个颜色   三色rgb   红绿蓝
               红色#ff0000   #f00   红色      #FF0000绿色:   #00ff00   
               蓝色:#0000ff       黑色:#000000    白色:#ffffff
             3. 红色 rgb(255,0,0)   css中使用
单标签:只有一个标签的   <br/>   <hr/>    <img/>   <frame/>   < input />
双标签:有两个标签的   <p>   <a>   <span>   <h1~h6><table>等

body中的属性   bgcolor    网页体的颜色   background   背景图片

横线:<hr width="800px" align="left"size="6" color="aqua"/>独占一行的
width:宽度
align:水平对齐方式leftcenter   right
size:线的粗细
color:颜色

<br/>换行

h1~h6   标题独占一行的


文本加粗显示<strong> </strong>或<b></b>
文字斜体显示<em></em>或者<i></i>
下划线标签<ins></ins>或者<u></u>
删除线<del></del>或者<s></s>
<sub></sub>下角标   <sup></sup>    上角标

<p>段落   独占一行的

<font color="red"   size="7" face="楷体,宋体">   字体
color :文字的颜色黑色
size :文字大小默认3号
face:字体      默认宋体

<a href="08-天气案例.html"   target="_top">超链接
href:链接到的路径   可以使文本,图片,网页
target:打开的方式默认_self
_blank:浏览器总在一个新打开、未命名的窗口中载入目标文档
_parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
_self:这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。
_top:这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

<img src="2.jpg" width="100"height="200" alt="郭德纲"title="小郭儿"/>图片
src:图片的路径
width:宽
height:高
alt:当图片不存在时显示的文字
title:获得焦点时的提示文字

路径:相对路径
   绝对路径
相对:
1.      网页与图片在一级目录中,可以直接引用
<!--13-路径-01.html与1.jpg在同一级,可以直接引用-->
<imgsrc="1.jpg"/>
2.      网页与图片所在的文件夹在同一级,通过文件夹名字/图片引用
<!--13-路径-02.html与img在同一级   2.jpg在img中,可以直接引用-->
<imgsrc="img/2.jpg"/>
3.      网页所在的文件夹与图片所在的文件夹同一级,../文件夹/图片引用
<!--13-路径-03.html在路径-03文件夹中,2.jpg在img中,路径-03文件夹与img文件夹在同一级-->
<img src="../img/2.jpg" />
<img src="../1.jpg" />   图片与网页所在的文件夹是一级

绝对:直接写绝对路径,或是网址url /uri


表格标签:
Table标签:表格标签
Thead标签:表头单元格,在此列可以定义表头,表头可以限定表体的宽度。
Tbody标签:表格的主体
Tr标签:表格中的行
Th标签:标题单元格
Td标签:标准单元格








尽量不要使用表格合并,而是尽量使用表格嵌套

表单标签<form>:包含表单元素
      method:代表提交数据的方式
                        get方式:
                              发送的数据追加在url后面
                              Get不安全
                              传递的数据量小
                              默认编码是iso-8859-1西欧,不能在后端直接设置为utf-8,中文传递困难
                        post方式:
                              发送的数据放到请求正文中
                              Post安全
                              数据量几乎无限制
                              在后端可以手动设置utf-8编码,中文传递简单

只有一种情况,可以发送post请求,必须有form表单,method=post,其他情况默认都是get请求
      action:设置提交的url地址

单行文本框:<input type=”text”>
      name:元素名称,后台取值用
      maxlength:最大输入长度(字符)
      value:默认值
      readonly:只读 ,单一属性
      disabled:禁用,这个表单元素不会放到提交的数据中
      size:宽度
密码框:<input type=”password”>
      属性同文本框
文本区域:<textarea></textarea>
      cols:宽度
      rows:高度
      其他属性同文本框,没有value属性,默认值设置在标签的内容中
单选按钮:<input type=”radio”>
      value:内置默认值
      name:一组单选按钮,name必须相同
      checked:默认选中
可以配合label标签的for属性绑定文字
复选按钮:<input type=”checkbox”>
      属性同单选按钮
列表框:<select> <option>
      value:内置默认值
      selected:默认选中
      size:显示高度
      multiple:允许多选
文件域:<input type=”file”> 表单需要设置特殊属性enctype="multipart/form-data"表示以二进制数据的形式发送,而不是默认的纯文本方式
      name:元素名称
      size:宽度
隐藏域:<input type=”hidden”> 看不到的表单元素
      name:元素名称
      value:内置默认值
三种按钮标签:
      submit:提交按钮
      reset:重置按钮
      button:普通按钮

框架:把浏览器窗口进行分割,每个子窗口都是独立的网页,框架结构的画面的网页的数量是N+1,因为需要一个框架页本身,框架页不能有body
框架标签:
      <frameset>:框架集,包含多个框架
                cols:分割的列数和宽度分配
                rows:分割的行数的高度分配
                frameborder:显示边框,0不显示
                framespacing:默认空白,0没有空白
      <frame>:框架
                src:引用的网页路径
                noresize:单一属性,用户不能调整大小
                scrolling:滚动条设置,auto自动,yes必须有,no必须没有
                name:框架名称
内嵌浮动框架:<iframe> 不用做分割,而是直接把网页嵌入到窗口中
      width:宽度
      height:高度
      其他属性同frame

滚动的文本字幕:<marquee>
      direction:滚动方向 up down left right
      scrollamount:每次运动的像素数
      scrolldelay:延迟时间(毫秒)

多媒体标签:<embed>
      src:媒体路径
      width:宽度
      height:高度

      



congratulation 发表于 2018-12-13 23:59

问个问题,前端用html5写的页面需要用mysql保存数据以及实现增删改查操作,怎么连接呢,有没有教程。多谢了 ,因为不是本行的,所以问问

风中333 发表于 2018-12-13 10:37

好东西赞一个

盖世乞03 发表于 2018-12-13 11:11

css2是不是有点过时了点{:1_909:}

hlh2518 发表于 2018-12-13 11:11

真正的好东西!

幻想乡二狗子 发表于 2018-12-13 11:14

先收着,忘了再来看

陈俊亮 发表于 2018-12-13 11:20

总结的不错

huamu 发表于 2018-12-14 05:28


谢谢分享技术笔记

leed 发表于 2019-7-22 02:06

前端朋友砥砺前行

zyx723 发表于 2019-7-22 08:10

好东西,谢谢!
页: [1] 2
查看完整版本: 前端语言基础概述笔记和指南手册