认识一个html文档的基本结构：前端现在越来越火，可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础，但是想转到前端的人”一点帮助。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Here is title</title></head><body> Here is content.</body></html>
HTML 文档是由 HTML 元素 定义的，而HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
- 首先，HTML元素从闭合属性上可分为2类：
- 自闭和标签
自闭和标签在html元素中的比例不大，常用的就以下几个：<img / alt="认识html元素_html/css_WEB-ITnose" > <br /> <input /> <hr />从上面的标签可以看出，自闭合标签形如： <标签名 />（建议：/和前面的标签名之间空一格）
- 手动闭合标签
html元素中大多数标签都是需要我们手动闭合的。手动闭合的意义就是——告诉浏览器，我这个标签里的内容起始位置和结束位置。常用的标签：<h1></h1><h2></h2>...<p></p><div></div><a></a><button></button><span></span><label></label><textarea></textarea><table></table><thead></thead><tbody></tbody><tr></tr><th></th><td></td><ul></ul><li></li><dl></dl><dt></dt><dd></dd><form></form>
- 自闭和标签
- img
<img src="" alt="" /><img / alt="认识html元素_html/css_WEB-ITnose" >标签具体两个常用的属性：src (source) 属性是必需的:它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径；alt 属性是非必需的：它指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容；（备注：我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。）
Paste_Image.png
Paste_Image.png
-
br
<br /> 可插入一个简单的换行符。注释：请使用 <br> 来输入空行，而不是分割段落。
-
input
<input /> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式:输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
1.文本框
<input type="text" value="" placeholder="" /><input type="text" value="这是value" placeholder="" /><input type="text" value="" placeholder="这里是提示文字" />value代表此文本框中显示的值,placeholder设置的值表示当value为空时，给用户的提示文字。
Paste_Image.png
2.密码框
<input type="password" value="" /><input type="password" value="123456" /><input type="password" value="" placeholder="请输入密码" />
Paste_Image.png
3.单选框
<input type="radio" value="male" checked name="gender" /> 男<input type="radio" value="female" name="gender" /> 女value:在界面上不会显示出来；checked:如果存在，则表示默认选中；name： 当多个<input type="radio" />的name属性值相同时，表示这多个单选框，同时只能有一个选中；
Paste_Image.png
4.复选框
<input type="checkbox" value="footballl" checked name="hobbies" /> 足球<input type="checkbox" value="basketball" name="hobbies" /> 篮球多个复选框的name即使相同，也可以同时选中；
Paste_Image.png
Paste_Image.png
- textarea元素
<textarea rows="10" cols="30">在这篇文章中，你可以对html元素有基本的了解。</textarea><textarea> 标签定义多行的文本输入控件,上面介绍的<input type="text">是单行文本框。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
Paste_Image.png
- a标签
<a href="http://www.coderyin.com/" target="" title="点击这里可以跳转到我的个人网站">我的个人网站</a>
href属性是a链接必须的属性，代表你需要跳转的网页链接；target属性有两个常用值：target="_blank"：表示在新的窗口打开页面；target="_self"（默认值）：表示在当前窗口打开；title属性：当用户鼠标悬浮到链接上时，会出现一段提示文字，提示文字的内容为你设置的属性值；
Paste_Image.png
- select标签
<select> <option value="">请选择学院名称</option> <option value="1">风景园林学院</option> <option value="2">家具设计学院</option> <option value="3">林学院</option> <option value="4">艺术设计学院</option> <option value="5">信息科学与技术学院</option></select><select></select> 元素可创建单选或多选菜单；select元素中的<option></option>标签用于定义列表中的可用选项。
Paste_Image.png
Paste_Image.png
- 表格元素
<table border="1"><thead> <tr> <th>姓名</th> <th>性别</th> </tr></thead><tbody> <tr> <td>abcdefg</td> <td>男</td> </tr> <tr> <td>殷晓飞</td> <td>男</td> </tr></tbody></table>表格一般由多个子元素构成：<table></table>：最外层容器（可以通过设置border属性来控制表格边框）；<thead></thead>：表格头——用于包裹表格的顶部信息;<tbody></tbody>: 表格主题内容;<tr></tr>表示一行记录；<td></td>表示一列，但嵌套在tbody标签的tr标签内；<th></th>也表示一列，但嵌套在thead标签的tr标签内；注意：一个表格只有一个table标签；一个table标签内只有一个thead和一个tbody;一个thead内只有一个tr,thead中的tr中可以有多个th（可以有多列）;一个tbody中可以有多个tr（可以有多行记录）,每个tr中可以有多个td（可以有多列）；
Paste_Image.png
Paste_Image.png
- button元素
<button type="button">提交按钮</button>
Paste_Image.png
- label元素
<label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /><label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
Paste_Image.png
Paste_Image.png
- ul标签
<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul><ul></ul> 标签定义无序列表。
Paste_Image.png
- ol标签
<ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol><ol start="50"><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ol type="A"><li>Coffee</li><li>Tea</li><li>Milk</li></ol><ol> </ol>标签定义有序列表。ol上有以下几个常用属性：start规定有序列表的起始值，默认为1。type规定在列表中使用的标记类型。
Paste_Image.png
- dl标签
<dl> <dt>各个学院</dt> <dd>风景园林学院</dd> <dd>家具设计学院</dd> <dd>林学院</dd> <dd>艺术设计学院</dd> <dd>信息科学与技术学院</dd></dl><dl> 标签定义了定义列表（definition list）。<dl> 标签用于结合dt（定义列表中的项目）和 dd (描述列表中的项目）。
Paste_Image.png
-
p标签
<p>文章段落内容</p><p> 标签具有确切的语义，用于定义段落。
-
h1-h6标签
<h1 id="这是标题">这是标题 1</h1><h2 id="这是标题">这是标题 2</h2><h3 id="这是标题">这是标题 3</h3><h4 id="这是标题">这是标题 4</h4><h5 id="这是标题">这是标题 5</h5><h6 id="这是标题">这是标题 6</h6><h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。
Paste_Image.png
- div标签
<div>这里面可以只放文本，也可以放其他任何标签，当然可以放自己</div><div class="news"><h2 id="News-headline">News headline 1</h2> <p>some text. some text. some text... </p><div> <a href="#">这是链接</a></div></div><div> 可定义文档中的分区或节（division/section），用于网站布局，块状分隔。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
Paste_Image.png
- span标签
<p><span>殷晓飞</span> <span>web前端</span> 尽己力，听天命。</p><span></span>标签可以放在任何元素中，行内元素，多个span可以在同一行。
Paste_Image.png
- form标签
<form> 标签用于为用户输入创建 HTML 表单，在页面中用户看不到form元素的显示效果。表单能够包含 input 、label、button、select等等元素。
HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AMHTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.
HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AMHTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.
마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AMHTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.
HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AMHTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.
HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.
HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AMHTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.
HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.
HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AMHtmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
