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.文字元素：控制文字

　　size 文字大小

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

　　face 文字字体

　　例如：

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

　　属性写在哪里？

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

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

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

　　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

最新文章

热门文章