【HTML】总结

<pre>标签:预排版标记

  • pre标签是块级元素,只能包含文本或行内元素(任何块级元素都不能被包含在其中)

  • 被包围在其中的文本通常会保留空格和换行,并且文本会呈现等宽字体

<!DOCTYPE html>

  • 防止浏览器在渲染文档时切换到我们称为怪异模式(兼容模式)的渲染模式

  • 所谓的标准模式是指,浏览器按 W3C 标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。

link和@import的区别:

  • link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。 

  • link可以加载CSS,Javascript;@import只能加载CSS。 

  • link加载的内容是与页面同时加载;@import需要页面网页完全载入以后加载。 

选择器优先级

  • 第一等级:代表 内联样式,如style="",权值为1,0,0,0;

  • 第二等级:代表1选择器,如#id="",权值为0,1,0,0;

  • 第三等级:代表 class| 伪类|属性 选择器,如.class |:hover,:link,:target | [type], 权值0,0,1.0;

  • 第四等级:代表 标签 伪元素 选择器,如p1|::after, ::before,::fist-inline,::selection,权值0,0,0,1;

  • 此外,通用选择器(*),子选择器(>),相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;

HTML5新引入特性

  1. 语义标签: 

    <section>:定义页面的区域     <header>:页面标题    <footer>:页面页脚      <nav>:页面导航元素    

    <article>:页面的文章或主要内容     <aside>:页面的附加内容,比如边栏     <figure>:文章的配图 

    <figcaption>:<figure>元素的标题       <summary>:<details>元素的可视标题

  2. 增强型表单 

  3. 视频和音频 

  4. Canvas绘图 

  5. SVG绘图 

  6. 地理定位:使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务”

  7. 拖放API 

  8. WebWorker 

  9. WebStorage 

  10. WebSocket 

常见块状元素

 <div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使div 元素具有内联元素特点。

块级元素特点:

 1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行); 

 2、元素的高度、宽度、行高以及顶和底边距都可设置。 

 3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。 

常见内联元素

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 在html中,<span>、<a>、<label>、<strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。 

内联元素特点: 

1、和其他元素都在一行上;  

2、元素的高度、宽度及顶部和底部边距不可设置; (这是答案^-^)

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。 

常见内联块状元素

 

 <img>、<input> 

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,

display:inline-block就是将元素设置为内联块状元素。

inline-block 元素特点: 

1、和其他元素都在一行上;  

2、元素的高度、宽度、行高以及顶和底边距都可设置。

数据储存与传输

  • IndexdDB 是 HTML5 的本地存储,把一些数据存储到浏览器(客户端)中,当与网络断开时,可以从浏览器中读取数据,用来做一些离线应用。 

  • Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份,最大为 4 kb 。 

  • url 参数用的是 get 方法,从服务器上获取数据,大小不能大于 2 kb 。 

  • Session 是服务器端使用的一种记录客户端状态的机制 。 

  • post 是向服务器传送数据,数据量较大。 

  • local Storage 也是 HTML5 的本地存储,将数据保存在客户端中(一般是永久的)。

video/audio方法和事件

  • 方法:load() play() pause()

  • 事件:play() playing() pause() seeked() seeking() abort()当音频/视频的加载已放弃时触发

HTML5新增的表单类型/元素/属性

  • 新增的表单元素:output、datalist、keygen

  • 新增的表单类型(type="xxx"):color设色器、date日期选择器、datetime(utc时间)、datetime-local(无时区)、email(包含email的输入域)、month(月份)、number(数值)、range(范围)、search(搜索)、tel(电话号码)、url、week

  • 新增的表单属性:autocomplete(自动补全)、autofocus(自动聚焦)、required(是否必选)、height(高度)、width(宽度)、 multiple(多文件上传)、max(最大值)、min、step、list、pattern(模式匹配/正则)、placeholder(默认值)、novalidate(提交表单时不校验email/tel这些需要校验的表单类型)、form(表单元素可以在form之外,但是可以指定属于哪个form,会一起发送)、formaction(请求地址)、formmethod(form元素的请求方法,get/post这些)、formenctype、formnovalidate

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值