집 > 기사 > 웹 프론트엔드 > html 태그에 대한 자세한 설명(1)

html 태그에 대한 자세한 설명(1)

高洛峰원래의: 2017-02-16 14:05:591506검색

1.기본 태그

<!DOCTYPE html>               <!--表示文本类型-->
<html>                        <!--<html></html>表示创建一个html文档-->
    <head>                    <!--<head></head>设置文档标题和其它在网页中不显示的信息-->
        <title>标题</title>   <!--<title></title>设置文档的标题，就是最上方的名字-->
    </head>
    <body>                    <!--<body></body>设置文档的内容-->
        <p>原创作者：雨点的名字</p>
   </body>
</html>

2.본문에서 자주 사용되는 태그

댓글 태그 단축키: Ctrl+Shift+ /, 저는 myeclipse를 사용합니다

h6 글꼴 내림차순

및 🎜>

3. 사진 태그

효과는 다음과 같습니다.

<!DOCTYPE html>
<head>
<title>来吧</title>
</head>
<body>
<!--这是一个注释标签，页面上你看不到-->
<h4>我是标题哦</h4>
<hr/>
<p>我是p标签<b>我自动加粗的</b></p><br/>
<s>我是删除线</s>
<u>我是下划线</u><br/>
<pre class="brush:php;toolbar:false">  我是预编译，
         我怎么输它就怎么显示

참고: src 속성은 태그에 일반적으로 사용됩니다. 이미지의 소스와 이름은 이미지 위에 마우스를 놓았을 때 표시되는 텍스트를 설정하는 데 사용됩니다. 차트가 정상적으로 표시되지 않는 경우 이미지 설명, width 및 height 속성을 사용하여 이미지의 너비와 높이를 설정합니다.

효과는 다음과 같습니다.

4: 링크 태그

(1) 기본 링크 소개 html标签详解（1） / A & gt; 라벨 구현 하이퍼링크

<!DOCTYPE html>
<head>
<title>美女图片</title>
</head>
<body>
<img src="first.jpg"   title="就问你美不美"  alt="这里显示第一张图"  width="200" height="300">
<img src="second .jpg" title="身材太好了"   alt="这里显示第二张图"  width="200" height="300">
</body>
</html>

참고: 하이퍼링크가 활성화될 때 표시되는 텍스트는 href 속성을 사용합니다. 하이퍼링크의 점프 방법을 지정합니다. 여기서 _self는 새 창을 열지 않고 현재 창에서 점프 후 페이지를 여는 것을 의미하며(기본값) _blank는 다음 페이지를 열기 위해 새 창을 여는 것을 의미합니다.

세부정보: 페이지의 모든 하이퍼링크가 동일한 방식으로 이동하는 경우 태그에서 균일하게 구성할 수 있습니다.

를 태그에 추가하면 페이지의 모든 하이퍼링크가 원래 창에 표시됩니다.

페이지의 모든 하이퍼링크가 새 창에 표시됨을 나타냅니다.

(2) 태그를 통한 페이지 위치 지정

html标签详解（1） 사례 : 페이지 상단으로 돌아가기

<!DOCTYPE html>
<html>
    <head>
        <title>我是a标签</title>
    </head>
    <body>
        <!-- 版权声明-->
        <a href="http://www.baidu.com/" 
           title="百度一下，你就知道" target="_self">百度</a>
        <a href="http://www.163.com" 
           title="网易新闻" target="_blank">网易</a>
   </body>
</html

참고: 상단으로 돌아가기 클릭 시 페이지는 id="top" 태그 위치에 위치하게 되며, 이것은 id 속성을 통해 배치됩니다. 여기 웹 페이지에는 입력된 항목이 거의 없으며 테스트하려는 경우 둘 사이에 다른 태그를 추가하여 효과를 얻을 수 있습니다. 당연합니다

(3) a 태그를 통해 다운로드

참고: 이미지를 직접 다운로드할 수 없는 경우, 이미지를 클릭하면 링크를 클릭하면 자동으로 문서 및 압축파일을 다운로드할 수 있습니다. , 페이지에서

<!DOCTYPE html>
<html>
    <head>
        <title>网页定位</title>
    </head>
    <body>
        <p id="top">这里是顶部</p>
        <p>原创作者：蜗牛</p>
        <p>原创作者：蜗牛</p>
        <a href="#top">返回顶部</a>
   </body>
</html>

를 다운로드하는 대신 이미지가 열립니다. 이미지를 다운로드하려면 단계를 추가해야 합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>下载</title>
    </head>
    <body>
        <a  href="6用户注册项目.docx">点击下载文档</a>
        <a  href="2017-1-4Jquery.rar">点击下载压缩文件</a>
        <a  href="second .jpg">点击图片</a>
   </body>
</html>

5: html 프레임

<body>
<a href="first.jpg" download="first.jpg">点击图片</a> <!--download实现图片下载功能-->
</body>

다음은 3개 프레임의 HTML입니다

1: head.html

<!DOCTYPE html>
<head>
<title>Html框架</title>    <!--注意;搭建框架是不能出现<body></body>标签的，所以要先删除<body>标签-->
</head>
<frameset rows="25%,75%"> <!--frameset用来定义一个框架集 ，row代表有上下两个界面，占比为25%和75%-->
          <frame src="head.html" name="heand"/> <!--frame代表一个界面，界面内容为head.html中内容-->
          <frameset cols="25%,75%">    <!--在下面在定义一个框架级，再分为左右两部分 cols代表列-->
                <frame src="left.html" name="left"/>
                <frame src="center.html" name="body"/> <!--定义name="body"是有意义的，方便调用-->
           </frameset> 
     </frameset><noframes></noframes>      <!--noframes还未知意义，删了照样运行所以知道的朋友可以给我留言-->
</html>

2:left.html

<!DOCTYPE html>
<head>
<title>head.html</title>
</head>
<body>
    <h1 align="center" style="color:#FF0000; font-size:50 ">欢迎进入本管理系统</h1>
</body>
</html>

3:center .html

<!DOCTYPE html>
<head>
<title>无标题文档</title>
</head>
<body>
    <a href="https://www.baidu.com" target="body">百度</a>    <!--这里target="body"，代表当点击百度时，内容会在name="body"的界面中出现-->
    <a href="http://www.163.com" target="body">网易</a>
</body>
</html>

실행 결과는 다음과 같습니다.

html 태그에 대한 더 자세한 설명은 (1) 관련 글은 PHP 중국어 홈페이지를 주목해주세요!

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：HTML의 입문 개념다음 기사：HTML의 입문 개념

관련 기사

더보기