HTML 기본 지식 요약
1. 기본 HTML 지식 요약
1. HTML 소개 및 기능
HTML은 HyperText Mark-up Language를 나타내며 HyperText Mark-up Language를 나타냅니다. 마크는 다음과 같은 레이블입니다. <a></a> <html></html>일반적으로 레이블은 쌍으로 표시되지만 단일 항목도 있습니다. 예 <br> <img>: .
하이퍼 텍스트의 의미 :
1. 웹 페이지에 텍스트 제한을 넘어서는 사진, 동영상, 음악 등이 있음
2. 하이퍼 링크 텍스트 : 한 웹 페이지에서 다른 웹 페이지로 이동할 수 있음
기능 :
웹 페이지 개발에 사용
2. HTML 프로그래밍에 vscode 사용
- vscode는 오픈 소스 및 무료 소프트웨어입니다 (개인적인 사용이 기분이 좋습니다).
- 다운로드 링크 : https://code.visualstudio.com/Download
- vscode는 두 개의 플러그인을 설치할 수 있습니다. 하나는 중국어 플러그인이고 다른 하나는 플러그인을 실행하는 브라우저입니다. 플러그인 이름은 1. VS Code 용 중국어 (간체) 언어 팩 2. 브라우저에서 엽니 다.
- 다음 그림을 클릭하여 아이콘을 표시 한 다음 뒷면의 검색 상자에서 검색 할 수 있습니다 (더티 컴퓨터 화면 무시).
- vscode의 사용은 너무 많이 반복되지 않을 것입니다. 사용 방법을 모르는 학생은 CSDN 문서를 참조 할 수 있습니다.
3.html 일반적으로 사용되는 일부 태그 (단일 태그 및 쌍으로 표시되는 태그 포함)
- 쌍으로 등장
<h1>标题标签</h1>
<li>li标签定义列表项目</li>
<p>段落标签</p>
<div>div标签</div>
<a href='https://www.baidu.com'>百度</a>
- 하나씩
<br>
<img src="图片路径" alt="图片描述信息">
참고 : 레이블 작성은 대소 문자를 구분하지 않지만 일반적으로 소문자입니다!
- 그림의 리소스 경로 설정은
절대 경로와 상대 경로로 구분됩니다. 절대 경로는 루트 디렉토리에서 쓰는 것을 의미하고 상대 경로는 현재 디렉토리에서 쓰는 것을 의미합니다.
4. 태그 유형
태그에는 테이블 태그, 목록 태그 및 양식 태그의 세 가지 유형이 있습니다.
- 목록 라벨
<ul>无序列表</ul>
<ol>有序列表</ol>
- 양식 라벨
<table>
<tr>
<th>table表示表格标签，tr表示表格中的一行，th表示表格中的表头</th>
</tr>
<tr>
<td>表示表格中的一列</td>
</tr>
</table>
- 양식 라벨
<form>标签 定义完整的表单标签
<label>标签 表示表单元素的文字标注标签，定义文字标注
<input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
type:
type="text"定义单行文本输入框
type="password"定义密码输入框
type="radio"定义单选输入框
type="chackbox"定义复选输入框
type="file"定义上传文件
type="submit"定义提交按钮
type="reset"定义重置按钮
type="button"定义普通按钮
<textarea>标签 定义多行文本输入框
<select>标签 定义下拉列表
<option>和<select>标签配合，定义下拉列表中的选项
- Form이 제출 될 때 Form 속성을 설정할 수 있고, action은 Form 제출 주소를 설정하는 것을 의미하고, method는 get과 post로 나누어 진 Form 제출 방법을 의미한다. 양식 요소 속성 설정, 두 개의 매개 변수, 이름과 값, 이름은 양식 요소의 이름을 나타내고 값은 양식 요소의 값을 나타냅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 把数据提交给web服务器需要使用的表单标签：<form> -->
<form action="https://www.baidu.com" method="POST">
<!-- get方式提交数据到web服务器以地址栏的方式提交给web服务器，不安全，能看到提交的数据 -->
<!-- 严谨的说是以查询参数的方式提交给web服务器 -->
<!-- Post 方式提交表单数据会放到请求体里面 -->
<p>
<!-- for 根据id名给指定id的标签设置光标 -->
<label>用户名：</label>
<input type="text" name="username" >
</p>
<p>
<label>密码：</label>
<input type="password" name="password">
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="学习">学习
<input type="checkbox" name="like" value="打游戏">打游戏
<input type="checkbox" name="like" value="羽毛球">羽毛球
</p>
<p>
<label>照片：</label>
<input type="file" name="pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="desc"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="position">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">深圳</option>
<option value="3">西安</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</p>
<!--get 和 Post 方式提交表单数据时都以HTTP协议的方式提交数据给web服务器 -->
</form>
</body>
</html>