04、HTML&CSS-盒子模型


一、盒子模型

盒模型: 是CSS的基石,指定标签如何显示。它规定了网页元素如何显示以及元素间相互关系。 页面上的每个元素都被当成一个矩形盒子、占据一定的页面控件,这个盒子由内容(content)、内边距(补白/填充/padding)、边框(border)和外边距(margin)组成;
【padding一般用于调整内容位置,margin一般用于调整盒子位置】

快递包裹

盒子模型

盒子模型具体显示

二、填充padding

 填充: 
    padding,在设定页面中一个元素内容到元素的边缘(边框)之间的距离,也称之为补白;
 用法:
    > 用来调整内容在容器中的位置关系;
    > 用来调整子元素在父元素中的位置关系;
      注: padding属性需要添加在父元素上;
    > padding值是额外加载元素原有大小之上的,如果想要保证元素大小不变(盒子大小),即元素宽高上减去添加的padding属性值;
 说明:
    可单独设置方向填充,如:
      padding-top: 10px; 
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
 属性值的4种方式:
   四个值:上 右 下 左 { padding: 10px 20px 30px 40px; }  注: 起点在12,顺时针方向
   三个值:上 左右 下 { padding: 10px 20px 30px;}
   二个值:上下 左右 { padding: 10px 20px;}
   一个值:四个方向 { padding: 2px;  }定义元素四周填充为2px

三、边框border

 简写方式: 
   border: 3px solid red; // 粗细(数值+单位) (solid/dashed/dotted/double)  颜色
 说明: 
   右边框:border-right:线型(solid/dashed/dotted/double)  粗细(数值+单位) 颜色;
   左边框: border-left:线形(solid/dashed/dotted/double)   粗细(数值+单位) 颜色;
   上边框: border-top:线形(solid/dashed/dotted/double)    粗细(数值+单位) 颜色;
   下边框: border-bottom:线形(solid/dashed/dotted/double) 粗细(数值+单位) 颜色;
 备注: 
   border-width 边框的粗细
   border-style 边框的线型
   border-color  边框的颜色
   solid:实线,dashed:虚线,dotted:点状线,double:双线

四、外边距margin

  边界: 
    margin,在元素外边的空白区域,被称之为边距;
  说明:
   margin-left: 10px;
   margin-right: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
  属性值的4种方式:
   四个值:上 右 下 左 {margin: 10px 10px 10px 10px;}
   三个值:上 左右 下 {margin: 10px 20px 10px;}
   二个值:上下 左右 【margin: 0 auto; 即表示上下边距为0,左右边距为自动】
   一个值:四个方向 margin:2px; 定义元素四边边界为2px

五、溢出属性overflow

 语法:
    overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
 说明:
    visible:默认值,内容不会被修剪,会成现在元素框之外;
    hidden:内容会被修剪,并且其余内容是不可见的;
    scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
    auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;
    inherit: 规定应该从父元素继承overflow属性的值(父级元素是什么属性值,它就是什么属性值);

问题1: 如果大盒子中嵌套小盒子,为了防止小盒子在设置margin时,大盒子受到的影响(小盒子顶部没有任何的效果),解决方式是在大盒子中添加overflow:hidden;属性;

问题2: 同级盒子中,如果出现都添加margin值,在重合位置中(上下),会有问题,只有最大值有效(而不是两个值之和margin-bottom + margin-top);

六、文本溢出属性text-overflow

 语法:
    text-overflow: clip  /  ellipsis
 说明:
    clip:不显示省略号(...),而是简单的裁切;(不显示省略号)
    ellipsis:当对象内文本溢出时,显示省略标记;(显示省略号)

text-overflow属性,当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:

1、容器宽度: width:value;(px、%,都可以);
2、强制文本在一行内显示: white-space:nowrap; // nowrap属性:文本不会换行,文本会在同一行上继续,直到遇到<br/>标签为止(pre和nowrap样式一样);
3、溢出内容为隐藏: overflow:hidden;
4、溢出文本显示省略号: text-overflow:ellipsis;


03、HTML&CSS-CSS核心属性


一、PS相关操作

