编程初学者 笔记 （分分钟学会）

BUTFL
255 阅读11分钟

大家好 我是 BUTFL 今天来分享一下我刚开始学编程的时候看的笔记

个人感觉 初学者 看这个非常好

肯定有不全的 可以在下面评论出

你们评论 我来修改 哈哈

话不多说 ！

开始

2mjl2uvz9ic.jpg

表单相关标签

<form></form>用于为用户输入创建htlm表单
<input/ >为用户定义需要使用的表单项
name 表单项的名称
value 表单项的值
type 代表一个输入域的显示方式（输入型，选择型，点击型）
<inout type=''name=''value=/>普通文本域
<input type=password name= value=>密码域
<input type=radio name= value>单选
<input type=checked name= value=>复选
<label>为input元素定义标注（绑定元素）
  定义标注方式label标签将input元素及文字信息包含在一起
  在input标签中定义id属性，属性值自定义。
 在label标签中定义for属性，
 性值指定input的id属性值即可实现关联。(比较常用)
 让单选或复选做默认选中可以加 单属性 checked
<input type=file name= value=>上传文件
 定义多图片上传：1.在表单中添加允许多选属性 multiple 然后按住键盘ctrl键可以进行选择多个文件。
<input type=submit name= value=/>提交按钮
<input type= button><button>按钮
<textarea><textarea>多行文笨输入域 该标签没有value属性， 可以设置name属性，rows属性以及cols属性。
<select><select>下行列表
 定义：name属性，为下拉列表的名称
<option><option>为下拉列表定义列表项
 定义：value 属性，该列表项的值，如果没有定义value属性，那么提交值是会提交option标签中间的内容

标签中常用的标签

<title><title>设置网页标题
<meta http-equiy=refresh content=5;url=>设置吴淼主动跳转

图标标签

<link rel=icon type= href=/加载标体icon图标

fD7cXIFurSQ.jpg

文本与文本格式标签 html

<p><p/>段落标签
<b><b/>加粗
<strong></strong>强调某段文本
<em></em>强调某段文本
<i></i>斜体
<br>换行
<hr />水平线
<u></u>下划线标签
<del></del>删除线标签
<s></s>
<h1~h6>标题
<sub></sub>下标文本
<sup></sup>上标文本
<pre></pre>原格式输出标签

语义化布局标签

html
<div></div>
<span></span>

列表标签

<ul></ul>定义无序列表
<ol></ol>定义与序列表
<li></li>定义类表中每一项
<dl></dl>定义列表
<dt></dt>定义列表中一个项目
<dd></dd>对项目进行描述（一个定义列表中允许有一个项目，而可以存在对项目多个描述）

超链接标签

<a><a>常用属性
href=" "用于定义需要跳转的地址
target=" "定义打开方式
常用值：
self默认，当前窗口打开链接文档。
blank:在新的窗口打开

多媒体标签

<img/>
src=用于设置图签加载的地址
width=设置图片宽度
height=设置图片高度
usemap 定义用户图像映射
<area />设置区域信息（区域大小，区域形状）coords=~~~~~
(坐标) 
target=_blank 打开方式
href= 跳转地址

表格相关标签及属性

<tablr></table>定义表格
<caption><ciption>定义表格的标题
<tr></tr>表格中的行
<th></th>定义表格中的表头单元格
<td></td>定义单元格
<thead></thead>定义表格的头部
<tboby></tboby>定义表格的主体
<tfoot></tfoot>定义表格的底部

table标签常用属性

width 宽度
height 高度
align 表格在页面的摆放位置 
左left 中center 右right
backgrgond 表格背景图片
bgcolor 表格背景颜色
border表格边框的宽度（以像素为单位） 表格默认没有边框
bordercolor 表格边框颜色 当border>=1时起作用
cellspacing 单元格之间的间距
cellpadding 单元格内容与边框之间的空白距离大小

tr td(单元格)(行)标签常用属性

height 行高
align 行内容的水平对齐方式
valign 行内容的垂直对齐方式
bgcolor 行的背景颜色
<!-td
width/height 单元格的宽度和高度
align 设置水平对齐方式，取值left/centerright 
valign 设置垂直对齐方式，可取值top/middle{中部}/bottom（底部）
bgcolor 单元格的背景颜色
colspan 设置单元格的跨列（一行中跨列）
rowspan 设置单元格的跨行（一列中跨行）

