HTML和CSS基础知识

HTML和CSS基础知识

一.HTML

• HTML相关概念：
  HTML：Hypertext Makeup Language,超文本标记语言。
  XHTML：Extensible Hypertext Makeup Language,可扩展超文本标记语言（XHTML2.0夭折了）
  HTML5：是 第五次重大修改
  W3C：word wide web consortioum万维网联盟，创建于94年，是Web领域最具权威和影响力的国际中立性技术标准机构

• html 行内元素，块元素，空元素有哪些？

  • 块元素：

    <div><p><h1-h6><form><table><hr> <ul> <dl> <ol> <pre>(用来表示计算机源代码) <address> <blockquote>(标记长的引用) <center>(对其所包括的文本进行水平居中) <dir>(和ul一样，不赞成用) <fieldset>(组合表单中的相关元素)

  • 行内元素：

    <a> <input> <img> <label> <span> <select> <br> <textarea> <acronym> <b> <bdo> <big> <cite> <code> <dfn> <em> <font> <i> <kbd><q> <s> <samp> <small> <strike> <strong> <sub> <sup> <tt> <u> <var>

  • 可变元素：(根据上下文语境决定该元素为块元素或者内联元素)

    <applet> <button> <del> <iframe> <ins> <map> <object> <script>

  • 空元素：

    <br/> <hr> <input> <img> <link> <meta>

二. CSS

1. css的简介:Cascading style ssheet 汉译 层叠样式表，使用来表现HTML或者XML等样式文件的计算机语言.
2. 样式表的创建: 内部样式表，外部样式表，内嵌样式表（行内样式表）
   说明：用style元素来创建样式表时必须将该标记写在文件头部之间
   <style type="text/css"> <link>
</style>

3. CSS的组成和语法
   选择器{属性：属性值；} （属性和属性值合起来称为声明）
   说明：（1）属性和属性值之间冒号分割，声明必须放在花括号内。
   （2）一个选择符可以有多个属性，属性和属性之间用分号隔开。
   （3）一个属性可以有多个属性值，属性值与属性值之间用空格隔开。
4. id选择器
   注意：一个id名称只能对一个具体元素对象，因为id只能定义页面中某一个唯一的元素对象。
   最大的用处：创建网页的外围结构。
5. class选择器
   更适用于定义一类样式
6. 群组选择符
   语法：选择符1，选择符2，选择符3…….{属性：属性值；}
   说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组
7. 包含选择器
   语法：选择符1 选择符2{属性：属性值；}
   说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2；
8. 伪类选择器
   语法：
   a:link{属性：属性值;}超链接的初始状态。
   a:visited{属性：属性值;}超链接被访问后的状态；
   a:hover{属性：属性值;}鼠标划过超链接时的状态；
   a:active{属性：属性值;}鼠标按下时超链接的状态；
   *注意：当这4个超链接伪类选择器联合使用时，应注意他们的顺序。
9. 通配符
   语法： *{}其含义是所有元素 主要用于重置样式
10. 选择器的优先级（权重）
    css中用四位数字表示权重，权重的表达方式 如：0，0，0，0
    类型选择器的权重为0001
    class选择器的权重为0010
    id 选择器的权重为0100
    伪类选择器的权重为0010
    包含选择符的权重为包含选择符的权重之和
    内联样式 的权重为1000
11. 文本的相关属性
    1）文本大小：{font-size:12px/14px/16px;}
    说明：(1)属性值为数值型时，必须给属性值加单位，属性值为0时除外。(2)单位还可以是pt，9pt=12px;(3)为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi 为标准字体大小默认值即1em。默认情况下：1em = 16px,0.75em=12px;
    2）加粗：{font-weight:bolder/bold/normal/100-900;}
    说明：在css规范中把字体的粗细分为9个等级，分别从100-900，其中100对应最轻的字体变形，而900对应最重的字体变形。100-500常规字体 600-900加粗字体
    3）检索或设置对象中的文本的大小写{text-transform:none/capitalize首字母大写/uppercase全部大写/lowercase}
    4）倾斜：{font-style:normal常规字体/italic/oblique倾斜;}
    说明：italic和oblique都表示倾斜，不过oblique的幅度更大一点。但一般浏览器对他们的区分不是很明显。
    5)水平对齐方式{text-align:left/right/center/justify(两端对齐中文不起作用);}
    6)垂直对齐方式{vertical-align:top/bottom/middle;}
    7)行高{line-height}
    说明：当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；当单行文本和行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位
    8)文本修饰：text-decoration:none/underline/overline/line-through/blink
    说明：none:没有修饰 underline：添加下划线 overline:添加上划线 line-through:添加删除线 blink:闪烁
    9）首行缩进 text-indent:value;
    说明：text-indent可取负值，只对第一行起作用
    10） 字间距{letter-spacing:value;}控制英文字母或汉字的字距。
    11）词间距{word-spacing:value;}控制英文单词词距。
