HTML笔记1

HTML和css技术

 

 

html的介绍

html技术简称超文本语言技术，这个技术主要是用来制作网页的；

  • 【历史】
    html1.0, html2.0,html3.0, html4.0, xhtml1.0;
    超文本语言技术是由一个叫做W3C的组织发布和维护的；

  • 【作用】
    html的作用：html主要处理网页当中的文字信息和图片信息，以及负责网页的语义，还有网页结构；
    对于一个静态网页来讲它的80%的工作基本上都是由CSS来完成的只有20%的工作是由html来完成的；
    网页有一个作用主要是用来传递给人们信息；

  • 【w3c标准】
    wed前端标准：

  1. + 1.html--结构标准； 
  2. + 2. CSS--样式标准（网页）； 
  3. + 3. js --行为标准；  

web前端技术到底是用来干什么的，它主要就是用来制作网页的；

网页的基本结构

  • 写网页就好比写信，写信有书信的格式，写网页也有网页的基本格式；

  • 《html语言的语法要求》：

  1. 1. 所有的html语言必须写在标签符号里面：<>; 
  2. 2. 所有的html标签必须成对出现，并且区分首位； 
  3. 3. 尾标签用一个关闭符号标注 /；  

  • 标签属性的语法要求：

  1. + 键值对格式：  
  2. - K代表属性名称； 
  3. - V代表属性值； 
  4. - 键值对的格式就是 k="V" k="v"; 
  5. - 一个标签可以写多个属性，但是属性之间是不可以混用的；  

今天学习的标签

  1. <html> 
  2. <head> 
  3. <title>网页的基本结构<title> 
  4. </head> 
  5. <body> 
  6. 网页的内容 
  7. </body> 
  8. </html>  

html---表示一个网页整体；
head---表示网页的头部；
title---表示网页的名称；
body---表示网页的身部；主体部分；将来给用户看到的一切信息都要放在这个标签里面， body标签的两个属性：bgcolor---背景颜色；background---背景图；规律：永远是背景色在下；背景图在上；
注：head标签内部一般用来盛放给浏览器看的东西

h1---标题标签，表示一个标题，在html当中标题一共分为6级h1--h6;
p---段落标签表示一个段落，段落标记P具有一个属性 align,它表示对齐方式有3个值分别表示left左对齐；right右对齐；center居中对齐；
font---文字标签；作用它可以用来控制任何的文字，文字的三属性；在HTML当中文字三属性指的是： 字体（face），字号(size)，颜色(color)，这三个属性是font标签专有的；
hr注意它是一个单标签；它代表一条水平分割线；它有3个属性：size表示线条的粗细；color亦博表示线的颜色；align表示对齐方式；width表示宽度；
b---加粗标签；
u---下划线标签；
i---斜体标签；
br---换行标签，它是一个单标签；
img---表示定义一个图像；

  1. **《img标签的属性》：**  
  2. 1. src 表示图片的路径；  
  3. 2. width 表示图片的宽度；  
  4. 3. height 表示图片的高度；  
  5. 4. border 边框属性：它的值可以设置边框的厚度；  
  6. 5. title 设置提示文本；  
  7. 6. alt 设置图像没有找到时候的替换文本；  
  8. 小知识点：对于img标签来讲有一个属性是必须要指定的就是src属性;如果不指定这个属性它根本就不显示任何图像；  
  9. 小知识点：如何实现等比缩放的图片；  
  10. 方法：将图像的宽度和高度属性删除，只给出其中一个即可，另一个会按照比例进行缩放； 

标签属性

标签属性的作用：它可以对选中的信息进行详细的调节；标签的属性有一个叫做键值对的语法要求;

浏览器

目前全球有5大浏览器厂商，分别是ie ,火狐，谷歌，欧朋，苹果；
我们制作的网页运行平台就是浏览器；好比写信要到邮局取邮寄，那么浏览器就相当于邮局；
浏览器是一个平台它只认识超文本语言；不认识其他任何语言；也就是说他可以编译超文本语言；

DW快捷键

ctrl+t----环绕标签；
ctrl+h----唤醒代码提示；
shift+enter ----可以直接生成换行标签；
F12----将当前的网页在浏览器中发布；
ctrl+alt+i 插入图像快捷键；

相对路径和绝对路径

  • 《相对路径》
    实际上不管哪种路径方式都是我来查找到目标文件；相对路径是从自身出发去寻找目标文件;
    相对路径我们只需要能够解决；
    同级查找；---直接书写文件名+后缀格式；
    自己查找；---先查找文件夹名称然后通过关闭符号查找文件夹里面的文件；
    上级查找；---上级查找的核心主要是通过一个 ../的符号表示向上一级；
    相对路径不能跨盘符；

  • 绝对路径
    实际工作当中不推荐使用，因为它有一个缺点就是不可移植，不可移动；因为绝对路径是从盘符出发去寻找目标文件；
    绝对路劲的使用方式特别简单我们只需要将图片丢入浏览器在地址栏中就会显示图片的绝对路径直接复制粘贴这个路径即可；

HTML当中的颜色模式

在超文本语言当中可以通过两种方式来表示颜色；

  1. 通过16进制方式表示色织：规律：#红绿蓝；

  2. 通过颜色对应的英文名称；blue，red,yellow,green;

网页当中常用的图片格式

  1. jpg: 普及率最广的一种图片格式优点自身质量小；便于传输；缺点不能实现透明效果

  2. png： 优点：能够实现透明效果，确定：自身质量较大；

  3. gif: 优点：也能够实现透明效果，而且自身质量较小，能够实现动画效果，缺点：但是图像不够清晰；

posted @ 2016-04-20 13:54  shuiyaodongwu  阅读(135)  评论(0)  编辑  收藏  举报