A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© ...句号 初级黑马   /  2018-1-17 15:49  /  726 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

HTML笔记
HTML:Hyper Text Markup Language  ---超文本标记语言
        标记语言:指的是通过一组标签的形式描述事物的一门语言
        超文本:比普通文本更强大.
        HTML的作用:
                用来制作页面(静态页面).
        HTML的使用:
                在设计网站页面的时候都要使用HTML;
        HTML的使用:
                HTML文件的创建:
                        一个HTML文件,扩展名是.html或者.htm结尾
                HTML的结构标签:
                        根标签:<html></html>
                        <html>
                                <head> : html的头
                                </head>
                                <body> : html的体
                                </body>
                        </html>       
                HTML的字体标签:
                        <br/>:换行标签
                        <font>标签:字体标签
                        <font>变迁的属性
                                <标签 属性名="属性值" 属性名="属性值"></标签>
                                属性:
                                        color属性:字体颜色
                                                英文单词设置:black,red
                                                使用16进制数设置:#FFFFFF,#FFF
                                        size属性:字体大小
                                        face属性:字体       
                排版标签:
                        标题标签:h标签<h1>...<h6>  自动换行并且改字体
                        段落标签:<p></p>
                        粗体标签:<b></b>
                        斜体标签:<i></i>
                        下划线:<u></u>
                        居中显示<center></center>
                        横分隔线:<hr/>
                        原生标签:<pre>       
        HTML标准:       
        网站图片页面显示:
                技术分析:
                        HTML图片标签:
                                图片标签:<img>
                                属性:
                                        src:图片来源
                                        width:图片宽度
                                        height:图片高度
                                        alt:图片找不到显示的内容
                        图片的引入路径问题:
                                路径:相对路径
                                        如果引入的图片和html文件在同一级路径
                                                直接写文件名或者./文件名
                                                  <img src="cs10006.jpg" />
                                                  <img src="./cs10006.jpg" />
                                        如果引入的图片在html文件的上一级路径。
                                                * <img src="../cs10006.jpg" />
                                        如果引入的图片在html文件的下一级路径。
                                                * <img src="img/cs10006.jpg" />       
        网站列表页面的显示:
                HTML类表标签:
                        有序列表
                                <ol>
                                        <li></li>
                                </ol>
                                有序列表的属性:
                                        type`属性
                                        start属性:从哪开始,只针对数字有效果
                        无序列表
                                <ul>
                                        <li></li>
                                </ul>
                                无序列表的属性:type`属性 可改为点,圈,方块                       
        HTML的超链接标签<a>
                属性:
                        href:跳转路径
                        target        :打开的方式                       
                                _self        :在自身页面打开
                                _blank        :新打开一个窗口
                                _parent :       
        HTML的表格标签:
                <table>
                        <tr>:行
                                <td><td>:列
                        </tr>
                </table>               
                属性:
                        width:表格宽度
                        height:高度
                        border:边框
                        align:表格水平位置
                                left
                                center:居中显示
                                right       
                <td>的属性:
                        * colspan=”列数” 跨列合并
                        * rowspan=”行数” 跨行合并       
        HTML的表单标签:<form></form> 提交数据到后台
                 * 常用属性:
          * action属性:提交的路径.默认提交到当前页面
          * method属性:请求的方式.GET和POST.默认是GET.
                                *GET方式和POST方式的区别?
                   * GET        :数据会显示到地址栏中.GET方式提交是有大小的限制.
                   * POST        :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
        HTML中表单元素:
                *<input type= "text"> 文本框
                         * 常用属性:
                                * name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
                                * value        :文本框的默认值.
                                * size        :文本框的长度.
                                * maxlength:文本框输入的最大长度.
                                * readonly:只读文本框.
                *<input type= "password">:密码框
                         * 常用属性:
                                * name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
                                * value        :密码框的默认值.
                                * size        :密码框的长度.
                                * maxlength:密码框输入的最大长度.
                *<input type= "radio">:单选按钮   没有输入框,必须写value属性
                         * 常用的属性:
                                * name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
                                * value        :单选按钮的默认值.
                                * checked:单选按钮默认被选中.
                *<input type= "checkbox">:复选按钮  没有输入框,必须写value属性
                         * 常用的属性:
                                * name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
                                * value        :单选按钮的默认值.
                                * checked:单选按钮默认被选中.
                <input type= "button">:普通按钮,没有任何功能的按钮
                *<input type= "submit">:提交按钮
                <input type= "reset">:重置按钮
                <input type= "file">:文件上传表单项
                <input type= "hidden">:隐藏字段
                <input type= "image">:图片按钮
                *<select name 属性><option></option></select>:下拉列表
                <testarea>:文本域       