HTML框架标签

<frameset></frameset>代替boby标签定义框架页
<frame />定义frameset标签中每一个框架页的内容
<iframe></iframe>在页面中开一块空间连接一个子页面

css

CSS基本选择器

类选择器（class）
- 在css中用（.）来查找 空格分开即可
唯一选择器（ID选择器）
- 在css中用（#）来查找
通配符选择器（*）
- 匹配所有标签

css状态伪装选择器

  1. link 设置超链接a在未访问前的样子
  2. visited 设置超链接a已经被访问的样式
  3. hover 设置元素在鼠标悬停的样式
  4. active 设置元素在被用户激活时的样式

css字体基本属性

color 字体颜色
font-style 指定文本的字体样式
font-size 指定文本字体大小
    px 像素 屏幕中一个点就是一个像素
    em 相对单位
    ex 相对于一个x字符大小
font-family 指定文本使用某个字体     必须是客户端电脑中所存在的字体
font-weight 指定文本粗细 （boid粗体 bolder特粗体 lighter 细体
font-variant 设置字体颜色为小型大写字母
font-style lialic 斜体
letter-spacing 设置字的间距
word-spacing 设置单词的词间间距（对中文无效）

css外联样式表（外部应用）（做页面推荐使用）

html
<!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="文件地址" />
      </head>
    </html>

css文字属性

taxt-align 元素内容对齐方式
taxt-dacoration 指定文本是否有修饰，默认值为none
text-indent 文本手行缩进
word-wrap 设置当前行超过指定容器的边界是否换行
break-word 让文字换行  默认normar不换行   
line-height 设置大小行高
opacity 设置颜色透明度
overflow（垂直方向和水平方向）
+hidden隐藏、
+ scroll 设置滚动 
+ auto 自动调节
overfow-y (水平方向)
+hidden隐藏、
+ scroll 设置滚动 
+ auto 自动调节
 overflow-x （垂直方向）
 +hidden隐藏、
+ scroll 设置滚动 
+ auto 自动调节
text-overflow 让溢出的文字以省略号显示
取值ellipsis 显示省略号 
取值clip 不显示省略号
white-space 设置文本是否在同一行显示
nowrap 强制在一行
line-height 设置字在什么位置 比如高100px 宽100px line-height就是100px 水平居中

背景属性

-   background-color 背景颜色 默认值：transparent透明的
-   background-image：url（）背景图片
-   background-repeat 背景图片是否重复
    (repeat-x 水平方向  repeat-y 垂直方向 repeat 又垂直又水平
    no-repeat 不重复)
-   background-size 设置背景图片大小 （auto）一个调 一个设auto 图片不会拉扯
    background-sizecover垂直方向100% 水平方向自动
    background-contain 水平方向100% 垂直方向自动
-   background-position 背景图片位置(相对于外层容器)
-   background-attachment 背景图片是否随内容滚动
    scroll 背景图随内容一起滚动
    fixed 绑定到页面 照片不随页面的滚动而滚动
-   background 背景属性简写属性

尺寸属性

width 设置元素宽度
height 设置元素高度
min-height 设置最小高度
展示最小高度，如果内容超过最小高度设定的值，
高度会根据内容的高度来觉得自己的高度
-   max-height 设置最大高度
最大高度属性，允许当前元素根据内容自动减小高度，
但是如果达到最大高度值，将不再增加高度、
    块状元素  div    会独占一行  具有宽高属性
    行内元素  span  不会独占一行  没有宽高属性

列表属性

 list-style-type 设定列表的符号样式
-   list-style-image 使用指定的图片来代替列表的序号
-   list-style-position 设定列表需要的位置
        inside 跟随内容 (在边框之内)
        outside  不跟随内容(在边框之外)
-   list-style 列表简写属性

6. 定位属性

-   position 设定元素的定位方式
    -   static 静态定位(默认)
    -   relative 相对定位
    -   absolute 绝对定位
    -   fixed 根据窗口定位
-   z-index 设定定位元素Z轴的距离

7. 布局属性

