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. HDU1003前导和

    简单维护前导和 #include<stdio.h> int main() { ],cas,key=; scanf("%d",&cas); while(cas-- ...

  2. UVaLive 6608 Cabin Baggage (水题)

    题意:给定四个数代表长宽高和重,问你是不是满足下面条件,长不高于56,宽不宽于45,高不高于25,或者总和不大于125,并且重量不高于7. 析:判断输出就好,注意这个题是或,不要想错了. 代码如下: ...

  3. Windows 10 Edge浏览器、照片查看程序关闭“平滑滚动”

    升级到10后,这两个常用软件的“平滑滚动”功能,个人感觉体验有点不好,特别是图片这个自带程序,看了几十张图后就有点头晕了,所以把它关闭为好: 控制面板\系统和安全\系统\高级系统设置\高级\性能\设置 ...

  4. c++中的signal机制

    简介 signal是为了解决类之间通信的问题而出现的,更深入的原因是面向对象讲究封装,但是封装必然导致类之间沟通困难,但是使用接口的方式又太重量级--需要写很多代码,而且会导致接口爆炸 比如你需要把一 ...

  5. AS:加载新版本的SWF文件。

    方案一: 文件名+版本号,区别对待不同的版本控制,有设定值后会加上_v_x的后缀名.如:加载主文件 main.swf, 被命名为:Main_v_60.swf . 方案二: loader.load(ne ...

  6. 使用MySQL中的EXPLAIN解释命令来检查SQL

    我们看到许多客户的系统因为SQL及数据库设计的很差所以导致许多性能上的问题,这些问题不好解决,但是可以采用一套简单的策略来检查生产系统,发现并纠正一些共性问题. 很显然,您应该尽最大努力设计出最好的数 ...

  7. tomcat如何简单调优

    我们在javaEE开发的过程中,经常会进行tomcat调优操作,下面我们来简单讲解一下tomcat调优. 1) 去掉web.xml的监视,提前将jsp编译成servlet. 2)在物理内存允许的范围内 ...

  8. MySQL 索引优化 btree hash rtree

    一.MySQL索引类型 mysql里目前只支持4种索引分别是:full-text,b-tree,hash,r-tree b-tree索引应该是mysql里最广泛的索引的了,除了archive基本所有的 ...

  9. 推荐系统之基于二部图的个性化推荐系统原理及C++实现

    1.引言 许多网站都喜欢让用户点击“喜欢/不喜欢”,“顶/反对”,也正是这种很简单的信息也可以利用起来对用户进行推荐!这里介绍一种基于网络结构的推荐系统! 由于推荐系统深深植根于互联网,用户与用户之间 ...

  10. MySQL 多会话之间更新数据的小实例

    1:创建一个实验表 mysql> use test; mysql> CREATE TABLE t -> (id int(11) NOT NULL DEFAULT 0, -> n ...