1. HTML 개요

HTML은 Hyper Text Markup Language의 약자로, "하이퍼텍스트 마크업 언어"를 의미하며 실제로는 웹 페이지 작성에 특별히 사용되는 프로그래밍 언어입니다. 대부분의 웹페이지의 기본은 HTML 문입니다.

1. HTML 문서의 기본 구조

모든 페이지에는 최소한 이러한 부분이 포함되어야 합니다. 브라우저의 내결함성이 강하기 때문에 포함하지 않아도 정상적으로 표시될 수 있지만, 완전히 작성하는 것이 가장 좋습니다.

2. HTML 파일 작성 방법

HTML 파일은 ASCII 형식의 파일입니다. ASCII 파일을 편집할 수 있는 모든 편집기에서 편집할 수 있습니다. (HTML 파일에 중국어 문자가 포함된 경우 중국어를 지원하는 편집기에서 편집해야 합니다.)

3. HTML 파일 디버깅

브라우저로 직접 열어 실행 결과 확인

4. HTML 파일 내용

◇ 헤더 부분은 HTML 페이지에 몇 가지 보조 정보나 속성 정보를 추가하는 부분으로, 그 안에 있는 내용은 먼저 로드하세요. 본문 부분은 페이지 데이터가 실제로 저장되는 곳입니다.

◇ 대부분의 태그에는 시작 태그와 종료 태그가 있습니다. 일부 태그에는 단일 기능만 있거나 수정할 내용이 없기 때문에 태그 내에서 끝날 수 있습니다.

◇ 태그로 수정된 콘텐츠에 대해 보다 풍부한 작업을 수행하려면 태그의 속성을 사용하면 속성 값을 변경하여 더 많은 효과 옵션이 추가됩니다.

◇ 속성과 속성값을 연결하려면 "="를 사용하세요. 속성 값은 큰따옴표나 작은따옴표를 사용할 수 있으며 일반적으로 큰따옴표를 사용합니다. 또는 회사 규정 작성 표준.

5. HTML 파일의 태그

1) 형식: <태그 이름 속성 이름='속성 값'> ; 데이터 내용 또는 <태그 이름 속성 이름='속성 값' />

2) 작업 아이디어: 작업을 위해 데이터가 필요합니다. 다양한 태그로 캡슐화할 수 있으며, 캡슐화된 데이터는 태그의 속성을 통해 작동될 수 있습니다.

태그는 컨테이너와 동일합니다. 컨테이너의 데이터에 대해 작업을 수행한다는 것은 컨테이너의 속성 값을 지속적으로 변경하는 것입니다.

2. 목록

목록은 정보를 체계적으로 정리하는 방법입니다. 내용을 가로로 하나씩, 직관적이고 명확하게 표시해 줍니다. 그리고 테이블과도 다릅니다. 일반적으로 목록은 테이블만큼 복잡하지 않습니다.

1.순서가 없는 목록으으으

2. 주문 목록

으으으

3. 정의 목록

사용자 정의 목록은

로 시작됩니다. 각 사용자 정의 목록 항목의 정의는

로 시작됩니다.

<span style="font-size:14px;"><ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul></span>

로그인 후 복사

결과:

커피
검은 뜨거운 음료
우유
흰 차가운 음료

4. 속성을 가질 수 있는 두 개의 복잡한 목록 태그 ul 및 ol

이 태그는 속성을 가질 수 있으며

x는 디스크입니다. 항목은 "●" 기호로 안내됩니다.

x为circle：条目以符号“○”引导。

x为square：条目以符号“■”引导。

2）

与

此标记会自动给条目排序并加上序号，也可带有属性：

a、 < ol type=" x ">

x为A：以大写字母排序。如A，B，C，D等。

x为a：以小写字母排序。如a，b，c，d等。

x为I：以大写罗马数字排序。如I，II，III，IV等。

x为i：以小写罗马数字排序。如i，ii，iii，iv等。

x为1：以阿拉伯数字排序。如1，2，3，4等。

b、

n是一个数字，此标记符表示重新定义的起始号。

<span style="font-size:14px;"><html>
<body>

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>
</span>

로그인 후 복사

结果：

三、表格

使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。表

格一般由以下几部分组成：表格名称、表格栏及表中数据。

1、border属性

使用表格的这一属性可以给表格加上框线。如

2、cellspacing属性

这一属性可以用来设置有线表格的单元格线的宽度，用法为

3、cellpadding属性

这一属性可以用来设置单元格线与数据之间的距离，用法为

隔）

4、

这是一对用来指明表格标题的标记，常用格式如：

