码迷,mamicode.com
首页 > Web开发 > 详细

html+css

时间:2015-01-09 13:57:39      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

html

  HTML的代码都是由标签所组成的

基本格式:

<html>
    <head>
        存放在head里面的内容会先加载
        存放属性的信息或者辅助性的信息
        引入外部的文件(CSS JavaScript简称js)
    </head>
    <body>
        存放就是真正显示给用户的信息
    </body>
</html>
注意事项:1.缩进,增强代码的可读性

              2.大多数的标签都是由开始和结束标签所组成。个别的标签只有单一的功能,或者没有要修饰的内容,可以在标签内结束。

              3.标签上包含属性,通过改变属性的值,可以达到更好的显示的效果。

排版标签

HTML的注释 <!-- HTML的注释 -->
<p></p>(重点) 段落标签    特点:标签的开始和结尾位置产生一行空行。   
                    属性:align -- 对齐方式
<br />  换行标签
<hr />  一条水平线  
    属性:color -- 颜色  值的写法:1)直接写英文单词  2)RGB三原色(red green blue)  #aa34cc
        width -- 宽度         值的写法:1)执行编写像素值  200px       2)编写百分比 30%

<div></div>(重点) :在网页上声明一块区域。
<span></span>(重点):在网页上声明一块区域。
    区别:div是块级元素,屁股后面跟换行     span标签的行内元素,默认一行
    div的作用:CSS+DIV进行页面的布局
    span的作用:给用户做友好的提示

=======================
块元素与行内元素

行内元素又叫内联元素:内联元素只能容纳文本或者其他的内联元素,常见的内联元素<span><a>

块元素:一般都从新行开,可以容纳文本。其他内联元素和其他块元素,即使不能满一行,块元素也要占满一行。常见的块元素<div><p>

一些css属性对行内元素不生效,比如margin left right height width 建议尽量使用块元素定位。

块元素与行内元素的转换】我们希望一个元素按照块元素显示:display:block 希望一个元素按照行内元素显示:display:inline

 

HTML的列表标签(重点)

列表标签:把数据封装成列表   
    <dl>
        <dt>上层项目</dt>
        <dd>下层项目</dd>
        <dd>下层项目</dd>   自动对齐的,默认缩进的
    </dl>

    有序列表(重点):   
    <ol>
        ol的属性:
            type    :标号的类型
            start   :从哪开始
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

    无序列表(重点):
    <ul>
        ul的属性:type:标号的类型    
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

HTML 图片标签(重点)

图片标签:有一个单独的图片,需要把图片和HTML的文件关联到一起。
    <img /> 引入一种图片
        src:要链接图片的地址
        width   :图片的显示宽度
        height  :图片的显示高度
        alt     :图片的说明文字

HTML超链接标签(重点)

超链接标签作用
    <a>文本内容</a>
    一:链接资源:
        必须要出现:href  
        注意1:如果访问的网络的资源,需要编写协议
        注意2:如果访问本地的资源,如果浏览器可以解析的内容,默认直接打开,如果浏览器不能解析,默认弹出下载窗口。
        注意3:如果浏览器不能解析的协议,默认查找操作系统上的应用程序。默认打开应用程序。(扩展)
    二:定位资源:返回顶部
        如果定义资源的话,需要另外的一个属性  name="值"    专业锚点    
        假如说有一个网页非常长,那就可以使用name的属性在网页上定位一些锚点,通过操作返回到指定的锚点
        找个位置定义锚点
    属性:target   代表窗口打开的位置   
        值:_blank    弹出一个新的窗口

HTML表格标签(重点)

<table> :封装表格的范围
        border:表格的格线
        width:表格的宽度
        height:代表的表格高度
        cellpadding:文字距离表格线的长度
    <tr>    :代表表格的行
        align:单元格中文字的对齐方式
    <td>    :代表单元格
    <th>    :代表单元格
        th和td的区别:th文本内容默认加粗和居中的。th表格的表头
        td非常重要的属性:合并单元格。
            行合并:rowspan=合并几个单元格值就是几
            列合并:colspan=合并几个单元格值就是几
    <caption>:表格标题

HTML表单标签(重点)

