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>..... |
|
转载请注明出处