-   display 设置元素的显示方式
    -   inline 将元素作为行内元素样式显示
    -   block 将元素作为块状元素显示
    -   inline-block 设定一个元素既可以设定宽高属性，也可以在一行显示。
    -   none 设置元素不显示(隐藏元素)
-   visibility 设置元素是否显示
    -   visible 显示
    -   hidden 隐藏

8. 浮动属性

-   float 浮动属性
    -   left 设置元素向左浮动
    -   right 设置元素向右浮动
    -   none 设置元素不浮动(默认值)
-   clear 用于清除其他元素的浮动属性对当前元素的影响
    -   left 用于抵消float:left效果
    -   right 用于抵消float:right效果
    -   both 用于清除float效果

9. 盒子模型

-   标准盒模型
    -   margin 外边距
    -   border 边框
    -   padding 内边距
-   怪异盒模型
    -   box-sizing 定义当前元素使用哪种盒模型
        -   border-box（怪异）
        -   content-box (标准)

10.变量的命名规范

变量的命名规范** ☆☆☆☆☆

	- 声明PHP变量时，必须以$开始。
	- 声明变量名时不推荐使用中文，推荐使用英文。
	- 可以使用数字，但是数字不能开头。
	- 不可以使用特殊字符，除了下划线之外_（当做字母来处理）
	- 变量名严格区分大小写。
	- 变量名要有意义，不要乱起。

## 11. H5新增标签
<bdo></bdo>	<!--覆盖默认的文本方向-->
<details></details>	<!--交互式控件、可见的或者隐藏的补充细节-->
<summary></summary>	<!--为details定义标题-->
<dialog></dialog>	<!--定义对话框或窗口-->
<figure></figure>	<!--用于对元素进行组合。多用于图片与图片描述组合-->
<figcaption></figcaption>  <!--为figure定义标题或者说定义图片的描述-->
<mark></mark> <!--标记文本--> 他会给要突出的文本加背景色

### 2. 布局语义化标签

