HTML简单描述

                                                   HTML

HTML：超文本标记语言  Hyper text markup language，不是一种编程语言， 而是一种标记语言，描述网页的语言

HTML使用标签描述网页中图片，文本，音乐，视频，超链接等

开发环境 ：Windows    linux   mac oSx

开发工具： Dreamweaver  eclipse  frontPage  webStorm

WebStorm优点： 智能的代码补全，代码提示，自动保存

标题标签： <h1>-<h6>

段落和换行标签：<p></p>   <br/>

水平线标签：<hr/>

斜体： <em>  </em>

字体加粗：<strong></strong>

学习方法：W3CSchool

常见图片 格式：jpg  GIF  bmp  png

<img src=“图片路径”alt =“替换文本”width=“x”heigth=“y”/>   标签属性

      绝对路径，相对路径             宽度     高度

路径： 相对路径：当前位置出发

       绝对路径：从根出发

. . / 返回上一级目录

超链接： <a href=”链接地址” target=“目标窗口位置”>文本或图像</a>

Target 取值:_self 自身窗口     _blank 新建窗口

超链接应用：A页到B页，网上常见连接

  锚连接： 跳至自身固定位置，或A页跳到B页固定位置，虚锚标记

 功能性连接： 电子邮件，QQ，MSN等连接

  锚连接--实现

超链接部分   <a href=”#login”>1</a>          <a href=”#regist”>1</a>

要跳转到的部分<a name=“login”></a>      <a name =”regist”></a>

功能连接： <a href=”mailto:邮箱”>给某某某写信</a>

特殊字符

   空格  

    > >  <<  引号 "   版权符号 ©

  <!--注释内容-->

W3C(world wide web consortium ,万维网联盟)

规范： 标签名称，属性名称必须小写

       标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合

       属性值必须用引号引起来

主浏览器支持的视频格式：

               IE     FIREFOX       Opera  Chrome   Safri

Ogg        不支持    3.5+          10.5+      5.0+    不支持       

MPEG4      9.0+     不支持        不支持     5.0+      3.0+      

WEBM     不支持    4.0+           10.6+      6.0+       不支持   

 

   <video src=”video/video.webm” controls></video>                     

 < Video contorls>

     <source src =”video.webwebm”   type=”video/webm”/>

     <source src=”video.mp4”  type=”video/mp4”/>

 </video>

    块元素： 就是此元素独占一行

     行元素：   次元素在行内

列表分类： 无序 有序 自定义

Tr 列   td 行  列合并 colspan    行合并 rowspan

