HTML与css入门注意点

很久没有写过博客了，也大二了，大一下学期开始学习前端，这是之前第一次写网页的一些小总结和注意事项。要加油鸭！！！

 

1

一、知识、错误的总结与感悟

1. 有li标签必有ul或ol标签：（错因分析：粗心）

1. ul是无序列表，无序列表始于ul标签。

每个列表项默认用黑实心圆修饰，还可以用空心圆或实心黑方块修饰。修改修饰类型的方法是修改ul标签的type属性，默认为黑心圆，其type属性包括disc（黑心圆），circle（空心圆），square（黑心方块），none（无修饰），使用如下：

<ul type="disc/circle/square/none">

    <li>张三</li>

    <li>李四</li>

</ul>

（2）ol是有序列表，有序列表始于 ol标签，每个列表项始于li标签。每个列表项默认用数字修饰，还可以用大/小字母、大/小希腊数字修饰。修改修饰类型的方法是修改ol标签的type属性，默认为数字，其type属性包括1（数字），a（小写英文字母），A（大写英文字母），i（小写希腊数字），I（大写希腊数字），使用如下：

     <ol type="1/a/A/i/I">

         <li>张三</li>

         <li>李四</li>

</ol>

 

1. 没有</br>标签，只有<br>标签（错因分析：记忆不准确，不熟练）

在 HTML 中，<br> 标签没有结束标签。在 XHTML 中，<br> 标签必须被正确地关闭，比如这样：<br />。

请使用 <br> 来输入空行，而不是分割段落。

 

1. 关于margin

边界(margin)：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。通过使用单独的属性，可以对上、右、下、左的外边距进行设置, 用于布局分开元素使元素与元素互不相干。

 

1. 新知识nth-child：

作用：可以轻松选取你想要的标签并给与修改添加样式

用法：

（1）:nth-child(2)选取第几个标签，“2可以是你想要的数字”

.demo01 li:nth-child(2){background:#090}

（2）:nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同

.demo01 li:nth-child(n+4){background:#090}

（3）:nth-child(-n+4)选取小于等于4标签

（4）:nth-child(2n)选取偶数标签，2n也可以是even

（5）:nth-child(2n-1)选取奇数标签，2n-1可以是odd

（6）:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

 

（7）:last-child选取最后一个标签

（8）:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

 

1. 设置块状元素,记得设置宽与高。

display: block;

   width: 70px;

   height: 30px;

1. css中li设了左浮动,如何使它宽度超过ul以后依然不自动换行，成横排显示？

.box{width:500px;height:500px;overflow:hidden;}

1. padding：

用法类似于margin;但其是指外边距，而margin指内边距。

1. 元素的class、id、name的命名必须要直观，不然如果代码比较长，写到后面可能就找不到自己写的代码了。
2. 文件名最好不用中文，避免不兼容。
3. 写好的网页可以在多个浏览器上运行、实验，最常见的比如：谷歌、IE、火狐等，最好都要能够实现页面效果。
4. 要注重提前构思布局，不要等到后面慌乱地加盒子。
5. 一般是先写好一个大盒子，再在大盒子里面写小盒子。并且一般先写html,后写css。

10.勤动手勤学习，多多请教不怕错。

二、学习小要求

1.尽快学好js，并加强css学习，尤其是页面布局有待提高。

2.日常安排网页学习，包括纸质书与网上学习。

3.自己给自己安排网页小作业。

4.合理安排时间。

2

一、知识、错误的总结与感悟

1. alt:

alt 是html标签里面的属性，表示对图片说明。<img src=" " alt="图片说明 " /> 。alt属性用来指定替换文字，替换文字的语言由lang属性指定。

同时是位了一些不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户，显示替换文字。另外在seo 方面也可以告诉搜索引擎，这个图片的表达的信息。

如：<img src=" " alt="九寨沟冬季美景 " /> 这样搜索引擎就可能会把 "九寨沟冬季美景 "收录在他的

”图片“搜索项里了。

 

1. <meta charset="utf-8">

“utf-8”是一种字符编码。charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。常见的字符编码有：gb2312、gbk、unicode、utf-8。

charset=gb2312代表说明网站是采用的编码是简体中文，charset=utf-8代表世界通用的语言编码。

 

3. RGBA：

CSS中设置rgba按照其语法直接定义即可。语法如下：

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

 

p{background-color:rgba(0,0,0,0.5)}：将p的背景颜色设置为黑色半透明。

 

或者

background-color: white;背景颜色

（color: white;此处改变的是字体颜色）

opacity: 0.7;  设置透明度

 

1. Js里面parseInt:

将字符串转化为数字，比如轮播图的函数递归left依次减去600px。

 

1. js里面getAttribute：

getAttribute()方法是一个函数。getAttribute()方法不能通过document对象调用，我们只能通过一个元素节点对象调用它。

特别的，其可以获取自带的属性，也可以获取自定义的属性。例如，当      var myIndex=this.index;     中的index是一个自定义的赋值，所以不可用此方法获取，而可以用        var myIndex=(this.getAttribute（‘index’）)；    获取。

 

1. js中interval用法：

    setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。setInterval动作的语法格式如下：

setInterval(function,interval[,arg1,arg2,......argn])

setInterval(object,methodName,interval[,arg1,arg2,.....argn])

第一种格式是标准动作面板中setInterval函数的默认语法，第二种格式是在专家模式动作中使用的方法。

 

1. animate函数：

 animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

   

1. 注意变量的命名规则，尽量用它的英文含义，易于回顾与查错。
2. DOM :（文档对象模型(Document Object Model)）

10.<br/>在JS里面是单引号还是双引号，都可以。