htmlcss心得(熟练掌握htmlcss)

学习HTML,CSS和JavaScript的心得体会

说一说自己的体会吧，也不一定正确

1.简单理解html就是文本语言，诸多元素定义成一个页面框架，是之能在浏览器上显示

2.css是对html进行外观设置，比直接在html里面设置更加整洁，减少代码冗余方便维护，加载速度快，而且css中的许多伪类可以帮助实现诸多页面效果

3.javascript是脚本语言，可以对dom进行操作，方便页面设置，帮助实现画面动作，验证，表单提交等等操作

希望高手给点div+css布局心得

给你几个比较重要的建议把

1、用Dreamweaver布局的时候，预览模式只能做部分参考或者不做参考，最终还是以浏览器显示为依据，因为Dreamweaver的预览模式的纠错能力差，或者说是兼容性不行

2、尽量把各个样式代码的名称记住，因为Dreamweaver有代码提示功能，所以也不用一字不落的全记住，但至少你得记住代码的大概拼写或者打头字母，这样能有效的帮你找到样式，这一条建议是比较适合初学者，记住代码能让你更快速更有效的布局

3、多看一看人家的成品页面，能让你快速的学习，但是当你能够基本熟悉后，想要有所进步看别人的效果就不那么明显了，最好就是自己多做，然后碰到问题解决问题，解决问题的过程就是学习的过程，我经常在百度这里帮人解决css方面的问题，经常能碰到一些我没碰到的问题，这就能让我在解决这个问题当中又学到一些东西，此外我教你一个更快速看别人页面样式的方法，那就是firefox火狐浏览器有一个firebug插件，按下快捷键F12就可以查看你所看到的页面的页面布局以及css样式，360浏览器也可以用

4、最好是能买一本专业的div+css布局的基础教程的书学习，因为我们在网上所学到的都比较的凌乱，看书学基础的话会比较的扎实，虽然可能会多花一点点时间，但是对于以后的发展是有好处的

css和html样式的优点和缺点

HTML优点和缺点

优点：1.简单易学2.结构与缺陷浏览器也能读得懂

缺点：1.杂乱的结构，可读性低2.只能对文本进行排版，而且HTML样式使用标准文本标识，不能创建一些特殊效果

CSS优点和缺点

优点：1，CSS对于设计者来说是一种简单、灵活、易学的工具，能使任何浏览器都听从指令，知道该如何显示元素及其内容

2，个样式表可以用于多个页面，甚至整个站点，因此具有更好的易用性和扩展性

3，使用CSS样式表定义整个站点，可以大大简化网站建设，减少设计者的工作量

缺点：1.浏览器支持的不一致性 2.CSS没有父层选择器3.不能明确地指定继承性4.垂直控制的局限 5.显示的缺乏6.缺乏正交性

html和css学习总结

本周我大概用了六天的时间完成了html和css的复习、制作考核网页以及完成了学长布置的五个学习小任务，总的来说，虽然完成了这一周的学习，但是对于一些知识点掌握的不是很牢固，使用不太熟练，之后还需要多加练习，对于本周的学习我有如下总结：

对于写网页需要的基础知识一定要牢牢掌握，比如，每个网页都需要的导航栏，一定要熟练掌握；下拉菜单最常用的是 ul 和 li 标签，也就是列表元素；对于一些标签，一定要知道是块级元素还是行内元素，要掌握他们之间的转换方法，这个也是非常常用的。对于css的盒子模型，一定要认真地学习，并且能熟练的运用。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、 对齐和分配空白空间。

?弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

?弹性容器内包含了一个或多个弹性子元素。

?注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

?当为父盒子设为flex布局，子元素的float、clear和vertical—align属性将失效

? ? flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置好排列方式

? flex布局父项常见的属性：

? ? ? ? ? ? ? ? 1.flex-diretion:设置主轴的方向

? ? ? ? ? ? ? ? ?默认的主轴方向是x轴方向，水平方向；默认的侧轴方向是y轴方向，水平向下

? ? ? ? ? ? ? ? ? ? 属性值：row 默认值从左到右

? ? ? ? ? ? ? ? ? ? ? ? ? ?row-reverse 从右到左

? ? ? ? ? ? ? ? ? ? ? ? ? ?column 从上到下

? ? ? ? ? ? ? ? ? ? ? ? ? ?column 从下到上

? ? ? ? ? ? ? ? 2.jusity-content:设置主轴上的子元素排列方式

? ? ? ? ? ? ? ? ? ? 属性值： flex-start 默认值从头开始 如果主轴是x轴，则从左到右

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?flex-end ?从尾部开始排列

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?center 在主轴居中对齐（如果主轴是x轴则水平居中）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?space-around平分剩余空间

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?space-between 先两边贴边再平分剩余空间（重要）

? ? ? ? ? ? ? ? 3.flex-wrap:设置子元素是否换行

