发表于： 2018-09-23 22:13:23

1 698

今天完成的事情：

Html5之前的html版本以及xhtml，单边标记都是闭合的，例如<img /> <b />

<h>标签虽然可以让字体产生变粗变大的效果，但是不要仅仅为了这些效果而使用该标签搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

块级元素：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

内联元素（行内元素）：span、u、a、、em、b、i、u、em

行内块级元素：input 、img 、button 、texterea 、label

在html中使用css的几种方式：

·行内样式：在html标签中使用style属性来设置css样式

<html标签 style="属性:值;属性:值;....">被修饰的内容<html样式>

·内嵌样式：在head标签中使用标签来设置css样式

<sytle type=“text/css”>css代码</style>

·外联样式：

1、在head标签中使用标签导入一个css文件，在作用于本页面，实现css样式设置

格式：<link href=”task.css” type=“text/css” rel=”stylesheet”>

2、还可以使用import在style标签中导入css文件。

格式：<style type=”text/css”> @import “task.css”; </style>

Ps：<link>以及@import二者加载顺序影响　　　　

HTML加载过程：1) 加载HTML-DOM结构；2)CSS和JS；3)图片和多媒体；4)加载事件触发

link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link永远比@import优先级高。

　　　　在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。

Html中pre 标签对空行和空格进行控制。

锚点

1.使用 id 定位

先和大家说说最常用的 ID定位，这几乎是所有网站最常用的一种定位方式了。这种定位最大的好处就是可以针对任何标签来定位

使用说明：设置一个锚点 id,然后用 href 属性点位到该锚点id

2.使用 name 定位

第二种定位的方式就有所限制了，使用 name 定位只用于 <a> 标签,其他的标签就不管用了。

... ...<body> <li> <a href="#a">定位到A</a> </li>

... ...<li> <a name="a">定位到A</a> </li>

... ...</body>

3.使用 js 定位

Ps：不仅可以在本页面创建指向该锚点的链接，也可以在其他页面创建指向该锚点的链接。

格式：在另外页面中 <a href=”task.com#a”></a>,只需要将#和锚名称放到url的末端即可。

图像映射

</map>

img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

Map定义图像地图，area定义map中的可点击区域

Shape结合coords（坐标）定义了映射的区域

表格table：tr、td、th(表头)、caption（标题）

<tr>

</tr>

<tr>

</tr>

</table>

合并单元格：横向<td colspan=”2”>,纵向<td rowspan=”2”>

表格边框样式 border-collapse: collapse（表格合并为单一的边框）/separate（默认值，边框被分开）；

Border-style:hidden; 对于表格，该属性用于解决边框冲突

Table多用于表格，用于布局有点不如div布局来的简介和高效。

定义列表：dl>dt>dd

布局：静态布局、流体布局、自适应布局、响应式布局、弹性布局

静态：所有样式规定绝对宽高，调整宽高可能会出现横向、纵向滚动条。元素大小不变，布局不变。

流体布局：划分区域的尺寸用百分比（如宽度设置百分比），高度不限定死，利用内容撑起来，布局还会用到浮动。元素大小会变化，布局不会变化。

自适应布局：特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。屏幕分辨率变化时，元素位置变化，大小不变。（自己理解就是各部位按静态布局操作，改变分辨率时根据媒体查询调整各部位位置，即元素位置变化，大小不变）

响应式布局：媒体查询+流式布局。通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。响应式布局是比较综合的布局，不拘泥于形式。

弹性布局：即rem/em布局（rem是相对于html元素的font-size大小而言的，而em是相对于其父元素）。对于移动端更加适用。其实后出现的vw、vh等单位，更加简单方便。

结论

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；

2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；

3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

Html框架通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

<html>

</frameset>

</frameset>

</html>

HTML 内联框架 iframe 在页面中开辟一个框架（区域），显示制定链接的网页

属性有：宽、高、边框（iframeborder）等

Html脚本

插入脚本，只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

document.write("Hello World!")

</script><noscript>Your browser does not support JavaScript!</noscript>

统一资源定位器 url

<form>元素

<form>元素定义html表单

margin有负值，例如使用定位中，垂直方向上居中时，会用到

Padding没有负值

Css特性：

层叠性：在多个选择器选中“同一标签”，然后又设置了“相同的属性”，才会发生层叠性

继承性：① 继承性，发生在有嵌套关系的元素中。 ② 在默认情况下，如果子元素没有设置样式，那么该子元素会继承父元素的中可被继承的样式。

优先级：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定

CSS中可以和不可以继承的属性

一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align

明天计划的事情：

做任务十一、十二

遇到的问题：

收获：

复习了一波

返回列表

【任务11】 [上海|结业弟子]JS-燕赤霞 | 2018年09月23日 的日报 上品

CSS中可以和不可以继承的属性

评论

分享到

【任务11】 [上海|结业弟子]JS-燕赤霞 | 2018年09月23日的日报上品