5、

这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在

文字会突出显示

6、nowrap属性可用于

和
和
及	超过一行，浏览器默认会自动换行显示。使用该属性进行屏蔽。四、超文本链接 href中不仅仅只能用file和http协议，其它协议也可以的，如thunder,mailto 1、页面链接用HTML创建超文本链接需要使用标记符（结束标记符不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。在HTML文件中用链接指针指向一个目标。其基本格式为：标记超文本链接信息 2、本地链接超文本链接指向自己的计算机中的某一个文件，叫本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用标记符的name属性。格式如下：此处创建了一个标签 3、电子邮件链接如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。如:管理员信箱 4、迅雷下载链接 a.avi 5、超链接字体的颜色 1）link属性：设置超链接文字的颜色，默认为蓝色，格式： 2）vlink属性：设置鼠标指向超链接文字时，该链接文字的颜色，默认为红色，使用格式为： 6、自定义超链接自定义超链接(取消默认点击效果，触发自定义事件) 给href的属性值赋：javascript:void(0)，以屏蔽默认点击效果 7、href默认的协议是file，因此如果写成href=""，则是打开当前html文件所在的文件夹 target="_blank"这个属性可以让超链接的目标在另一个窗口中显示出来五、图像图像地图：应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。map标签要和img标签联合使用 <img src="Sunset.jpg" alt="图片说明文字" usemap="#map" /> <map > <area shape="rect" coords="50,59,116,104" href="1.html" /> <area shape="circle" coords="118,203,40" href="2.html" /> </map> 로그인 후 복사 点击图片Sunset.jpg上面以（50,59）为矩形左上点，宽116，高为104区域时，链接到1.html页面；同理点击上面以（118,203）为圆心，40为半径区域时，链接到 2.html。六、表单提交方式（get/post） 1、两种方式的区别 1) get提交将数据显示在地址栏，对于敏感信息不安全。post提交不显示在地址栏，对于敏感信息安全 2) 地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。而post可以提交大体积数据。 3) 对提交数据的封装方式不同。get将提交数据封装到了http消息头的第一行即请求行中。而post将提交的数据封装到请求体(请求数据)体中。 2、表单提交方式与乱码问题无论是get还是post方式，对于Tomcat服务器端，默认的解码方式是ISO8859-1，因此中文会出现乱码。解决：通过用ISO8859-1进行编码，再用相应的中文码表进行解码即可。如果是post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效即该方法只设置数据体的编码方式。因此，通常表单使用post提交，因为这样编码更方便。 3、客户端(浏览器)与服务端交互的三种方式： 1) 地址栏中输入url地址 ------ get方式 2) 超连接 ------ get方式 3) 表单 ------ get和post方式七、其他标签 1、 name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。 http-equiv 属性：模拟HTTP协议的响应消息头。 2、 rel 属性：描述目标文档与当前文档的关系。 type 属性：文档类型。 media：指定目标文档在哪种设备上起作用。 3、滚动条 direction 属性：left right down up behavior 属性：scroll（重复滚动） alternate（来回滚动） slide（不重复滚动） loop 属性：滚动的次数 -1表示一直滚动 scrolldelay属性：设置活动字幕滚动两次之间的延迟时间 4、 </span></p><p><span style="font-size:14px">可以将文本内容按在代码区的样子显示在页面上。<br/></span></p><p><span style="font-size:14px">注：pre标签对包含<a href="http://www.php.cn/code/427.html" target="_blank">html标签</a>的文字内容无法实现按排版格式显示</span></p><p><span style="font-size:14px">5、几个纯数据封装标签</span></p><p><span style="font-size:14px">p span p</span></p><p><span style="font-size:14px">6、标签分为两大类 <br/></span></p><p><span style="font-size:14px">1) 块级标签(元素)：标签结束后都有换行。font span img input select a</span></p><p><span style="font-size:14px">2) 行内标签(元素)：标签结束后没有换行。 p p dl ol ul table title<br/></span></p><p><span style="font-size:14px">7、lable标签</span></p><p><span style="font-size:14px">给元素定义快捷键 </span></p><p><span style="font-size:14px"></span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><label for="user" accesskey="u">用户名(u)</label> <input type="text" id="user" /> 로그인 후 복사 点击用户名时，会自动跳到user的编辑框中【相关推荐】 1. 免费html在线视频教程 2. html开发手册 3. php.cn原创html5视频教程 위 내용은 마스터해야 할 기본 HTML 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요! 관련 라벨： html，知识 원천：php.cn 이전 기사：HTML 요소의 구문과 빈 요소를 간략하게 소개합니다. 다음 기사：웹페이지 제작(html)의 기본지식 (1) html의 첫 번째 이해와 속성 본 웹사이트의 성명 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요. 저자별 최신 기사 NameValuePair 메소드를 사용하여 매개변수 전달에 대한 예제 튜토리얼 1970-01-01 08:00:00 dom4j를 사용하여 XML 문서 예제 구문 분석 1970-01-01 08:00:00 카탈로그 서비스 - Microsoft 마이크로서비스 아키텍처 예제 코드 분석 1970-01-01 08:00:00 .net Elasticsearch 예제 시작에 대한 자세한 설명 1970-01-01 08:00:00 JSP 지원 구성 예제를 추가하는 Spring 부트에 대한 자세한 소개 1970-01-01 08:00:00 JS는 window.open으로 열린 창이 닫혔는지 여부를 어떻게 감지합니까? 1970-01-01 08:00:00 데이터베이스 및 해당 솔루션에 연결하는 sqlyog의 잘못된 문제 공유 1970-01-01 08:00:00 Java에서 가변 길이 매개변수를 사용하는 예 1970-01-01 08:00:00 최신 Amap API WEB 개발 예제 튜토리얼 1970-01-01 08:00:00 AJAX의 장점과 단점 1970-01-01 08:00:00 최신 이슈 CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM... 에서 2024-04-06 20:22:15 0 1 454 탐색 모음의 CSS 하단 테두리 탐색 모음이 있고 목록의 항목을 마우스로 가리키면 하단에 빨간색 선을 추가했지만 제목(예: "서비스") 아래로 빨간색 선을 이동하고 싶습니다. ... 에서 2024-04-06 15:04:41 0 2 347 URL의 www를 와일드카드 하위 도메인으로 바꿉니다. www.domain.com/new-mexico/albuquerque/businessname-513526.html을 businessname.domain.com/ne... 에서 2024-04-04 19:28:30 0 1 344 데이터베이스에 저장된 여러 선택 요소를 쿼리하는 방법 전문 분야(선택한 항목의 배열로 저장됨) 쿼리가 작동하지 않습니다. 편집 시 등록농업인의 전문분야를 구할 수 있는 방법을 모색 중입니다. 테이블이 두 개 있어요.... 에서 2024-04-04 13:18:46 0 1 304 JavaScript가 예상대로 실행되지 않습니다. htmlcssjs를 반응형으로 만들려고 하는데 예상대로 작동하지 않습니다. 최소화하면 이미 반응형이지만 onclick을 하면 작동하지 않습니다. 내비게이션 및 내... 에서 2024-04-04 13:05:32 0 1 306 관련 주제 더> HTML 저작권 기호 HTML 온라인 편집기 html 웹페이지 제작 HTML 공간 HTML이 무엇인가요? HTML 글꼴 크기를 설정하는 방법 HTML을 TXT로 HTML 텍스트 상자 코드를 작성하는 방법 인기 추천 url은 무슨 뜻인가요? DOM은 무엇을 의미하나요? 이미지 크기를 변경하는 방법 HTML에서 글꼴을 굵게 만드는 방법 HTML 이미지의 크기를 설정하는 방법 인기 튜토리얼 더> 관련 튜토리얼 인기 추천 최신 강좌 최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일) 1417317 PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기 4258311 JAVA 초보자용 비디오 튜토리얼 2478956 Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼 504086 PHP 제로 기반 입문 튜토리얼 844325 최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일) 1417317 학습 시간 JAVA 초보자용 비디오 튜토리얼 2478956 학습 시간 Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼 504086 학습 시간 웹 프론트 엔드 개발에 대한 빠른 소개 215314 학습 시간 PS 비디오 튜토리얼을 처음부터 마스터하세요 877886 학습 시간 [웹 프런트엔드] Node.js 빠른 시작 6457 학습 시간 해외 웹 개발 풀스택 강좌 총집합 5076 학습 시간 Go 언어 실습 GraphQL 4262 학습 시간 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다 634 학습 시간 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬 21712 학습 시간 최신 다운로드 더> 웹 효과 웹사이트 소스 코드 웹사이트 자료 프론트엔드 템플릿 [양식 버튼] jQuery 기업 메시지 양식 연락처 코드 [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과 [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과 [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드 [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드 [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임 [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤 [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과 [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿 [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿 [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿 [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿 [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿 [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿 [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다. [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿 [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG) [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG) [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS) [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG) [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG) [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG) [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS) [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG) [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿 [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿 [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿 [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿 [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿 [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿 [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다. [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿 회사 소개 부인 성명 Sitemap PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！