? ? ? ? 属性值： nowrap 默认子元素不换行 如果装不下，会缩小子元素的宽度，一块放到父元素中

? ? ? ? ? ? ? ? ? ? ? ? wrap 换行

? ? ? ? ? ? ? ? 4.align-content:设置侧轴的子元素排列方式（多行 需要换行） 单行无效

? ? ? ? ? ? ? ? ? ? 属性值： flex-start 默认值在侧轴的头部开始排列

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?flex-end ?在侧轴的尾部开始排列

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?center 在侧轴中间显示

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?space-around 子轴在侧轴平分剩余空间

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?space-between 轴在侧轴先分布在两头，再平分剩余空间

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?stretch ? 设置子项元素高度平分父元素高度

? ? ? ? ? ? ? ? 5.align-items:设置侧轴的子元素排列方式（单行）

? ? ? ? ? ? ? ? ? ? 属性值： flex-start 从上到下

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?flex-end ?从下到上

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?center ? ?挤在一起（垂直居中）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?stretch ? 拉伸（默认值） 使用时子盒子不要给高度

? ? ? ? ? ? ? ? ? ? 例如：子元素居中 ?默认主轴是x轴

? ? ? ? ? ? ? ? ? ? ? ?主轴居中 jusity-content:center

? ? ? ? ? ? ? ? ? ? ? ?侧轴居中 align-items:center

? ? ? ? ? ? ? ? 6.flex-flow:复合属性，相当于同时设置了flex-diretion和flex-wrap

? ? ? ? ? ? flex布局子项常见属性

? ? ? ? ? ? ? ? 1.flex定义子项目分配剩余空间，用flex来表示占多少份数

? ? ? ? ? ? ? ? ? ? flex:number; 默认值 0

? ? ? ? ? ? ? ? 2.align-self控制子项自己在侧轴的排列方式

? ? ? ? ? ? ? ? 3.order属性定义子项的排列顺序（前后顺序）

?给父元素添加 display:grid

? ? ? display关于网格的取值分为两个，grid(块网格)和 inline-grid (行内网格 行内块)

? ? ? grid 容器从上向下排列

? ? ? inline-grid 容器从左向右排列

? ?grid-template-row;规定行属性

? ? grid-template-column;规定列属性

? ? 1.绝对大小（根据列数或者行数确定值得个数）

? ? ? ?grid-template-row：200px 200px 200px

? ? ? ?grid-template-column：200px 200px 200px

? ? 2.百分比（根据列数或者行数确定值得个数）

? ? ? ?grid-template-row：33.33% 33.33% 33.33%

? ? ? ?grid-template-column：33.33% 33.33% 33.33%

? ? 3.repeat函数

? ? ? ?grid-template-rows: repeat(3,33.3%);

? ? ? ?grid-template-columns: repeat(3,33.3%);

? ? 4.repead auto-fill ?自动填充

? ? ? ? grid-template-rows: repeat(auto-fill,33.3%);

? ? ? ? grid-template-columns: repeat(auto-fill,33.3%);

? ? 5.fr 片段 ?

? ? ? ? grid-template-rows: 100px 1fr 300px;

? ? ? ? grid-template-columns: 100px 1fr 300px

? ? 6.minmax

? ? ? ?grid-template-rows:minmax(100px,200px) 200px 300px

? ? ? ?grid-template-columns:200px 200px 200px

? ? 7.auto

? ? ? ? grid-template-rows: 100px auto 300px;

? ? ? ? grid-template-columns: 100px auto 300px

? ? 列间距

? ? 1.grid-row-gap: 10px;

? ? ? grid-column-gap: 10px;

? ? ? 复合写法

? ? ? grid-gap: 10px 10px;

? ? 指定区域

? ? ?1.grid-template-areas: 'a b c '

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'d e f'

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'g h i';

? ? ? ? 区域合并时 ?需要让合并的区域名字相同

? ? ? ? grid-template-areas: 'a a c '

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'d e f'

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'g h i';

? ? ? ? .box div:nth-child(1){

? ? ? ? ? ? grid-area: a;

? ? ? ? }

以上两种网页布局方式是我制作网页时比较常用的，也是学习前端必须掌握的。

除了以上这些，还有很多是我们需要掌握的，加油吧继续学习！！！！！！下周分享js学习总结

html+css常用知识点整理

特点:自动成一行，宽度为100%,可设置宽高。

常用块级元素：

常用行内元素：

class="定义样式名称"

id="定义样式名称"

href="超链接地址"

name="用锚定义一个标签"，通过href链接跳到指定的标签

src="图片的地址"

title="鼠标移上去显示的提示文字"

alt="当图片不显示时，显示的文字"

sytle="书写css样式"

type="定义input类型"

指元素的外边距、边框、内边距，内容大小

文本对齐

float元素对齐/* */

html和css的元素、属性、样式有很多，这里这里只罗列了一些经常用到的知识点，更详细的可以查看参考文档。