前端基础之初识 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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1421
52
1315
25
1266
29
1239
24
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
HTML: The Structure, CSS: The Style, JavaScript: The Behavior
Apr 18, 2025 am 12:09 AM
The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML, CSS, and JavaScript: Web Development Trends
Apr 19, 2025 am 12:02 AM
The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
The Future of HTML: Evolution and Trends in Web Design
Apr 17, 2025 am 12:12 AM
The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
HTML vs. CSS vs. JavaScript: A Comparative Overview
Apr 16, 2025 am 12:04 AM
The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.
HTML: Building the Structure of Web Pages
Apr 14, 2025 am 12:14 AM
HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
