HTML-day3

day3

[html] title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别

　　定义：

　　　　title是网站标题，

　　　　h1是文章主题

　　作用：

　　　　title概括网站信息，可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的，是显示在网页Tab栏里的；

　　　　h1突出文章主题，面对用户，更突出其视觉效果，指向 页面主体信息，是显示在网页中的。

b与strong的区别

　　定义：

　　　　b(bold)是实体标签，用来给文字加粗，

　　　　strong是逻辑标签，作用是加强字符语气。

　　区别：

　　　　b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、 评测文章中的产品名称、文章的导言；

　　　　strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通 过CSS添加样式，使用别的样式强调。

　　建议：为了符合CSS3的规范，b应尽量少用而改用strong

i与em的区别

　　定义：

　　　　i(italic)是实体标签，用来使字符倾斜，

　　　　em(emphasis)是逻辑标签，作用是强调文本内容

　　区别：

　　　　i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；

　　　　em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。

　　建议：为了符合CSS3的规 范，i应尽量少用而改用em

 

[html] 元素的alt和title有什么区别？

相同点：他们都会飘出一个小浮层，显示文本内容。

不同点;

        1.alt只能是元素的属性，而title即可以是元素的属性也可以是标签，例如:<title>标题</title>。
       2.alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提供额外说明文字的。根据一些SEO人士的说法，使用alt属性还具有搜索引擎优化效果，因为搜素引擎是无法直接读取图像的信息的，alt可以为其提供文字信息所以对搜索引擎比较友好。
而title可以用在任何元素上，把鼠标移动到元素上面，就会显示title的内容，以达到补充说明或者提示的效果。
        but，通常人们容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中，鼠标经过图像时显示的提示文字是alt的内容，而忽略了title属性，这个曾经误导了很多人。因此，如果想在IE中显示title的内容，要么title属性和alt一致，要么alt内容为空（“”，空格也不能有）。不过，在新版的IE（IE8及以上）中，已不会出现这种情况了。
另外，当a标签内嵌套img标签时，起作用的是img的title属性。

前端开发练习:选择题：元素的alt和title的区别？

 

[html] 你认为table的作用和优缺点是什么呢？

主要作用：

1. 用于布局（过时）
2. 用于显示批量的数据

table优点：开发时间短（使用DW开发速度快）；纯table各浏览器不会有兼容问题；内容可自适应；在搜索引擎排名能靠前

table缺点：如果布局变更，需要重新开发；如果table里有div ul 等，可能会出现浏览器兼容问题；加载速度慢；table套table，会害死维护人员的

 

[html] 怎样在页面上实现一个圆形的可点击区域？

1. map+area

<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />
</map>

图片和热点区域元素关联是使用图片的usemap属性，其值对应<map>的id或者name值（Chrome浏览器只支持name属性值关联）。

这里出现了两个HTML标签，一个是<area>还有一个是<map>，这些都是从很早就支持的HTML标签，所以不必担心兼容性问题。其中就闭合特性来看，<area>类似<img>，是无法有子元素或其他子内容的。

属性：

shape

shape表示点击热点区域的形状，支持矩形rect，圆形circle以及多边形poly。

coords

coords表示点击热点区域形状的坐标。坐标点0,0表示图片的左上角。其中矩形rect支持4个数值，2个坐标，分别是矩形左上角坐标和矩形右下角坐标。例如，coords="20,20,80,80"生成的就是一个左上角坐标20,20宽高都是60px的矩形区域。圆形circle支持3个数值，前2个值为圆心坐标，第3个值为圆的半径大小。多边形poly就更简单了，每两个数值组合表示一个坐标点，依次连线形成的区域就是最终的热点区域。

href

href和<a>元素的href是一样的东西，直接跳转地址，或者锚点等。也同样支持target属性和rel属性。也就是说<area>可以看成是半个<a>元素。

alt

alt同<img>元素的alt，表示热点区域图片的描述信息。

如果<area>要想和图片热点关联，祖先元素<map>是不可缺少的，但是不一定非得直接父子关系。<map>和<area>之间再嵌套个<div>之类的功能也是正常的。

注意：area在被点击后会呈现outline，并且对area元素添加的css样式是没有任何效果的。

2. border-radius（H5）

<style>
 .disc{
     width:100px;
     height:100px;
     background-color:dimgray;
     border-radius: 50%;
     cursor: pointer;
     position: absolute;
     left:50px;
     top:50px;    
     line-height: 100px;
     text-align: center;
     color: white;
 }
</style>
<div class="disc">circle</div>

 3. 纯js实现 

需要求一个点在不在圆上简单算法、获取鼠标坐标等等
两点之间的距离计算公式 ：

上面公式对于JavaScript代码如下： 

|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))

Math.abs()求绝对值
Math.pow(底数,指数)
Math.sqrt()求平方根

示例：

//假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息
document.οnclick=function(e){
    var r=50;//圆的半径
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
//计算鼠标点的位置与圆心的距离
    var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
    if(len<=50){
        console.log("内")
    }else{
        console.log("外")
    }
 }

 

[html] 说说你对html中的置换元素和非置换元素的理解

置换元素

1. 一个内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。 

2. 置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 

3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。 

4. HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

非置换元素

HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器），如：

<!-- span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 -->
<span> hello world </span>

行内级置换元素的宽度定义

1. 若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度 

例：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度

2. 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度 

3. 若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比 

例：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置，这也是为什么img是行内元素，但可以设置宽高的原因

4.除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px 

例：比如iframe, canvas

行内级置换元素的高度定义

1. 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；

2. 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；

3. 若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；

4. 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍。

行内非置换元素的宽度、高度定义是无效的。
 

[html] 请描述HTML元素的显示优先级

在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。

表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；

非表单元素包括：连接（a），div,table,span等。

所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。

有窗口元素包括：select元素，object元素，以及frames元素等等。

无窗口元素：大部分html元素都是无窗口元素。

       

CSS的z-index属性可以用来控制任意HTML元素显示时的覆盖次序。当多个HTML元素重叠在同一空间中时，z-index值较大的元素将覆盖z-index值较小的元素。但z-index属性值不是万能的。如前所述，有窗口的元素总是显示在无窗口元素的前面，z-index属性值只有在同一类元素之间才起决定作用。形象地说，有窗口元素和无窗口元素就像画在同一浏览器窗口的两块不同画布上，两类元素分别自成体系，它们的z-index属性也只相对于同一画布上的其他元素起作用。

 

[html] 谈谈你对input元素中readonly和disabled属性的理解

相同点：

 都会使文本框变成只读，不可编辑

不同点： 

1. disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，但是readonly不会。
2. disabled属性修饰后的文本框内容，在不可编辑的同时，通过js也是获取不到的。例如$("input [name='aaa']").val()是不好用的。但是用readonly修饰后的文本框内容，是可以通过js获取到的，也就只是简单的不可编辑而已！
3. disabled属性对input文本框，单选radio,多选checkbox都适用，但是readonly就不适用，用它修饰后的单选以及多选按钮仍然是可以编辑状态的。
4. readonly接受值更改可以回传，disable接受改但不回传数据

常用情况：

1. 在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为readonly 。
2. 经常遇到当用户正式提交了表单后需要等待管理员的信息验证，这就不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话，若表单中只有input(text / password)和textarea元素，那还是可以的，如果存在其他发元素，比如select，用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)
3. 我们常常在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致数据冗余地存入数据库。