집 > 기사 > 웹 프론트엔드 > HTML 학습의 몇 가지 핵심 사항 요약

HTML 학습의 몇 가지 핵심 사항 요약

无忌哥哥원래의: 2018-07-19 11:39:412558검색

html에 대한 주요 요약

블록 요소, 인라인 요소, 인라인 블록 요소

#🎜🎜 #HTML 요소를 인라인 요소, 블록 요소 및 인라인 블록 요소의 세 가지 유형으로 분류할 수 있습니다
display 속성을 사용하여 세 가지 중 하나를 변환하세요#🎜🎜 #
(1)display:inline;인라인 요소로 변환
(2)display:block;블록 요소로 변환
(3)display:inline-block;인라인 블록 요소로 변환

가장 일반적으로 사용되는 인라인 요소는 범위이며, 다른 요소는 특정 기능, 수정된 글꼴 a4b561c25d9afb9ac8dc4d70affff419 및 태그와 <sub></sub> 및 <sup></sup> 태그는 사각형 효과를 직접 생성할 수 없습니다. 유사한 모바일 속성의 도움이 필요하며 이는 매우 실용적입니다.

인라인 요소의 특징: (1) 너비와 높이 설정이 유효하지 않습니다. a4b561c25d9afb9ac8dc4d70affff419和5a8028ccc7a7e27417bff9f05adf5932标签，还有b96cac025db4031319c29e1eb68f19d6和2cdea26b4c3988e37d674b56660962a7这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。

　　行内元素特征：(1)设置宽高无效

　　　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　　　　　　　　(3)不会自动进行换行

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>行内元素</title>
          <style type="text/css">
              span {                  
              width: 120px;                 
              height: 120px;                 
              margin: 1000px 20px;                 
              padding: 50px 40px;                 
              background: lightblue;             
              }
         </style>
     </head>

     <body>
         <sspan>不会自动换行</span>
         <span>行内元素</span>
     </body>

 </html>

2.块状元素

　　块状元素代表性的就是p，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用p来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

　　块状元素特征：(1)能够识别宽高

　　　　　　　　　(2)margin和padding的上下左右均对其有效

　　　　　　　　　(3)可以自动换行

　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>块状元素</title>
          <style type="text/css">
              p {                  
              width: 120px; 
               height: 120px;                 
               margin: 50px 50px;                 
               padding: 50px 40px;                 
               background: lightblue;            
                }
         </style>
     </head>

     <body>
         <i>自动换行</i>
         <p>块状元素</p>
         <p>块状元素</p>
     </body>

 </html>

3.行内块状元素

　　行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

　　行内块状元素特征：(1)不自动换行

　　　　　　　　　　　(2)能够识别宽高

　　　　　　　　　　　(3)默认排列方式为从左到右

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>行内块状元素</title>
          <style type="text/css">
              p {                  
              display: inline-block;                 
              width: 100px;                 
              height: 50px;                 
              background: lightblue;             
              }
         </style>
     </head>

     <body>
         <p>行内块状元素</p>
         <p>行内块状元素</p>   
     </body>

 </html>

绝对路径与相对路径

绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
相对路径：指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系
每一个.向外跳一层

样式的三种写法

1.行内样式：

把css代码直接写在现有的HTML标签中

<p style="color:red">这里文字是红色。</p>

2.内嵌样式:

嵌入式css样式，就是可以把css样式代码写在标签之间

<style type="text/css">span{color:red;}</style>

3.外部样式表:

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名

<link href="style.css" rel="stylesheet" type="text/css" />

注意：

css样式文件名必须符合命名规则，如 main.css
rel=”stylesheet” type=”text/css” 是固定写法不可修改
css文件也可以在c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927
(2) 여백 설정은 왼쪽 및 오른쪽 방향으로만 유효하며 위쪽으로는 유효하지 않습니다. 패딩 설정은 위, 아래, 왼쪽 방향 모두에서 유효합니다. 즉, 넓은 공간을 지원합니다

　　　　　　　　　　　　　　　　　　　　　#rrreee

2. 블록 요소

대표적인 블록 요소는 p이며, 기타 p, nav, side, header, footer, section, article, ul-li, address 등은 모두 p로 구현할 수 있습니다. 그러나 프로그래머가 코드를 쉽게 해석할 수 있도록 일반적으로 특정 의미 태그를 사용하여 코드를 더 읽기 쉽고 오류 확인을 쉽게 만듭니다.

블록 요소의 특징: (1) 너비와 높이를 식별하는 기능

(2) 여백과 패딩은 위쪽, 아래쪽, 왼쪽 및 오른쪽에 유효합니다.

