一、常见的内联元素和块元素

块级元素：

div, form, (列表相关ul,dl,ol,li,) h1-6,p,table

内联元素：

a, br, u,（b , em, strong， i,） img , （表单相关input, label, select, textarea) , span ,

其中img和input是替换元素类，可以设置宽高。

二、关于html头部声明的各种区别

常用的HTML声明：

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

三、<head>标签

head 是头部元素的容器。可以加入<title>、<base>、<link>、<style>、<script>、<meta>、这些标签。

其中<title>显示的是浏览器工具栏中的标题，页面被收藏到收藏夹中的标题，搜索引擎结果中页面的标题。

<base>标签为页面上所有的链接规定默认的地址或者默认目标（target）。

<meta>：meta是用来在HTML文档中模拟HTTP协议的响应头报文

属性name,

1、<meta name="Generator" contect="">

用以说明生成工具（如Microsoft FrontPage 4.0）等；

2、<meta name="KEYWords" contect="">

向搜索引擎说明你的网页的关键词；

3、<meta name="DEscription" contect="">

告诉搜索引擎你的站点的主要内容；

4、<meta name="Author" contect="你的姓名">

告诉搜索引擎你的站点的制作的作者；

5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">

　 其中的属性说明如下：

　 设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：页面上的链接可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv 属性，

1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">和

<meta http-equiv="Content-Language" contect="zh-CN">

用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

2、<meta http-equiv="Refresh" contect="n;url=http://yourlink">

定时让网页在指定的时间n内，跳转到页面http://yourlink；

3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">

可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

4、<meta http-equiv="Pragma" contect="no-cache">

是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">

cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

6、<meta http-equiv="Pics-label" contect="">

网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

7、<meta http-equiv="windows-Target" contect="_top">

强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和

<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">

设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

百度的写法：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

四、a标签常用属性总结：

1、download: HTML5属性

用来规定被下载超链接的目标，可以给一张图片加上超链接之后加上download属性便可以下载此图片。

<a href="/i/w3school_logo_white.gif" download="w3logo">

下载时文件自动命名为w3logo.XXX

2、 href：指向页面的URL

3、 name：可以指定锚点的名称，HTML5中不支持

4、 rel：规定当前文档与被链接文档之间的关系

5、 rev：规定被链接文档与当前文档的关系。

6、 target：规定在何处打开文档

值：_blank新窗口打开

_parent ,在父框架载入

_top,清除所有窗口包含的框架之后在整个窗口打开

_self，一般是不必要的，除非和标签中的target一起使用。

五、插入音频的最好的解决办法：

实例

<audio controls="controls" height="100" width="100">

  <source src="song.mp3" type="audio/mp3" />

  <source src="song.ogg" type="audio/ogg" />

<embed height="100" width="100" src="song.mp3" />

</audio>

Html会首先尝试用mp3或ogg来播放音频，如果失败，代码会退回到emded元素。

问题：

• 必须把音频转换为不同的格式。

• <audio> 元素无法通过 HTML 4 和 XHTML 验证。

• <embed> 元素无法通过 HTML 4 和 XHTML 验证。

• <embed> 元素无法回退来显示错误消息。

注释：使用 (HTML5) 解决验证问题

插入视频的最好解决办法：

HTML 5 + \<object\> + \<embed\>

<video width="320" height="240" controls="controls">

  <source src="movie.mp4" type="video/mp4" />

  <source src="movie.ogg" type="video/ogg" />

  <source src="movie.webm" type="video/webm" />

  <object data="movie.mp4" width="320" height="240">

    <embed src="movie.swf" width="320" height="240" />

  </object>

</video>

HTML5会首先尝试用vedio来播放这些格式视频中其中的一种，如果全部失败，退回到embed元素。

问题

• 必须把视频转换为很多不同的格式

• <video> 元素无法通过 HTML 4 和 XHTML 验证。

• <embed> 元素无法通过 HTML 4 和 XHTML 验证。

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

六、表单标签常用属性：

（一）、form：

1、action，值为URL：表单提交时向何处发送表单数据

2、method，值为get post：表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送

关于post和get：

