【XHTML&CSS读书笔记】入门基本架构

最新推荐文章于 2024-07-06 22:10:21 发布

calf_man

最新推荐文章于 2024-07-06 22:10:21 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/calf_man/article/details/8509141

web 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML的基本结构和文档声明的重要性，并通过一个示例展示了如何使用内联CSS来定制页面样式的具体方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

读《HTML之路》第1、2章笔记

基本源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<!-- 
以上是文档声明：告知此HTML代码的版本
若没有此声明，则浏览器会自动启用quirks模式, 按照默认的方式处理页面的代码
此声明之前，不能有任何其他内容，否则它会失效，浏览器还是会使用quirks模式
-->

<!--
这里指定文档的主要语种，如果在内容用到了不同的语种，使用行内属性xml:lang，例如：
<span xml:lang="de">HTML</span> 
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 


<!--
head对象描述HTML文档内容的通用信息,不是页面的实际内容, 在此对象内可以使用的标签只有
title、link、meta、base、style和script，但必需的标签是title
-->
<head> 
    <!-- 在这里表示文档标题，出现在浏览器的窗口上-->    
    <title>Browser default heading styles</title>  


    <!-- 
    meta通过HTTP头信息声明此文档的媒介类型和字符集,  
    也可以通过服务器端的.htaccess进行设置或者通过PHP进行设置
    所以此meta对象可以不用
    --> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

    <!-- 
    style对象用于在head对象内定义单页的CSS，由一系列的CSS规则组成 
    注意: CSS内的注释要使用星和斜杠进行注释 
    type属性告诉浏览器，对象内的内容是什么，media属性，规定了与样式关联的媒体，
    只支持screen和print， 这里设置为all，和没有设置此属性一样
    --> 
    <style type="text/css" media="all">  
     
         /*一个具体的CSS*/
         body { 
            font-family: "Times New Roman", Times, serif;
            color: white;
            background-color: black;
        }    

        h1 {
            color: red;
        }

    </style>

</head>

<!-- HTML文档的主体部分，所有内容放到这里，就是用户将要看到听到的内容-->
<body> 

<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>

</body>
</html>

运行结果：