HTML的框架标签:
        框架标签<frameset><frame/> </frameset>        ,标签与<body>标签是冲突的,有frameset可以没有body
                属性:rows和cols
        使用<frame>标签,表示切分的每个部分       
特殊字符的标签:
        空格:&nbsp;
        <   :&lt;
        >   :&gt;
HTML的块标签:
        <div></div>:默认一个div独占一行
        <span><span>:默认在同一行
CSS概述:
                CSS 指层叠样式表 (Cascading Style Sheets)
                样式定义如何显示 HTML 元素
                样式通常存储在样式表中
                把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
                外部样式表可以极大提高工作效率
                外部样式表通常存储在 CSS 文件中
                多个样式定义可层叠为一
HTML相当于网站的骨架,CSS对骨架进行美化


CSS的基本语法:CSS的基本语法通常包含两个部分:一个是选择器,一个声明.
        选择器{属性:值;属性:值...;}       
CSS的引入方式:
                行内样式:直接在HTML的元素上使用style属性设置CSS.
                        <h1 style="color:red;font-size:200px ;">标题</h1>
                页面内样式:在HTML的<head>标签中使用<style>标签设置CSS.
                                <style>
                                        h1{
                                                color:blue;
                                                font-size: 40px;
                                        }
                                </style>
                ?外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.  
                                <link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
                                rel 是制定样式表       
CSS的选择器:
        元素选择器:会将所有的div选中   
                div{
                        border:1px solid blue;
                        width:40px;
                        height:45px;                       
                }
        ID选择器:#+ID名称{} 一般ID不重复,而id一般是我们js经常用的属性
                #d1{
                        border:2px solid red;
                }
        类选择器:名称可重复,一般css会常用这个属性
                .divClass{
                        border:2px solid yellow;
                }               
        后代选择器       
                .divClass 子元素标签名{
                        border:2px solid yellow;
                }
                元素选择器<类选择器<id选择器
CSS浮动:
                使用float属性可以完成DIV的浮动.
                        left 元素向左浮动。
                        right 元素向右浮动。
                        none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
                        inherit 规定应该从父元素继承 float 属性的值。


                line-height 行高       
CSS其他选择器       
        属性选择器:
                要选择的对象[属性名= 属性值]{}
        并列选择器:
                要选择的对象[属性名= 属性值],要选择的对象[属性名= 属性值]{}       
        常见的选择器的书写方式
                        1.id选择器           以#开始                              作用:找到id为这个的元素,一般不重复,而且经常在js中用
                        2.类选择器            以.开始                               作用:找到所有class的值为这个的所有元素
                        3.元素选择器        直接元素名                          作用:找到所有的这个元素
                        4.后代选择器   选择器1 选择器2                 作用:找到所有'选择器1'下的所有的"选择器2"
                        5.子元素选择器  选择器1 > 选择器2        作用:找到所有'选择器1'一级"选择器2"
                        6.元素选择器   选择器[属性名=属性值]        作用:找到所有的"选择器"下属性名是"属性名"值为"属性值"的所有
CSS模型:
                内边距:padding.
                        如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:
                                h1 {padding: 10px;}您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:
                                h1 {padding: 10px 0.25em 2ex 20%;}               
                        单边内边距属性
                                也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:
                                        padding-top
                                        padding-right
                                        padding-bottom
                                        padding-left
                                您也许已经想到了,下面的规则实现的效果与上面的简写规则是完全相同的:
                                        h1 {
                                          padding-top: 10px;
                                          padding-right: 0.25em;
                                          padding-bottom: 2ex;
                                          padding-left: 20%;
                                          }
                边框:border
                外边距:margin
                        margin-top
                        margin-right
                        margin-bottom
                        margin-left
                        /*这个可以让div自己去根据屏幕的大小去居中显示*/
                                margin: 0 auto;               
                margin --->外边距 ---> 用来设置该元素距离其他元素的距离
                padding --->内边距 --->设置内容距离自己边框的距离                       
                CSS中的定位
                        position属性设置定位:
                                * relative:相对定位
                                * absolute:绝对定位
                                使用另外两个属性:left,top
                                定位:
                        position:常用的是
                                        relative:相对的:相对的是自己的父容器
                                        absolute:绝对的:相对的是网页的左上角
                        如何是自己的子控件居中
                                这个时候可以设置为相对定位:
                                        然后设置自控键left : 50%, margin:子控件的 负的50%的自身宽度       


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马