1、M 选中截图位置
2、Control+C 复制一份
3、Control+N 新建与选中位置同等大小的图层
4、Control+V 黏贴图片
5、Control+S 保存图片
注: Control+shift+s  文件->存储为web所用的格式...

二、CSS基本属性

1、width: 宽度

  width: 300px;

2、height: 高度

  height: 300px;

3、background: 背景颜色

  background: purple;

4、color: 文本颜色

    color:#F00;
    color:rgb(0,204,204);            // 取值都是0~255(0~100%)
    color:rgba(0, 204, 204, 1);        // 参数4为透明度alpha: 0~1
    color:red;

5、font-size: 字体大小

  font-size: 13px;

6、font-family: 字体类型

  中文类型: 必须加双引号; 例如: "宋体"
  英文类型: 如果单词之间有空格,也必须加上双引号; 例如: "Times New Roman"

  font-family: "宋体";

7、font-weight: 字体加粗

    { font-weight:bolder/bold/normal/100—900;}

  说明:
     bolder(更粗的)/bold(加粗)/normal(常规)
     在css规范中,把字体的粗细分为9个等级,分别为100——900,其中100对应最轻的字体变形,而900对应最重的字体变形,一般500常规字体;
     600-900加粗字体;

8、font-style: 字体倾斜

  {font-style: italic/oblique/normal;}

  说明: 
    italic(倾斜度小)/oblique(倾斜度大)/normal(取消倾斜,常规显示;
    italic和oblique都表示倾斜,不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显;

9、font-variant: 文本是否大小写

   {font-variant:normal(正常的字体)/small-caps(小型的大写字母字体)/all-samll-caps}
  
  备注:
    对英文内容起作用;

10、text-align: 水平对齐方式

  {text-align:left/right/center/justify;}

  备注: 
    justify: 实现两端对齐文本效果(可以使文本两端都对齐;在两端对齐文本中,文本行的左右两端都放在父元素的边界上,然后调整单词和字母间的间隔,使各行的长度恰好相等);

11、vertical-align: 垂直对齐方式

  {vertical-align:top/bottom/middle;}
  备注: 
    需要参考基线

12、line-height: 行高 (单单文本现在这里是不起作用,在后续有个地方会使用到)

    {line-height:normal/数值;}  

    例如:#top{line-height:20px;}

    行高(单行)
      * 行高 < 容器: 文本即垂直中线 以上
      * 行高 = 容器: 文本即垂直方向居中
      * 行高 > 容器: 文本即垂直中线 以下

   倍行高: 
      {line-height:2em;} 2倍 ,
      {line-height:1.5;}1.5倍;
     注: 这个倍数是和字体的大小有关的,如果字体大小是12px,2倍行高即是12px*2;

13、列表属性

基本属性: 
  list-style-type: disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);
  list-style-image: url(显示图片)
  list-style-position: 列表符号显示位置(outside/inside) 【备注: 当设置margin为0的时候,列表符是否能显示问题,outside不显示,inside显示】

多属性值设置,简写:
  ul{list-style: disc inside url(a.jpg);}

14、文本属性

 text-decoration:
   none 没有修饰符
   underline 添加下划线
   overline  添加上划线
   line-through 添加删除线
   blink 闪烁(有些浏览器不支持blik)

  例如: 
    a{text-decoration:blink;}

15、首行缩进

 语法: 
    text-indent:value;
 说明: 
    text-indent可以取负值;
    text-indent属性只对第一行起作用;
 备注:   
    value值如何填写?和字体大小有关,例如是16px大小字体,需要空2格即是2*16px,如果需要空4格即是4*16px;

16、字间距

 语法:
    letter-spacing:value;
 说明:
    控制英文字母或汉字的间距;

17、单词间距

 语法:
    word-spacing:value;
 说明:
    控制英文单词之间的间距;

18、文字属性

 简写: 
    font: 12px/24px "宋体";
    属性: 字号、行高、字体
 说明:
    属性书写顺序font-style font-weight font-size/line-height font-family
 备注:
    简写时,font-size和line-height只能通过'/'斜杠组成一个值,不能分开写;
    书写顺序不能改变,这种写法只有在同时指定font-size和font-family属性时才起作用,如果没有设置font-width和font-style时,会使用缺省值;
  例如:
    #top{font:20px/40px "宋体";}

