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. SharePoint 2013的100个新功能之社交

    一:社会能力 SharePoint 2013引入了一个新东西叫做社会能力,使公司组织中的用户社会化协作.我的网站难以置信地做了改进以集成社会能力.除了我的网站,新的社区网站(新闻提要),关注用户和关注 ...

  2. webbench压力测试

    webbench最多可以模拟3w多个并发请求去测试网站负载能力. 一:获取webbench工具,安装编译: wget http://blog.zyan.cc/soft/linux/webbench/w ...

  3. JdkDynamicAopProxy源码

     JdkDynamicAopProxy是通过接口实现动态代理类,主要方法是getProxy(ClassLoader classLoader), 代理类生成之后再调用目标方法时就会调用invoke方法. ...

  4. WCF再学习小结

    http://www.cnblogs.com/jillzhang/archive/2010/04/04/1704388.html http://leelei.blog.51cto.com/856755 ...

  5. 利用FlashPaper实现类似百度文库功能

    最近需要实现一个类似百度文库的功能,在Google上淘了一段时间,发现FlashPaper还算能够不错的实现此需求. 首先讲下思路: 1>安装FlashPaper: 2>利用java代码将 ...

  6. oracle 查詢表字段明細、字段注釋、表註釋

    查詢表字段明細 select  column_name,data_type,data_length,DATA_PRECISION ,DATA_SCALE from all_tab_columns wh ...

  7. 以Outlook样式分组和排列数据项

    转载:http://www.cnblogs.com/peterzb/archive/2009/05/29/1491781.html OutlookGrid:以Outlook样式分组和排列数据项 (这里 ...

  8. Java数据结构之线性表（2）

    从这里开始将要进行Java数据结构的相关讲解,Are you ready?Let's go~~ java中的数据结构模型可以分为一下几部分: 1.线性结构 2.树形结构 3.图形或者网状结构 接下来的 ...

  9. 处理linux下面的mysql乱码问题（下面的utf8换成gb2312也是可以的）

    有时候因为编码需要修改mysql的编码,windows下修改有图文界面简单一些,linux大家就可以参考下面的方法   默认登录mysql之后可以通过SHOW VARIABLES语句查看系统变量及其值 ...

  10. wpa_supplicant 连接成功后，如何配置wlan0与br0 协调上网

    wlan0 地址,路由配置完成后,加入两条iptables 规则. #iptables -A FORWARD -i wlan0 -o br0 -s -m state --state NEW -j AC ...