```html
<header></header> 头部标签
<footer></footer>  底部标签
<nav></nav> 导航标签
<address></address> 地址标签
<section></section> 区块标签
<article></article> 文章标签
<aside></aside> 侧边栏

3.表单相关标签及属性

将表单内的相关元素分组 为fieldset定义标题 为下拉列表定义分组

定义可选数据列表

注意：如果使用可选数据列表，需要跟文本域进行配合，在可选数据列表中定义id属性，在文本域中定义list属性关联id属性即可。 可选数据列表项用opation标签来定义

<input type="email" name="" value="" /> 
<input type="url" name="" value="" />
<input type="number" name="" value="" />
<input type="range" name="" value="" />
<input type="search" name="" value="" />
<input type="color" name="" value="" />
<input type="tel" name="" value="" />
<input type="date" name="" value="" />
<input type="time" name="" value="" />
<input type="week" name="" value="" />
<input type="month" name="" value="" />
<input type="datetime-local" name="" value="" />

HTML5表单新玩法

  • 在HTML5中为了排版方便，表单标签允许跳出form表单之外，但是要实现提交功能需要做2件事。
  1. 为form标签添加id属性
  2. 为需要提交的元素添加form属性，指定1步设置的id值即可。

4. 多媒体标签

<img /> 图像标签
<map></map>  定义一个客户端图像映射
<area /> 标签定义图像映射中的区域
<audio></audio> 音频标签
<source />  加载媒体资源
<video></video>  视频标签
<embed /> 定义镶嵌的内容
<progress></progress> 进度条标签
<meter></meter> 定义范围内的度量

5.CSS新增选择器

1. 属性选择器

  • 属性选择器就是根据属性名或者属性值来查找到某个元素
  • 标签[属性]
    1. E[ATT] 匹配所有具有ATT属性的E元素，不考虑属性值。
    2. E[ATT = VAL] 匹配所有ATT属性等于VAL的E元素。
    3. E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。
    4. E[ATT |= VAL] 匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性。比如：’en-us’,’en-gb’（了解3）。
    5. E[ATT ^= VAL]属性ATT的值以VAL开头的E元素。
    6. E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素。
    7. E[ATT *= VAL] 属性ATT的值中有VAL存在的E元素。

2. 结构性伪类选择器

  • 伪元素选择器(不是对真正的元素选择)
    1. E:first-line E元素的第一行。
    2. E:first-letter E元素的第一个字母。
    3. E:before E元素的内容之前。
    4. E:after E元素的内容之后。
  • 结构性伪类选择器
    • 在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式
      • 四个最基本的结构性伪类选择器
        1. :root 将样式绑定到页面的根元素。
        2. E:not() 对某个结构元素使用样式，但是想拍出这个元素下的子结构元素。
        3. E:empty 匹配所有为空的E元素。
        4. :target 代表链接到目标时。
      • 其他的结构伪类选择器
        • E:first-child 对一个父元素中的第一个子元素E设置样式。
        • E:last-child 对一个父元素中的对吼一个子元素E设置样式。
        • E:nth-child() 对指定需要的子元素E设置样式。
        • E:nth-last-child() 对指定需要的子元素E设置样式。
        • E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。
        • E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签
        • E:nth-child(an+b)
          • a 表示每次循环中间隔几个改变样式。
          • b 表示指定在循环中开始的位置。
        • E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。
        • E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。
        • E:enabled 匹配表单中激活的元素
        • E:disabled 匹配表单中未激活的元素。
        • E:checked 匹配表单中被选择的radio或者checkbox元素。
        • :focus 设置元素在其获取鼠标焦点的样式。
        • ::selection 匹配用户当前选中的元素(了解)。

6. 动画属性

  1. 浏览器私有前缀

    • -moz- Firefox
    • -webkit- chrome safari
    • -ms- IE
    • -o- Opear

  2. 新增的颜色制式

    • rgba 在原有rgb模式的基础上增加一个a允许设置透明度
    • HLS
    • HLSA 新增颜色值：transparent

  3. 圆角、阴影、渐变

    • border-radius 圆角
    • 关于圆角的形成
      1. 从指定角的顶端，向内部引出垂直半径和水平半径
      2. 将水平半径和垂直半径相较于元素内部的一点
      3. 以该点为圆心，指定的垂直半径和水平半径画圆或者椭圆
      4. 与边框相交的部分就是圆角部分 2个参数8个值： 左上角的水平半径 右上角的水平半径 右下角的水平半径 左下角的水平半径 / 左上角的垂直半径 左上角的垂直半径 右上角的垂直半径 右下角的垂直半径
    • 阴影
      • 盒子阴影 box-shadow
      • 文字阴影 text-shadow
    • 渐变
      • linear-gradients 线性渐变
      • radial-gradient 径向渐变

  4. 转换Transform

    • transform2D

      • translate()
      • scale()
      • rotate()
      • skew()

    • transform3D

      ![transform属性值]

  5. 过渡Transition

    • 过渡指定四要素
      1. transition-property 过渡属性，如background,color等。
      2. transition-duration 过渡所需要时间。
      3. transition-timing-function 过渡函数。既过渡的速度，方式等。
        • ease 默认值，规定慢速开始，然后变快，然后慢速结束过渡效果
        • linear 匀速
        • ease-in 规定以慢速开始，加速效果。
        • ease-out 规定以慢速结束，减速效果。
        • ease-in-out 规定以慢速开始和结束，先加速后减速效果。
      4. transition-delay 过渡延迟时间。表示开始执行的时间。
      5. transition 过渡属性简写属性

  6. 动画animation

    • animation 属性用于控制动画
    • 调用由@keyframes定义的动画
    • animation属性是一个简写属性
    • animation动画子属性
      • animation-name 调用动画，规定需要和keyframes的名字一致
      • animation-duration 动画完成一个周期所需要的时间
      • animation-timing-funtion 规定动画的速度变化类型
      • animation-delay 播放之前的延迟时间
      • Animation-iteration-count:数值|infinite 播放次数
        • infinite 表示无限次播放
      • animation-direction:normal|alternate 动画播放方向
        • normal 为默认值，表示正常播放
        • alternate 表示轮流播放，既动画会在奇数次正常播放，而在偶数次向后播放。
      • animation-fill-mode:forwards 动画停在最后一帧
        • 默认值为none
      • animation-play-state:paused | running 属性规定动画正在运行还是停止
        • 默认是为running

HfcK0hXhemc.jpg

avatar
文章
阅读
粉丝