19、背景

- background-color背景颜色
   语法: 
      #top{background-color:purple;} 
   简写:
      #top{background:purple;}

- background-image背景图片设置
   语法:
      background-image:url(背景图片的路径及全称);
   说明:
      网页上有两种图片形式:插入图片、背景图;
      插入图片:属于网页内容,也就是结构;
   背景图: 属于网页的表现,背景图上可以显示文字、插入图片、表格等;
   例如: 
    #top{background-image:url(Snip20160525_17.png);}

- background-repeat背景图片平铺属性
   语法: 
      选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y   }
   说明: 
     no-repeat: 不平铺
     repeat: 平铺
     repeat-x: 横向平铺
     repeat-y: 纵向平铺
   背景图片的显示原则:
     > 容器尺寸等于图片尺寸,背景图片正好显示在容器中;
     > 容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
     > 容器尺寸小于图片尺寸,只显示元素范围以内的背景图;

- background-position背景图的位置
   语法: 
      background-position:值1 值2;
      选择符{background-position:left/center/right/数值  top/center/bottom/数值;}
   说明:
      第一个值: 表示水平位置的值,水平方向上的对齐方式(left/center/right)或值;
      第二个值: 表示垂直的位置,垂直方向上的对齐方式(top/center/bottom)或值;
      当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置;
      向右方向、向下方向都是负值;
   例如:
     #top{background-position:50px 50px;}

- 背景属性的缩写
    语法: 
      background: 属性值1   属性值2   属性值3;
    例如:
      #top{width:200px; height:200px; background:url(ll.gif) no-repeat red;}

20、浮动属性

 语法: 
    float:none/left/right;
 说明:
    float:定义网页中其它文本如何环绕该元素
    left:元素活动浮动在文本左面
    right:元素浮动在右面
    none:默认值,不浮动。
 备注:
    浮动框可以向左或右边移动,直到它的边缘碰到包含边框或另外一个浮动框的边框为止;
    浮动框是脱离了普通的文档流;

  例如:
    #box{width:300px; height:300px; background: red}
    #minBox1,#minBox2,#minBox3{width:100px; height:100px;}
    #minBox1{background:blue; float:right;}
    #minBox2{background:purple; }
    #minBox3{background:gray; float:}

浮动效果

21、其他

    字体大小单位也可以使用pt,但9pt=12px;
    一般正文大小,文字都是12pt,但系统默认是16px;
    绝对大小关键字:
     xx-small   =9px
     x-small    =11px
     small      =13px
     medium     =16px
     large      =19px
     x-large    =23px
     xx-large   =27px

    颜色:
     用十六进制表示颜色值:
     0  1  2  3  4   5  6  7  8  9  A  B  C  D  E  F
     颜色模式:光色模式 FF 00 00 [两位与RGB对应]
     如果三原色的三组数字两两相同,即可以写成f 0 0

02、HTML&CSS-CSS基础


一、服务器相关

1、服务器的分类:

- 远程服务器(ip地址): 
    - 别名:外网服务器、正式服务器;
    - 使用阶段:应用上线后使用的服务器;
    - 使用人群:供所有用户使用;
    - 速度:服务器的性能以及用户的网速;
- 本地服务器(局域网):
    - 别名:内网服务器、测试服务器;
    - 使用阶段:应用处于开发、测试阶段使用的服务器;
    - 使用人群:只提供公司内部的开发人员、测试人员使用;
    - 速度:局域网,速度快,有助于提高开发测试效率;
    

2、服务器的搭建:

例如LAMP:Linux(unix) + Apache(阿帕奇服务器) + MySQL(数据库) + PHP(脚本语言)/Java/NodeJS

3、URL全称uniform resource locator(统一资源定位符):

URL基本格式 = 协议://主机地址(IP或域名):端口号/路径
例如:
  http   ://   www.bmob.cn  /
  http   ://   www.ifanr.com  /  817369
  http   ://   127.0.0.1   :  8020    /   1704/03-CSS/html/03-test.html

二、样式表

