html.day01

1.web标准:

  1. 结构  (xhtml)  2. 表现(css)  3.行为(js)

  html   超文本标记语言

  xhtml  (严格型超文本标记语言)

2.规范:

  1. 所有标签(标记)都要放到< > 之内  例如:<b>

  2. 所有的标记必须闭合。(不一定成对) 其中  /  (关闭符号)

  例如:<b>   </b>    <div>   </div>     <br />

  3.必须使用<!DOCTYPE>标记进行文档类型声明

  4.区分大小写

 3.网页架构 (主题结构  网页骨架)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>网页骨架</title>
  </head>
  <body>

  </body>
</html>

4.网页开发工具

记事本       dreamweaver  adobe        sublime          editplus

5.DW 简介

  1.调整代码大小

  ctrl+u (编辑--首选参数)--- 字体--代码视图

  2.dw自动补充代码

  ctrl+u--  代码提示--键入起始标签”>” 后

  3.ctrl+t  环绕标签    输入回车即可

6.常用标签

  1.dtd 是什么:  文档类型定义   

    Strict(严格类型)   必须使用干净的标签 <br>

    Transitional(过渡类型)

    Frameset(框架类型)

    不同类型的XHTML文档必须使用不同的DTD

  2.xmlns  xml namespace     xml使用的命名空间

  3.字符集 charset

    GB2312    一个汉字由2个字节组成    大概能识别7000多个汉字 (10万个)(4000) 比如腾讯

    gbk

    iso    uft-8  字符集  一个汉字由3个字节组成   非常大   例如小米

7.几个常用标签

  1.段落标签

<p> 我是一个段落  </p>

注意: 

标签的关系:

    <p></p><b></b>   并列关系

    <p><b></b></p>   包含关系

    <p><b></p></b>   错误的

  2.换行标签  <br/>  单标签

  3.水平线标签  <hr/> 单标签

  4.加粗标签  <strong></strong>

    加粗标签还有一个  <b> </b>

    区别: b 就是加粗的意思。 strong 加粗还有强调加强语气的用处。

    所以,在网站中,站在优化的角度,如果比较重要的部分,能用strong就不用要b。

  5.倾斜   <em></em>

    倾斜还有一个 <i>  </i>

    区别: i 就是倾斜的意思。 em 倾斜还有强调加强语气的用处。

    所以,在网站中,站在优化的角度,如果比较重要的部分,能用em就不用要i。

  6.下划线 <u></u>    但是很少用 很少很少用

  7.删除线  <s></s>    淘宝:<del> </del>

8.标签的使用

  1.标签的分类

    1. 双标签  <p></p>

    2. 单标签  <br/>

  2.标签作用

    1.本身语义    例如: <marquee>  滚动文本 </marquee>   

    2.加强语气    例如: <strong>  强调加粗 </strong>

    用标签做什么:

    1. 选定内部内容

    2. 设置相关属性

  3.标签的属性

    网页元素  :  文字  图片  视频  音频   flash  链接  js

    <元素 属性1=“值1” 属性2=“值2”..... >  </元素>

    有些标签有属性 有些标签无属性

9.文字元素:控制文字

  <font>  文字内容  </font>

  size  文字大小

  color  文字颜色  其中最常用的是 十六进制  #ff0000   也可以用 red

  face   文字字体

  例如:

<font size="4" color="#FF0000" face="微软雅黑">利用浏览器查看网页</font>  

  属性写在哪里?

  <font color=red  >

  <手机  型号=‘红米’ 颜色=‘黑色’ 大小=‘4.7’></手机>

  属性=值  这种写法我们称之为 键值对 

10.图片元素 <img>  单标签  

  <img  src=xxx.jpg>

  src 来源路径

  例如:

