zoukankan      html  css  js  c++  java
  • 前端小白的福利

     做为一名想学习前端技能的小白,仅仅看视频是不够的,更要用真实案例去实践,才能真正学到,这是我最近几天整理的小笔记,期间也写了几个小案例,包括:用div堆积木、写三角形等等。在篇幅的最后会附上截图,如果有写的不对的地方,还请大家多多指教。。。

    一、什么是HTML

        可扩展超文本标记语言,是HTML语言向XML过渡的一种语言

    二、XHTML页面结构

    1.定义文档类型

      DOCTYPE.文档类型,该元素的名称和属性必须大写

    2.XHTML 1.0提供的三种DTO文档类型

     (1)过渡型(Transitional):允许继续使用HTML4的元素

     (2)严格型(Strict):不能使用任何描述性的元素和属性

     (3)框架型(Frameset):针对的是框架页面设计

    3.声明命名空间

      <html Xmlns=”http://www.w3.org/1999/xhtml”>

      Xmlns, 命名空间,名字空间,名称空间

    4.meta头元素

      本标签用于网页的<head> </head>中,有属性namehttp-equiv.

    声明一种合适的编码语言,页面上的文本内容才能在浏览器中正常显示。

    编码语言声明的代码如下:

    <meta http-equiv=”content-type” content=”text/html; charset=gb2312”/>

    Gb2312是简体中文在页面中常用的语言编码。当在制作不同语种的页面时,要声明不同的语言编码。

    例中:英文中可以使用”ISO-8859-1” “UTF-8”

    (1)关键字(keywords):是为搜索引擎提供的关键字

    结构:<meta name=”keywords” content=”关键词1, 关键词2, ”>

    说明:各关键词间用” , ”分隔开。

    (2)简介(description):简介用来为搜索引擎声明网站的主要内容。

    结构:<meta name=”description” content=”网站简介”>

    (3)站点作者信息(author):站点作者信息是为站点声明作者。

    结构:<meta name=”author” content=”八维”>

    (4)站点版权信息(copyright):站点版权信息时为站点声明版权

    结构:<meta name=”copyright” content=”陈刚所有”>

    (5)刷新页面:<meta http-equiv=”refresh” content=”n;url=http:/19/urlink”>定时让网页在一定的时间n内,跳转到页面http://yourlink;

     三、XHTML规范

     1.区分大小写;

     2.正确嵌套所有元素;

     3.元素必须要结束;空标签在结束方法<标记 />

     4.属性必须加上双引号;

     5.明确所有属性的值;

     6.特殊字符要用编码表示:©  

     7.使用页面注释: <!-- -->

     8.推荐使用外部链接来调用样式及脚本

     四、XHTML基本语法

     1.在文档开始要定义文档类型

     2.在根元素中应声明命名空间

     3.所有标签需闭合的,空标签加” / ”来关闭

     4.所有属性值必须用””括起来

     5.所有标签必须合理嵌套

     6.所有的属性都必须被赋值

     7.所有的元素和属性都必须小写

     8.注释语句:<!-- --> 

    五、XHTML常用元素: div, p, span, ul li, dl dt dd, a, img, h, strong, em.

    1.div

    <div> 划分结构  规划网页 </div>

    2.p

    <p>大段的说明性文字,用来写网页中的内容页</p>

    P { line-height:1.5; text-indent:2em; }

    3.Span

    <span> 没有任何作用,只是用来挂css样式(处理一小段文字) </span>

    4.ul

    <ul>

    <li> 一级菜单 </li>

    <li> 一级菜单 </li>

    <li> 导航和新闻列表 </li>

    <li>

    <ul>

    <li> 二级菜单 </li>

    <li> 二级菜单 </li>

    <li> 二级菜单 </li>

    </ul>

    </li>

    </ul>

    5.dl

    <dl>

    <dt> 图文混排 </dt>

    <dd> 可以是左图右字,也可以是上图下字 </dd>

    </dl>

    <dl>

    <dt> <a href=”http://www.baidu.com” target=”_black”> </dt>

    <dt> <a href=”http://www.baidu.com” target=”_new”> </dt>

    <dt> <a href=”http://www.baidu.com” target=”_parent”> </dt>

    <dt> <a href=”http://www.baidu.com” target=”_self”> </dt>

    <dt> <a href=”http://www.baidu.com” target=”_top”> </dt>

    </dl>

    6.h

    <h1> 一个页面当中只能有一个 </hl>

    <h2> 用来做标题性的文字,注意:不能使用默认字体大小 </h2>

    <h3>  </h3>

    <h4>  </h4>

    <h5>  </h5>

    <h6>  </h6>

    7.加粗和倾斜

    <strong> 加粗 </strong>

    <em> 倾斜 </em>

    备注:当标签用就是倾斜;在文本中用于首行缩进时,就是单位

     六、css基本语法

     层叠样式表,用于控制网页样式的一种标记性语言

     1.使用css可以简单概括为:

     (1)选择符 

    (2)选择属性

     (3)定义属性值;

     2.每个css样式都必须由两部分组成:

     

    3.语法

    选择符selecor {属性property:属性值value;}

    4.说明:

    (1)属性必须要包含在{ }号之中

    (2)属性和属性值之间用“:”分隔

    (3)当有多个属性时,用“;”进行区分

    (4)在书写属性时,属性之间使用空格换行等,并不影响属性的显示

    (5)如果一个属性有几个值,则每个属性值之间用空格分隔开

     七、样式表的定义

    1.内联样式(嵌入式样式,行间样式表)

    语法:<标记 style=属性:属性值 属性:属性值;”>   </标记>

    2.内部样式

    语法:<style type=”text/css”>

    选择符{属性:属性值; 属性:属性值;}

            </style>

    说明:①内部样式表必须定义在<head></head>;

            ②页面所有样式都可以写在<style></style>之间

    3.外部样式

    (1)使用link元素

    <link rel=”stylesheet” href=”css文件路径” type=”text/css”>

    说明:rel=”stylesheet”指这个linkhref之间的关联样式为样式表文件

       type=”text/css”指文件类型是样式表文本

    (2)使用@inport

    <style type=”text/css”>    @import url{css文件路径};    </style>

    说明: @import的调用方法也可以写在css文件中,用来调用其他的css

     八、选择符

    1.通配符 

    语法:*{属性:属性值;} (如:text{font-size:15px;}

    说明:通配选择符的写法是”*”,其含义就是所有元素。

    2.类型选择符

    语法:元素名称{属性:属性值;}

    说明:

     1) 类型选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符,例如:bodydivp等;

     2) 所有的页面元素都可以作为类型选择符。

     用法: 

    1) 改变某个元素的默认样式

     ul{margin:0; list-style:none;}

    2) 当统一文档某个元素的显示效果时

     body{font-size:12px;line-height:18px;}

     3.ID选择符

     语法:#ID{属性:属性值;}

     应用:<div id=”id选择符名称”></div>

     说明: 

    1) id选择符的语法格式是”#”加上自定义的id名称

     2) 当使用id选择符时,应先为每个元素定义一个id属性,<div id=”red”></div>

     3) 一个id名称只能对应于文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素对象

     4.class选择符

     语法:.类名{属性:属性值;}

     应用:<div class=”类选择符名称”> </div>

     说明:

     1) 类选择符的语法格式是” . ”加上自定义的类名称

     2) 当我们使用类选择符时,应先为每个元素定义一个类属性,如<div class=”red”> </div>

     注意:一个标记上可以同时使用多个类,语法为<标记 class=类名 类名”>,即:在一个标记上同时使用多个类时,类名与类名之间用空格隔开

     5.群组选择符

     语法:选择符1, 选择符2, 选择符3{属性: 属性值;}

     说明:当多个选择符应用相同的样式,可以将选择符用英文逗号分隔的方式,合并为一组

     6.包含选择符

     语法:选择符1 选择符2{属性:属性值;}

     说明:选择符1和选择符2之间用空格隔开,含义就是所有选择符1中包含的选择符2

     7.伪类选择符

     语法:

     1) a:link{属性:属性值:}

     2) a:visited{属性:属性值:}

     3) a:hover{属性:属性值:}

     4) a:active{属性:属性值:}

     说明: 

    1. 为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中
    2. 当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正确顺序如下:a:link, a:visited, a:hover, a:active,错误的顺序有时会使超链接的样式失败
    3. a:link可以定义未访问过的超链接样式,有些浏览器会把它解析为任何超链接,包括访问过的和未访问过的,因此,我们可以使用a选择符样式来代替a:link选择符样式
    4. 使用与超链接相关的伪类选择符时,应为a元素定义href属性

    十、关于文本的css样式

    1.文本大小:{font-size:12px;}

    说明:

    1) 属性值为数值时,必须给属性值加单位,属性值加0除外

    2) 单位还可以是pt, 9pt(点数)=12px;

    3) 使用绝对大小关键字

    4) 为了减小系统间的字体显示差异,IE浏览器制作商于1999年召开会议,共同确定16px/ppi为标准字体大小默认值

    5) 1em=16px

    0.75em=12px;

    2.文本颜色:

    {color:#f5e5f5;}

    3.文本字体:

    {font-family:字体1,字体2,字体3;}

    1. 当字体是中文字体时需加引号
    2. 当英文字体中有空格时需加引号如”Times New Roman”;
    3. 中文默认体为宋体或新宋体,英文字体默认为Arial

    4.加粗

    {font-weight:bolder/bold/normal;}

    说明:

    1) 字体的粗细分为9个等级,100-900100最轻,900最重

    2) 一般400=normal, 700=bold

    5.倾斜

    {font-style: normal() / italic(倾斜) / oblique(倾斜);}

    说明:italicoblique都表示倾斜,后者幅度更大,但一般浏览器对它们的区分不是很明显

    6.首行缩进

    {text-indent:24px;}{text-indent:2em}

    说明:

    1. text-indent可以取负值
    2. Text-indent属性只对第一行起作用,不受换行符<br/>影响

    7.水平对齐方式   {text-align:left/right/center;}

    说明:text-align属性作用于块元素

    8.垂直对齐方式

    {verlical-align:top/bottom/middle;}

    9.行高

    {line-height:normal/数值;}

    说明:

    • 当行高=容器高时,可实现垂直中齐效果
    • 当行高<容器高时,可实现文本内容在垂直中齐以上任意位置的定位
    • 当行高>容器高时,将撑大容器

    10.字间距

    {letter-spacing:10px;}控制英文字母和汉字的字距

    {word-spacing:10px;}控制英文单词字距

    11.下划线

    text-decoration:  none  /  overline  /  underline  /  line-through

                        去掉下划线    上划线        下划线            删除线

     十一、cursor属性用来定义当鼠标在元素上悬念时鼠标显示的样式

     cursor: auto / crosshair /  hand  /  move  /  help  / wait / text / pointer

                默认         +          手   十字箭头  帮助  等待忙 Ⅰ       

     说明:handpointer同为手的状态,但pointer兼容性很强

     十二、背景的设置

    1.背景颜色 

    语法:background-color:#ff0000;

    2.背景图片的位置

    语法:background-image:url(路径及全称)

    3.背景图片不平铺

    语法:background-repeat:no-repeat/repeat/repeat-x/repeat-y

    4.背景图片的位置

    语法:background-position:  right/loft/center水平方向的对齐方式

            background-position:  top.bottom垂直方向的对齐方式

    说明:

    1) 属性取值的数目是两个,前者代表横向位置的值,后者代表纵向位置的值

    2) Background-position属性所使用的两个值之间用空格分隔开

    5.背景图的固定

    语法:background-attachment: scroll(滚动) / fixed(固定)

    6.各属性的缩写

    语法:bakcground:背景颜色/背景图像/背景位置/背景重复/背景附件

    注意:各个值的顺序是可以随意交换的

    十三、列表

    1.有序列表

    <ol>

    <li>  </li>

    <li>  </li>

    </ol>

    2.无序列表

    <ul>

    <li>  </li>

    <li>  </li>

    </ul>

    3.自定义列表

    <dl>

    <dt> 标题 </dt>

    <dd> 正文 </dd>

    </dl>

    4.定义列表符号样式

    (1)list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none()

    常用的几个值的含义介绍:

    disc: 实心圆

    circle: 空心圆

    square: 实心方块

    decimal:阿拉伯数字

    lower-roman小写罗写字

    upper-roman大写罗马字

    lower-alpha小写英文

    upper-alpah大写英文

    none不使用项目符号

    (2)使用list-style-position:属性

    结构:list-style-position:   outside  /  inside

          项目符号放置在   文本以内  文本以内

    (3)使用图片作为列表符号:list-style-image:url(路径及全称)

    (4)缩写

         list-style:list-style-type/list-style-image/list-style-position 

    十四、浮动属性详解

    语法:float:none / left / right

    注意:相邻的多个元素会按照出现的顺序和各自的属性值排列在同一行,直到宽度超出包含它们的容器宽度时才换行显示 

    十五、XHTML元素分类

    1.块状元素(block element):

    块元素是指div/dl/from/h1-h6/ol/ul/li/p等这样的元素

    特点:每个块元素都是以新的一行开始,一般可以包含其他的块元素和内联元素,可以设置宽和高等。(在css中,可以给块元素加上浮动等属性,控制块元素的显示位置,而不是总是以新的一行开始)

    2.内联元素(inlink element)

    内联元素是指如:a/b/br/em/i/img/input/span/strong/sub/sup等这样的元素

    特点:不必在新的一行开始,同时,也不强迫其他的元素在新的一行显示(内联元素可以做其他元素的子元素,没有固定的形状,定义它的widthheight属性无效,但它会遵循模型基本规则,如可以定义边界、补白和边框,可以定义背景,它的最小内容单元也会呈现矩形形状,但它显示的高度和宽度只能根据所包含内容的高度和宽度来确定) 

    3.可变元素

     转换元素:display:block/inline/none;  display:inline-block;

     说明: 

    1. 在内联元素中,加入display:block;即可成为块状元素,设定宽高起作用
    2. 在内联元素中,加入display:inline-block;在不成为块状元素的情况下,也能起到块状元素的作用
    3. 在块状元素中,加入display:inline;可成为内联元素。给设定的宽高将不起任何作用

    十六、边框

    border,网页中很多修饰性线条都是由边框来实现的

    1.边框样式属性

    结构:border-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;

    none: 没有边框即忽略所有边框的宽度

    hidden: 隐藏边框(IE不支持)

    dotted: 点线

    groove : 3D凹槽

    dashed : 虚线

    ridge : 菱形边框

    solid : 实线

    inset : 3D凹边

    double : 双线

    outset: 3D凸边

    备注:加下划线部分 这四个属性是和边框颜色属性有关,并且IE浏览器并不以能正常显示

    2.边框宽度

    结构:border-medium/thin/thick/长度值

    medium: 默认值

    thin: 比默认值细

    thick: 比默认值粗

    长度值:可以使用所有长度值

    注意:使用mediumthinthick时,并没有一个确定的值,其显示效果和用户的设置有关,所以建议使用长度值

    3.边框颜色

    结构:border-color:颜色值

    4.边框的综合定义

    css中,可以使用border属性定义边框的所有属性,语法结构如下:

    border:border-style; border-width; border-color;

    其中,各个属性的顺序可以随意交换,每个属性之间用空格分隔

    5.单侧边框的综合定义

    该属性包含4个具体属性:

    border-top:属性

    说明:

    border属性一样,其中每个属性的顺序可以随意交换,每个属性间用空格分隔开

    border-right:属性

    border-bottom:属性

    border-left:属性

    十七、边界属性

    margin,在元素外边的空白区域,被称为边界

    语法:margin:auto / 长度值 / 百分比值

      当取值为百分比值时是相当于元素所在的父元素的密度

    1.水平auto值:达到水平方向居中显示

    2.垂直auto值:垂直的auto值,一般会被处理为0(即没有边界)

    十八、补白

    padding,在元素内容与边框之间的空白边框,也称填充

    结构:

    padding:长度值/百分比值(百分比是相对于父元素来说的)

    padding-top: 属性

    padding-bottom: 属性

    padding-left: 属性

    padding-right: 属性

    总结:

    1. margin可以定义负值,但paddingborder不支持负值
    2. margin是透明的,padding也是透明的,但是padding受背景影响,能够显示背景色和背景图像

    十九、关于元素宽和高的定义

    元素的总宽度=左边界+左边框+左填充+右填充+右边框+右边界

    元素的总高度=上边界+上边框+上填充+下填充+下边框+下边界

    说明:凡是加在了当前div中的属性,都归当前div管;规定了宽高的div, 如果还加了padding值的话,必须从宽高里减去padding的值 

    二十、定位

    position:   absolute   |   relative

      定位          绝对             相对

    定位属性只能对块元素定义:

    static: 不定位(默认)

    fixed: 固定定位,固定在视图窗口中,IE不支持

    absolute: 绝对定位,将元素从文档流中拖出来,然后使用left/right/top/bottom属性对于其最接近的一个具有定位属性的父元素进行绝对定位。如果不存在这样的父元素,则相对于body元素,即根据浏览器窗口

    relative: 相对定位,它通过left/right/top/bottom属性对于其原位置进行定位,原位置还保留不变

    1.绝对定位

    层叠定位属性(即z-index属性)用来定义元素层叠的顺序

    结构:z-index:”数字值”

    注意:z-index属性的取值为没有单位的数字值,它的默认值是0,值越大越靠前显示

    2.相对定位

    3.不占位的相对定位

    注意:父元素必须设定有效的宽高值,否则将参照父元素中最后一个元素的右上角位置进行定位(常用的定位方法) 

    二十一、表单<from></from>是块元素(block)

    1.块元素

    有固定大小(可直接设置宽width和高height

    常见的块元素:div, ul, li, p, h1, h2, h3, h4, h5, h6, dl, dt, dd.

    表单的属性:3

    value属性值根据type类型的不同表达的意义也不一样

    type类型为hiddenpossword时它代表了标签的初始值

    type类型为botton, resetsubmit时,它代表了标签的显示内容

    type类型为checkbox, image, rodio时他的标签

    2.表单的内部结构

    (1)文本框

    1. 文本框(单行文本框)<input type=”text” name=”user”/>
    2. 密码框<input type=”password” name=”pwd”/>
    3. 文本区域(多行文本框)<textarea></textarea>

    (2)按钮

    1. 提交:<input type=”submit” value=”提交”/>
    2. 重置按钮:<input type=”reset” value=”消除”/>
    3. 交互按钮:<input type=”button” value=”验证”/>

    (3)单选按钮及复选框

    1. 单选按钮:<input type=”radio” name=”sex”/>
    2. 复选框:<input type=”checkbox” name=”sport”/>

    (4)列表菜单

    <select></select>

    表单项:<option>北京</option>

     <textarea> </textarea>

     Checked=”checked” (初始值设定)

    (直接写在input)

    当鼠标经过文本框内容被选中onmousever=”this.select();”

    当鼠标被点击时清空内容onclick=”this.value=’  ’  ”;

     

    实例一:用div写三角形

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="UTF-8" />
         <title>triangle</title>

    <style>

          .sanjiao{0px;height:0px;
           border-bottom: 100px red solid;
           border-top: 100px yellow solid;
           border-left: 100px blue solid;
           border-right: 100px green solid;
           margin-bottom: 50px; }

      .sanjiao-2{0px;height:0px;
           border-bottom: 100px #fff solid;
           border-top: 100px #fff solid;
           border-left: 100px #f85087 solid;
           border-right: 100px #fff solid;}
    </style>

    </head>
    <body> 

    <!--四个三角形-->
    <div class="sanjiao"></div>

     

     <!--四个三角形,只显示一个-->

    <div class="sanjiao-2"></div>

     </body>

    </html>

    实例二:用div堆积木

  • 相关阅读:
    jsp转向
    什么是 XDoclet?
    tomcat中的几点配置说明
    mysql5问题
    POJ 3734 Blocks
    POJ 2409 Let it Bead
    HDU 1171 Big Event in HDU
    POJ 3046 Ant Counting
    HDU 2082 找单词
    POJ 1286 Necklace of Beads
  • 原文地址:https://www.cnblogs.com/suoxiuli/p/5919976.html
Copyright © 2011-2022 走看看