HTML学习笔记

2018-06-24 00:56:32来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

时间: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: 有边框

            取值:
                width: 边框宽度
                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、定位

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css3 UI 修饰——回顾

下一篇:css link和@import的区别