<img src=hai.jpg/>

  width  宽度

  height  高度

  border  边框

  title   提示文本  (鼠标经过才会有效果)

  alt   替换文本(图片不显示是,显示的文本内容)

  1.如果想要等比例缩放,只需要更改宽度或者高度其中的一个属性即可。

  2.宽度和高度键值对,值的单位可以是绝对单位(像素)也可以是百分比

  像素用px表示   百分比用 % 表示

  例如我要给图片缩放一半大小:

width=50%  

  3.站在优化的角度来说,如果这个图片很重要,特别logo  给图片指定alt属性。如果有条件,可以再加title属性,进一步说明。

  网页中用得到的图片格式:

    1.gif 图片   最多256种颜色  可以做动画 可以透明

    2. jpg  jpeg  可以达到1650万种颜色  不可以透明 像素大,图片清晰 缺点图片大。

    3.png   透明背景  颜色丰富 (现在运用较多)

    4.bmp   window系统自带图片格式,很少用 太大了

    5.svg 现在网络最火的一种图片格式。(矢量图)

11.html文件命名规则:

  有英文字母 数字 下划线组成 不要出现中文或者特殊符号。

  例如: index.html    demo12.html

12.水平线的属性设置

  <hr/>

  文字默认是黑色  宋体

  width  宽度

  size  改变粗细

  color 颜色

  对齐:

  align  水平对齐

  left  左  right  右  center 居中

  例如:

align=“left”   水平左对齐

13.标题标签  <h>

  <h1></h1>  一级标题

  <h2></h2>  二级标题

  <h3></h3>  三级标题

  <h4></h4>  四级标题

  <h5></h5>  五级标题

  <h6></h6>  六级标题

  字体加粗   自己单独一行

14.路径

  1.相对路径

  站在自身页面的角度来看 文件的位置。

下一级   用这个符号来表示 /

例如:<img src="product/pig.jpg" />  下一级  

  上一级   用 ../

例如:<img src="../hai.jpg" />  上一级

  2.绝对路径

  本地绝对路径: 用资源管理器的地址去寻找。

  F:\案例\images\product\pig.jpg

  注意:绝对路径的下一级  \

  有一个致命的缺点: 可移植性太差。

    网络绝对路径:  右击--图片地址

15.背景属性 

  background  背景图片

  bgcolor     背景颜色

 写在body标签中

<body bgcolor="#333366" background="bg.gif">

16.dw快捷键:


快捷键名称


功能


ctrl+b


加粗(<strong>)


ctrl+h


唤醒提示


shift+enter


生成换行标签(<br/>)


F4


隐藏面板


ctrl+shift+空格


空格符号  &nbsp;


输入法全角状态


一个空格=一个汉字


ctrl+1 ....6


<h1>.....

 
  

转载请注明出处

时间: 2024-10-12 20:28:47

html.day01的相关文章

DAY01 WINDOWS 实验报告

