zoukankan      html  css  js  c++  java

  • 00_HTML入门第一天

    HTML入门

    1. body标记的常见属性：bgcolor 设置背景颜色；text 设置文本颜色；link 设置链接颜色；vlink 设置已经访问了的链接颜色；alink 正在点击的链接颜色；
    2. meta是单标记
    3. 多个空格和回车会被视为一个空格
    4. pre预格式化标记，保留预先编排好的格式，比如显示多个空格
    5. ul 无序列表  ol 有序列表，有type属性，自定义排序符号，type属性值为（1,A,a,I,i),li的value属性值，自定义起始值
    6. dl dt dd 对列表条目进行简短的说明
      <dl>
<dt>软件说明1：</dt>
<dd>balabalabala</dd>
<dt>软件说明2：</dt>
<dd>balabalaballa</dd>
</dl>
    7. 文档标记
      1. hn 标题标记，共有六级
      2. font 字体设置标记，size属性，1-7，默认为3；face字体属性，如楷体（Kaiti），仿宋（Fangsong）；
      3. b粗字体标记
      4. i 斜字体标记
      5. sub 文字下标字体标记
      6. sup 文字上标字体标记
      7. tt 打印机字体标记
      8. cite 引用方式的字体，通常是斜体
      9. em 表示强调，通常显示未斜体字
      10. strong 表示强调，通常显示为粗体字
      11. small  小型字体标记
      12. big 大型字体标记
      13. u 下划线字体标记
    8. 图像标记 <img src="文件路径" width="宽" height="高" border="边框宽度" alt="提示文字">
      宽高单位：px、em、cm、mm；
      alt属性：作用1 当网页上的图片加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字；
                     作用2 如果图像加载失败，会用文字来代替图像显示；
                     作用3 搜索引擎可以通过这个属性的文字来抓取图片）
    9. 链接标记  <a href="链接地址" target="打开方式" name="页面锚点名称">链接文字或者图片</a>
      target属性值：_blank 在一个新窗口打开链接；_self（默认） 在当前窗口打开链接；_parent 在父窗口打开页面；_top 在顶层窗口打开页面
    10. 表格
      <table width="宽,默认单位为px,可加可不加" cellspacing="单元格与单元格的间距" cellpadding="单元格与内容的间距" border="同时设置表格和单元格的边框" align="left(默认)/bottom/right">
<caption align="top/bottom">表格标题</caption>
<tr bgcolor="背景颜色" align="left/right/center" valign="middle/top/bottom"> *align是水平对齐方式，valign是垂直对齐方式，valign默认
<td rowspan="设置单元格所占行数" colspan="设置单元格所占列数">第一列</td>
<td>第二列</td>
</tr>
</table>
*补充，th是表头

    11. form表单
      input输入框：size属性设置控件长度；maxlength属性设置输入框允许输入的最大字符数；
      eq:maxlength="10"：表示输入框最多输入 10 个字符(中文也算一个字符)，超过之后将不能再输入；

      size="5"：表示输入框只显示 5 个可见的字符，但可以输入无数多的字符；

      radio 单选按钮；checkbox 复选框；两者都可以通过checked属性设置默认选中项，写法为checked="checked"或者直接checked
      textarea多行文本域：cols和rows属性
      菜单下拉文本域：

      <select  name="addr" multiple>   *mutiple是多选属性
<option value="chengdu">成都</option>
<option value="shanghai">上海</option>
<option value="fujian">福建</option>
</select>
    12. 框架集frameset
      <html>
      <frameset rows="20%,10%,*" >
      <frame src="top.html" noresize>  子框架1
      <frameset cols="10%,*">  子框架2
      <frame src="top.html" scrolling="no">
      <frame src="top.html">
      </frameset>
      <frame src="top.html">  子框架3
      </frameset>
      </html>
      *注意：frameset不能喝body同时存在

      对于rows和cols属性，使用像素数或百分号分割窗口，*表示剩余部分，如果用“*，*，……”表示均分
      frameborder 指定是否显示边框，0不显示，1显示；
      border 设置边框宽度，默认为5个像素 

      frame是子窗口标记，用src属性指定网页地址，name设置子框架名称，noresize不能调整框架大小，
      scrolling(可选值：auto/yes/no) 是否需要滚动条，frameborder 是否需要边框

    13. 补充 DOCTYPE声明：必须位于文档第一行，用来指定页面所使用的HTML的版本，html5中直接使用<!DOCTYPE html>就可以了

    CSS入门

    1. 使用css的三种方式：1 内链样式表（）；2 嵌入式样式表（）；3 引入式
      1、行内样式/内链样式表（在HTML元素的内部，利用style属性直接定义样式） ，
      例： <body style="background-color: green;margin: 0;padding: 0;">
       
      2、内部样式表/嵌入式样式表（在网页<head>标签中，利用style标签定义样式）
      例：  
      body{
 　　    background-color: green;
           margin:0;
           padding: 0;
}

      3、外部样式表/引入式样式表（将样式定义在另外一个样式表文件中）
      例：
      （a）通过<link>标签引入样式表：<link rel="stylesheet" type="text/css" href="my.css">
       
      （b）通过@import导入样式表：
             
      在html中
<style type="text/css">
@import url(CSS文件路径地址);
</style>

在css中
直接使用
@import url(CSS文件路径地址);

      　　

    2. 选择器
      1. .myclass p{}   选择myclass类下面的p元素
      2. h1,h2,p{}    组合选择器，以逗号分隔
      3. 伪类选择器（a链接样式）：a:link  正常链接的样式；a:hover  鼠标放上去的样式；a:active  链接被选中时的样式；a:visited  访问过的链接的样式
    3. CSS常见属性
      1. 颜色属性
        color:green;