1、内部样式表(嵌套到页面中)

    语法:
     <style type="text/css">
        /** css语句*/
     </style>
  • 注意:

    • 每个CSS样式由两部分组成,即选择符和声明,声明又分属性和属性值;
    • 属性必须放在花括号中,属性与属性值用冒号连接;
    • 属性和属性值,组成的叫做声明;
    • 一个属性可以有多个属性值;
    • 属性和属性之间没有顺序区分;
    • 每个声明用’;’分号结束;
    • 书写样式过程中,空格、换行等操作都不会影响到属性的显示;
  • 例如:

        div{
            width:300px; 
            height:300px;
            background:purple;
        }

2、内联样式(行间样式,行内样式,嵌入式样式)

 语法:
      <div style="属性1:值1;属性2:值2;属性3:值3;……">
      </div>

3、外部样式表

 语法1(常用方式):
    <link href="目标文件的路径及文件名全称" rel="stylesheet" type="text/css" />
        使用link元素导入外部样式表时,需将该元素写在文档头部,即<head>与</head>之间:
        rel:用于定义文档关联,表示关联样式表;
        type:定义文档类型;
        
 例如:
    <link href="css/style.css" type="text/css" rel="stylesheet" />
 语法2:
    <style type="text/css">
    // css提供的方式
        @import  url("目标文件的路径及文件名全称");
    </style>
    说明:@和import之间没有空格 url和小括号之间也没有空格;括号内部加引号(也可以不用),必须结尾以分号结束;
    
 例如:
    <style type="text/css">
        @import url("css/style.css");
    </style>

4、扩展(link和import导入外部样式的区别)

  • 差别1:老祖宗的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS;
  • 差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式;
  • 差别3:兼容性的差别。@import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识别,而link标签无此问题;
  • 差别4:DOM控制样式时的差别(DOM操作):当使用javascript控制DOM去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的;

5、备注

  • 内联样式表的优先级别最高【有属性冲突时才涉及到优先级,如果没有属性冲突,属性即叠加】;
  • 内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高;

三、选择符

1、类型选择符(标记选择器)

    语法: 标签名称 {属性:属性值;}
    
    例如: div{width:30px;}
    
    类型选择符说明:
        > 类型选择符就是以文档对象类型的元素作为选择符,即使用结构中元素名称作为选择符。例如body、div、p、img、em、strong、span......等;
        > 所有的页面元素都可以作为选择符;
        
    用法:
        > 如果想改变某个元素得默认样式时,可以使用类型选择符;(如: 改变一个p段落样式);
        > 当统一文档某个元素的显示效果时,可以使用类型选择符;(如: 改变文档所有p段落样式);

2、类别选择符(class选择器)

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

    说明:
        > 当我们使用类选择符时,应先为每个元素定义一个类名称
        > 类选择符的语法格式:
        如: <div class="top"></div>
        
    用法: class选择符更适合定义一类样式

3、ID选择符(id选择器)

    语法: #id名{属性:属性值;}
    
    说明:
        > 可以给每个元素使用id选择符,但id是元素的唯一标识符,不可出现重复的id名;
            如: <div id="top"></div>
        > id选择符的语法格式是“#”加上自定义的id名
            如: #box{width:300px; height:300px;}
        > 起名时要取英文名,不能用关键字;(所有的标记和属性都是关键字)
            如: head标记
        > 一个id名称只能在文档中出现一次,因为id是唯一的
        > 最大的用处: 创建网页的外围结构

4、包含选择符(后代选择器)

    语法: 选择符1 选择符2{属性:属性值;}
          选择符父级 选择符子级{属性:属性值;}
        
    说明: 选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2;

5、群组选择符(集合选择器)

    语法: 选择符1,选择符2,选择符3{属性:属性值;}
    
    说明: 当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组;
    
    做页面居中设置(元素居中): 选择符{margin:0 auto;}