采用post方法，在浏览器端，浏览器会分两步发送数据。首先浏览器与action属性指定的表单处理服务器建立连接，之后分段传输数据给服务器；在服务器端，post样式的应用程序开始执行的时候，服务器从一个标志的位置读取参数，读到之后必须对接收到的表单值进行解码才能够接受这些参数。

采用get方法，浏览器端与表单处理服务器建立连接，然后直接一个传输步骤发送所有表单数据。浏览器会直接将数据附在表单的action URL之后。两者用问号分隔。

什么时候用post，什么时候用get？

少数简短字段的小表单用get，有很多字段或者很长的文本域的表单用post；

安全性要求高时用post，因为get方法是将表单参数直接放在应用程序的URL中，这样很容易被窥探。Post将参数作为单独的事务传输给服务器进行处理时，可以采用加密的方法；

如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容；

3、name

4、target

_blank 在新窗口中打开。

_self 默认。在相同的框架中打开。

_parent 在父框架集中打开。

_top 在整个窗口中打开。

framename 在指定的框架中打开。

七、关于html中<i>与<em>，<b>与<strong>的区别：

<b>与<i>是视觉元素也可说是物理元素，表示无意义的加粗和斜体。

< em > 和 < strong > 是表达要素也可以说成逻辑标记。 < em >表示一般的强调文本，而 < strong >表示比 < em > 语义更强的的强调文本。这些都是含有语义的标签，搜索引擎会了解这些语义。当发现这些表示“强调”的标签时，一些屏幕阅读器可能使用不同的inflection，更利于SEO。例如：当盲人使用屏幕阅读器上时能够明显能体现出B与Strong的不同。遇到B时与处理一般词语一样进行阅读，遇到Strong时回加重与停顿.

HTML基本标签问题总结的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. 大白话AOP

    工作一年多后, 第二次看了韩顺平老师讲的AOP (11年的Spring 教学视频) AOP还是比较艰涩的东西. 从刚开始 碰Java项目去找书看开始, 到学了拦截器知道AOP就是处理事务, 日志, 安 ...

  2. Android开发中高效的数据结构

    android开发中,在java2ee或者android中常用的数据结构有Map,List,Set,但android作为移动平台,有些api(很多都是效率问题)显然不够理想,本着造更好轮子的精神,an ...

  3. ONVIF协议测试工具 ONVIF Device Test Tool 29 12.12 最新版

    ONVIF协议测试工具 ONVIF Device Test Tool 29 12.12 最新版 包含文档和工具,本人亲测,好用! http://download.csdn.net/detail/li_ ...

  4. AngularJS方法 —— angular.bind

    描述: 上下文,函数以及参数动态绑定,返回值为绑定之后的函数. 其中args是可选的动态参数,self在fn中使用this调用. 使用方法: angular.bind(self,fn,args ); ...

  5. bzoj 4822~4824 CQOI2017题解

    老C的任务 题目大意: 维护一个二维平面,初始给出一些点及其权.多次询问某个矩形内的权和. n,m <= 100000 题解: 签到题. CDQ水一水. #include <cstdio& ...

  6. TVYJ1266：费解的开关

    我对状态空间的理解:https://www.cnblogs.com/AKMer/p/9622590.html 题目传送门:http://www.joyoi.cn/problem/tyvj-1266 这 ...

  7. oracle--存储过程2--bk

    oracle存储过程demo1---无返回值的存储过程: /* 写一个过程,可以向book表添加书 */ create table book( id number(4), book_name varc ...

  8. Sequence Models 笔记（二）

    2 Natural Language Processing & Word Embeddings 2.1 Word Representation(单词表达) vocabulary,每个单词可以使 ...

  9. xdu2017校赛F

    Problem F Dogs of Qwordance Senior Backend R&D Engineers 问题描述 那年夏天,锘爷和杰师傅漫步在知春公园的小道上.他们的妻子.孩子牵 着 ...

  10. [51nod1212]最小生成树模板

    解题关键:注意下标 解法一:prim算法 #include<bits/stdc++.h> #define maxv 1002 #define maxm 50002 #define INF ...