html和css

来源：互联网发布：与犯罪的战争知乎编辑：程序博客网时间：2024/06/06 04:57

一、HTML
HTML:超文本标签语言

规范：
1、以<html>开头，以</html>结尾
2、
3、标签又开始就有结束
4、不区分大小写
5、有些标签没有结束标签,需要在标签内结束<br/>
实现换行，标签<br>,没有</br>

字体标签：
  1、文字标签<font>
   <font color="blue",size="5"> 常用属性color和size
   color 1、英文单词 red
     2、使用16进制的数值表示   #ffffff
     3、rgb(255,0,0)
   size 1-7 超出7还是使用7
  2、标题标签<h1></h1>(自动换行)
   <h1></h1>。。。。。。<h6></h6> 字体越来越小

  3、水平线标签<hr/>
     <hr color="blue",size="5"/>常用属性color和size

  4、注释标签
    

   5、特殊字符
     空格  
   < <
   >    >

列表标签
<dl></dl>:定义列表范围
<dt></dt>:定义上层内容
<dd></dd>:定义下层内容

    有序列表标签：
  <ol type="a">
  <li>学院</li>
  <li>人事部</li>
  <li>财务部</li>
  </ol>

无序列表标签
     <ul type="disc">
   <li>学院</li>
   <li>人事部</li>
   <li>财务部</li>
  </ul>

图形标签
<img src"图片路径的名称"/>


超链接标签
1、点击打开新的内容
2、<a href="链接地址" target="_blank"></a>
3、href：链接到地址
target：超链接的打开方式
在默认的情况下，打开方式在当前的页面打开
target里面的值：_self,当前页面打开；   _blank，在新标签页打开

表格标签
操作技巧：
首先数表格里面有多少行，数每行里面有多少个单元格
（1）什么是表格：对数据进行格式化，使数据显示更加清晰，结构分明
（2）标签
首先定义表格的范围：<table></table>
   属性
   border：设置表格线
   bordercolor：设置表格线的颜色
   cellspacing: 设置单元格之间的距离
   cellpadding: 设置文字和单元格之间的距离
   width: 设置表格的宽度
   height：设置表格的高度

在table标签里面表示行： <tr></tr>
属性
align：设置对齐方式，值 left center right

在tr标签里面表示列： <td></td>
   属性
   align：设置某个单元格对齐方式

在tr标签里面也可以表示单元格：<th></th>
   实现居中和加粗的效果

（3）合并单元格
   是在td标签上面进行的操作，使用两个属性
    rowspan：跨行
     代码 <th rowspan="4">人员信息3人</th>
    colspan：跨列
     代码 <td colspan="3">统计信息3人</td>

（4）标题标签：<caption>标题内容</caption>

表单标签
  将输入的数据提交到服务器上（存储在服务器）
  使用飙到标签实现数据提交到服务器的过程

  form 标签：定义表单范围
  属性
   action：服务器地址

二、CSS
层叠样式表
层叠：一层一层的，样式的优先级。
使用css目的是：把网页的内容和样式进行分离，利用代码的维护。

css和html结合
1、直接在需要定义的标签内添加
  <div style="color:bule;background-color:red"></div>
2、在html中的<head>中添加
  <style >
   try{
   background-color:blue;
   color:red;
   }
  </style>
3、在html外写一个css文件，在利用link 导入。
  css文件内容（文件名：01.css）：
  try{
   background-color:blue;
   color:red;
  }
  html 中：
  <head>
  .......
  <link rel="stylesheet" style="text/css" src="01.css"/>
  </head>
4、在html外写一个css文件，在利用@import url（01.css）导入。
    <head>
  .......
  <style >
   @import url(1.css);
  </style>
  </head>

CSS选择器
（1）css优先级
   在一般情况下，优先级是后加载的优先级高
（2）格式规范：属性名称1:属性值1;属性名称2:属性值2;
（3）选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）

css有三个基本选择
第一个：标签选择器
     使用标签名称作为选择器
  div {
      background-color: red;
  }

第二个：class选择器
     每个html标签上面都有一个属性class，通过设置class属性的值
     代码
  .haha {
   background-color:red;
  }

第三个：id选择器
     每个html标签都有一个属性id，通过设置id的属性值
     代码
  #hehe {
   background-color:green;
  }

（4）选择器的优先级
style > id选择器 > class选择器 > 标签选择器

4、css的扩展选择器
（1）关联选择器
   设置嵌套标签的样式
    代码
div p {
  background-color:red;
}

（2）组合选择器
   设置不同的标签具有相同的样式
   代码
div,p {
  background-color:green;
}

（3）伪元素选择器
   比如超链接为例，
   状态：原始状态、鼠标放上去的状态、点击状态、点击之后的状态
  :link       :hover          :active      :visited

0 0