第一部分基础知识

一html基本结构

网页

注释：第一行是声明，声明网页是标准html5网页。浏览器看到这句话，就会按html5标准网页进行解析。

二常用标签

[if !supportLists]1、 [endif]标题标签

……

[if !supportLists]2、 [endif]段落标签

[if !supportLists]3、 [endif]水平线标签

[if !supportLists]4、 [endif]换行标签

[if !supportLists]5、 [endif]图像标签

三、css中的三种基础选择器

1、标签选择器，直接使用标签名命名的选择器。

例：h1{color:red;}

标题一的文字

2、id选择器，使用#加上id值命名的选择器。

例：#p1{color:green;}

这是一段文字

3、类选择器，使用. 加上class值命名的选择器。

例：.red{color:red;}

这是一段文字

四、CSS添加到HTML中的三种方式

1、内嵌样式，将样式代码写在之间。例如下图所示。

2、行内样式，直接在标签中使用style属性添加样式。

例如
段落文字设置为红色。

3、链接样式,将样式代码写在css.css文件中，然后使用link将其链接到html中。

例如：

五、文本属性

1.html





网页

标题一的文本

标题二的文本

标题三的文本

这是一段文字这是这是一段文字这是一段恩子稳定的故事防守打法是发发方式地一段恩子稳定的故事
防守打法是发发方式地方是。

式地一段恩子稳定的故事

css.css

h1{color:red;text-align:center;text-decoration:line-through;text-shadow:-3px -3px 2px green;}

#p1{color:green;text-indent:2em;line-height:30px}

#p2{color:purple;text-indent:2em;letter-spacing:30px;}

.h{color:orange;font-size:14px;}

六、字体属性

使用字体属性可以方便的控制网页中各种各样的字体。

七、背景属性

第二部分布局知识

[if !supportLists]1、 [endif]网页设计（photoshop软件）

[if !supportLists]2、 [endif]html5新增布局标签

[if !supportLists]3、 [endif]div标签

[if !supportLists]4、 [endif]盒模型

[if !supportLists]5、 [endif]display属性

[if !supportLists]6、 [endif]浮动属性

[if !supportLists]7、 [endif]定位属性

1、网页设计（photo shop软件）

[if !supportLists]1） [endif]logo设计

http://www.uugai.com/

ctrl+alt+a qq截图的组合键

[if !supportLists]2） [endif]网页设计

a)photoshop软件中，点文件/新建

b）打开选好的网页，用qq截图快捷键，ctrl+alt+a 截图。

C)回到ps中，按组合键ctrl+v (粘贴)

d)在图层面板中选中操作的图层。

e)在工具栏中选择矩形工具。

F)在画布拖选要选择的区域，然后按delete键，可以删除图层中不需要的内容。

G）工具栏中的移动工具可以移动图层。

H）工具栏中的油漆桶可以填充选区颜色。

I）工具栏中的文本工具用于书写文字。

J）工具栏中的前景色，用于选择填充的色彩。

K）取消选区，使用组合键ctrl+d

l)ctrl+t 修改选区大小

ps文件的保存，按ctrl+s保存一份源文件，扩展名为psd。

再在文件菜单下传存储为，选扩展名为jpg，保存一份。

2、html5新增布局标签（语义化）

header：用于包含放在页面头部的内容，具有引导和导航作用。

------------------------------------------------------------------

main:用于包含文档的主要内容。main元素在文档中是唯一的。元素不能是以下元素的后代：

、

2022-10-14

标题一的文本

标题二的文本

标题三的文本

你可能感兴趣的:(2022-10-14)