6、伪类选择符(注意顺序)

    a:link {color: #FF0000}    未访问的链接
    a:visited {color: #00FF00} 已访问的链接
    a:hover {color: #FF00FF}   鼠标移动到链接上
    a:active {color: #0000FF}  选定的链接
    
    说明:
     > 当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:
        a,a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
     > 为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;
        例如:a{color:red;}     a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变颜色。

7、通配符: *

    语法: *{属性:属性值;}
    
    说明: 通配选择符的写法是“*”,其含义就是所有元素;表示该样式适用所有网页元素;
    
    用法: 常用来重置样式

四、选择符权重

 权重规则:HTML标签的权重是1,class的权重是10,id的权重是100。
 权重的表达方式如:0,0,0,0;
 类型选择符的权重为0001
 class选择符的权重为0010
 id选择符的权重为0100
 伪类选择符的权重为0010
 包含选择符的权重:为包含选择符的权重之和
 内联样式的权重为1000
 继承样式的权重为0000
 群组集合权重为他本身

 子选择符的权重为0000        // 后续学习
 属性选择符的权重为0010        // 后续学习
 伪元素选择符的权重为0010   // 后续学习

备注:

样式加不上去(样式无效): 1、语法是否有错;   2、是否找对元素;  3、权重不够;

01、HTML&CSS-HTML基础


一、web标准的概念

web标准是网页制作的标准,它不是一个标准,而是根据网页不同组成部分生成的一系列标准。这些标准大部分由W3C(万维网联盟)起草发布,也有部分标准由ECMA起草发布(ECMA欧洲电脑网商协会);

二、网页组成

  • 内容: 网页要传达的信息即是内容部分;
  • 结构: 网页的结构部分(头部、身体、结尾…)
  • 表现: 网页样式(每个网页设计的都是不一样的)
  • 行为: 网页能够实现交互功能(轮播图、滑动效果、用户与页面的交互..)

网页组成

三、HTML及相关概念

  • HTML指的是超文本标记语言,www万维网的描述性语言,通用标记语言的一个应用;
  • XHTML指可扩展超文本标记语言(标识语言),是一种置标语言,表现方式与超文本标记(HTML)类似,不过语法上更加严格;
  • HTML5指的是HTML的第五次重大修改(第5个版本);
  • H5是一个技术集合,面向于移动端;

四、HTML发展历史

  > HTML1.0  在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准);
  > HTML2.0 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时;
  > HTML3.2 1996年1月14日,W3C推荐标准;
  > HTML4.0 1997年12月18日,W3C推荐标准;
  > HTML4.01(微小改进)——1999年12月24日,W3C推荐标准;
  > XHTML1.0 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布;
  > XHTML1.1 2001年5月31日发布,W3C推荐标准;
  > XHTML2.0 W3C工作草案;
  > XHTML5   从XHTML 1.x的更新版,基于HTML5草案;
  > HTML5 第一份正式草案已于2008年1月22日公布;
  > HTML5 2014年10月29号万维网联盟宣布经过8年时间,该标准规范制定完成;
【WHATWG(网页超文本应用技术工作小组)是一个以推动网络HTML 5 标准为目的而成立的组织,在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成】

五、HTML基本骨架

  • 骨架1(HTML4.01版本IE6开始兼容)
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>

    <body>

    </body>
</html>
  • 标准骨架2(IE9开始兼容)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
  • 备注
文档声明头
 <!DOCTYPE html …>此标签可告知浏览器文档,使用HTML或XHTML规范(注: 现阶段学习的是HTML4.01版本);

 字符集(编码类型)
    - <meta charset=“xxx” ...>中文能够使用的字符集有UTF-8和GB2312(GBK);
    - UTF-8是国际通用字库,里面涵盖所有地球上人类语言文字,例如汉语、英语、鸟语…;
    - GB2312是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,例如日文片假名、常见符号…;
    - 字库规模: UTF-8(字全)  > GB2312(只有汉字);
    - 保存大小: UTF-8(更臃肿、加载更慢) > GB2312(更轻巧、加载更快)[UTF-8一个汉字3个字节,而GB2312一个汉字2个字节];
    【meta标签即是声明当前html文档的字库,如果类型不一致,则会出现乱码】

    注: 使用UTF-8,还是GB2312?
        使用哪种字符集要根据实际情况进行选择,例如公司是做日本动漫的,经常会出现日语动漫名字,网页就要使用UTF-8,如果用GB2312将无法显示日语;例如公司就是中文网,极度的追求网页的显示速度,就可以使用GB2312,如果使用UTF-8将每个汉字多一个字节,即5000个汉字就多5KB;
        例如qq、网易、搜狐都是使用GB2312,追求显示速度;
        例如新华网藏语频道使用的是UTF-8,保证字符集的数量;
    
    注: 什么是字符集?活字印刷术,所有的汉字都有一个小小印章,需要哪个字,就取哪个字。
        赵六发明一个字库U,老王发明了一个字库G;
        例如同一个汉字“你”,在赵六字库U中是第3个大盘子第3行第24列;在老王字符库G中是第6大盘子第9行第68列。
        计算机,不能直接存储汉字,而都是存储的是编码,所以计算机记录“你”字,就这么记录的:
            赵六U: 03 03 24    030324你   
            老王G: 06 09 68    060968你

六、HTML语法

1、标记

 标签对: <标记名> </标记名>
 单标签: <标记名 />
 
 说明:
   1)写在尖角号里的第一个单词,叫做标记,也叫做标签,也称作元素;
   2)标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在双引号内
   3)一个标记可以有多个属性,属性和属性之间用空格隔开,属性与属性间不分先后顺序;
   4)空标记是指没有结束标签的标记,必须使用"/" 关闭

