黑马程序员技术交流社区

标题: 【石家庄校区】Web前端 [打印本页]

作者: 王文海520 时间: 2017-11-18 21:35
标题: 【石家庄校区】Web前端
本帖最后由小石姐姐于 2017-11-21 10:12 编辑

HTML

<b> 加粗
<i> 斜体
<u>下划线
<p> 段落标签
<h1>到<h6> 几级标题越来越小
有序标签:
<ol>
<li>
</li>
</ol>
无序标签:
<ul>
<li>
</li>
</ul>
超级链接标签:<a>
属性:
列表标签清除小圆点: ul style="list-style:none;"
HTML的表单标签: <form>.
- <form>的常用属性
  - action : 提交的路径不写默认提交到当前页面
  - method : 请求的方式 GET 和 POST 不写默认get
    - get和post方式的区别:
      - get : 数据会显示到地址栏中 get方式提交有大小限制
      - post : 数据不会显示到地址栏中 post方式提交是没有大小限制(优先使用)
- 表单元素:
- <input type="text"> : 文本框
  - 常用属性:
    - name : 表单元素的名称必须有name属性然后后台才可以接收数据
    - value : 文本框的默认值
    - size : 文本框的长度
    - maxlength : 文本框最大长度
    - readonly : 只读文本框无法修改
- <input type="password" : 密码框
  - 常用属性和文本框大部分相似
- <input type="placeholder" : 提示
- <input type="radio" :单选按钮
  - name : 表单元素的名称必须有name属性然后后台才可以接收数据
  - value : 单选按钮的默认值
  - checked : 单选按钮默认被选中
- <input type="checkbox" : 复选按钮
  - name : 表单元素的名称必须有name属性然后后台才可以接收数据
  - value : 单选按钮的默认值
  - checked : 单选按钮默认被选中
- <input type="button" : 普通按钮没有任何功能的按钮
- <input type="submit" : 提供按钮
- <input type="reset" : 重置按钮
- <input type="file"> : 文件上传的表单项
- <input type="hidden"> : 隐藏字段
- <input type="image"> : 图片按钮
- <select> : 下拉列表
  - <option> : 下拉区域选项
  - selected : 默认被选中
- <textarea> : 文本域
  - cols : 文本占的列数
  - rows : 文本占的行数
- HTML5的扩展(部分浏览器支持)
  - <input type="data"> 出现日期选择
  - <input type="number"> 必须是数字
  - <input type="email"> 必须是邮箱格式
<td>:
- rowspan: 合并行
- colspan : 合并列
HTML的框架标签

特殊字符的标签:

空格 :
< : <
> : >

常用标签

<div>
<span>
<ul>
<a>
<i> : icon 图片或者倾斜
html的块标签
<div> </div> : 块级元素,默认一对div独占一行可以修改高度和宽度
<span></span> 3: 行内元素,默认在同一行不可以修改高度和宽度

table和div布局的区别:

div更加灵活并且解析加载速度快
css

构成 : 选择器 + 声明
CSS的引入方式:

3种样式

引入外部css文件: 多个HTML文件中使用了相同的样式
页面内样式: 同一个HTML文件中多个标签共用的这个样式
行内样式: 只有某个标签自己使用

CSS的选择器:

元素选择器
ID选择器
类选择器

选择器的优先级:
ID选择器 > 类选择器 > 标签选择器

div的浮动:

使用float属性可以完成div的浮动
clear : 清除浮动
为什么使用浮动::

为了让某些标签(块级标签 li , div)横着显示

如何使用浮动:

float : left 向左浮动

如何清除浮动:

在浮动的元素后面添加<div style="clear:both"> 不建议使用
给浮动的元素的父元素添加一个样式 clearfix

清除浮动样式
                     .clearfix:before,
                     .clearfix:after {
                              content: "";
                              display: table;
                     }
                     .clearfix:after {
                              clear: both;
                     }
                     .clearfix {
                              *zoom: 1;
                     }
CSS中的继承问题

宽度是可以继承的高度不可以继承
注意: 浮动以后的元素不会继承宽度

div的居中: margin : 0 auto ;
百分比和px计算: 用calc函数例如
calc(70% - 2px) 注意减号的两边必须有空格
CSS的其他选择器:

属性选择器
后代选择器
子元素选择器

盒模型:
外边距盒子与盒子距离 margin
内边距 padding
宽度计算方式 padding-left + padding-right + border -left + border-right +content

定位
position
absolute 绝对定位是相对于body(边框)
relative 相对定位默认是相对于父标签
子绝父相(子是绝对定位父是相对定位)
position : fixed div块会跟着屏幕动(广告)

伪类:
link visited hover active 顺序不能乱 href属性中必须有值记忆方法: " 驴哈 "

JavaScript 脚本语言
JS的基本语法

区分大小写
弱变量类型语言
- 所有的变量类型都用var
结尾分号可有可无
括号代表代码块

数据类型

原始类型
- undefined : 未定义类型
- boolean : 布尔类型
- number : 数字类型
- string : 字符或字符串
- null : 空

引用类型
- 对象类型对象类型默认值是null

JS的运算符

和Java基本一致
JS中有一个 === 全等于 : 类型和值都一致的情况下才为true

常见的事件:

onclick 单击
ondblclick 双击
onmouseenter 鼠标悬停
onmouseleave 鼠标离开
onload 在HTML文本加载完毕后请求图片资源图片请求回来后执行onload事件

JS的引入方式

页面内直接编写JS代码, JS代码需要使用<script></script>
将JS的代码编写到一个.js的文件中, 在HTML中引入该代码即可

C:/Users/Administrator/AppData/Local/YNote/data/qqEBE2595FAFE14C48C5D01E8533D8810E/c652edc732a74eec8d52eeec5eb873bf/18e372cfbdf942aba1714f2f70c299ce.jpg
JS检验正则表达式只有两个方法