前端学习之HTML基础标签（1）_佳慧的成长小屋-优快云博客

HTML基础标签

渐进增强理念——设计网页前端的一种很好的思路。开始时制作出所有人都能使用的HTML内容和行为构建网页。然后再用CSS加入你的设计。最后用JavaScript添加额外的行为。右端CSS设计器，是设置你的标签等包含的部分的属性。标签的属性可以修改标签所定义的部分的背景颜色bgcolor，背景图像，对齐方式，垂直对齐方式等。文本的整体设置，多用下方的页面设置来进行。

下面是一些胡写乱画的代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML基础元素代码练习</title>

<!-- CSS在head里设置整个页面的样式 -->
<style type="text/css">
body,td,th {
    font-family: "宋体";
    font-style: normal;
    color: #529
}
body div {
}
body {
    background-color: rgb(252,218,196);
    background-image: url();
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
a:link {
    color: rgb(102,51,153);
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
</style>
<!-- CSS设置整个页面的样式 -->
</head>

<body>
<header role="banner" >
<nav role="navigation">  <!--nav是导航的标记，仅对重要的连接群使用-->
登陆 注册 <!--这是一个页眉-->
</nav>
</header>
<!--------------标签使用练习区------------>
<div> <!--一个通用容器可以用CSS来添加样式-->
<section><!--这是一个普通的区块-->
<p><b>这是粗体字</b></p>
<strong>这也是粗体字</strong>
<i>这是斜体字</i>
<em>这也是斜体</em>
<u>下划线</u>
<br>
分行</br>
<p>分段</p>
</section>
<article> <!--这是写文章的区块-->
<ol type="a">
   <li>有序列表标签1</li>
   <li>liujiahui2</li>
   <li>liujiahui3</li>
   <li>liujiahui4</li>
   <li>liujiahui5</li>
</ol>
<ul> <!--下面的title是一种属性，浏览器中，鼠标放上面就会出现提示字-->
   <li  title="好好学编程">无序列表标签1</li>
   <li><span style="">liujiahui2</span></li>
   <li><mark>标记内容</mark></li>
   <li><ins>添加内容</ins></li>
   <li><del>删除内容</del></li>
</ul>
<cite>引用于自己的名字哈哈</cite>
<p><progress max="100" value="1"> </progress> 学习编程1%中</p>
</article>
<aside role="complementary">
<h1>这是一个附注栏的标题</h1>
<p><h2>这是它的第二标题</p>
</h2>
<p>附注栏正文。</p>
<p>不过我真的有一个疑问，不同的区块有不同的语义，什么是语义呢？</p>
<p>不会用，它跟容器有什么不同呢</p>
</aside>
<address>QQ:2457394**</address><!--标注联系信息的-->
</div>
<p><footer>这是一 个页脚。放点什么吧 <small>&copy;免责声明</small></footer></p>
</body>

</html>