color:#ff0000;  每两位十六进制数分别表示红绿蓝的取值范围
color:rgb(255,0,0); rgb(红，绿，蓝)，每种颜色取值范围为0~255
color:rgba(255,0,0，0.8); rgb(红，绿，蓝,Alpha透明度)，每种颜色取值范围为0~255，透明度取值范围0~1,1为100%显示

      2. 字体属性

        字体大小；font-size：px 设置一个固定的值/ %父元素的百分比/ smaller 比父元素更小/ larger 比父元素更大/ inherit 继承父元素
定义字体：font-family:serif,微软雅黑；（以逗号分隔多个字体，以确保字体不存在时直接使用下一个
字体加粗：font-weight:normal(默认值)/bold/bolder/lighter
字体样式：font-style:normal/italic/oblique(倾斜)/inherit
小型大写字母显示文本：font-variant:normal/small-caps/inherit

      3. 背景属性

        body{
	/*background-color:rgb(0,0,0);*/
	background-image:url('0.jpg');
	background-repeat:no-repeat;
	background-position: left,top;
}

1、背景颜色：background-color
2、图片背景：background-image:url()
3、背景重复：repeat(默认，重复平铺满）/no-repeat(不重复)/repeat-x(向x轴重复）/repeat-y(向Y轴重复）
4、背景位置：background-position:X轴（left/right/center)、Y轴（top/bottom/center或者用数值表示)

      4. 文本属性

        text-align:横向排列（left/right/center)
line-height:文本行高（% 基于字体大小/px固定值）
text-indent:首行缩进（% 基于父元素/px固定值，默认为0/inherit）
letter-spacing:字符间距（normal/px固定值，可以为负值/inherit）
word-spacing:单词间距（normal/px固定值，可以为负值/inherit） 
direction:文本方向（ltr默认/rtl(right to left)）; 
text-transform:文本大小写（none 默认/capitalize 每个单词首字母大写/uppercase 全部大写/lowercase 全部小写/inherit 继承

      5. 边框属性

         border-style:边框样式（none/solid 直线/dashed 虚线/dotted 点状/double 双线……）
还可以细分为：border-top-style,border-bottom-style,border-left-style,border-right-style
border-边框宽度（px固定值/thin 细/medium 中等/thick 中等/inherit 继承
border-color:边框颜色
还可以细分为：border-top-color,border-bottom-color,border-left-color,border-right-color
或者同一风格：四个值（上、右、下、左）/三个值（上、左右、下）/两个值（上下、左右）
        简写方式：border:solid 2px red;样式、宽度、颜色

      6. 列表属性

        list-style-type:标记的类型（disc 默认实心圆/none/circle 空心圆/square 实心方块/decimal 数字……
list-style-position:标记的位置（inside 标记放置在文本以内/outside，默认值，标记放置在文本以外/inherit);
list-style-image:url();设置图像标记
简写方式  list-style:type position url(image); image不存在时以type方式显示
如：ol{list-style:decimal inside url('0.jpg');}

    4. DIV+CSS布局

      1. div是块级元素，span是内联元素
        margin和padding以border为界限，其中border和padding会增加盒子的宽高，margin是直接在盒子外围扩张

      2. position定位

        position定位：relative 正常定位/absolute 相对父元素定位（注意父元素的position要为relative)
fixed 根据浏览器窗口进行定位/static 没有定位

例如：
div{ 100px;height: 100px;background-color: green;color: white;border:solid 1px black;margin: 10px;}
div.d1{position:relative;left: 20px;top: 20px;}
        div.d3{position: fixed;left: 0;top: 0;}

      3. z-index 层覆盖优先级

      4. display显示属性：none/block/inline

      5. float浮动属性

      6. clear:both;浮动（当未定义浮动的元素紧挨着浮动元素的时候会受到影响，解决办法是专门定义一个清除浮动的div作为间隔）

        <style type="text/css">
.main{ 600px;height: 500px;border:solid 1px red;margin: 0 auto;}
.top{height:100px;background-color: pink;}
.left{height:100px;background-color: yellow;float: left;}
.right{height:100px;background-color: orange;float: right;}
.bottom{height:100px;background-color: blue;}
.clear{clear: both;}
</style>
</head>
<body>
<div class="main">
<div class="top">top</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
<div class="bottom">bottom</div>
</div>
</body>

      7. overflow溢出处理：hidden/scroll 无论是否超出都添加滚动条/auto 当内容溢出时添加滚动条

    5. 兼容问题及高效开发工具

      1. 　　测试工具：IE Tester、Multibrowser



        　　



        　　

        　


    　　

    div是块级元素，span是内联元素
    margin和padding以border为界限，其中border和padding会增加盒子的宽高，margin是直接在盒子外围扩张
  • 相关阅读:
    使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件
    Mybatis学习 PageHelper分页插件
    mysql 5.1.7.17 zip安装 和 隔段时间服务不见了处理
    使用Maven搭建Struts2+Spring3+Hibernate4的整合开发环境
    一位资深程序员大牛给予Java初学者的学习建议
    数据结构和算法学习 -- 线性表
    多线程的实现方式区别
    Log4j.properties属性文件
    Java自定义注解
    Spring配置属性文件
  • 原文地址：https://www.cnblogs.com/yolo-bean/p/7879042.html
Copyright © 2011-2022 走看看