一周小结

sato_light
173 阅读5分钟

一、HTML

（一）HTML标签

1.章节标签

标题h1 章节section 文章article 段落p 头部header 脚部footer 主要内容main 旁支内容aside 划分div

2.全局属性

  • class

  • contenteditable

  • hidden 隐藏

  • id 一般不报错 不到万不得已不适用

  • style CSS与HTML、JS属性同时存在时，显示JS

  • tabindex 用来控制Tab顺序 tabindex=0時最后访问 tabindex=-1時不访问

  • title 显示完整内容

3.内容标签

  • ol+li ordered list + list item 有顺序的

  • ul+li unordered list + list item 无顺序的

  • dl+dt+dd 描述列表 dt=描述对象 dd=描述数据

  • pre 保留回车、空格、Tab键

  • code code标签内字体等宽

  • hr 水平分割线

  • br break 换行

  • a 超链接

  • em 表示语气上的强调 默认为斜体

  • strong 表示内容本身的重要性

  • quote 行内引用

  • blockquote 块内引用

（二）HTML常用标签

1.a标签

作用：跳转外部页面、跳转内部锚点、跳转邮箱或电话

（1） href= hyper ref 超链接

①取值

（1）网址

https:// 或 http:// 或 //；

（2）路径

  • /a/b/c以及a/b/c 其中/a/b/c中第一个/是http服务的根目录
  • xx.html 以及 ./xx.html

（3） 伪协议

javascript：代码 不输入代码=不刷新页面

mailto： 邮箱

tel： 手机号

（4） id

herf=#xxx

2. a的target取值

  1. _blank 在空白页面打开
  2. _top 在当前iframe页面的最顶部页面打开
  3. _parent 在当前链接所在iframe页面上一层打开
  4. _self 在自己页面打开

注意：如果target=xxx 则每次点击会重复打开同一个页面

3.a的download

作用：下载页面 缺陷：不是所有浏览器都支持

注意：iframe标签是内嵌窗口 已经很少使用

（二）table标签

table标签内只能有thead、tbody、tfoot

  • table 表格
  • thead 表头
  • tbody 表格内
  • tfoot 表尾
  • tr 表格中行
  • td 表格数据单元格元素
  • th 表头单元格
  • table-layout：

auto 根据表格内容自动调整表宽

fixed 是表格等宽

  • border- collapse：collapse 合并表格边框
  • border-spacing 表格间距

（三）img标签

作用：发出get请求，展示一张图片

属性

  • alt：如果显示失败显示xxx
  • width/height：修改任一数值，另一数值随之变动

注意：不可以让图片变形！！！

事件

  • onload 图片加载成功
  • onerror 图片加载失败

响应式：max-width：100% 图片宽度为页面宽度100%

（四）form标签

注意：必须有 type="submit"才可以提交表单

作用：发get或post请求，然后刷新页面

属性：

  • action 请求页面地址
  • method 控制用get或post请求
  • autocomplete 在表单输入时给出建议
  • target 提交到指定页面

事件：onsubmit

可以用input ，也可以用 button ，但 input中不可以有其他标签

1.input标签

作用：让用户输入内容

属性

类型：type

  • password 不展示输入内容
  • radio 单选
  • checkbox 多选
  • file 上传文件，multiple 上传多个
  • hidden 看不见标签，给JS自动填入
  • text 文本框
  • select 下拉选择
  • button
  • email
  • number
  • search
  • submit
  • tel

其他：name

  • autofocus
  • checked
  • disable
  • maxlength
  • pattern
  • value
  • placeholder

事件：

  • onchange 输入改变
  • onfocus 鼠标在表单内
  • onblur 鼠标在表单外

二、 HTML项目实践

  • 快速将内容放至li:选中，CTRL+shift+p输入Emmet wrap选择个别行，输入ul>li*

  • 添加TOC可以使用a href =#xxx做到

  • 添加图片不要让图片变形

  • 国内一般添加target=_blank,打开新页面

  • 加上meta:vp(默认生成不完整，需要添加）和img max-width兼容手机

三、CSS

（一）CSS历史

  • CSS全称为层叠样式表

  • 目前使用最广泛的版本：CSS2.1

  • caniuse.com 可以查看浏览器支持特性

（一）语法

1.语法一：样式语法

选择器{
   属性名：属性值
   /*注释*/
}

注意事项：

  • 所有符号都是英文符号

  • 区分大小写

  • 没有//注释

  • 最后一个分号可以省略，但建议不省略

2.语法二：at语法

@charset "UTF-8";
@import url(2.CSS);
@media (min-width:100px) and (max-width:200px){
  语法一
}

注意事项：

  • @charset 必须放在第一行

  • 前两个at语法必须以;结尾

  • charset 是字符编码集

（二）调试方法

Border调试法：

在某行语句下加border

如果border没出现证明存在bug

（三）文档流

1.流动方向

  1. inline 元素从左到右，到达最右边才会换行

  2. block 元素从上到下，每一个都另起一行

  3. inline-block 也是从左到右

2.文档流宽度

  1. inline 宽度为内部inline元素宽度的和，不能用width 指定

  2. block 默认自动计算宽度，可以用width 指定

  3. inline-block 结合前两者特点，可以用width

3.文档流高度

  1. inline高度由line-height 间接决定，与height无关

  2. block 高度由内部文档流元素决定，可以设置height

  3. inline-block 和block类似，可以设置height

注意事项：

  • div宽度默认100%，span默认宽度为span

  • div 中没有元素，高度为0

（四） overflow 溢出

当内容的宽度和高度大于容器时，会溢出，可以用overflow来设置是否显示滚动条

  • auto 灵活设置

  • scroll 永远显示

  • hidden 直接隐藏溢出部分

  • visible 直接显示溢出部分

（五）脱离文档流

float

position:absolute/fixed

（六）盒模型

CSS盒模型分为content box和border box两种。

content box的width、height只包含content的宽度和高度；

border box的width、height包含border、padding以及content的宽度高度。

盒模型长宽相同时使用border-radius:50%变成圆形。

avatar
文章
阅读
粉丝