1.网页标签

1.什么是html?

TML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

支持HTML5的浏览器：微软、google、苹果、Opera、Mozilla、(支持跨平台、市场需求基本都可以)

一、W3c标准：

1.html网页结构。类似房子主体

2.网页美化。类似房子装修

3.JavaScript(js):网页交互

<!-注释标签-> 解释说明、浏览器不显示：

css的注释：//注释 /*注释*/

二、html的结构：

<!DOCTYPE html>  <!--告诉浏览器当前文件采用HTML文本编写-->
    <head>
        <!--设置字符的编码utf-8-->
        <meta charset="utf-8">
        <!--网页三要素：标题、关键字、描述-->
        <title>标题标签</title>  
        <!--设置网页的搜索关键字，content里写搜索的关键字，用,分隔开-->
        <meta name="Keywords" content="填写关键字">
        <!--设置网站的的描述，content里写网站的说明-->
        <meta name="Description" content="描述">
    </head>
    <!--网页显示的内容-->
    <body>
        <!--网页内容标:h1-h6-->
        <h1>网页内容标题1</h1>
        <h2>网页内容标题2</h2>
        <h3>网页内容标题3</h3>
        <h4>网页内容标题4</h4>
        <h5>网页内容标题5</h5>
        <h6>网页内容标题6</h6>
    </body>
</html>

4、段落标签：

   <p>段落标签</p><!--单独占一行-->
        <!--李白的静夜思为例-->
         <h3>《静夜思》</h3>
        <p>床前明月光，疑是地上霜。举头望明月，低头思故乡</p>

5、水平分割线 :<hr>

6、换行标签<br/>

7、字体标签：

　　<font> 规定文本的字体、字体尺寸、字体颜色。
    <标签名 属性1 = “属性值1” 属性2 = “属性值2” 属性3 = “属性值3” 。。。>  内容   </标签名>
　　<em>强调字体为斜体
　　<i>斜体
   <b>粗体
　　<strong>加粗字体

8、<img>图片标签：

图片标签img用于在HTML页面添加图片、

img标签的src和alt两个重要属性，src属性用于指定图片的路径。

alt属性用于设置图片的默认信息、图片不显示的时候显示的文字

title属性是：鼠标悬停在图片上的时候时候显示的字。

width宽度和heigh高度，单位：px；

--》绝对路径和相对路径：

    绝对路径是指文件在硬盘上真正存在的路径。
        <img src=“d:\img\1.png” alt="图片的信息描述" />
        <img src=“www.baidu.com\img\1.png” alt="图片的信息描述" />
    相对路径，就是相对于自己的目标文件位置。
        <img src="img/img1.png"  alt=""  title=""/>
        src路径中 ./：表示当前文件路径
        src路径中 ../：表示当前文件的上一级目录
    ps:相对路径使用“/”字符作为目录的分隔字符，而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。

　　9、超级链接

<h3>图像超级链接：</h3>
        <!--图像超级链接-->
        <a href="wecome.html" target="_blank"> 
            <img src="img/01.jpeg" width="500" alt="欢迎来到这个世界"  title="世界"/>
        </a>
        <p>
        <!--文本超级链接-->
        <a href="wecome.html" target="_blank" >欢迎来到这个世界 </a>
        </p>

　　10、邮件链接：

详细说下a标签：

1、href="#"的作用：页面中有滚动，可以直接回到顶部。

<a href="#">回到顶部</a>

2、href="url"的作用

1）url为绝对路径

//跳转到百度页面
<a href="http://baidu.com">跳转到百度网</a>

2）URL为相对路径

<a href="/img/xx.img">图片链接</a>

3）锚点

页内跳转

//点击此处会跳到标记1
<a href="#1">锚点1</a>
//点击此处会跳到标记2
<a href="#2">锚点1</a>

<div id="1">标记1</div>
<div id="2">标记2</div>

页外跳转

假如有xx1.html，xx2.html

xx1.html
//此时就会跳转到2.html的标记1处
<a href="xx2.html/#1">锚点1</a>
<div id="1">标记1</div>

2.html
<div id="1">标记1</div>

3、href="JavaScript:;"（javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好）

//void是一个操作符，void(0)返回undefined，地址不发生跳转，会执行onclick里面的方法
<a href="javascript:void(0)" onclick="subFtion();">停在当前页面</a>
//#是标签内置的一个方法，代表top的作用。点击网页后返回到页面的最顶端。
<a href="#" onclick="subFtion();">返回顶部</a>
//js函数后return false，页面不发生跳转，执行后还是在页面的当前位置
<a href="#" onclick="subFtion();return false;">停在当前页面</a>

posted @ 2022-08-01 16:46 墨锦念阅读(310) 评论(0) 编辑收藏举报

刷新页面返回顶部

Aure

1.网页标签

公告