3) 자동으로 줄 바꿈 가능

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　cco ) 여러 개의 블록 요소 태그가 함께 작성되며 기본 배열은 위에서 아래로
rrreee

3. 인라인 블록 요소 h5>
인라인 블록 요소는 인라인 요소와 블록 요소의 특성을 결합하지만 각각 고유한 장단점이 있습니다. 따라서 일상적으로 사용되는 특성상 인라인 블록 요소가 더 자주 사용됩니다.

인라인 블록 요소의 특징: (1) 자동 줄 바꿈 없음

(2) 너비와 높이 인식 가능

(3) 기본 배열은 왼쪽에서 오른쪽으로

rrreee

절대 경로 및 상대 경로

절대 경로: 디렉터리 아래의 절대 위치를 직접 의미합니다. 일반적으로 드라이브 문자로 시작하는 경로입니다

상대경로: 해당 경로로 인해 발생하는 다른 파일(또는 폴더)과의 경로 관계를 말합니다. 이 파일이 있는 곳

한 레이어씩 바깥쪽으로 이동

#🎜🎜#스타일을 작성하는 세 가지 방법# 🎜🎜#

1. 인라인 스타일:

#🎜🎜#CSS 코드를 기존 HTML 태그에 직접 작성#🎜🎜#rrreee

2. 임베디드 스타일:

#🎜🎜# 임베디드 CSS 스타일, 즉 #🎜🎜#rrreee

태그 사이에 CSS 스타일 코드를 작성할 수 있습니다. 3. 외부 스타일 시트:

#🎜🎜#외부 CSS 스타일(외부 스타일이라고도 함)은 CSS 코드를 넣습니다. 별도의 외부 파일을 작성합니다. 이 CSS 스타일 파일의 확장자는 ".css"입니다.#🎜🎜#rrreee#🎜🎜#참고: #🎜🎜#

c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927

——-상대 위치 지정은 요소의 원래 특성을 변경하지 않습니다. 블록 요소 또는 블록 요소, 인라인 또는 인라인

- 상대 위치 지정은 요소의 수준을 높여 요소가 텍스트 흐름의 요소를 덮을 수 있도록 합니다.

4. 절대 위치 지정

①절대 위치 지정은 요소가 html 요소 또는 가장 가까운 상위 위치 지정 요소를 기준으로 위치 지정됨을 의미합니다.

②위치 속성을 절대값으로 설정하면 요소의 절대 위치 지정이 활성화됩니다.

3절대 위치 지정이 켜져 있으면 위쪽, 오른쪽, 아래쪽, 왼쪽 네 가지 속성을 사용하여 요소의 위치를 지정할 수 있습니다.

4절대 위치 지정의 특징:

—절대 위치 지정은 요소를 텍스트 흐름에서 완전히 분리합니다.

——-절대 위치에 있는 블록 요소의 너비는 해당 내용에 따라 늘어납니다.

——-절대 위치 지정은 인라인 요소를 블록 요소로 바꿉니다.

——절대 위치 지정은 위치 지정이 켜져 있는 가장 가까운 조상 요소를 기준으로 합니다. 모든 조상의 위치 지정이 켜져 있지 않으면 브라우저 창을 기준으로 위치가 지정됩니다.

——일반적으로 절대 위치 지정을 사용하는 경우 해당 요소가 상위 요소를 기준으로 위치를 지정할 수 있도록 상위 요소에 상대 위치 지정이 지정됩니다.

——-절대 위치 지정을 사용하면 요소의 수준이 높아집니다.

5. 고정 위치

①고정 위치 요소는 방문자가 웹 페이지를 스크롤할 때 화면의 특정 위치에 고정됩니다. . 움직이지 않음

②위치 속성을 고정으로 설정하면 요소의 고정 위치 지정이 켜집니다.

③고정 위치 지정이 켜져 있으면 위쪽, 오른쪽, 아래쪽, 왼쪽 네 가지 속성을 사용하여 요소의 위치를 지정할 수 있습니다.

4 고정 위치 지정도 일종의 절대 위치 지정입니다. 고정 위치 지정의 다른 특성은 절대 위치 지정과 유사합니다.

은 다릅니다:

(1) 고정 위치 지정은 항상 브라우저 위치 지정을 기준으로 합니다.

(2)는 브라우저 창의 특정 위치에 고정되며 스크롤 막대로 스크롤되지 않습니다.

(3) IE6은 고정 위치 지정을 지원하지 않습니다.

위 내용은 HTML 학습의 몇 가지 핵심 사항 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html Static JS 样式表 display position margin padding ul li

성명：

이전 기사：SVG 동적 아이콘이 구현되는 방법다음 기사：SVG 동적 아이콘이 구현되는 방법