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: 优点：也能够实现透明效果，而且自身质量较小，能够实现动画效果，缺点：但是图像不够清晰；

HTML笔记1的更多相关文章

  1. git-简单流程（学习笔记）

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  2. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. NET Core-学习笔记（三）

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

  7. springMVC学习笔记--知识点总结1

    以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...

  8. 读书笔记汇总 - SQL必知必会（第4版）

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  10. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

  1. Python字典 (dictionary)

    字典dict,是Python唯一的标准mapping类型,也是内置在Python解释器中的. mapping object把一个可哈希的值(hashable value)映射到一个任意的object上 ...

  2. iOS Framework lipo报错 lipo: can't map input file

    fatal error: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ ...

  3. getName()、getCanonicalName()、getSimpleName()异同

    package classes; class Box { class Inner { } } public class TestGetName { public static void main(St ...

  4. log4net配置的两种方式

    ----------文件配置:------------------- <?xml version="1.0" encoding="utf-8" ?> ...

  5. 使用sql访问EXECL文件

    --使用sql语句打开访问EXECL文件 --SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDat ...

  6. Http下的各种操作类.WebApi系列~通过HttpClient来调用Web Api接口

    1.WebApi系列~通过HttpClient来调用Web Api接口 http://www.cnblogs.com/lori/p/4045413.html HttpClient使用详解(java版本 ...

  7. DELPHI下读取与设置系统时钟

    在DELPHI下读取与设置系统时钟 很多朋友都想在自己的程序中显示系统时间 这在DELPHI中十分容易 利用DateToStr(Date)及TimeToStr(Time)函数即可实现. 二者的函数原型 ...

  8. inline-block 前世今生

    曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.如今 ...

  9. 使用 preferredStatusBarStyle 设置状态栏颜色

    iOS9之前,在plist文件中 插入一个新的key,名字为View controller-based status bar appearance,并将其值设置为NO. 然后敲入代码: [UIAppl ...

  10. Codeforces Round #310 (Div. 2) A. Case of the Zeros and Ones 水题

    A. Case of the Zeros and Ones Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/con ...