목차
前端基础之初识 HTML_html/css_WEB-ITnose
HTML
HTML（Hypertext Markup Language）即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈.
下面我们来学习 HTML 基础知识！
标签、符号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--<meta http-equiv="Refresh" content="5">--> <title></title></head><body>------------------------------------------ <h1 id="H-标签">H1标签</h1> <h2 id="H-标签">H2标签</h2> <h3 id="H-标签">H3标签</h3> <h4 id="H-标签">H4标签</h4> <h5 id="H-标签">H5标签</h5> <h6 id="H-标签">H6标签</h6>------------------------------------------ <h2 id="块级标签">块级标签</h2> <div style="background-color: red;">div1</div> <h2 id="内联标签-行内标签">内联标签、行内标签</h2> <a style="background: red;">div1</a>------------------------------------------ <h2 id="符号">符号</h2> © <!-- copy 符号--> < a > <!-- 小于 大于号--> <!-- 换行-->
로그인 후 복사
---
展示效果如下：
---
段落、换行
<h2 id="段落-换行">段落/换行</h2> <p>我们知道两个进程如果需要进行通讯最基本的一个前提能够唯一的标识一个进程协议＋端口号唯一标识网络中的一个进程。</p> <p>我们知道两个进程如果需要进行通讯最基本的一个前提能够唯一的标识</br>一个进程协议＋端口号唯一标识网络中的一个进程。</p>
로그인 후 복사
a 标签、锚
<h2 id="a标签-href-当前页打开">a标签，href，当前页打开</h2>> <a href="http://www.baidu.com">点我，跳转百度</a> <h2 id="新页打开">新页打开</h2>> <a href="http://www.baidu.com" target="_blank">点我，跳转百度</a> <h2 id="锚mao">锚mao</h2> <a href="#top1">第一章</a> <a href="#top2">第二章</a> <a href="#top3">第三章</a> <a href="#top4">第四章</a> <a href="#top5">第五章</a> <div style="height: 500px;"></div> <div id="top1" style="height: 100px;">第一章内容</div> <div id="top2" style="height: 100px;">第二章内容</div> <div id="top3" style="height: 100px;">第三章内容</div> <div id="top4" style="height: 100px;">第四章内容</div> <div id="top5" style="height: 100px;">第五章内容</div>
로그인 후 복사
---
展示效果如下：
---
select 标签
<h2 id="select标签">select标签</h2> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>长沙</option> <option>株洲</option> </select> <select multiple="multiple" size="2"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>长沙</option> <option>株洲</option> </select>
로그인 후 복사
input 系列:
checkbox: (复选项) <h2 id="input系列">input系列</h2> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" />radio: (单选项) <input name="r1" type="radio" /> <input name="r1" type="radio" />普通输入框： <h2 id="普通">普通</h2> <h4 id="password">password</h4> <input type="text"> <input type="password">上传文件： <h2 id="上传文件">上传文件</h2> <input type="file">几种按钮： <h2 id="按钮">按钮</h2> <input type="button" value="按钮"> <input type="submit" > <input type="submit" value="按钮">多行文本框: <h2 id="多行文本框">多行文本框</h2> <textarea>框中内容</textarea>多行文本框与text文本框区别: <h2 id="多行文本框与text区别">多行文本框与text区别</h2> <input type="text"> <input type="text" value="allen">label 标签： <h2 id="label标签">label标签</h2> <h4 id="没有应用label-点击姓名字体时没反应">没有应用label，点击姓名字体时没反应</h4> 姓名：<input id="name1" type="text"> 婚否：<input id="marry1" type="checkbox"> <h4 id="有应用label-点击姓名有反应-for">有应用label，点击姓名有反应(for)</h4> <label for="name2">姓名： <input id="name2" type="text"> <label for="marry2">婚否： <input id="marry2" type="checkbox">
로그인 후 복사
---
展示效果如下：
---
ul、ol、dl 比较:
<h2 id="ul-自动在前面加点">ul,自动在前面加点.</h2> <ul> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li> </ul>------------------------------------------ <h2 id="ol-自动排序">ol,自动排序</h2> <ol> <li>ol.li</li> <li>ol.li</li> <li>ol.li</li> <li>ol.li</li> </ol>------------------------------------------ <h2 id="dl-列表">dl,列表</h2> <dl> <dt>湖南</dt> <dd>长沙</dd> <dt>河北</dt> <dd>石家庄</dd> </dl>
로그인 후 복사
---
展示效果如下：
---
table 表格：
<h2 id="table-表格-无边框">table 表格，无边框</h2> <table> <tr> <td>主机名</td> <td>IP</td> <td>状态</td> </tr> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> </table>------------------------------------------ <h2 id="table-表格-边框">table 表格，边框</h2> <table border="1"> <tr> <td>主机名</td> <td>IP</td> <td>状态</td> </tr> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> </table>------------------------------------------ <h2 id="table-表格-边框-表头-将td换成th-同时还自动加粗了">table 表格，边框，表头:将td换成th，同时还自动加粗了</h2> <table border="1"> <tr> <th>主机名</th> <th>IP</th> <th>状态</th> </tr> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> </table>------------------------------------------ <h2 id="table-表格-为了代码看起来更易懂-则分别在表头加了thead-和-tbody-这种方法推荐使用">table 表格，为了代码看起来更易懂，则分别在表头加了thead 和 tbody，这种方法推荐使用</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th>IP</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> </tbody> </table>------------------------------------------ <h2 id="table-表格-合并单元格-列合并-colspan-占用两列">table 表格，合并单元格,列合并，colspan="2",占用两列</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th colspan="2">IP</th> <!--<th>状态</th>--> </tr> </thead> <tbody> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> <td>1.1.1.2</td> <td>down机</td> </tr> </tbody> </table>------------------------------------------ <h2 id="table-表格-合并单元格-列合并-colspan-占用四列">table 表格，合并单元格,列合并，colspan="4",占用四列</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th colspan="4">IP</th> <!--<th>状态</th>--> </tr> </thead> <tbody> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> <td>1.1.1.2</td> <td>down机</td> </tr> </tbody> </table>------------------------------------------ <h2 id="table-表格-合并单元格-行合并-rowspan-占用-行">table 表格，合并单元格,行合并，rowspan="3",占用3行</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th>IP</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td rowspan="3">baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> <tr> <!--<td>baidu2.com</td>--> <td>1.1.1.2</td> <td>down机</td> </tr> <tr> <!--<td>baidu2.com</td>--> <td>1.1.1.2</td> <td>down机</td> </tr> </tbody> </table>
로그인 후 복사
---
展示效果如下：
---
fieldset 边框:
<h2 id="fieldset-边框">fieldset 边框</h2> <fieldset> <legend>登录</legend> <p>用户名：</p> <p>密码：</p> </fieldset>------------------------------------------ <h2 id="form-表单-botton-reset提交按钮默认需要结合js等绑定事件-否则点击不生效-啥也不做-而submit可以直接提交">form 表单,botton,reset提交按钮默认需要结合js等绑定事件，否则点击不生效，啥也不做，而submit可以直接提交</h2> <form action="/account/login/"> 用户名：<input type="text" name="username"/> 密码：<input type="password" name="pwd"/> 验证码：<input type="password" name="pwd"> <img src="/static/imghw/default1.png" data-src="/checkcode/" class="lazy" alt="前端基础之初识 HTML_html/css_WEB-ITnose" > <input type="button" value="botton" onclick="alert(1234);"/> <input type="submit" value="submit"/> <input type="reset" value="reset"/> </form> <!--{'username':'allen','pwd':'1234'}-->------------------------------------------ <h2 id="form-表单-根据关键字向sogou服务器发起请求-从而进行搜索">form 表单,根据关键字向sogou服务器发起请求，从而进行搜索</h2> <form action="http://www.sogou.com/web"> 关键字：<input type="text" name="query"/> <input type="submit" value="submit"/> </form> <!--{'username':'allen','pwd':'1234'}--> ------------------------------------------</body></html>로그인 후 복사
---
展示效果如下：
---
html 中文学习网址: http://www.w3school.com.cn/html/index.asp
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전
By DDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7530
15
7530
15
Cakephp 튜토리얼
1378
52
1378
52
Steam의 계정 이름 형식은 무엇입니까?
82
11
82
11
Win11 활성화 키 영구
54
19
54
19
NYT 연결 힌트와 답변
21
76
21
76
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?
Mar 17, 2025 pm 12:20 PM
기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?
Mar 17, 2025 pm 12:27 PM
이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?
Mar 20, 2025 pm 05:56 PM
이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.
& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?
Mar 20, 2025 pm 06:05 PM
이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
