语言, 其他语言

HTML和CSS的基础语句

这是之前自己的网页学习笔记,贴在这里。如果使用WordPress系统或其他模板快速建站,可以不必学习本篇内容。

一个简单的HTML网页代码:

<html>
    <head>
        <title>这是网页标题</title>
    </head>
    
    <body>hello world,这是网页内容</body>
</html>

其中,<html>与</html>之间的文本描述网页;<body>与</body>之间的文本是可见的页面内容;<head>和</head>之间是所有头部元素的容器,可包含脚本、指示浏览器在何处可以找到样式表、提供元信息等。

打开记事本,将以上代码复制粘贴,保存为a.html文件(注意后缀是.html格式)。然后用浏览器打开文件查看结果。除了用记事本,软件推荐Webstorm或VS Code,有缩进等辅助功能,写起来比较方便和清楚。

一、HTML基础

1. 常用的几个标签

把以下内容直接放在a.html文件中(可以不写<html>、<head>、<body>):

<!-- 这是注释 -->

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>

<p>这是一个段落。</p>
<p>a和b之间有个空格:a&nbsp;b</p>   <!-- &nbsp;代表空格,注意后面有个分号 -->

<a href="https://www.guanjihuan.com">这是一个链接:https://www.guanjihuan.com</a>

<br />  <!-- 这是换行-->

<img src="图片的链接" />

<ul>
<li>无序列表 内容1</li>
<li>无序列表 内容2</li>
</ul>

<ol>
<li>有序列表 内容1</li>
<li>有序列表 内容2</li>
</ol>

参考资料:

[1] https://www.runoob.com/html/html-basic.html

[2] https://www.runoob.com/html/html-lists.html

2. <div>和<span>

<div>是块级元素,有换行的效果。<div>和<p>有点像,但<p>描述的是段落,<div>描述的是块。<span>为行内元素,没有换行的效果。span可以作为div的子元素,但div不能是span的子元素。

例子:

<div>
<p> 内容1 </p>
</div>

<div>
<p> 内容2  <span>内容3</span> </p>
</div>

这里的<span>看起来没什么效果,但可以单独设置CSS样式。

参考资料:

[1] https://www.w3school.com.cn/html/html_blocks.asp

[2] https://zhidao.baidu.com/question/128649143.html

3. 网页布局

通过以上代码可实现网页布局,参考:https://www.w3school.com.cn/html/html_layout.asp。这时候,网页的基本雏形就已经有了。关于字体颜色、字体大小、背景颜色、对齐方式等是CSS的内容。

二、CSS基础

CSS (Cascading Style Sheets)是用于渲染HTML元素标签的样式。

1. CSS样式的三种方法

这里先给出两种方法的例子:

<html>
    <head>
        <style type="text/css">
            p{
                background: green;
            }
        </style>
    </head>
    <body>
        <p>这是内部样式</p>
        <p style="background: red">这是内联样式,内联样式优先级高于内部样式</p>
    </body>
</html>

除了内联样式内部样式,还有外部样式,即把style中的内容写在.css文件中,然后通过以下语句进行调用:

<link rel="stylesheet" type="text/css" href="style.css">

推荐一开始使用“内联样式”,比较直观直接,设计也方便。在设计中当遇到重复的样式多了,就可以采用“内部样式”和“外部样式”的方式,可多次调用。

参考资料:

[1] 使用CSS样式的三种方法

[2] https://www.runoob.com/w3cnote/html-import-css-method.html

2. 样式内容

字体大小和颜色、居中等内容参考:https://www.runoob.com/html/html-css.html

3. class和id

通常会定义一个class,然后重复调用样式,详细内容参考:CSS中的class与id区别及用法。对于专业或经常写网页的,可能会调用别人已经写好的CSS内容,即CSS框架。

三、其他

1. 调用公共内容

当一个网站建起来时,会发现不同HTML文件会有很多重复的部分,如网站logo,导航栏,版权声明等。这时候建议采用调用模板的方式,以免当要修改这些公共区域时需要修改多个HTML文件,而且容易遗漏修改。
一种调用的方法是:

<!--使用jquery调用公用html模板文件-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="page1"></div>
<script>
  $("#page1").load("templates/template1.html");
</script>

2. HTML和PHP混合编程时的注释

在HTML中的注释方法为<!--和-->:

<!-- 内容1 -->

在PHP中的注释方法为双斜杠:

<?php
// 内容2
?>

两者混合编程时,可以采用if判断来注释:

<?php if (0) { ?>
内容1
内容2
<?php } ?>

3. 注意事项

  • 换行最好用<br />,比较标准,而不用</br>、<br>、<br/>,虽然都有效果。
  • 公共模板里的链接时最好使用网站的绝对路径,不然很多链接会失效,因为默认的起始路径变成当前文件夹了。
  • 如果网页出现乱码,可以在头部增加编码方式:<meta charset="utf-8">。
117 次浏览

【说明:本站主要是个人的一些笔记和代码分享,内容可能会不定期修改。为了使全网显示的始终是最新版本,这里的文章未经同意请勿转载。引用请注明出处:https://www.guanjihuan.com

评论说明:
(1)在保留浏览器缓存的前提下,目前支持72小时自主修改或删除个人评论。如果自己无法修改或删除评论,可再次评论或联系我。如有发现广告留言,请勿点击链接,博主会不定期删除。
(2)评论支持Latex公式。把latexpage作为标签放在任何位置,评论中的公式可正常编译,示例:
$Latex formula$  [latexpage]

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注