JavaWeb의 HTML 기본 학습에 대한 자세한 소개

JavaWeb01_html 기본

html 동작 아이디어

• 태그를 사용하여 동작할 데이터를 감싸고, 태그의 속성값을 수정하여 태그의 데이터 스타일을 변경합니다

글꼴 태그

• 속성: size 값 범위 1~7 색상: 영어 단어, 16진수 #ffffff

제목 태그 <h1 id="h-code-gt-code-h"> ... <h6> code><code><h1> </h1> ... <h6> </h6>

• 从h1到h6越来越小，自动换行

注释

• <!-- html的注释 -->

列表标签

• <dl> <dt></dt> <dd></dd> </dl>

• 有序

• 无序

图像标签

• <img src="/static/imghwm/default1.png" data-src="图片的路径" class="lazy" style="max-width:90%" height="" alt="">

• alt:浏览器的兼容性很差

路径（相对路径）

• 在同一级目录：直接写

• 在下一层目录：images/1.jpg

• 在上层目录： ../

超链接标签

<a href="%E8%B7%AF%E5%BE%84">显示在页面上的内容</a>

• 打开方式 target=”_self _blank”

• 默认是在当前页面打开

表格标签

                              

html的五个规范

• 一个html文件开始标签和结束的标签和

• html包含两部分内容

• 设置相关信息

• 显示在页面上的内容都写在body里面

• html的标签是成对的

• html的代码不区分大小写

• 有些标签，在标签内结束。比如换行:<br> 分割线:<hr>

表单标签

• 可以提交数据到服务器，这个过程可以用表单标签实现

• <form></form>和

• get请求地址栏会携带提交的数据，post不会携带

• get请求安全级别较低，post较高

• get请求数据大小的限制，post没有限制

• 常用的有两种 get和post get默认就是get请求

• action:提交到地址，默认提交到当前页面

• method:表单的提交方式

• enctype: 一般请求下不需要这个属性，做文件上传时候需要设置这个属性

• 面试题目：get和post区别

• 输入项：可以输入内容过选择内容的部分

• 普通输入项：<input type="text">

• 密码输入项：<input type="password">

• 单选输入项：<input type="radio"><br>-> 在里面需要属性name<br>-> name的属性值必须要相同<br>-> 必须有一个value值

• 复选输入项：<input type="checkbox"><br>-> 在里面需要属性name<br>-> name的属性值必须要相同<br>-> 必须有一个value值

• 文件输入项（在后面上传时侯用到）<br>-> <input type="file">

• 下拉输入项（不是在input标签里面的）<br>

  <select name="birth">
      <option value="0">请选择</option>
      <option value="1991">1991</option>
      <option value="1991">1992</option>
      <option value="1991">1993</option>
      <option value="1991">1994</option>
  </select>

• 文本域<br>

• <textarea cols="10" rows=""></textarea>

• 隐藏项（不会显示在页面上，但是存在于html代码里面）<br>

• <input type="hidden"/>

• 提交按钮<br>

• <input type="submit"/>
  <input type="submit" value="注册"/>

• 使用图片提交<br>

• <input type="image" src="a.jpg"/>

• 大部分的输入项使用 <input type="输入项的类型">

html中其它的常用标签的使用

• b –加粗

• s –删除线

• u –下划线

• i –斜体

• pre –原样输出

