웹 프론트엔드 HTML 튜토리얼 html 태그에 대한 자세한 설명(1)

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

Feb 16, 2017 pm 02:05 PM
HTML 태그

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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Go 언어에서 정규식을 사용하여 HTML 태그 콘텐츠를 추출하는 방법 Go 언어에서 정규식을 사용하여 HTML 태그 콘텐츠를 추출하는 방법 Jul 14, 2023 pm 01:18 PM

정규식을 사용하여 Go 언어에서 HTML 태그 콘텐츠를 추출하는 방법 소개: 정규식은 강력한 텍스트 일치 도구이며 Go 언어에서도 널리 사용됩니다. HTML 태그를 처리하는 시나리오에서 정규식은 필요한 콘텐츠를 빠르게 추출하는 데 도움이 될 수 있습니다. 이 기사에서는 정규식을 사용하여 Go 언어에서 HTML 태그의 내용을 추출하는 방법을 소개하고 관련 코드 예제를 제공합니다. 1. 관련 패키지 소개 먼저 관련 패키지인 regexp 및 fmt를 가져와야 합니다. 정규식 패키지는 다음을 제공합니다

Python 정규식을 사용하여 HTML 태그를 제거하는 방법 Python 정규식을 사용하여 HTML 태그를 제거하는 방법 Jun 22, 2023 am 08:44 AM

HTML(HyperTextMarkupLanguage)은 웹 페이지를 생성하기 위한 표준 언어로, 텍스트, 이미지, 표, 링크 등과 같은 페이지의 다양한 요소를 설명하기 위해 태그와 속성을 사용합니다. 그러나 HTML 텍스트를 처리할 때 후속 처리를 위해 텍스트 내용을 빠르게 추출하는 것은 어렵습니다. 이때 Python에서 정규식을 사용하여 HTML 태그를 제거하면 일반 텍스트를 빠르게 추출할 수 있습니다. Python에서는 일반 테이블

PHP의 문자열에서 HTML 태그를 제거하는 방법은 무엇입니까? PHP의 문자열에서 HTML 태그를 제거하는 방법은 무엇입니까? Mar 23, 2024 pm 09:03 PM

PHP는 웹 사이트 개발 및 백엔드 애플리케이션 개발에 널리 사용되는 일반적으로 사용되는 서버 측 스크립팅 언어입니다. 웹사이트나 애플리케이션을 개발할 때 HTML 태그를 문자열로 처리해야 하는 상황에 자주 직면하게 됩니다. 이 기사에서는 PHP를 사용하여 문자열에서 HTML 태그를 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. HTML 태그를 제거해야 하는 이유는 무엇입니까? 사용자 입력이나 데이터베이스에서 얻은 텍스트를 처리할 때 HTML 태그가 포함되는 경우가 많습니다. 때로는 텍스트를 표시할 때 이러한 HTML 태그를 제거하고 싶을 때가 있습니다.

PHP에서 HTML 태그를 이스케이프하는 방법 PHP에서 HTML 태그를 이스케이프하는 방법 Feb 24, 2021 pm 06:00 PM

PHP에서는 htmlentities() 함수를 사용하여 html을 이스케이프할 수 있으며, 이는 문자를 HTML 엔터티로 변환할 수 있습니다. 구문은 "htmlentities(string,flags,character-set,double_encode)"입니다. 또한 PHP에서 html_entity_decode() 함수를 사용하여 html을 이스케이프 해제하고 HTML 엔터티를 문자로 변환할 수 있습니다.

Java의 특정 문자열에서 HTML 태그를 제거하는 방법은 무엇입니까? Java의 특정 문자열에서 HTML 태그를 제거하는 방법은 무엇입니까? Aug 29, 2023 pm 06:05 PM

String은 Java의 최종 클래스이며 불변입니다. 즉, 객체 자체는 변경할 수 없지만 객체의 참조는 변경할 수 있습니다. HTML 태그는 String 클래스의 replacementAll() 메서드를 사용하여 지정된 문자열에서 제거할 수 있습니다. 정규식을 사용하여 특정 문자열에서 HTML 태그를 제거할 수 있습니다. 문자열에서 HTML 태그를 제거한 후 문자열을 일반 텍스트로 반환합니다. 구문 publicStringreplaceAll(Stringregex,Stringreplacement) 예 publicclassRemoveHTMLTagsTest{&nbs

HTML 테이블에서 HTML 태그를 사용하는 방법은 무엇입니까? HTML 테이블에서 HTML 태그를 사용하는 방법은 무엇입니까? Sep 08, 2023 pm 06:13 PM

테이블에 HTML 태그를 쉽게 추가할 수 있습니다. HTML 태그는 <td> 태그 안에 배치되어야 합니다. 예를 들어 <td> 태그 내에 단락 <p>…</p> 태그나 사용 가능한 기타 태그를 추가합니다. 구문 다음은 HTML 테이블에서 HTML 태그를 사용하기 위한 구문입니다. <td><p>컨텍스트 단락</p><td>예제 1 HTML 테이블에서 HTML 태그를 사용하는 예는 다음과 같습니다. <!DOCTYPEhtml><html><head&g

기본 HTML 태그를 확인하는 PHP 정규식 방법 기본 HTML 태그를 확인하는 PHP 정규식 방법 Jun 24, 2023 am 08:07 AM

PHP는 정규식 기능을 지원하고 입력 데이터의 유효성을 빠르게 확인할 수 있는 효율적인 웹 개발 언어입니다. 웹 개발에서 HTML은 일반적인 마크업 언어이며 HTML 태그의 유효성을 검사하는 것은 웹 양식 유효성 검사를 위한 매우 중요한 방법입니다. 이 기사에서는 기본적인 HTML 태그 확인 방법과 확인을 위해 PHP 정규식을 사용하는 방법을 소개합니다. 1. HTML 태그의 기본 구조 HTML 태그는 꺾쇠괄호로 묶인 요소 이름과 속성으로 구성됩니다. 일반적인 태그에는 p, a, div가 있습니다.

HTML 태그의 전체 컬렉션 HTML 태그의 전체 컬렉션 Nov 27, 2023 am 10:05 AM

HTML에는<!DOCTYPE>、<html>、<head>、<title>、<meta>、<link>、<style>、<script>、<body>、<h1> - <h6>、<p >、<a>、<img>、<div>、<span>、<입력>、<버튼>、<양식

See all articles