Background-image:url(图片路径）；

背景重复方式：

       Background-repeat

       Repeat：沿水平和垂直两个方向平铺

       No-repeat：不平铺，即只显示一次

       Repeat-x 沿水平方向平铺

       Repeat-y 沿垂直方向平铺

       Background-position属性   背景定位

          xpos  ypos  单位px

                          X%  y%

                          X  left  center  right

                          Y   top   center   bottom

Background 背景属性   背景颜色  背景图像   背景定位 背景不重复显示

背景图片大小调整

  Background-size    auto 使用默认值  percentage 根据元素宽度来计算

                 Cover 填充整个元素   contain 保持本身宽高比例，调整到正好适应所定义的背景区域

 

线性渐变：沿直线过度   从左到右   从右到左  从上倒下

Linear-gradient（渐变方向position  第一种颜色   第二种颜色 、、、、）

Gradient

径向渐变： 圆形或椭圆形渐变，颜色不在沿着一条直线变化，而是从一个起点朝所有方向混合

 

IE内核 trident 前缀  ms

Chrome  webkit     webkit

Opera    blink     o

Firefox     Mozilla   moz

列表样式类型；

List-style-type  none 无标记符号   disc实心园   circle 空心圆  square 实心正方形

Decimal 数字

List-style：none；去除小黑远点

List-style-image   小图片引入  

List-style-position 设置位置

 

 

设置超链接伪类： a:hover

规定如何发送表单数据： get 表单内容完全显示地址栏    post 地址栏不会发生任何改变提交数据量大

表单标注：增强鼠标可用性，自动将焦点转移到与该标注相关的表单元素上

Requierd 规定文本框内容不能为空，否则不允许用户填写

Pattern 用户输入的内容必须符合正则表达式所指的规则，否则不能提交表单

CSS

Style type=“text/css” 在head 里

选择器：标签 类  ID  选择器

样式：  内联式（行内样式）  内部样式  

 外部样式

             Style{

（导入式/@import url(“style.css”)

            }

链接式）link href=“?.css” rel= stytlesheet  type=text/css

高级选择器

层次选择器

E F 后代选择器

1. F 子选择器

E+F 相邻兄弟选择器

E~F 通用兄弟选择器

结构伪类选择器

 

属性选择器

E[attr]

E[attr=val]

E[attr^=val] 开头

E[attr$=val] 结尾

E[attr*=val] 包含

 

设置背景颜色微透明的值： transparent

1. 设置字体加粗：font-weight
2. Font-family 字体类型 italic斜体   oblique 使文字倾斜
3. Font-size 字体大小
4. Font-style 字体风格
5. Font-weight normal  bold  bolder  lighter
6. 字体风格 粗细 大小 类型
7. Text-align 设置水平元素对齐方式
8. Text-indent 设置文本缩进
9. Line-height 行高
10. Text-decoration 文本装饰
11. Alpha 透明度rgb  rgba
12. Vertical-align 垂直对其方式

Text-shadow 文本阴影 color  x轴位移 y轴位移 模糊半径 blur-radius

伪类样式： a:link  a:visited  a:hover  a:active

盒子

Padding 内边距

Margin 外边距

Margin 0px auto 自动居中显示

Margin-top

      Right

      Bottom

      Left

必要条件: 块元素 固定宽度

盒子模型： 布局网页的一种手段

盒子模型总尺寸： border +padding+margin+内容宽度

盒子模型立体图：由下至上 外边距--背景色--背景图--内边距-- 网页实际内容--边框

Border-color  top right bottom left        

width  think     medium中等的适中的   thick厚的

Style none    hidden隐藏   dotted 点线  dashed 虚线 solid实线 double

Border 颜色粗细样式 （对顺序没有要求）

Box-sizing：content-box           border-box                            inherit

    默认值，盒子总尺度    盒子的宽度或高度等于元            元素继承父元素的盒

素内容的宽度或高度                 子模型模式

Border radius

盒子阴影： box-shadow:inset       x-offset        y-offset       blur-radius     color    阴影类型 内阴影

标准文档流：之元素根据块元素或行内元素的特性按从上到下从左至右的方式自然排列这也是元素默认排列方式                  

块元素：（block）支持宽高

内联元素：（inline）

Display属性 实现块元素和行级元素的转变 block  inline    inline-block 实现快元素排在同一列       none控制元素的显示和隐藏

浮动属性的应用：浮动以后元素脱离文档流会对周围元素产生影响，必须在的他的父级上增加清除浮动的样式

清除浮动的作用：浮动元素脱离文档流

Clear：

1. left 左侧不允许有浮动
2.  right 右侧不允许有浮动
3.   both  左右两侧都不允许有浮动
4. none默认值允许浮动出现左右两侧

Clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题：通过以下四个方法解决：

1.浮动元素后面加     空div，简单，空div会造成HTML代码冗余

 

2.设置父元素的高度   简单，元素固定高会降低扩展性

 

3.父级添加overflow属性     Overflow： visible 默认值，内容不会被修建，会呈现在盒子外

                               Hidden 内容会被修剪，并且其余内容是不可见的

                             Scroll  内容会被修剪，但是浏览器会显示滚动条以遍查看其余内容

                          Auto  如果内容被修剪，则浏览器会显示滚动条以便查看其余内容

                           简单，下拉列表框的场景不能使用

 

4.父级添加伪类after

         写法比较稍微复杂一点，但是没有副作用，推荐使用

                 .Clear:after{content:’ ’;display: block; clear:both;

              }

 

Position 属性

Static 默认值，没有定位

Relative 相对定位

相对自身原来位置进行偏移，偏移位置top left right bottom

相对自身位置偏移，这个盒子原来的位置仍保留在标准流文档中，对父级盒子和相邻的盒子都没有任何影响，层级会提高把标准流文档中的元素级浮动元素盖在下面

Absolute 绝对定位

脱离文档流，原来位置不保留，它们对其他元素的定位不会造成影响，层级提高

如果未定位父级，相对浏览器窗口进行定位

使用了绝对定位的元素，会以离他最近的祖先元素作为基准进行偏移

设置了绝对定位但没有设置偏移量，他会保留在原来的位置，在网页中可以让某元素脱离标准流，而仍然希望他保持在原来的位置的情况

使用场景：下拉菜单，焦点图轮廓，弹出数字气泡，特别花边等场景

Fixed 固定定位

类似绝对定位，区别在于定位的基准不是祖先元素，而是浏览器窗口

偏移量不会岁滚动条移动而移动

应用场景：在床口两边固定广告，返回顶部图标，吸顶导航栏

1. index属性：调整元素定位时重叠层的上下位置

 属性值： 整数，默认值0

设置了position属性时，z-index属性可以设置各种元素之间的重叠高低关系

Z-index值大的层位于其值小的层的上方

 

Opacity :x  x值为0-1，值越小越透明  

Filter：alpha（opacity=x） x值为0-100，值越小越透明