2、HTML注释方式

  语法:
    <!-- -->
  例如:
    <!-- 标题-->

3、标题字体

  语法:
    <h#> 标题内容 </h#>  [其中#是1~6]
  例如:
    <h1>HTML基础学习</h1>
    <h3>HTML基础学习</h3>

4、段落

  语法: 
    <p> 段落文本内容(段落与段落之间有间距) </p>
  注:
    空格符号(所占的位置没有确定值,这和当前字体有关):  
  例如:
    <p> 我是段落内容 </p>

5、加粗

  语法1: 
    <b> 加粗内容 </b>
  语法2: 
    <strong> 加粗内容 </strong>
  例如:
    <b>学习HTML的感想... </b>

6、倾斜

  语法1: 
    <i> 倾斜内容 </i>
  语法2:
    <em> 倾斜内容 </em>
  例如:
    <p> 今天是星期四,明天就是 <strong>星期五啦!!!</strong> 想想明天放假我都开心,然后我可以<i>睡个懒觉、玩玩游戏、撩撩妹...</i></p>

7、文本加下划线

  语法: 
    <u> 文本加下划线 </u>
  例如:
    <u> 我就是文本文本加下划线 </u>

8、标记文本上标

  语法: 
    <sup> 文本上标 </sup>
  例如:
    2<sup>3</sup> = 8

9、标记文本下标

  语法: 
    <sub> 文本下标 </sub>
  例如:
    H<sub>2</sub>O

10、特殊字符

  不换行空格:      空格大小是不确定的,是和当前所在字体大小有关
  右尖括号>: >
  左尖括号<: <
  备案中图标© : ©

11、换行

  语法: <br />
  备注: 换行是一个空标记,是强制换行

12、水平线

   语法: <hr /> 
   备注: 空标记

13、列表

  > 无序列表(unordered list):
       <ul>
           <li> 无序列表1 </li>
           <li> 无序列表2 </li>
       </ul>

> 有序列表(ordered list):
        <ol>
            <li> 有序列表 </li>
            <li> 有序列表 </li>
        </ol>
   注: 扩展(有序列表的属性):
        语法: <ol type="a" start="3"> </ol>
        type属性: 规定列表中的列表项的符号类型
        start属性: 规定有序列表是从第几个开始(默认从1开始)
        '1' 数字的有序列表(默认值)
        'a' 小写字母的有序列表
        'A' 大写字母的有序列表
        'i' 罗马数字,小写
        'I' 罗马数字,大写

> 自定义列表(definition list):
        <dl>
            <dt> 名词 </dt>
            <dd> 解释/定义描述 </dd>
        </dl>

14、图片

  语法: 
    ![](目标文件路径以及名称)
  title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的,图片标题;
  alt的作用: 在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方做为图片替换文本;
  例如:
     ![](./bf445dc216373b6260c6480b37ae2ce3_r.jpg)
  备注: 
    需要插入的图片必须放在站点下;
   路径问题:
      ./ 当前目录(可以忽略不写)
      ../ 上级目录
      ../../ 上上级目录

