html基本结构与元素列表 -

html文档结构

<html lang="en">
<!--头元素,它的内容是不会在页面中显示出来的,这是给浏览器和搜索引擎使用的-->
<head>
<!--    当前文档字符编码集-->
    <meta charset="UTF-8">
<!--    viewport:视口：是指当前文档在浏览器中可以被用户看到的部分-->
<!--    device-width:当前显示器屏幕的宽度-->
<!--    inital-scale=1.0  :缩放比例为1.0-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--    页面标题-->
    <title>Document</title>
</head>
<body>
<!--   body 中的内容是  主体元素，  这些内容会在页面中展示给用户看-->
<!--所有标签全部小写，html不区分大小写标签-->
<h2></h2>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

注释： 在html中作注释使用，让其他能够看懂代码的含义

元素和属性

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。需要闭合 eg：<h2></h2>

<!--  元素是 由双标签表示-->
<div>   里面放置元素</div>

元素结构

实例

<!--  元素是 由双标签表示-->
<div>   里面放置元素</div>
<div>
    <p>
        <span>
            <a href="">
                结构示例，层级包裹
            </a>
        </span>
    </p>
</div>

<!--一般网站结构-->
<!-- 头部、页眉-->
<div id="header">
    <ul>
        <li></li>
    </ul>
</div>
<!--页面主体-->
<div id="main">
    <ui>
        <li>    </li>
    </ui>
</div>
<!--页面页脚-->
<div id="footer">
    <ul>
        <li></li>
    </ul>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

一、什么是html语义化标签

语义化标签：让标签具有含义，让看到代码的人看到标签就知道这个代码大概写的是什么

二、语义化标签的特点
代码结构清晰，方便阅读，有利于团队合作开发。

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

有利于搜索引擎优化（SEO）

常见的语义化标签
<!--<title></title>定义文档标题-->
<!--<h1>to<h6>定义html文档标题-->
<!--    <p></p>定义段落-->
<!--    <br>定义简单的拆行-->
<!--    <acronym title=""></acronym>定义只取首字母的缩写-->
<!--<abbr title=""></abbr>定义缩写-->
<!--<address></address>定义文档作者或者拥有者的联系信息-->
<!--<b></b>定义粗文本-->
<!--<bdi></bdi>定义文本的方向，使其脱离周围文本的方向设置-->
<!--<bdo dir=""></bdo>定义文字方向-->
<!--<big></big>定义大号文本-->
<!--<blockquote></blockquote>定义长的引用-->
<!--<center></center>定义居中文本-->
<!--<cite></cite>定义引用-->
<!--<code></code>定义计算机代码文本-->
<!--<del></del>定义被删去文本-->
<!--<dfn></dfn>定义定义项目-->
<!--<em></em>强调文本-->
<!--<font></font>定义文本 的字体尺寸颜色-->
<!--<i></i>定义斜体文字-->
<!--<ins></ins>定义被插入文本-->
<!--<kbd></kbd>定义键盘文本-->
<!--<mark></mark>定义有记号的文本-->
<!--<meter></meter>定义预定义范围的度量-->
<!--<pre></pre>定义预格式文本-->
<!--<progress></progress>定义任何类型的任务进度-->

链接元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接与列表元素</title>
</head>
<body>
<!--target="_blank" 在新的页面中打开百度首页-->
<a href="baidu.com" target="_blank">百度</a>
<!--下载文件 自动重命名-->
<a href="345.txt" download="html.txt">午后残影</a>
<!--打电话-->
<a href="tel:13060055730">售后服务热线</a>
<!--发邮件-->
<a href="mailto:236641104@qq.com">发邮件</a>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

列表元素

实例

有序列表
<ol start="2">
    <li>html</li>
    <li>css</li>
    <li>php</li>
</ol>

运行实例 »

点击 "运行实例" 按钮查看在线实例

无序列表

实例

<dl>
    <dt>计算机</dt>
    <dd>用来计算的仪器 ... ...</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<ul>
    <li>html</li>
    <li>js</li>
    <li>css</li>
</ul>

运行实例 »

点击 "运行实例" 按钮查看在线实例

自定义列表

实例

<dl>
    <dt>计算机</dt>  
    <dd>用来计算的仪器 ... ...</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

运行实例 »

点击 "运行实例" 按钮查看在线实例