DAY 01   Windows 实验一 实验名称:虚拟机的安装以及win7系统的安装 实验描述:学习安装虚拟机,以及安装不同的系统,可以满足用户不同时期的不同的需求 实验步骤: 步骤1:点击开始-选择vmware文件夹-点击Vmware Workstation                             步骤2:点击文件-新建虚拟机-下一步-选择客户机操作系统和版本-选择虚拟机安装位置-设置虚拟机的处理器.内存等信息-完成虚拟机裸机的安装 步骤3:点击编辑虚拟器-双击CD/DVD(

传智播客JavaWeb day01

2015-01-14 一直计划着学习java,今天晚上终于下定决心看了下传智播客朴乾老师的javaweb开发视频day01之第一讲,主要内容是开发工具简单介绍.怎么创建工程.Junit的介绍,我是C#出生,所有对号入了座. 1.JDK  ==  .Net Framework 都是基础库,但是Java开发工具要手动引入,类似dll引入 2.Content Assist  ==   AutoComplete java里面的快捷键是alt+/,个人还是习惯tab键, 3 junit == 单元测试 4

MFC DAY01

一 MFC课程的安排 MFC - 微软基础类库和框架 COM - 组件对象的编程原理和应用 ADO - WINDOWS下 数据库的访问和操作 SOCKET - WINDOWS下网络通信编程二 需要掌握的技能 熟练掌握 断点调试 程序 学会使用 call stack(调用堆栈)查看函数之间的调用关系 熟练掌握 vc下的 向导 和 工具 借助MSDN ,了解整个程序的流程.三 对大家的期望 不要缺课,课程连续性极强. 多思考,多练习. 营造良好的课堂气氛.**********************

coco2d学习day01 精灵分析

day01笔记 using namespace cocos2d; == USING_NS_CC; 一般用后面的 #ifndef __MYLAYER_H__ #define __MYLAYER_H__ ---------------一般加入头文件加入宏 : public CCLayer 一般加入一个类继承CCLayer CCLayer::init(); CCLabelTTF *plabel = CCLabelTTF::create("sunda","Arial",36

struts2之day01——06Struts2的action方法访问

struts2之day01--06Struts2的action方法访问                           (重点) 一.Action的方法访问介绍 1.有三种方法实现 第一种  使用action标签的method属性,在这个属性里面写执行的action的方法: 第二种  使用通配符方式实现: 第三种  动态访问实现(基本不用) 2.演示错误 (1)如果action方法有返回值,在配置文件中没有配置,出现错误 (2)在action里面的方法有返回值,如果有返回值时候类型必须是St

day01课程回顾,数据类型,(用户登录限制登录三次,购物车,省市县三级联动)

Day01 Python的分类 Cpython:代码àc字节码->机器码   一行一行的编译执行 Pypy:   代码àc字节码->机器码   全部转换完再执行 其他python  代码-->其他字节码-->机器码 Python的执行 Windows:C:\Python35\python.exe    D:\1.txt(python可执行文件路径---解释器   执行文件) Linux:可以在文件的头部写#!/usr/bin/python    python安装路径(用命令wher

java基础学习笔记day01

java基础学习笔记day01 1.软件开发: 软件:按照特定顺序组织的计算机数据和指令的集合 开发:软件的制作过程 软件开发:借助开发工具和计算机语言制作软件 2.java概述: java之父:詹姆斯·高斯林 JDK:java开发环境 jre:java运行环境 JVM:java虚拟机 java跨平台是因为,JVM能在不同的平台运行,JVM是跨平台的 JavaSE:标准版 JavaME:手机端,物联网 JavaEE:企业版,互联网项目 3.java语言特点: 简单性 解释性 面向对象 高性能 分

Linux系统学习日志Day01

Day01   Linux系统学习日志 (一)  Linux历史 创始人:林纳斯·托瓦兹 时间:1991 年10 月5 日(对外公开时间) 现状:多版本,有redhat.centos.Ubuntu.fedora (二)  Linux认证 管理员:RHCSA 需要掌握的知识: Linux的命令和日常维护,包括安装操作系统.构建网络连接.管理物理存储和执行基础安全管理. 工程师:RHCE 需要掌握的知识: RH124红帽企业Linux基础 RH134红帽企业Linux系统管理 RH254红帽企业Li

Python 简介day01

1.Python是一种解释型.面向对象.动态数据类型的高级程序设计语言. 2.执行Python程序 对于大多数程序语言,第一个入门编程代码便是"Hello World!",以下代码为使用Python输出"Hello World!": #!/usr/bin/python  print "Hello, World!"; 3.python 3.0+版本已经把print作为一个内置函数,正确输出"Hello World!"代码如下:

struts2之day01——05Struts2的action创建

struts2之day01--05Struts2的action创建 Action三种编写方式 第一种:创建普通类,这个不继承任何类,不实现任何接口 第二种:创建类,实现接口Action(注意,该方法需要这个包) 查看源代码:ctrl点击"Action"单词,导入src文件,可以查看源代码: 该方法可以用接口中的常量做返回值,比如:SUCCESS: 第三种:创建类,继承类ActionSupport 这个类本身就实现了Action接口: