html 随意整理

2021-06-07 22:04

阅读:558

YPE html>

标签:用法   定位   drop   隐藏   target   center   maxlength   padding   代码   

# HTML基本语法
### HTML标签
* 单标签  `内容`
* 双标签  `` 或 `标签名>`
* 也叫 元素

### 属性
* 属性属于标签
* 一个标签可以有多个属性,每个属性有不同的意义
* 属性值最好写在双引号中

### 代码规范
* 缩进  Tab或4个空格

### 注释
``

# HTML 主体结构标签
### 文档声明
* ``

### html标签
* ``

### head标签
* `

`
* 里面会包含 诸如页面标题,搜索引擎信息等相关的标签

### body标签
* `

`
* 页面的主体内容
* 属性
    *  background
    *  bgcolor
    *  text
    *  link   超链接默认颜色
    *  vlink    点击过后的颜色
    *  alink    正在点击的颜色


# head头部标签
### 标签
* `

` 定义标题
* ``
* ``  

### meta功能
* 定义字符集编码
    * ``
    * ``

* 刷新或跳转
    * ``
    * ``

* 设置关键字
    * ``

* 设置页面描述
    * ``


### 定义网站标题图标
* ``


# 格式排版标签
### 换行标签 br
* `
`

### 分隔线 hr
* `


`
* 语义:段落与段落之间的分割
* 属性
    *  width
    *  size
    *  align
    *  noshade

### 段落标签 p
* `

`
* 语义:表示段落
* 属性
    * align : left/right/center

### 原样输出标签  pre
* `

`
* 语义:需要原格式输出 显示代码

### 标题标签 hr
* `

` 一级标题
*  `

` 二级标题
*  `

` 三级标题
*   `

` 四级标题
*    `
` 五级标题
*     `
` 六级标题

### 居中标签
* `

`
* 不建议使用


# HTML实体
* ` `  空格
* `<`        * `&gt`       >
* `&quot`   “ 引号
* `&copy`   ? 版权
* `&yen`    ¥
* `×`  ×
* `÷`  ÷
* `®`    ?

# 列表标签
* ul   双  无序列表  属性 type(disc(默认)/square/circle)
* li    双  列表项     属性 type 值同上
* ol   双  有序列表  属性 reversed(降序)  type(1/a/A/I)   start(值数字)
* dl      双   定义列表
* dt  双  列表项目的标题
* dd 双 列表项目的描述

# 文本标签(双)
* em    强调  表现为斜体
* strong  强调 表现为加粗
* cite     引证,距离 书名 电影名
* dfn    定义项目
* kbd  键盘按键
* abbr  定义缩写 配合title
* bdo  配合 dir属性(ltr, rtl)  改变文字书写方向
* code  定义代码
* var  定义变量
* del   已经删除的  删除线
* ins   当前的   下划线
* sup  上标文字
* sub  下标文字
* q      引用 短
* blockquote 引用 长
* address  定义地址
* b   加粗  强调
* i    斜体   科学专业术语
* u   下划线  定义与其他文本不同风格的文本


# 超链接
### URL
* 统一资源定位符
* 万维网的每一个文件都有一个URL

### a标签
* href   值  URL
* target   新网页从哪个窗口打开   _self / _blank
* title   提示
* download   下载  H5自增


### 路径
* 相对路径  ./   ../
* 绝对路径

### 锚点
* ``
* 使用超链接 `#` 跳转到指定锚点


# 图像
### img标签 属性
* src
* alt  图片无法显示时显示的文字
* title
* border   值 数字
* width    图片宽度
* height  图片高度
* usemap

### 常见的图片格式
* jpg/jpeg
* gif
* png


### 图片热点 图片映射
* map  id/name
* area  shape(circle rect poly)    href  title   target  ...   


# 表格
### table 标签
* border
* width
* height
* cellspacing   单元格之间的间隙 默认2
* cellpadding  单元格和单元格内容之间的间隙 默认0
* align
* bgcolor
* background


### tr标签  表示一行
* align  行内文字的水平对齐方式   left/center/right
* valign  行内文字的垂直对齐方式  top/middle/bottom
* height   行高度
* bgcolor  

