zoukankan      html  css  js  c++  java
  • HTML学习笔记

    时间:2016-10-23 17:25

    ——常用标签

        字体标签:
            <font> </font>
            size:范围1 ~ 7,当超出最大值,默认为7。
            color:两种表示方式,1、英文单词 red green black等,2、十六进制表示方法,第一位为#,每两位表示一个颜色。

        标题标签:
            h1 ~ h6
            <h1> </h1>
            从h1到h6,大小为从小到大,是行级元素。

        水平线标签:
            <hr />
            size:表示水平线粗细。
            color:表示水平线颜色。

        特殊字符:
            <    &lt;
            >    &gt;
            空格    &nbsp;
            &    amp;
            ©    &cpy;

        列表标签:
            定义列表:
                <dl> </dl>
                    <dt> </dt>:标题
                    <dd> </dd>:列表
            有序列表:
                <ol> <li> </li> </ol>
                type:1、a、i
            无序列表:
                <ul> <li> </li> </ul>
                type:空心圆circle、实心圆disc、实心正方形square、默认disc。

        图片标签:
            <img src="URL" />
            width:图片的宽度。
            height:图片的高度。
            alt:图片上显示的文字,当图片正常显示时,鼠标移入显示文字,当图片非正常显示时,则显示该文字。

        超链接标签:
            <a> </a>
            链接资源:
                <a href="连接到资源的路径">显示在页面上的内容</a>
                href:链接的资源地址
                target:设置打开方式,默认在当前页打开。
                    _blank:在新窗口打开。
                    _self:在当前页打开(默认)。
                当href不设置值时,需要加一个占位符“#”。
            定位资源:
                如果想要进行定位,则需要先定义一个锚点:
                    <a name="top">顶部</a>
                回到锚点:
                    <a href="#top">回到顶部</a>

        原样输出:
            <pre> </pre>

        表格标签:
            对数据进行格式化,使数据显示更加清晰。
            <table> </table>
                border:表格线粗细。
                bordercolor:表格线颜色。
                cellspacing:单元格线间隙。
                width:表格宽。
                height:表格高。
            <tr> </tr>
                align:center、left、right
            <td> </td>
            <th> </th>
                自动加粗、居中。
            <caption> </caption>
                标题标签。

            合并单元格:
                rowspan:合并行
                colspan:合并列

        表单标签:
            可以将数据提交到服务器。
            <form> </form>:定义一个表单的范围。
            输入项:可以输入内容或者选择内容的部分。
                大部分输入项可以使用input标签进行封装。
                    <input type="输入项的类型" />
                type:
                    text:普通文本框。
                    password:密码框。
                    radio:单选框。
                        必须有name属性和value属性,并且name值必须相同。
                        默认值:checked="checked",表示默认选中。
                    checkbox:复选框
                        必须有name属性和value属性,并且name值必须相同。
                        默认值:checked="checked",表示默认选中。
                    file:文件上传
                    button:普通按钮
                    submit:提交按钮
                        提交时如果表单元素没有name值,则无法提交。 
                    reset:重置按钮 
                下拉框:
                    <select>
                        <option></option>
                        <option></option>
                    </select>
                    select必须有那么,option必须有value。
                    默认值:selected="selected",表示默认选中。
                    multiple:将所有的option全部显示。
                文本域:
                    <textarea></textarea>
                    col:列
                    row:行
                隐藏项:
                    不会显示在页面上,但是存在于HTML代码中。
                    <input type="hidden" />
            form表单中的属性:
                action:提交地址,如果不写,则默认提交到当前页面。
                method:提交方式
                    常用的方式:get和post,默认get请求。
                面试题:
                    get请求和post请求的区别:
                        get请求地址栏会显示提交的数据,而post不会携带。
                        get请求不安全,post请求安全性较高。
                        get请求有数据大小的限制,而post请求数据大小无限制,文件上传需要post请求。
                enctype:
                    一般请求不需要这个属性,做文件上传时需要这个属性。

            使用图片作为提交按钮:
                <input type="image" src="图片路径" />

        HTML中其他标签的使用:
            <b>:加粗
            <s>:删除
            <u>:下划线
            <i>:斜体
            <pre>:原样输出
            <sup>:上标
            <sub>:下标
            <p>:段落标签
            <div>:行级元素
            <span>:块级元素

        头标签:
            <head> </head>
            <title>:网页标题
            <base>:为页面上的所有链接规定标题栏显示的内容和默认地址或默认目标。(target属性)
                <base href="http://www.baidu.com" />,则页面中所有的超链接地址都以"http://www.baidu.com"开始
                如果没有base标签,则相对路径以当前文件开始,绝对路径根据指定路径进行访问。
            <link>:定义文档与外部资源的关系。
            <meta>:可以提供有关页面的基本信息。
                <meta http-equiv="refresh" content="3;url=http://www.baidu.com" /> 

        框架标签:
            <frameset> </frameset>
                rows:按行划分。
                    <frameset rows="80,*">    //将页面划分为两行,第一行的值是80,其余为第二行。
                cols: 
                    <frameset cols="80,*" >    //将页面划分文两列,第一列的值是80,其余为第二列。
            <frame> </frame>
                显示具体页面。
                <frame name="页面名称" src="页面路径">

            当使用框架标签时,标签不能写在body中,使用了框架标签时,需要把body标签删除。
            如果点击左边的超链接想要让内容显示在右边的页面中,可以将超链接的target的值设置为右边frame的name值。


    ——路径

        绝对路径:
            从根路径开始,完整的路径。
        相对路径:
            一个文件相对于另外一个文件的位置。
            三种写法:
                在同一目录下:直接写文件名称。
                图片在当前HTML文件的下层目录:从当前目录开始精确到图片文件。
                图片在当前HTML文件的上层目录:一个../就表示一个上层目录,两层目录用../../表示。


    ——HTML总结

        1、HTML操作思想
            使用标签把要操作的数据包围起来,然后通过修改标签的属性值,来实现标签内数据样式的变化。
        2、font标签
            属性:
                size:取值范围1~7
                color:可以使用英文单词,或者十六进制数字。
        3、标题标签
            h1~h6,由大到小。
        4、注释
            <!-- -->
        5、列表标签
            自定义列表:
                <dl>
                    <dt> </dt>
                    <dd> </dd>
                </dl>
            有序列表:
                <ol>
                    <li> </li>
                </ol>
            无序列表:
                <ul>
                    <li> </li>
                </ul>
        6、图片标签
            <img src="路径" width=" " height=" " alt=" "/>
            alt属性浏览器兼容性差。
        7、路径
            相对路径:
                同一级目录
                下一级目录    
                上一级目录    ../
            绝对路径
        8、超链接标签
            <a href="路径" > </a>
                target属性:_blank和_self
        9、表格标签
            <table>
                <tr>
                    <th> </th>    默认居中、加粗
                </tr>
                <tr>
                    <td> </td>
                </tr>
            </table>
        10、表单标签
            <form> </form> 表示表单范围
            属性:
                action:提交地址
                method:提交方式
                    get和post的区别。
                enctype:上传时使用
            输入项:
                必须写name属性,否则无法提交参数。
                文本框:text
                密码:password
                单选框:radio
                    name必须相同,有默认值。
                复选框:checkbox
                下拉框:<select> <option> </option> </select>
                文本域:<textarea> </textarea>
                    rows、cols、name
                文件:file
                提交按钮:submit
                重置按钮:reset
                使用图片提交:<input type="image" src="" />
                隐藏项:hidden
                普通按钮:button
        11、div和span
            div:行级元素,自动换行
            span:块级元素,在一行显示
        12、框架标签
            <frameset> <frame> </frame> </frameset>





    ——CSS

        1、CSS简介
            Cascading Style Sheets是层叠样式表,用来定义网页的显示效果,可以解决HTML代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能,简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。

        2、CSS和HTML的结合方式(四中结合方式)
            (1)在每个HTML标签中都有一个style属性,可以通过这个属性把CSS和HTML结合在一起。
                <div style="" > </div>
            (2)使用HTML的<style>标签,<style>标签要写在head标签内。
                <style type="text/css">
                    CSS代码;
                </style>
            (3)在style标签中使用语句
                @import url(css文件的路径)    //不需要双引号
                    需要创建一个css文件。
                缺点:兼容性差
            (4)使用<link>标签引入外部CSS文件。(常用)
                <link rel="stylesheet" type="text/css" href="CSS文件路径" />
        3、CSS样式优先级
            样式优先级:
                由上到下,由外到内,优先级由低到高。
        4、CSS选择器
            选择器就是指定CSS要作用的标签,那个标签的名称就是选择器。
            CSS选择器的类型:
                标签选择器
                类选择器
                id选择器
            选择器优先级:
                style属性 > id选择器 > 类选择器 > 标签选择器
        5、CSS扩展选择器
            关联选择器:
                标签是可以嵌套的,由两个多或多个选择器之间产生的关系,就是关联选择器。
                关联选择器使用空格进行分隔。
                如果指定为子元素的选择器,需要加“>”来指定。
            组合选择器:
                对多个不同选择器进行相同样式设置的时候使用组合选择器。
                组合选择器使用逗号进行分隔。
            伪元素选择器:
                在HTML中预先定义好的一些选择器,或者说当前元素处于的状态。
                伪元素选择器使用冒号进行定义。
                比如超链接有四个状态:
                    原始状态::link
                    悬停状态::hover
                    点击状态::active
                    点击之后的状态::visited
        6、CSS的盒子模型
            边框:
                border: 统一设置
                border-top: 上边框
                border-bottom: 下边框
                border-left: 左边框
                border-right: 有边框

                取值:
                     边框宽度
                    style: 边框样式
                    color: 边框颜色

            内边距:
                padding: 统一设置
                padding-top: 上边距
                padding-left: 左边距
                padding-bottom: 下边距
                padding-right: 右边距

                属性只有一个:length
                需要注意的是:
                    当实际长度超出容器长度时,以实际长度为准。
                    当实际长度不足容器长度时,以容器长度为准。

            外边距:
                margin: 统一设置
                margin-top: 上边距
                margin-bottom: 下边距
                margin-left: 左边距
                margin-right: 右边距

                取值:
                    auto:取计算机值
                    length:自定义长度

        7、浮动
            float属性:
                none: 默认值,对象不浮动。
                left:向左浮动。
                right:向右浮动。

        8、定位
            position属性
                static:默认值,无特殊定位,对象遵循HTML定位规则。
                absolute:将对象从文档流中脱出,使用left、right、top、bottom等属性进行绝对定位。
                relative:对象不可层叠,但会根据left、right、top、bottom等属性在正常文档流中进行相对定位。

            absolute和relative的区别:
                absolute会把对象从文档流中脱出,相当于浮动,可以使用top等属性进行定位。
                relative不会把对象从文档流中脱出,而是依然保留对象位置,也可以进行定位。

    ——CSS总结
    1、CSS和HTML的四种结合方式
    2、CSS的基本选择器
    3、CSS的扩展选择器
    4、盒子模型
    5、浮动
    6、定位
  • 相关阅读:
    回复结束
    UVA 10537
    RTP 记录 log 该机制
    python 时间处理
    照片总结---选择适当的NoSQL
    博客测试:博客系统i94web beta1.0 申请测试
    SQL随着子查询结果更新多个字段
    2机器学习实践笔记(k-最近邻)
    Android_Service组件详解
    Android多媒体分析-通过MediaStore获取Audio信息
  • 原文地址:https://www.cnblogs.com/wwwwyc/p/6375204.html
Copyright © 2011-2022 走看看