html基础知识 - - php中文网博客

首页 > 博客列表 > html基础知识

博主信息

博文 15

粉丝 0

访问量 15006

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

html基础知识

乐作人生

原创

780人浏览过

html文档结构

<!-- 告诉浏览器这是一个html5的文档 -->
<!DOCTYPE html>
<!-- <html></html>:跟标签，根元素，代表整个html文档 -->
<!-- lang="en":属性，表示当前页面的主要语言。en表示英文；zh-CN表示中文 -->
<html lang="en">
<!-- 头元素：它的内容不在页面中显示，给浏览器和搜索引擎使用 -->
<head>
 <!-- 当前文档字符的编码集 -->
 <meta charset="UTF-8" />
 <!-- viewport：视口，当前文档在浏览器中可以被用户看到的部分 -->
 <!-- width=device-width：表示设备宽度；initial-scale表示初始缩放比例 -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>0725HTML基础知识</title>
</head>
<!-- 主体元素：用户看到和感兴趣的内容 -->
<body>
 <!-- 所有标签全部小写，html不区分大小写 -->
 <!-- 标题 -->
 <h4>html文档结构</h4>
</body>
</html>

元素与属性的关系

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>0725HTML基础知识</title>
</head>
<style>
 nav ul li {
   float: left;
   list-style: none;
   margin-right: 20px;
 }
 nav ul {
   display: inline-block;
 }
</style>
<body>
 <!-- header：头部 -->
 <header>
   <!-- nav:导航 -->
   <nav>
     <!-- 有序列表 -->
     <ul>
       <li><a href="">首页</a></li>
       <li><a href="">关于我们</a></li>
       <li><a href="">联系我们</a></li>
     </ul>
   </nav>
 </header>
 <!-- main:内容 -->
 <main>
   <!-- 三大通用属性：style,id,class -->
   <div style="background-color: #dbdbdb; margin-top: 500px;">
     <span>学习</span>
     <p id="as">2<sup>4</sup>=16</p>
     <p id="xa">3<sub>4</sub></p>
   </div>
 </main>
 <!-- footer：底部 -->
 <footer>
   <ul>
     <li><a href="">网站首页</a></li>
     <li><a href="">友情链接</a></li>
   </ul>
 </footer>
</body>
</html>

语义化的结构元素

<!-- 头部 -->
<header></header>
<!-- 主体内容 -->
<main></main>
<!-- 底部 -->
<fotter></fotter>

语义化的文本元素

<section class="ads" style="color: red;" id="mj">广告</section>
<article class="content">内容区</article>
<section class="recommend">推荐</section>
<address>地址</address>
<!-- 进度条 -->
<progress value="60" max="100">已完成60%</progress>
<hr />
<!-- 删除线 -->
<p>原价：<del>16元</del>，现价<strong>8元</strong></p>

链接元素

 <div>
   <!-- _blank:在新页面中打开；_self:当前页面打开 -->
   <a href="" target="_blank">中文网</a>
   <!-- 下载文件 -->
   <a href="0725.md" download="html.md">下载</a>
   <!-- 打电话 -->
   <a href="tel:13898****87">热线电话</a>
   <!-- 发送邮件 -->
   <a href="mailto:4898734@qq.com">发送邮件</a>
   <!-- 锚点 -->
   <a href="#mj">广告</a>
 </div>

列表元素

 <div>
   <!-- 有序列表 -->
   <ul>
     <li>星期一</li>
     <li>星期二</li>
     <li>星期三</li>
   </ul>
   <!-- 无序列表 -->
   <ol start="3">
     <li>周一</li>
     <li>周二</li>
     <li>周三</li>
   </ol>
   <!-- 自定义列表 -->
   <dl>
     <dt>学号</dt>
     <dd>20200102</dd>
     <dt>姓名</dt>
     <dd>周雪</dd>
     <dt>性别</dt>
     <dd>女</dd>
   </dl>
 </div>

批改老师：

天蓬老师

批改状态：合格

老师批语：非常认真

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html基础知识

2020-08-04 00:09:48