温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML文档结构

发布时间:2020-08-07 16:56:43 来源:网络 阅读:290 作者:bigbeatwu 栏目:web开发

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**

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI