html.day01

时间:2022-10-18 14:38:06

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>.....

 

  

转载请注明出处

相关文章