12. 列表属性
    相关属性（CSS样式）
    1）list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);
    2)使用图片作为列表符号：list-style-image:url(所使用图片的路径及全称);
    3)定义列表符号位置：list-style-position:outside/inside;
    关于列表属性的简写:list-style:属性值1，2…..;
13. 边框属性
    border-width border-style:solid; border-color:
    缩写：border 3px solid red;
    边框线型：solid实线，dashed虚线，dotted点状线，double 双线 none 没有边框
    单独设置某个方向的边框属性：border-top(bottom/left/right): ;
    边框是加在元素外
14. 背景相关属性
    1）背景颜色：background-color:
    2）背景图片：background-image:url();
    3）背景图片的显示原则：容器尺寸等于图片尺寸，背景图片正好显示在容器中；容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。
    4）背景图片平铺属性：语法：选择器{background-repeat:no-repeat不平铺/repeat平铺/repeat-x横向平铺/repeat-y纵向平铺}
    5）背景图片的位置 语法：选择器{background-position:水平方向属性值 垂直方向属性值;}
    水平方向值：left/center/right或数值 垂直方向值：top/center/bottom或数值
    说明：显示右方向，下方向的图也就要像左、上移动为负值
    6）背景图的固定 语法：选择符{background-attachment:scroll(滚动)/fixed(固定);}
    7）各属性的缩写 语法：选择器{background:属性1 2 3 4；}
15. 浮动
    语法：flaot:none/left/right
    注：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框是脱离了普通文档流的。
16. 盒模型
    盒模型的概念： 盒模型是CSS布局的基石，规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
    盒模型的组成：边框、边界、补白、内容区
    Padding的使用方法：填充：padding,在设定页面中一个元素内容到元素的边缘（边框）之间的距离，也称补白。
    padding的作用：
    1）用来调整内容在容器中的位置关系；
    2）用来调整子元素在父元素中的位置关系；注：padding属性需要添加在父元素上。
    3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。
    padding属性值的四种方式
    四个值：上 右 下 左{padding：10px 20px 30px 40px;}
    三个值：上 左右 下{padding:10px 20px 10px;}
    两个值：上下 左右{padding:10px 20px;}
    一个值：四个方向 {padding:2px;}/定义元素四周填充为2px/
    说明：也可单独设置某一方向填充 ：padding-top:10px;
    padding会影响整个盒子的大小
17. margin的使用方法
    边界：margin在元素外边的空白区域，被称为边距。
    说明：可单独设置某一方向边界。如：margin-top
    margin属性值的四种方式的表示和padding相同。

三.常用标记

1. 空格 &nbsp；（所占位置没有一个确定的值，这与前字体字号都有关系）
2. 倾斜 <em></em> <i></i> 强制换行<br/> 水平线<hr/>
3. 列表 <dl><dt>名词</dt> <dd>解释</dd></dl>
4. 插入图片：<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题"/> 注意：所要插入的图片必须放在站点下
   *相对路径的写法：
   1）当当前文件与目标文件在同一目录下，直接书写目标文件文件名+扩展名；
   2）当当前文件与目标文件所处的文件夹在同一目录下，写法如下：文件夹名/目标文件全称+扩展名；
   3）当当前文件所处的文件夹和目标文件所处的文件夹在同一目录下，写法如下：../目标文件所处文件夹名/目标文件文件名+扩展名
5. 超链接
   属性 target:页面打开方式
   默认属性值：_self 属性值：_blank 新窗口打开
6. table
   属性：cellspacing:表格和表格之间的距离 cellpadding：单元格与内容之间的距离。 align = "left/center/right" 如果加在<table>标签中是将整个表格放在页面的水平中间，如果加在<td>标签中是将单元格内容居中。colspan=”所要合并的单元格的列数” 合并列；写在<td>标签中,rowspan=”所要合并单元格的行数”合并行
7. 表单
   作用：用来收集用户信息的
   表单框：<form name="表单名称" method="post/get" action="处理表单的"><input type="text(文本框)/password(密码框)/submit(登录按钮)/button(按钮)" value=""></input></form>
8. div:文档区域，文档布局对象 块级元素
9. span:内联元素