### td标签 表示单元格
* align
* valign
* width
* height

### th标签  表头
属性 同 td

### thead标签
### tbody标签
### tfoot 标签
### caption标签  定义表格标题##
### colgroup/col


# 表单
### form标签
* action    
* method   值 get/post  默认get
* target    
* enctype

### input标签 单
* name 属性  
* type 属性
    *  text 默认  文本框
    *  password  密码框
    *  radio        单选框
    *  checkbox   复选框
    *  file      文件上传
    *  submit   提交按钮
    *  reset    重置按钮
    *  button   普通按钮
    *  image   把图片作为提交按钮样子 不推荐
    *  hidden  隐藏域
* value属性   默认值  type值不同vlaue的意义不一样
* size  属性    控制输入框宽度   适用于 text/password
* maxlength  属性  最大输入字符个数  适用与text/password
* checked  属性 默认选中  适用于 radio/checkbox
* readonly  只读  适用于text/password
* disabled  表示不可用    

### button元素
* type属性
    * submit(默认)
    * reset
    * button

### select 标签
* name
* size
* multiple 设置多选
* disabed

### option 标签
* value
* disabled
* selected  默认选项

### optgroup  对select下的option进行分组
### textarea  文本域
* name
* disabled
* rows  高度
* cols   宽度
* readonly

### label  
* for   表单控件的ID

### fieldset 表单的外框
### legend  标题

### 框架分帧
* iframe

### HTML全局属性
* title
* id
* class
* dir
* style

07.31

# H5新增标签
### 结构标签 (双)
* header  头面 页面头部 section的头部
* footer  页脚
* nav      导航
* aside    侧边栏
* main    主体内容
* section  小节
* article   文章
* details      属性open
* summary
* dialog  对话框  属性 open

### 文本标签
* mark  标记
* time   时间
* meter  度量 温度/电量/容量
    * 属性  max/min/value/low/high/optimum
* progress  进度  完成了多少
    * 属性 max/value
* wbr     单词内换行  单
* ruby    汉语拼音  
* rt        汉语拼音

### 图像
* figure  独立文档流 如文章插图
* figcaption  figure的标题
* canvas   画布

### 列表标签 兼容性差
* menu
* menuitem
* command

### 多媒体标签
* video
    * src
    * width
    * height
    * controls
    * autoplay
    * muted
    * loop
    * poster
    * preload
    
* audio
    * src
    * controls
    * autoplay
    * loop
    * muted
    * preload

* source  单
    *  src
    *  type 指定音视频的 MIME类型


# MIME类
### 图片
* .jpg        image/jpeg
* jpeg      image/jpeg
* .gif       image/gif
* .png     image/png

### 文本类
* .html     text/html
* .css       text/css

### 可执行文件
.exe    application/
 

### 表单
* keygen  
* datalist
* output  输出

# H5智能表单
### input 新增 type值
* email
* url
* number
* range
* tel
* search
* color
* date
* month
* week
* time
* datetime-lcoal

### Form元素 新增的 属性
* autocomplete    值 off/on
* novalidate     不进行验证

### 表单控件新增的属性
* pattern    input/textarea
* placeholder   input/textarea
* autofocus
* autocomplete   off/of
* required

### 提交按钮 新增属性  
* formaction
* formmethod
* formtarget
* formectype
* formautocomplte
* formnovalidate


# H5新增全局属性
* contenteditalbe    是否可编辑   true/false
* contextmenu
* spellcheck           是否语法检查  true/false
* draggable         是否拖动    true/false
* dropzome   
* translate          是否翻译  yes/no
* hidden           隐藏 不需要值
* data-*     


# 条件注释
### 基础运算符
* lt  小于
* gt  大于
* lte  小于等于
* gte  大于等于
* !   不等于

### 用法
    
    


# 兼容原则
* 优雅降级
* 渐进增强


html 随意整理

标签:用法   定位   drop   隐藏   target   center   maxlength   padding   代码   

原文地址:http://www.cnblogs.com/lwwnuo/p/7309543.html


评论


亲,登录后才可以留言!