企业实训-网页开发入门

最新推荐文章于 2024-07-18 13:52:01 发布

chenghang1316

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量101

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/u/4090543/blog/3018435

版权

1.HTML文档

HTML文档基本格式
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
      </head>
      
      <body>
      
      </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--  <!doctype html> 必须在开头，想浏览器说明当前文档使用的那种HTML规范标准 -->
<html xmlns="http://www.w3.org/1999/xhtml"><!--<html>根标记，告知浏览器本文件是个html文档 -->
<head><!--头部信息，用来放置头部的标记 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--<meta>秒速HTML文档的描述，关键字，作者，字符集等 -->
<title>第一文档</title>
<link href="mycss.css" type="text/css" rel="stylesheet"/><!--链接，引入css文件 -->
</head>
<!--注释，可在编辑设置快捷键 -->
<body><!--主体标记，网页上要显示的所有内容都写在此处 -->
<div id="txt" style="width: 770px; background-color: #FC3; margin: auto"><!--<div>用来划分区域 -->
<h1>你好，秋天</h1>  <!--<h1>~<h6>：标题从大到小-->
<p>zhaoqi @ 2018-10-08</p><!--<p>段落 -->
<p>春天是一把琴，将优美琴声带给世人，叫他们脱去衣袄，重新奔跑在温暖的大地中；夏天是一把扇，扇去炎热，以热情的脸庞去温抚他人；冬天时一雪花，飘飘而来，为人们带来雪的姿态，但是秋天的叶则更令我喜欢。</p>
<p>秋天的叶是凄凉的飘飘洒洒的落叶如一只蝴蝶，飞舞着，飘到大地母亲的怀抱里。</p>
<p>秋天的叶是一位化妆师，把世界渲染，把大地变成金黄色；秋天的叶，默 默无闻，春天夏天，树叶的绿叶衬托使鸟儿莺歌燕舞，秋天的你，默默而去， 但你不伤心，因为你熟知“落红不是无情物，化作春泥更护花。”</p>
<p>秋日的叶是富有诗意的，你好，秋天，你好！</p>
<p>浏览[1051]|评论[105]</p>
<p>注：文字摘自网络</p>
</div>
</body>
</html>

2、CSS文档

1、Html中引用样式三种方式（样式使用的顺序：行内样式—内嵌式—外链式）
     行内样式：在html标签上写样式（不建议，后期不好维护）
     内嵌式：在html文档的头部<head>中添加<style>，在style标签里面写样式
     外链式：新建一个css样式文件，引入到html中（推荐）
        href：要引入的css文件
       type：要引入的文件的类型text/css代表引入的是
               个样式表文件
        rel：当前文档与引入文档的关系，stylesheet代表被引入的是一个样式表文件

2、CSS的写法（基本语法）    选择器 {
               属性1 : 属性1的值 ;
               属性2 : 属性2的值 ; … …
           }/3CSS的选择器
     id选择器：#id名｛属性1 : 属性1的值 ; ｝
     class选择器：.class名｛属性1 : 属性1的值 ; ｝
     标签选择器：标签名｛属性1 : 属性1的值 ; ｝

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

#txt{
    background-color: #F99!important;    /*粉色*/
    width: 800px;
}

.myclass{
    text-align:center;
    color:#FFF;    /*白色*/
    font-family:黑体;
    font-style:italic;
}

p{
    color: #000;    /*黑色*/
    text-indent: 2em;
    line-height: 35px;
}

转载于:https://my.oschina.net/u/4090543/blog/3018435