HTML文档结构-创新互联

1.基本结构：

为神木等地区用户提供了全套网页设计制作服务，及神木网站建设行业解决方案。主营业务为成都网站设计、网站制作、神木网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

<html> //文件开始标志，表示网页文档的开始
<head> //文件头，标题，主题
............ //文件头内容
<meta charset="utf-8"> //网页的编码
</head> //文件头结束标记
<body> //文件主体开始标志
............. //文件主体内容
</body> //文件主体结束
</html> //文件结束标志
<!-- --> //注释

2.HTML标题标签

（1）<h2>,<h3>,<h4>,<h5>,<h6>,<h7>

<body>
<h2>个人主页</h2> //字体由大到小，带有间距
<h3>登录</h3>
<h4>登录</h4>
<h5>登录</h5>
<h6>登录</h6>
<h7>登录</h7>
</body>

（2）<p></p>

<body>
<h2>html基本结构</h2>
<p>
       超文本标记语言，标准通用标记语言下的一个应用。
<br />“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
<br />超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

// <br />：换行
</p>

<p>10>5</p>  //大于小于，段落间有间距

<p>10 > 5</p>
<p>10<5</p>

</body>

<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开

3.语义标签

（1）<div>标签 块元素，表示一块内容，没有具体的语义。

<div>
       超文本标记语言，标准通用标记语言下的一个应用。
<br />“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
<br />超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
</div>

<div>
       <div>
    <h2>div标签</h2>
    </div>
    <div>超文本标记语言</div>
</div>

//<div>表示块，块与块之间没有间距，可以嵌套，而<p>不可以嵌套，

（2）<span>标签 行内元素，表示一行的一小段内容，没有具体的语义。

4.图片标签

<p>
       <span>超文本标记语言，标准通用标记语言下的一个应用。</span>

 // <span> ：能在<p>里的某一段设置一个样式，本身不带有样式
</p>

（3）含样式和语义的标签

<em>标签行内元素，表示语气中的强调词，斜体
<i> 行内元素，表示专业词汇，斜体
<b>行内元素，表示加粗，关键词
<strong>行内元素，表示非常重要的内容，整体加粗

<p>
       <span><b>超文本标记语言，标准通用标记语言下的一个应用。</b></span>
<br /><strong>“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
<br />超文本标记语言的结构包括“头”部分（英语：<em>Head</em>）、和“主体”部分（英语：<i>Body</i>），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容</strong>
</p>

**（4）语义化的标签**

就是布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，如：h2表示标题，p表示段落，ul,li表示列表，a表示链接，dl,dt,dd表示定义列表

（5）图片标签

src属性定义图片的引用地址
alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会使用

<img src="image/路飞1.jpg" alt="我要成为海贼王的男人" />
<img src="image/biu.gif" alt="邓紫棋.gif" />
<img src="C:\Users\雄少\Pictures\ps\新建文件夹\like.gif" alt="比个like你" />

//相对路径： ./表示当前目录，可以省略 ../表示上一级目录
//绝对路径：最好用相对路径，在别的地方也可以用

5.HTML链接标签

（1）<a>标签可以在网页上定义一个链接地址，它的常用属性有

href属性 定义跳转的地址

title属性 定义鼠标悬停时弹出的提示文字框

target属性 定义链接窗口打开的位置，target=“_self"缺省值，新页面替换原来的页面，在原来位置打开，target="_blank"新页面会在新开的一个浏览器窗口打开

<img src="image/路飞1.jpg" alt="我要成为海贼王的男人" />

<img src="image/biu.gif" alt="邓紫棋.gif" />

<img src="C:\Users\雄少\Pictures\ps\新建文件夹\like.gif" alt="比个like你" />

<a href="link.html" target="_self">主页</a> -

<a href="https://www.ishuhui.com/comics/anime/1" title="鼠绘网站" target="_blank">
    <img src="image/海贼王.jpg" alt="海贼王logo">
</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#">回到顶部</a>

**6.HTML列表**

（1）有序列表：<ol>
<li></li>
</ol>
//快捷写法：ol>li*3

（2）无序列表：<ul>
<li></li>
</ul>
//快捷写法：ul>(li>a)*3

<h2>有序列表</h2>

<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ol>

<ul>
    <li><a href="http://sports.qq.com/nba/" target="_blank">腾讯NBA</a></li>
    <li><a href="https://v.qq.com/" target="_blank">腾讯视频</a></li>
    <li><a href="https://movie.douban.com/" target="_blank">豆瓣电影</a></li>
</ul>

（3）定义列表：通常用于术语的定义。<dl>表示列表的整体，<dt>表示术语的题目，<dd>表示术语的解释，一个dl可以有多高题目和解释

<dl>
<dt>html</dt>
<dd>负责页面结构</dd> //首行缩进
<dt>css</dt>
<dd>负责页面表现</dd>
<dt>javascript</dt>
<dd>负责页面行为</dd>
</dl>

*//简写：dl>(dt+dd)3**

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文题目：HTML文档结构-创新互联
网页链接：https://www.cdcxhl.com/article0/pipoo.html

成都网站建设公司_创新互联，为您提供网站维护、App开发、响应式网站、静态网站、建站公司、外贸网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

绵阳服务器托管

商城网站知识

分类信息网