html+CSS

html

标签的意义

• : 根标签，是网页的开始和结束

• : 头部 很多描述属性 会显示在网页标题栏中 不会展示在页面

• ： 主体 是在网页上要展示出来的页面内容

• : 强调 斜体表示

• : 强调 用粗体表示
• : 标签是没有语义的，它的作用就是为了设置单独的样式用的 并不是强调
• : 标题文本 (x为1-6) body中的标题
• : 引用短文本 文本不需要加双引号

• : 引用长的文本

• 
  : 在html文本中回车换行,
  为空标签，只是表示换行
•  : 输入空格 在html文本中输入再多的空格只会显示一个空格，多个需要输入 

• ---

  : 添加水平横线,也是空标签啊
• : 电子邮箱、联系地址信息；斜体表示
• :加入一行计算机代码

• :加入多行计算机代码
  

   标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

• 
  
  • 序表1
  
  
  • 序表2
  
  .......
  
  
  展示没有前后顺序的信息列表

1. 序表1


2. 序表2

.......

展示有前后顺序的信息列表

• 
  把一些独立的逻辑部分划分出来
• .....
  用id属性给div命名
• table
  
  

  image.png
  
  显示为：
  
  

  image.png

1、

…：整个表格以标记开始、标记结束。
2、…：表格的一行，所以有几对tr 表格就有几行。

3、…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。

4、…：表格的头部的一个单元格，表格表头。

5、 直接生成的表格是没有边框的，用CSS给表加边框：

6、summary增加摘要、便于搜索引擎了解表格的内容 不会现实于表格上
·······写入标题，显示在表格上

 

  
2012年到2013年库存记录
  

    
产品名称 
    
品牌 
    
库存量（个） 
    
入库时间 
  

• 使用标签，链接到另一个页面

马奎尔

• 标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
  target="_blank">托比•马奎尔Tobey Maguire

• 标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情

  
  
  

  image.png

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

image.png

• 使用标签，为网页插入图片
  

• 网页与用户交互：
  

1. ：标签是成对出现的，以开始，以结束。

2. action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3. method ： 数据传送的方式（get/post）。

        用户名:
        
        密码:
        

• 文本输入框、密码输入框
  
  
  
  

1、type：

当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

    账户: 
    
    

    密码: 
    

• 支持多行输入的多行输入区域
  <br> 文本<br>

1、 标签是成对出现的，以<textarea>开始，以结束。

2、 cols ：多行输入域的列数。

3、 rows ：多行输入域的行数。

4、 在标签之间可以输入默认值。

        联系我们
        在这里输入内容...

• 单选框、复选框
  

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

注意:同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。

• 下拉框

  
  
  

  image.png
  
  

  1、value：

image

2、selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

• 利用下拉框实现多选；在标签中设置 multiple="multiple"
  
  

  image.png
  提交按钮 提交数据
  

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

• 重置按钮 重置内容

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

CSS

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

• 使用css样式语句,为文中短语设置样式
  1、
  
  2、 将需要设置样式的文字用括起来就好
• css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

image

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如：
p{Font-size:12px;color:blue}

注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p
{
Font-size:12px;
color:blue;
}

• CSS中也有注释语句：用/注释语句/来标明
  （Html中为!--注释语句--)
• 内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

这里文字是红色。

• 嵌入式css样式，写在当前的文件中
  嵌入式css样式，就是可以把css样式代码写在标签之间。
  嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。

• 外部式css样式，写在单独的一个文件中
  外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在
  • 水平居中设置-定宽块状元素

  当被设置元素为 [块状元素]时用 text-align：center就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

  这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

  满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

  html代码：
  
    
  我是定宽块状元素，哈哈，我要水平居中显示。
  
  
  css代码：
  
  
  也可以写成：
  margin-left:auto;
  margin-right:auto;
  

  • 不定宽块状元素：（块状元素的宽度width不固定。)

  不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

  1. 加入 [table]标签
  2. 设置 [display: inline] 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
  3. 设置 [position:relative]和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

  • 垂直居中

  • 垂直居中-父元素高度确定的单行文本

  我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。

  父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和[ line-height ]高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

  line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

  这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

  如下代码：

  html:
  
      hi,imooc!
  
  
  css代码：
   
   
   
    
   
  垂直居中-父元素高度确定的多行文本（方法一）
   
   
   
   
   
  父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
   
   
  方法一：使用插入 table标签，同时设置 vertical-align：middle。
   
   
  css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
   
   
  html代码：
  
  body>
  
  
      
  看我是否可以居中。
  
  
  
  
  css代码：
  table td{height:500px;background:#ccc}
   
   
  因为 td 标签默认情况下就默认设置了vertical-align 为 middle，所以我们不需要显式地设置了。
   
   
   
    
   
  垂直居中-父元素高度确定的多行文本（方法二）
   
   
   
   
   
  除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
   
   
  在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
   
   
  html代码：
  
      
  
          
  看我是否可以居中。
          
  看我是否可以居中。
          
  看我是否可以居中。
      
  
  
  css代码：
  
   
   
  这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
   
   
   
    
   
  隐性改变display类型
   
   
   
   
   
  有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
   
   
   
    
  [position : absolute]
   
    
  float : left 或 [float:right]
   
   
   
   
  简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（[内联块状元素])的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
   
   
  如下面的代码，小伙伴们都知道 a 标签是 [行内元素]，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
   
   
  html代码
  
      进入课程请单击这里
  
  
  css代码