• sub和sup

  🎜🎜 h1부터 h6까지 점점 작아지고, 자동 줄 바꿈🎜🎜🎜🎜 comments🎜🎜🎜🎜<!--html comments-->🎜🎜🎜🎜list Tags🎜🎜 🎜🎜<dl> <dt> </dt> </dl>🎜🎜🎜🎜없음 서문 🎜🎜🎜 🎜이미지 태그🎜🎜🎜🎜<img src="/static/imghwm/default1.png" data-src="b.html" class="lazy" style="max-width:90%" height="" alt="">🎜🎜🎜🎜alt: 찾아보기 호환성 찾아보기 서버 상태가 매우 좋지 않습니다. 🎜🎜🎜🎜 경로(상대 경로) 🎜🎜🎜🎜 같은 디렉터리에: 하위 디렉터리에 🎜🎜🎜🎜 직접 작성: 상위 디렉터리에 image/1.jpg 🎜🎜🎜🎜: .. /🎜🎜🎜🎜하이퍼링크 태그🎜🎜<a href="path">페이지에 표시되는 콘텐츠</a>🎜🎜🎜🎜target="_self _blank"로 열기 🎜 🎜🎜🎜기본값은 현재 페이지에서 열리는 것입니다🎜🎜🎜🎜테이블 태그🎜rrreee🎜html의 다섯 가지 사양🎜🎜🎜🎜html 파일 시작 태그와 끝 태그 및 🎜🎜🎜🎜html에는 두 부분의 콘텐츠가 포함되어 있습니다🎜🎜
  🎜🎜관련 정보 설정🎜🎜🎜🎜페이지에 표시되는 내용은 body 🎜🎜🎜🎜🎜html 태그는 쌍으로 되어 있습니다🎜🎜🎜🎜html 코드는 대소문자를 구분하지 않습니다🎜🎜🎜🎜일부 태그는 태그 내에서 끝납니다. 예를 들어, 줄바꿈: <br> 구분선: <hr>🎜🎜🎜🎜양식 태그🎜🎜🎜🎜에 데이터를 제출할 수 있습니다. 이 프로세스는 양식 태그🎜🎜🎜🎜<form></form> 및 🎜🎜
  🎜🎜get 요청 주소 표시줄에는 제출된 데이터가 전달되지만 게시물에는 전달되지 않습니다🎜🎜🎜🎜get 요청 보안 수준이 낮고 게시물이 더 높습니다🎜🎜🎜🎜 get 요청 데이터 크기 제한은 없습니다. post에는 제한이 없습니다🎜🎜🎜🎜일반적으로 사용되는 get과 post 두 가지가 있습니다. Get은 기본적으로 get 요청입니다🎜🎜🎜🎜action: 해당 주소에 제출하고 다음으로 현재 페이지에 제출합니다. default🎜🎜🎜🎜method: 양식 제출 방법🎜🎜🎜🎜enctype: 이 속성은 일반 요청에는 필요하지 않습니다. 파일 업로드 시 이 속성을 설정해야 합니다.🎜🎜🎜🎜인터뷰 질문: get과 post의 차이점🎜🎜🎜 🎜🎜입력 항목: 내용을 입력하고 내용 부분을 선택할 수 있습니다🎜🎜
  🎜🎜일반 입력 항목: &lt ;input type="text"/>🎜🎜🎜🎜비밀번호 입력 항목: <input type="password">🎜🎜🎜🎜무선 입력 항목: <input type="radio"><br>-> 속성 이름은 필수입니다.<br>-> 이름의 속성 값은 동일해야 합니다.<br>-> 값이 있어야 합니다 🎜🎜🎜🎜입력 항목 확인: <input type="checkbox"><br>-> br/>-> 이름의 속성 값이 동일해야 합니다<br>-> 값이 있어야 합니다 🎜🎜🎜🎜파일 입력 항목(나중에 업로드 시 사용)<br>-> <input type="file">🎜🎜🎜🎜드롭다운 입력 항목(입력 태그 내부 아님)<br>🎜rrreee🎜🎜🎜텍스트 필드<br>🎜🎜🎜rrreee 🎜🎜🎜숨겨진 항목(페이지에는 표시되지 않지만 html 코드에는 존재함)<br>🎜 🎜🎜rrreee🎜🎜🎜제출 버튼<br>🎜🎜🎜rrreee🎜🎜🎜이미지 제출 사용<br>🎜🎜🎜rrreee🎜🎜🎜대부분의 입력 항목은 <input type="input item ">의 유형을 사용합니다. html의 다른 공통 태그 사용🎜🎜🎜 🎜b – 굵은 글씨🎜🎜🎜🎜s – 취소선 🎜🎜🎜🎜u – 밑줄 🎜🎜🎜🎜i – 기울임꼴 🎜🎜🎜🎜pre – 있는 그대로 출력 🎜🎜🎜🎜 sub 및 sup – 아래 첨자 및 위 첨자 🎜

• div – 자동 줄 바꿈 div –自动换行

• span –在一行显示

html头标签的使用

• html两部分组成 head和body

• 可以使用link标签引入css文件

• 可以统一设置超链接的打开方式<base target="_blank"> –设置全文超链接以新窗口打开

• <meta name="keywords" content="学习,熊出没"> –以前的搜索引擎检索方式

• <meta http-equiv="refresh" content="3; url="> –三秒跳转

• 在head里面的标签就是头标签

• title标签：表示在标签上显示的内容

• 标签：设置页面的一些相关的内容

• base标签：设置超链接的基本设置

• link标签：引入外部文件

框架标签的使用

使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉

• <frameset></frameset>标签

• rows:按照行进行划分 <frameset rows="80, *"></frameset>

• cols:按照列进行划分 <frameset cols="80, *"></frameset>

• <frame>标签

• <frame name="lower_left">

• span – 한 줄로 표시

html 헤더 태그 사용
html은 머리와 몸의 두 부분으로 구성됩니다🎜🎜
🎜🎜할 수 있습니다 링크 태그를 사용하여 CSS 파일 소개 🎜🎜🎜🎜 하이퍼링크 열기 방법을 균일하게 설정할 수 있음 <base target="_blank"> - 전체 텍스트 하이퍼링크가 새 창에서 열리도록 설정 🎜🎜🎜🎜<meta name="keywords" content="연구, 곰이 감염되었습니다"> – 이전 검색 엔진 검색 방법 🎜🎜🎜🎜<meta http-equiv="refresh" content="3; url= "> - 3초 점프🎜🎜🎜🎜머리에 있는 태그가 머리 태그입니다🎜🎜🎜🎜제목 태그: 에 표시되는 콘텐츠를 나타냅니다. tag🎜🎜🎜🎜 태그: 설정 페이지의 일부 관련 콘텐츠🎜🎜🎜🎜base 태그: 하이퍼링크의 기본 설정을 지정합니다.🎜🎜🎜🎜link 태그: 외부 파일 소개🎜🎜🎜🎜

사용 프레임 태그

🎜프레임 태그 사용 시 본문에 쓸 수 없으며 프레임 태그를 사용하므로 본문을 제거해야 합니다🎜
🎜🎜&lt ;frameset> tag🎜🎜
🎜🎜rows: 행에 따라 나누기<frameset rows="80, *"></frameset>🎜🎜🎜🎜 cols: 열로 나누기 <frameset cols="80, *"></frameset>🎜🎜🎜🎜🎜<frame>레이블 🎜🎜
🎜🎜🎜🎜🎜🎜상세 표시 🎜🎜🎜🎜 페이지

위 내용은 JavaWeb의 HTML 기본 학습에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!