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。内容未经允许不得转载,或转载时需注明来源: 创新互联

绵阳服务器托管