15、超链接

  语法1: 
    <a href="#"> </a>空链接(当前)
  语法2: 
    <a href="链接地址"  target="" title=""> </a>
      href: 链接地址后边跟的是链接页面的路径(包含文件名);
      title: 加入这个属性后,当鼠标移动到热点时,则在鼠标下方显示title的内容;
      target: 参数定义了打开链接的目标窗口,即控制打开方式;
          _blank: 在新窗口中打开链接 页面(会保留原窗口)
          _self:  在当前窗体打开链接页面,此为默认值
  例如:
    <a href="http://www.baidu.com" target="_blank"> 首页 </a>

16、表格

表格: <table> </table>
行: <tr> 行 </tr>
单元格(列): <td> 单元格 </td>

1)width="表格的宽度"
2)height="表格的高度"
3)border="表格的边框"
4)bordercolor="边框色"
5) bgcolor="背景颜色"
6)cellspacing="单元格与单元格之间的间距"
7)cellpadding="单元格与内容之间的空隙"
8)align="表格对齐方式"  取值:left、right、center(备注: 如果是table中的属性是整个表格相对于浏览器的对齐方式,如果是td即是文本内容相对单元格的对齐方式)
   valign="垂直对齐" top\bottom\middle (备注: 只能用于tr/td)
9)background=“路径” 背景
10)合并单元格属性:
    合并列: colspan=“所要合并的单元格的列数"
    合并行: rowspan=“所要合并单元格的行数”

例如:
<table width="300" height="300" border="1" cellspacing="0" align="center">
   <!-- 单元格合并,合并列-->
   <tr>
       <td colspan="2" align="center" width=“130”> 单元格"合并列" </td>
       <!-- 注意,合并完之后,就是删除掉一下,如果还存在,就是会多出一个单元格-->
       <!-- > <td> 第一行第二列 </td> -->
   </tr>
   <tr>
       <td> </td>
       <td> </td>
   </tr>
</table>

16、表格相关

17、表单控件

  • 表单框(表单域)
 语法: 
    <form name="表单框的名称" method="post/get"  action="url">
    </form>
   属性描述:
     name: 表单框的名字
     method: 请求方式
     action: 提交到url
  • 文本框
  <input type="text" value="账号"/>
  • 密码框
  <input type="password"/>
  • 提交按钮
  <input type="submit" value="提交内容">
  备注: value是必备的,即是按钮要有按钮名才行
  • 重置按钮
  <input type="reset" value="重置">
  备注: 重置,即是输入框删除输入内容
  • 单选框/单选按钮
  <input type="radio" name="sex"/> 男
  <input type="radio" name="sex" checked="checked" /> 女 <br/>
  <input type="radio" /> 中性 <br/>
  备注: 
     name: 必须写,而且同一组单选按钮的name属性值必须是一致的;
     checked: 可以设置默认选择(checked="checked"默认即是选中);
     disabled: 是否可用(disabled="disabled"即禁用),默认是可用;
  • 复选框(即可以多选的)
  <input type="checkbox" name="like"> 吃饭
   <input type="checkbox" name="like"> 睡觉
  <input type="checkbox" name="like"> 玩游戏
  <input type="checkbox"> 打豆豆

  备注: 
    name: 可以不写,不影响复选,但是同一组的最好还是要添加一致的名字;
    checked: 可以设置默认选择(checked="checked"默认即是选中);
    disabled: 是否可用(disabled="disabled"即禁用),默认是可用;
  • 下拉菜单
  <select>
       <option>身份证</option>
       <option>学位证</option>
       <option>军人证</option>
  </select>
  • 多行文本框(文本域)
  <textarea rows="5" cols="50">
  </textarea>
  rows: 设置文本输入窗口的高度
  cols: 设置文本输入窗口的宽度
  • 按钮
  <input name="" type="button" value="按钮内容" />
  备注: 和submit的区别是 ,submit是提交按钮 起到提交信息的作用,button只起到跳转的作用,不进行提交