表单标签:收集用户输入的数据。
封装表单标签的范围   
    <form>
        form包含属性    
            action  :表单要提交的地址(后台去提交)
            method  :表单提交方式(面试题)
                问题:常用的提交方式有哪些?
                答:提交方式有很多,常用有两种,get和post。表单默认的提交方式就是get。get和post的区别
                    * get方式进行提交时,参数列表就显示到地址栏上。
                    * post方式提交是,封装到请求体中。

                    * get方式提交时,对安全级别比较低
                    * post方式提交,安全级别比较高

                    * get方式提交时,对参数列表的数据大小有限制。
                    * post方式提交是,对大数据没有限制。

        用户的输入项的内容:例如:普通的文本框 普通的密码   使用<input type="值的不同,显示不同的输入 text password" >
        ***** 注意:input标签上有两个属性  name(必须要指定) value   (不一定要指定)   name的名称  value的值
        ***** 注意:name属性必须要指定的,value的属性不一定指定

        type="text"         普通的文本框
        type="password"     密码框
        type="radio"        单选按钮    只能选择一个
            添加一个属性:组的概念,指定相同的name属性
            有默认值:checked="checked"
        type="checkbox"     多选按钮
            组的概念:指定相同的name属性
            有默认值:checked = "checked"    
        type="file"         文件上传    name属性也是必须指定的
        type="hidden"       隐藏组件    用户不需要看到的数据,就可以使用隐藏组件隐藏起来。
        type="button"       按钮(和js语言和在一起使用)

        type="submit"       提交:表单收集用户的数据,点击就可以把表单提交到后台
            ?sex=on                     单选按钮的name的属性的值。
            ?username=zhaosi&sex=on     
            ?username=张三&password=123&sex=nan
        type="reset"        重置:恢复到最初的状态

        选择下拉框
        <select name="必须指定的,并且需要指定在select标签上">
            <option value="必须指定,指定在option标签上">北京</option>、
            <option value="必须指定,指定在option标签上">上海</option>
        </select>
        默认值:selected="selected"

        文本域:写入多行多列的内容
        <textarea>
            属性:
                rows 行
                cols 列
        </textarea>
    </form>

HTML的其他标签

* 框架标签:对网页搭建一个框架 注意:框架标签不能使用在<body>标签的内部和下面

css

简介

CSS语言作用 :   设置网页的显示效果(网页的样式)。 * 注意:可以避免HTML代码的重复性。

* 注意:CSS -- 专注网页样式的设置 和HTML -- 专注通过标签来封装数据  分工合作。耦合性降低了。    

<font>数据</font> 编写CSS的代码,设置font标签的样式

CSS与HTML结合(重点)

CSS为什么要和HTML结合呢:HTML语言用来通过标签来封装数据的。CSS的代码作用在标签上。
怎么结合呢?(4种方式)
    * 第一种:每一个HTML的标签,提供了一个属性style,给CSS代码来使用的。style="CSS的代码" 只能设置当前的标签。
    * 如果让第二个div也有相同的样式?
        第二种:HTML的文件,提供一个<style>的标签。在标签的中间来编写CSS的代码。<style>标签需要放在<head>标签的中间
                在<style>标签上提供一个属性   type="text/css"固定的
        * 注意:优先级:优先级高显示样式
    * 第三种:编写一个外部的CSS的文件,CSS文件里面编写CSS代码,只需要把CSS的文件引入到HTML的文件中。(美工常用的)
        * 引入该文件 使用的CSS代码里面命令    @import url("CSS文件的地址");    @import需要编写在<style>标签的中间
        * 编写一个管理我所有的CSS文件的文件。引入总的CSS的文件就ok了。
    * 第四种:引入外部的文件。HTML的文件提供了一个标签    <link>  (经常经常使用)
        * rel="stylesheet"  :代表当前的文件和被引入的文件之间的关系
        * type="text/css"   :
        * href="CSS文件的地址"   :CSS文件的地址

CSS的优先级(重点)和注意事项

* 优先级:决定样式。一般的情况下:从上到下,由外到内,优先级是从低到高的。哪个CSS的样式离HTML标签近的优先级越高。
* 注意事项:
    * CSS代码的写法: 选择器名称{CSS的属性:属性值;属性:属性值;.... } 
    * 属性与属性之间使用分号隔开
    * 属性与属性值之间使用冒号
    * 如果一个属性有多个值,值与值之间使用空格隔开。   div{xx:yy1 yy2}

CSS的选择器(重点)

CSS的选择器的作用:告诉CSS的代码需要作用在哪个标签上。
CSS的基本选择器:
    * 标签名选择器    div{CSS的代码} span{}  table{}     具有相同的标签名的标签,都能有相同的样式
    * 类选择器      HTML的标签提供了一个属性 -- class="hehe"  目的:想让div的类的名称是hehe的标签具有样式
            写法: .hehe{CSS的代码}   只要是class的名称叫hehe的标签,都具有相同的样式
            注意:让不同的标签具有相同的样式。
    * id选择器 HTML的标签提供了一个属性  -- id="haha"    
        写法: #haha{CSS的代码}   
        注意:ID一般代表的是唯一值。并且ID的属性给JS语言来使用。需要自己去注意:如果给标签使用ID的属性,需要自己去给指定一个唯一值。

1.一个元素只能有一个id选择器,可以有多个类选择器。当一个元素被多个类选择器修饰时,他们用空格隔开。 * 优先级:决定样式。一般的情况下:从上到下,由外到内,优先级是从低到高的。哪个CSS的样式离HTML标签近的优先级越高。 * 优先级:特殊的情况下:标签名选择器 < 类选择器 < ID选择器 < style属性

html+css

标签:

原文地址:http://www.cnblogs.com/lulu638/p/4213002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!