HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准语言之一。它提供了一种结构化的方式来描述网页的内容和外观，同时可以与其他技术（如CSS和JavaScript）结合使用以实现更丰富的效果。
HTML基础
HTML实际上就是一组标记（tag）的集合，这些标记用于指定文本的结构和样式。下面是一个基本的HTML模板，其中包含了最基本的HTML标记：
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my website.</p>
</body>
</html>在上面的代码中，</code>标记用于设置文档标题，会显示在浏览器窗口的标题栏上。<code><body></code>标记包含了文档的主要内容。<code><h1></code>和<code><p></code>标记用于表示标题和段落，分别用于创建文本的大标题和正文。</p><p>HTML标记</p><p>上面仅仅是一个最基本的HTML文档结构，实际上HTML标记无数，下面介绍一些比较常用的HTML标记：</p><h3>文字标记</h3><ul><li><code><h1></code>~<code><h6></code>：设置标题</li><li><code><p></code>：段落</li><li><code><strong></code>或<code><b></code>：加粗文字</li><li><code><em></code>或<code><i></code>：斜体文字</li><li><code><u></code>：下划线文字</li><li><code><strike></code>或<code><del></code>：删除线文字</li><li><code><sup></code>：上标</li><li><code><sub></code>：下标</li></ul><h3>链接标记</h3><ul><li><code><a></code>：链接</li><li><code><img></code>：图片</li></ul><h3>列表标记</h3><ul><li><code><ul></code>：无序列表</li><li><code><ol></code>：有序列表</li><li><code><li></code>：列表项</li></ul><h3>表格标记</h3><ul><li><code><table></code>：表格</li><li><code><thead></code>：表头</li><li><code><tbody></code>：表身</li><li><code><tr></code>：表行</li><li><code><th></code>：表头单元格</li><li><code><td></code>：表格单元格</li></ul><p>以上只是列举了一部分HTML标记，实际上HTML标记种类非常多，通过这些标记我们可以轻松的实现网页中的各种元素。(该纯属个人认为一些比较常用的标记，并不是所有标记)</p><p>CSS样式</p><p>HTML标记可以设置网页内容的结构，但是要让网页更漂亮，更有吸引力，CSS就显得尤为重要。</p><p>CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页样式的语言。它可以让我们更灵活地控制文本、图像、背景等元素的外观，以及布局等方面的细节。</p><p>CSS基础</p><p>实际上CSS也是由一组规则(rule)集合而成，如下：</p><pre>selector {
property: value;
property: value;
}</pre><ul><li><code>selector</code>：选择器，用于指定要应用样式的HTML元素。</li><li><code>property</code>：属性，用于指定要设置的样式属性。</li><li><code>value</code>：值，用于设置属性的值。</li></ul><p>例如，要将所有<code><h1></code>元素的文本颜色设置为红色：</p><pre>h1 {
color: red;
}</pre><p>此时，CSS会将HTML中所有<code><h1></code>元素的文本颜色都设置成红色。</p><p>CSS选择器</p><p>在CSS中，选择器是用于确定应该应用样式的HTML元素的标识符。下面是一些常用的CSS选择器：</p><ul><li>元素选择器：用于指定要应用样式的HTML元素，例如<code>h1, p, a</code>。</li><li>类选择器：用于指定要应用样式的具有相同类的HTML元素，例如<code>.header</code>。</li><li>ID选择器：用于指定要应用样式的具有相同ID的HTML元素，例如<code>#header</code>。</li><li>后代选择器：用于指定要应用样式的后代元素，例如<code>ul li</code>。</li><li>子元素选择器：用于指定要应用样式的直接子元素，例如<code>ul > li</code>。</li><li>伪类选择器：用于指定要应用样式的特定状态的元素，例如<code>:hover</code>。</li></ul><p>以上只是列举了一些常用的CSS选择器，实际上CSS选择器还有很多种，他们可以结合使用，以实现更复杂的选择效果。</p><p>总结</p><p>HTML和CSS是前端开发必学的两门技术，通过学习这两门技术可以轻松的实现网页的搭建和美化。当然还有JavaScript能够帮助我们实现网页中更复杂的交互效果，将三种技术结合使用可以实现功能更加强大的网页。</p><p>以上就是简单聊聊html用法的详细内容，更多请关注其它相关文章！</p></span>
</div>
</article>
<script type="text/javascript" src="/index.php?s=hits-show-id-42831-type-insert-sid-news" charset="utf-8"></script><aside class="swnetnews">
<div class="lis">
<span><i>推荐内容</i></span>
<ul>
<li><a href="/doc/6547.html" title="c语言整除符号是什么？" target="_blank">c语言整除符号是什么？</a></li><li><a href="/doc/3794.html" title="oracle 怎么改用户名密码" target="_blank">oracle 怎么改用户名密码</a></li><li><a href="/doc/8260.html" title="微信完全退出关闭的步骤讲解" target="_blank">微信完全退出关闭的步骤讲解</a></li><li><a href="/doc/10385.html" title="将你的 Python 脚本转换为命令行程序" target="_blank">将你的 Python 脚本转换为命令行程序</a></li><li><a href="/doc/8781.html" title="用 Python 写一个电脑监控程序" target="_blank">用 Python 写一个电脑监控程序</a></li><li><a href="/doc/10348.html" title="分享PHP函数使用小工具（附代码示例）" target="_blank">分享PHP函数使用小工具（附代码示例）</a></li><li><a href="/doc/8193.html" title="五分钟读懂PHP匿名函数（实例详解）" target="_blank">五分钟读懂PHP匿名函数（实例详解）</a></li><li><a href="/doc/6397.html" title="带大家了解PHP弱引用的知识" target="_blank">带大家了解PHP弱引用的知识</a></li><li><a href="/doc/1449.html" title="pycharm能干嘛" target="_blank">pycharm能干嘛</a></li><li><a href="/doc/5504.html" title="unsigned int几个字节" target="_blank">unsigned int几个字节</a></li> </ul>
</div>
</aside>
</main>
<script>
// first, find all the div.code blocks
document.querySelectorAll('pre').forEach(el => {
// then highlight each
hljs.highlightElement(el);
hljs.lineNumbersBlock(el);
});
</script>
<link rel="stylesheet" type="text/css" href="/kan/css/basezb.css">
<script type="text/javascript" src="/kan/js/read.js"></script>
<div style="display:none">
<div class="login-box" id="login-dialog">
<div class="login-top"><a rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div>
<div class="login-form" id="nav-signin">
<!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div> -->
<div class="login-box-form" id="con_login_1">
<form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;">
<p class="int-text">
<input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p>
<p class="int-text">
<input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" >
</p>
<p class="int-info">
<label class="ui-label"> </label>
<label for="agreement" class="ui-label-checkbox">
<input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000">
<input type="hidden" name="notforward" id="notforward" value="1">
<input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label>
<a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p>
<p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/kan/js/foot_js.js"></script>
<div id="footer">
<div class="w1200">
<p class="tips_text">本网站为非赢利性站点，本网站所有内容均来源于互联网相关站点自动搜索采集信息，相关链接已经注明来源。</p>
<p class="tips_text">Copyright © 2004-2018 https://www.sxiaw.com. All Rights Reserved.<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?fa236be8ec7680639fbd4ee307fd0c69";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<a href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023001793号-1</a></p>
</div>
</div>
</body>
</html>
