web网页笔记

1.一个元素:标签+属性+内容

2.<!DOCTYPE>声明html文档的版本,相当于dtd。<!DOCTYPE html>声明为html5

3.<meta charset="utf-8"/>

4.文本元素:标题,<h1>~<h6>由大到小

段落,<p> <p style="color:red;">

列表:有序(前面1,2,3的)<ol>   无序。(前面是个大黑点)<ul>   <li>列表里的项

分区:块分区<div>  行内分区<span>

行内

5.<div style="border:1px solid #ccc;">边框1px,实线,灰色

6.元素显示方式:块级元素:元素前后自动换行<p><div><h1>

行内元素:不会换行<span><a><i><u>修饰一断文字的某几个字

7.如果一断文字只想改变几个字的样式可用<span>套上 <span style="color:red;">

8.<i><em>文字倾斜,<b><strong>加粗文字,<del>删除线<u>下划线

9.&nbsp;空格 &copy;版权号 &it;小于号 &gt;大于号

10.<img src="" width="" height="">图片

11.<a href="" target="">href为链接地址,target为打开方式_blank:新窗口 _self:自己页面打开

12.<a name="aaa">锚点</a>锚点,能够链到当前页面的任意位置

<a href=“#aaa”>回到锚点</a>

13.表格<table>,行<tr>,列<td>按顺序画出  <table border="1px" width="30px" heigth="60%">屏幕的百分之60

14.px就是像素,屏幕里的一个点

15.<td>colspan=“2”跨2列,rowspan=“2”跨2行。很重要,合并单元格

16.thead tbody tfoot对表格分组,方便选取各各区域内容<tbody style="color:red;">

17.align=“left”right center单元格内的内容居哪边

18.<th>标题行的<td>自动居中加粗

19.<div style="border:1px solid red;width:960px;margin:0 auto">div居中

20.<form> enctype属性控制表单提交内部的编码

21.<label for="aa">账号:</label>label是通过input的id来绑定的

<input type="text" id="aa"/>label可以通过for属性绑定到input,点label相当于点了input

22.readonly只读属性,maxlength限制输入字符数

23.<input type="radio">单选框 ,name属性设为一样即可单选<input type=“checkbox”>多选框,checked属性表示默认选中

24.<input type=“reset”>重置,value属性名字

25.<input type="hidden">不希望用户看见的信息 ,<input type="file">文件选择框,提交文件给服务器的

26.<textarea>文本域(大号文本框)有cols,rows,readonly属性

27.<select>

<option value="1">aaa</option>最终提交的是value的值

</select>下拉选

28.<link rel="stylesheet" type="text/css" href="路劲">外部引用样式文件

29.font-family:“微软雅黑”;字体。层叠性:多次加样式会叠加。继承性。

30.内联样式优先级最高,内部和外部采取就近原则,谁在后面谁为主

31.backgroung-color:#ccc;

32..name,#a1{


}选择器可以一起选择,逗号隔开

33.#p1 b{


}在p1下选择所有的b,后代选择器

34.#p1>b{


}只找儿子,不找孙子,

35.伪类选择器,可以做出许多动态效果:link,:visited,:active,:hover,:focus

36.a:link{


}选择没点击过的超链接

37.a.visited{


}选择已经访问过的超链接

38.#button:active{

background-color:red;

}选择被点中的button,选择被激活的状态

39.#img:hover{


}选择鼠标上的图片,选择鼠标悬停的东西

40.#input:focus{


}获取焦点的样式

41.border-left:15px solid #ccc;border-bottom:15px solid #ccc;

42.单位:px,%,em(1.6)

43.定位:改变默认的元素的位置。浮动,相对,绝对,固定

44.di{

float:right/left;浮动

}

45.p{

clear:right;

}消除浮动对P的影响

46.<div style="border:0;clear:right;"></div>最好的消除福鼎影响

47.div{

position:relative;

left:50px;

top:50px;

}相对偏移,相对于本身

48.div{

position:absolute;

}绝对定位,相对于第一个设置了特殊定位的父元素。

49.div{

position:fixed;

bottom:10px;

right:5px;

}固定定位,参考窗口

50.display:none;不显示

51.z-index堆叠顺序

52.e.target获取事件源

53.冒泡机制,由里向外触发事件。event.cancelBubble=“true”

54.当采取外联样式时图片要填全路径background-image: url('http://localhost:8080/SaleWell/picture/1.jpg');

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值