J2EE-----整理的html5相关知识

2018-09-04 本文已影响0人不过意局bugyj

<q>表示对别人的话的引用，差不多类似于在这句话两遍打上双引号，也便于设置样式。

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用

<span> 没有什么实际意义，主要是将分割某段文字做特殊处理！

回车 &nbsp空格

网页横线

<address>网页地址或联系方式之类的信息，与<em>的区别是虽然都是斜体但这个会另起一段

<pre>显示有具体格式的文字段落

表格

摘要 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

标题用以描述表格内容，标题的显示位置：表格上方。

<caption>2012年到2013年库存记录</caption>

<tr>

<th>产品名称 </th>

<th>品牌 </th>

<th>库存量（个） </th>

<th>入库时间 </th>

</tr>

<tr>

<td>耳机 </td>

<td>联想 </td>

<td>500</td>

<td>2013-1-2</td>

</tr>

<tr>

<td>U盘 </td>

<td>金士顿 </td>

<td>120</td>

<td>2013-8-10</td>

</tr>

<tr>

<td>U盘 </td>

<td>爱国者 </td>

<td>133</td>

<td>2013-3-25</td>

</tr>

如果想在新窗口中打开链接，可以在<a>中设置 target=“_blank”

Mailto 使用mailto能让访问者便捷向网站管理者发送电子邮件。

后为收件人地址，cc后为抄送地址，bcc后为密件抄送地址，subject后为邮件的主题，body后为邮件的内容，如果Mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头。下面是一个完整的实例:Mailto:aaa@xxx.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主题&body=邮件内容

**label****标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

例子：

<form>

<br />

<br />

<label for="email">输入你的邮箱地址</label>

</form>

本来选择单选框要点击到框，而加了label，设置了for属性后，点击文字就可以勾选这个选项！

CSS

font-size:默认是16px

font-weigth：默认是normal

line-height:

在设置字体时如果设置font-size,font-weight, font-family,linr-height四个属性就显得有些麻烦，所以就可以使用font属性统一设置！

font：[font-style] [font-weight] font-size/font-height font-family;即可！

background

当一个块级元素的背景图片比块级元素小时就会在页面中重复显示。

可以用background-repeat：no-repeat；

background-color background-image background-repeat background-position

background-attachment 背景图片滚动属性：scroll | fixed | inherit；

scroll会随着页面滚动，而fixed不会！

一个盒子的大小由content的宽高和padding还有border决定，设置一个元素的width和height实际上就是设置内容的宽高，一个盒子的面积即是

(width+leftpadding+rightpadding+border)*(height+toppadding+bottompadding+border)

要想让网页能呈现想已被废除的<center>效果，可以在内容版块加个width和margin：0 auto即可

想让div里面的内容超出了范围就自动换行可以设置white-space：normal，相关：

相关属性介绍：

white-space 属性设置如何处理元素内的空白，其值：

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

word-wrap: normal|break-word;

word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行
word-break: normal|break-all|keep-all;

word-break 属性用来标明怎么样进行单词内的断句。

normal：使用浏览器默认的换行规则。
break-all:允许再单词内换行
keep-all:只能在半角空格或连字符处换行

还有怎么使div内的元素水平排列和一些其他干货：http://www.myexception.cn/HTML-CSS/2099946.html

元素类型：

一、block块级元素:

1、独占一行

2、不设置宽度样式时，宽度自动撑满父元素的宽度。

3、和相邻的元素依次垂直排列

4、可以设置高度和宽度和四个方向的内外边界值

块级元素一般是其他元素的容器，如div，常见的块级元素有div，p，h1~h6，ul， ol，dr，dt，dd以及h5新增元素section、header、footer、nav等元素！

二、inline行内元素:

行内元素也称为内联元素或内嵌元素。行内元素具有以下特点：

1、行内元素不会独占一行，相邻得行内元素会从左往右一次排列在同一行里。知道一行排不下才会换行

      注意：源代码中换行会被解析成空格。

2、不可以设置宽度width和高度height

3、可以设置四个方向的内边距的大小以及左右方向的外边距。但不可以设置上下方向的外边距。

4、行内元素的高度有元素高度觉得，宽度有内容的长度来控制，即宽高有内容来撑开！

行内元素一般不能包含块级元素，常见的行内元素有span，a，em，strong，以及H5新增的mark，time元素。

三、inline-block行内块元素

行内块元素可以看成是行内元素和块级元素的结合体。它同时具有行内元素和块级元素的特点。

1、和相邻的行内元素以及行内块元素相邻会从左向右依次排列在一行。直到排不下就换行。换行同样被解析成空格！

2、可以设置宽高。

3、可以设置四个方向的内外边距。

对于行内块元素来说两个左右响铃的行内块元素，间距等于左边右边距+右边左边距，上下相邻的上下边距等于上面下边距+下面上边距！

J2EE-----整理的html5相关知识

相关属性介绍：

猜你喜欢

热点阅读