3.4日企业实训第一节（网站整体布局分析设计）-CSDN博客

第一节企业实训课

Get内容：开发工具Dreamweaver的应用

关于HTML：

pHTML文档基本格式：文档后缀名.html或者.htm

doctype html> 必须用在开头：用于向浏览器说明当前文档使用的哪种HTML规范标准

：根标记，用于告知浏览器本文件是个html文档

：头部信息，主要用来放置其他位于头部的标记，像、、、等

：描述HTML文档的描述，关键词，作者，字符集等。

：主体标记。网页上要显示的所有内容都写在此处

pHTML标记或者标签

•通常成对出现：、

•标签对的第一个标签叫开始标签（开放标签），第二个是结束标签（闭合标签）

•标签也分单标签和双标签：<</span>img /> <</span>hr />

•标签上有自己属性：比如id，写法：属性=“值”

•注释：

•标签：

•

：用来划分区域的

•

：段落

•

~

：标题从大到小

关于CSS：

pHtml中引用样式三种方式（样式使用的顺序：行内样式—内嵌式—外链式）

•行内样式：在html标签上写样式（不建议，后期不好维护）

•内嵌式：在html文档的头部

中添加，在style标签里面写样式中添加

•外链式：新建一个css样式文件，引入到html中（推荐）

href：要引入的css文件

type：要引入的文件的类型text/css代表引入的是个样式表文件

rel：当前文档与引入文档的关系，stylesheet代表被引入的是一个样式表文件

pCSS的写法（基本语法）

**选择****器 ** {

属性****1 : 属性1的值 ;

属性****2 : 属性2的值 ; … …

}

CSS的选择器

•id选择器：#id****名 ｛属性****1 : 属性1的值 ; ｝

•class选择器：.class****名｛属性****1 : 属性1的值 ; ｝

•标签选择器：标签名 ｛属性****1 : 属性1的值 ; ｝

<!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>
      <link href="mycss.css" type="text/css"  rel="stylesheet"/>
      <!--行内样式-->
     <!-- <style type="text/css">
        #txt{
		   background-color:#F33 !important;
		   width:800px;
	     }
       </style>>-->
    </head>
    <!--注释-->
    <body>
    <div id="txt" style="width:770px;
background-color:#3FF; margin:0 auto;">
   <h1 class="myclass">你好，秋天</h1>
   <p>zhaoqi @ 2018-10-08</p>
   <p>春天是一把琴，将优美琴声带给世人，叫他们脱去衣袄，重新奔跑在温暖的大地中；夏天是一把扇，扇去炎热，以热情的脸庞去温抚他人；冬天时一雪花，飘飘而来，为人们带来雪的姿态，但是秋天的叶则更令我喜欢。</p>
   <p>秋天的叶是凄凉的飘飘洒洒的落叶如一只蝴蝶，飞舞着，飘到大地母亲的怀抱里。</p>
   <p>秋天的叶是一位化妆师，把世界渲染，把大地变成金黄色；秋天的叶，默 默无闻，春天夏天，树叶的绿叶衬托使鸟儿莺歌燕舞，秋天的你，默默而去， 但你不伤心，因为你熟知"落红不是无情物，化作春泥更护花。"</p>
   <p>秋日的叶是富有诗意的，你好，秋天，你好！</p>
   <p>浏览[1051]|评论[105]</p>
   <p>注：文字摘自网络
   </div>
   
   <blockquote>
  <p>&nbsp; </p>
</blockquote>
</body>
</html>

@charset "utf-8";
/* CSS Document */

 #txt{
		   background-color:#F33 !important;
		   width:800px;
	     }
		 
		 .myclass{
			 text-align:center;
			 color:#FFC;
			 font-family:宋体;
			 font-style:italic;
		 }
		 p{
			color:#9CF
			text-indent:2em;
			line-height:35px;
		 }

转载于:https://my.oschina.net/u/4094999/blog/3020966