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+空格 |
空格符号 |
|
输入法全角状态 |
一个空格=一个汉字 |
|
ctrl+1 ....6 |
<h1>..... |
|
|
转载请注明出处
html.day01的更多相关文章
- Jquery day01
day01: 基础--选择器.属性和CSS.文档处理 day02: 高级--筛选.事件.效果.ajax jQuery介绍 JS类库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用 ...
- python Day01
Python Day01 Python 简介 介绍 Python 是一种面向对象.直译式的计算机程序设计语言,也是一种功能强大的通用型语言,已经有将近二十年的发展历史,成熟稳定.包含了一组完善而且容易 ...
- Spring day01笔记
struts:web层,比较简单(ValueStack值栈,拦截器) hibernate:dao层,知识点杂 spring:service层,重要,讲多少用多少 --> [了解] sprin ...
- 传智播客JavaWeb day01 快捷键、XML
2015-01-14 一直计划着学习java,今天晚上终于下定决心看了下传智播客朴乾老师的javaweb开发视频day01之第一讲,主要内容是开发工具简单介绍.怎么创建工程.Junit的介绍,我是C# ...
- python开发学习-day01 (python安装与版本、字符串、字典、运算符、文件)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- coco2d学习day01 精灵分析
day01笔记 using namespace cocos2d; == USING_NS_CC; 一般用后面的 #ifndef __MYLAYER_H__ #define __MYLAYER_H__ ...
- day01课程回顾,数据类型
Day01 Python的分类 Cpython:代码àc字节码->机器码 一行一行的编译执行 Pypy: 代码àc字节码->机器码 全部转换完再执行 其他python 代码- ...
- Python学习之路——Day01
Day01 一.编程和编程语言 编程语言是人与计算机之间交流沟通的介质 编程就是人实现通过让计算机实现动作的文件 二.计算机的组成 1.控制器:负责控制指挥计算机硬件运行 2.运算器:负责数学与逻辑运 ...
- API.day01
第1部分 JDK API 1.1 API(Application Programming Interface,应用接口程序):已经封装好可以直接调用的功能(Java中以类的形式封装) 经常使用的JDK ...
- 《Professional JavaScript for Web Developers》day01
<professional JavaScript for Web Developers>day01 1.JavaScript简介 1.1JavaScript简史:略 1.2JavaScri ...
随机推荐
- 用C++进行函数式编程
http://www.programmer.com.cn/12717/ 文 / John Carmack 译 / 王江平 <Quake>作者Carmack认为追求函数式的程序设计有着实 ...
- 一篇旧文章,结合汇编探索this指针
//VC6.0下成功编译 #include <iostream.h> class X{ public: void foo(int b,int c){ this->a=b*c; cou ...
- Unity问答——NGUI怎么使用按键模拟鼠标点击?
这篇博客源自我在泰课在线的回答.链接:http://www.taikr.com/group/1/thread/248 问:NGUI怎么模拟用代码模拟控制点击 答: 1. 这个问题问得好.因为在使用按键 ...
- J2EE开源项目
这篇文章写在我研究J2SE.J2EE近三年后.前3年我研究了J2SE的Swing.Applet.Net.RMI.Collections.IO.JNI……研究了J2EE的JDBC.Sevlet.JSP. ...
- Popular Deep Learning Tools – a review
Popular Deep Learning Tools – a review Deep Learning is the hottest trend now in AI and Machine Lear ...
- Eclipse控制台中文乱码
换了OS真是,主要就是对Eclipse的配置操作不熟悉.用着不顺手.源文件一直都是按照google java style的做法保存为UTF-8.现在显示乱码,就得改Eclipse解码的配置为 UTF- ...
- struts2之防止表单重复提交
struts.xml配置文件 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts ...
- Git各种错误汇总
1.github上版本和本地上版本冲突的方法,即提交时会提示如下错误: 解决方法,提交时采用如下代码: git push -u origin master -f 参考链接: http://blog.c ...
- 【Fiddler】手机抓包
Fiddler (四) 实现手机的抓包 手机配置了后,Fiddler不开起来就什么也连接不了
- 高等数学(拉格朗日乘子法):NOI 2012 骑行川藏
[NOI2012] 骑行川藏 输入文件:bicycling.in 输出文件:bicycling.out 评测插件 时间限制:1 s 内存限制:128 MB NOI2012 Day1 Des ...