HTML+CSS知识汇总.docx

HTML+CSS1 如何创建一个网页文件1.1 网页文件的创建新建一个文本文件，将其命名为xxx.html或者xxx.htm（注意后缀名问题）1.2 简单的html页面的编写1) 在网页中都是通过标签来指定相应显示的内容的，所有的网页内容都必须在中，每一个标签都应该有相应的开始和结束就表示开始,就表示结束。网页中的标签的都用小写（虽然大写也可以，但是基于xhtml的标准就是全部用小写）2) 对于html而言，有两种写法是不允许的:第一种是只有开始标签没有结束标签。第二标签不能嵌套sssss：以上写法是不允许的。不能存在嵌套3) 编写网页文件需要成对编程 1.3 常用标签11.11.21.31.3.1 Head标签中的内容是不会在网页中显示的，一般用来设置页面的标题(title),获取可以设定相应外部文件的引入，或者设置相应的meta等信息1.3.2 文本标签1) 换行对于html而言，代码中的换行不会在页面中显示。需要使用相应的换行标签，br和p。对于br而言，里面没有任何内容，需要使用自结束标签开始第一个网页，准备介绍文本标记2) 标题标签这是一个h1的标签这是一个h2的标签这是一个h3的标签这是一个h4的标签这是一个h5的标签3) 列表标签唐僧悟空八戒沙僧刘德华张学友郭富城黎明质检动态关于xxxxx的文章关于ddddd 的文章1.3.3 常用的其他标签for(int i=0;i=10;i+) printf(%d,i);i < 10 i > 15师父                 我来了© &这是一个超链接第一第二1.3.4 布局1.3.4.1 容器标签这是一个div这是另一个div这是一个span这是另一个span1.3.4.2 表格A1A2A3AB4B1B2B3C1C21.3.5 表单常用的表单标签:原则上所有的表单标签都要放置在form标签中Input标签可以用来设置文本框，密码框等数据用户名:密码:性别:男女兴趣:足球蓝球羽毛球籍贯:北京上海昭通个人简介: 1.3.6 Frameset!-如果设置了rows和cols之后会进行平均拆分，此时会拆分为三行，每行2列(3x2的样子)-2 CSS样式表2.1 HTML仅仅只是做数据的显示，需要通过CSS来完成对页面的修饰2.2 样式表有三种方式进行编写2.2.1 内嵌样式这是我的第一个CSS文件2.2.2 在html的head中通过style标签统一为该页面编写样式/*h2表示对页面中的所有的h2的标签都有效*/h2 background: #aa1222;color: #fff;2.2.3 将样式表文件编写到一个xxx.css的文件中，然后在head中引入该样式表文件2.3 选择器2.3.1 标签选择器根据标签名称获取，会对页面中的所有标签都有效/*标签选择器，页面中的所有p标签都会使用该样式*/pcolor:#f00;2.3.2 ID选择器获取id为xx的标签：可以对页面中某个标签进行样式的设置/*ID选择器，此时会对所有的id为p2的标签进行样式的设置*/#p2 /*使用#来设置*/font-weight:bold;text-decoration:underline;2.3.3 类选择器获取标签中class=xxx的标签：可以选择页面中的一组标签，class=”xxx的一组标签/*p.p1表示class为p1的p标签，类选择器*/p.p1 /*使用.来设置*/color:#54a;font-size:16px;p.p2 color:#998733;2.3.4 包含选择符获取某个标签中的所有的子标签/*包含选择符，指的是p标签中的所有span标签都来设置这个信息*/p spanbackground:#000;font-weight:bold;/*包含选择符会包含div标签中的所有span包括是子标签中的span*/div span background:#0ff;2.3.5 子对象选择符获取某个标签的第一级子标签/*子对象选择符*/div h2 color:#00f;background:#ff0;/*子对象选择符，仅仅只针对div标签的第一级子对象*/divspan background:#f0f;2.3.6 分组选择符可以同时设定多个标签，使用逗号进行分割/*分组选择符,以下表示所有的id为d1或者p2的标签都使用该样式*/#d1,#p2 font-size:19px;background:#999;2.4 布局2.4.1 盒子模型box model2.4.2 span和a相类似的文本标签在html，有一些标签仅仅只是用来设置文本，诸如:a和span对于这两个标签而言，在W3C的标准中默认是不能进行width等样式进行修饰的，所以直接为这些标签设置width是没有作用的，需要通过display:block之后才有作用。但是对于IE而言就是有作用。2.4.3 padding的兼容性对于padding而言，如果一个标签设置了height或者width,此时再进行padding的设置，对于IE而言，padding的值不会加到height或者width中（如果：一个div的高度为40,而padding-top:20;此时这个div的高度依然是40）；对于IE之外的所有浏览器，padding的值会加到height或者width中(如果：一个div的高度为40,padding-top为20，此时div的高度是60)。所以千万不要使用padding来进行对齐操作2.4.4 定位2.4.4.1 AbsoluteAbsolute是绝对定位，它会针对父级标签中进行了absolute定位的标签来进行left、right等设置，如果父级标签中都没有这样的定位方式，就会针对body来进行定位，而且对于absolute而言，当设置之后该容器就不会再占用相应的空间，原有的空间会被其他元素所占据。2.4.4.2 RelativeRelative是相对定位，都是针对父级元素进行定位的，而且空间会一直被占用，哪怕这个元素已经移动到其他位置2.4.4.3 使用经验经常会使用relative来实现文本位置的移动。所以如果要为某个容器设置里面的文本位置，可以按照如下方式处理sssss2.4.5 Float当设置了float:left之后，里面的元素会自动向左面排列对齐（此时对于一些用来做列表导航操作的需求很有帮助）。特别注意：如果外层标签的宽度不能满足进行float的标签的宽度，会自动换行。当设置了float:left之后，对于IE而言，该标签依然占用空间，但是对于其他浏览器而言，就不占用空间。2.5 其他知识点2.5.1 简单列表*padding:0px;margin:0px;ul.topic_show list-style:none;/*去 点*/width:249px;border:1px solid #999;ul.topic_show h3 height:30px;background:#111155;color:#fff;font-size:14px;ul.topic_show h3 span /*控制字的位置，上下计算后，居中，左边空出位置*/position:relative;left:10px;top:8px;ul.topic_show li /*padding:9px 0px;*/height:25px;font-size:12px;color:#555;/*背景会默认完成填充*/background:url(point.jpg) no-repeat;/*背景的第一个值设置的是左右，第二个才是上下*/background-position:10px 8px;ul.topic_show li span position:relative;top:5px;left:20px;通知公告关于xxxxxxxxxx的通知关于xxxxxxxxxx的通知关于xxxxxxxxxx的通知关于xxxxxxxxxx的通知关于xxxxxxxxxx的通知质量监督关于xxxxxxxxxx的通知关于xxxxxxxxxx的通知关于xxxxxxxxxx的通知关于xxxxxxxxxx的通知关于xxxxxxxxxx的通知2.5.2 背景图片固定不变的图片用css:background#img1 background:url(01.jpg);变动的图片用标签2.5.3 超级链接的样式/*默认情况的超链接*/a.xyj:link,a.xyj:visitedtext-decoration: none;font-size: 12px;color: black;/*当链接点击之后的效果，对于IE而言，不会自动继承a:link的效果，所以 为了满足IE的浏览器的效果，最好a:link,a:visited */a.xyj:visitedcolor: red;/*当鼠标移动到上面之后的样式*/a.xyj:hovertext-decoration: underline; /*文本的装饰-下划线*/color: orange;2.5.4 让容器居中仅仅只有IE可以居中body text-align:center;*/#container width:1100px;/*仅仅只有IE之外的浏览器可以居中margin:auto;*/*以下三个操作才是推荐使用的居中方式*/position:absolute;left:5