HTML和CSS是构建网页的两种基本技术，HTML（超文本标记语言）用于创建网页的结构，而CSS（层叠样式表）用于控制网页的布局和外观，在本教程中，我们将详细介绍如何使用HTML和CSS来创建一个基本的网页。
1、创建HTML文件
我们需要创建一个HTML文件，可以使用任何文本编辑器来创建这个文件，例如Notepad、Sublime Text或者Visual Studio Code，将文件保存为index.html，并在文件中输入以下代码：
我的网页
欢迎来到我的网页！
这是一个简单的HTML和CSS示例。
这段代码定义了一个基本的HTML结构，包括</code>标签来设置网页标题，以及一个<code><link></code>标签来引入外部CSS文件（<code>styles.css</code>），在<code><body></code>标签中，我们添加了两个标签：一个<code><h1></code>标题和一个<code><p></code>段落。</p><p>2、创建CSS文件</p><p>接下来，我们需要创建一个CSS文件来控制网页的布局和外观，将文件保存为<code>styles.css</code>，并在文件中输入以下代码：</p><pre class="brush:css;toolbar:false">
body {
fontfamily: Arial, sansserif;
lineheight: 1.6;
}
h1 {
color: #333;
}
p {
color: #666;
}
</pre><p>这段代码定义了一些基本的CSS样式，我们为<code><body></code>元素设置了字体家族（Arial）和行高，我们为<code><h1></code>元素设置了颜色（深灰色），并为<code><p></code>元素设置了颜色（浅灰色）。</p><p>3、在浏览器中查看结果</p><p>现在，我们可以在浏览器中查看我们的网页了，双击打开<code>index.html</code>文件，你应该会看到一个包含标题和段落的基本网页，标题的颜色应该是深灰色，段落的颜色应该是浅灰色。</p><p>4、修改CSS样式</p><p>要修改网页的外观，只需在CSS文件中更改样式即可，要将标题的颜色更改为红色，将段落的颜色更改为蓝色，可以将CSS文件中的代码更改为：</p><pre class="brush:css;toolbar:false">
body {
fontfamily: Arial, sansserif;
lineheight: 1.6;
}
h1 {
color: red;
}
p {
color: blue;
}
</pre><p>保存CSS文件后，刷新浏览器，你应该会看到标题的颜色已经更改为红色，段落的颜色已经更改为蓝色。</p><p>5、添加更多内容和样式</p><p>要向网页添加更多内容和样式，只需在HTML文件中添加更多的标签，并在CSS文件中定义相应的样式即可，要添加一个图片和一个链接，可以将HTML文件中的代码更改为：</p><pre class="brush:html;toolbar:false">
<div class="container">
<img src="myimage.jpg" alt="我的图片">
<a href="https://www.example.com" class="button">点击这里</a>
</div>
</pre><p>在CSS文件中添加以下代码：</p><pre class="brush:css;toolbar:false">
.container {
textalign: center;
}
img {
width: 300px;
height: auto;
}
</pre><p>这段代码首先为图片添加了一个类名（<code>container</code>），然后在CSS文件中为这个类名定义了居中的文本对齐方式，接下来，我们为图片添加了一个宽度（300像素）和自动高度，以确保图片在不同设备上都能正确显示，我们为链接添加了一个类名（<code>button</code>），并在CSS文件中为这个类名定义了样式。</p> <br>
本文标题：htmlcss如何使用 <br>
链接分享：<a href="http://xiwangwangguoyuan.com/article/dhjpdcp.html">http://xiwangwangguoyuan.com/article/dhjpdcp.html</a>
</div>
</div>
<div class="other">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/copsidp.html">100%让你在10分钟内学会如何用Python将数据批量的插入到数据库</a>
</li><li>
<a href="/article/copsigs.html">美国特价云主机怎么购买</a>
</li><li>
<a href="/article/copsiip.html">windows7手机模拟器?（windows7手机模拟器)</a>
</li><li>
<a href="/article/copsiig.html">数据中心的安全措施分为哪几层？</a>
</li><li>
<a href="/article/copsiid.html">主域名服务器名举例？网站的服务器名</a>
</li> </ul>
</div>
</div>
<footer>
<div class="message">
<div class="mess container">
<p>免费获取网站建设与品牌策划方案报价</p>
<span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上云锦诚科技。</span>
<form action="">
<input type="text" class="ipt1" placeholder="联系人">
<input type="text" class="ipt2" placeholder="联系电话">
<textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"></textarea>
<a href="">提交需求</a>
</form>
</div>
</div>
<div class="footA">
<div class="footAs container">
<ul>
<h3>联系我们</h3>
<b>028-86922220</b>
<li>手机：13518219792</li>
<li>地址：成都高新区尚雅路9号2栋16层1619号</li>
<li class="hr1"></li>
<li>四川德阳网站建设网站seo优化公司</li>
</ul>
<ul>
<h3>网站建设服务</h3>
<li>网页设计</li>
<li>网站制作</li>
<li>网站开发</li>
</ul>
<ul>
<h3>网站推广服务</h3>
<li>营销网站建设</li>
<li>百度快速排名</li>
<li>整站网站推广</li>
</ul>
<ul>
<h3>网站运维服务</h3>
<li>基础维护</li>
<li>网站改版</li>
<li>网站维护</li>
</ul>
<ul>
<h3>FOLLOW US</h3>
<li class="hr2"></li>
<li>
<dd class="fl"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>
<dd class="fr"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>
</li>
</ul>
</div>
<div class="link container">
友情链接：
<a href="http://www.gyanhua.com/" title="成都喷绘" target="_blank">成都喷绘</a> <a href="https://www.cdcxhl.com/" title="网站建设公司" target="_blank">网站建设公司</a> <a href="http://www.cqcxhl.com/" title="重庆网站建设" target="_blank">重庆网站建设</a> <a href="http://www.jgbui.com/" title="彭州柴油发电机" target="_blank">彭州柴油发电机</a> <a href="http://www.lsfdjzy.com/" title="乐山康明斯发电机" target="_blank">乐山康明斯发电机</a> <a href="https://www.cdcxhl.com/weihu/safeguard/" title="网站维护报价" target="_blank">网站维护报价</a> <a href="http://chengdu.cdcxhl.com/" title="营销型网站建设" target="_blank">营销型网站建设</a> <a href="http://www.scyanting.com/" title="scyanting.com" target="_blank">scyanting.com</a> <a href="http://www.schzyjs.com/" title="成都喷绘" target="_blank">成都喷绘</a> <a href="http://www.wjzwz.com/" title="温江做网站" target="_blank">温江做网站</a> </div>
</div>
<div class="footB">
<div class="container">
<div class="fl">
Copyright © 2022 成都云锦诚科技有限公司
四川网站建设公司-选网站建设公司云锦诚科技！国内专业的网站制作公司！
</div>
<div class="fr">
All Rights Reserved 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024117194号-1</a>
</div>
</div>
</div>
</footer>
</body>
</html>
<script>
$(".con img").each(function(){
var src = $(this).attr("src"); //获取图片地址
var str=new RegExp("http");
var result=str.test(src);
if(result==false){
var url = "https://www.cdcxhl.com"+src; //绝对路径
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script>