HTML入门 àì夳堔傛蜴生んèń 2023-10-11 19:36 47阅读 0赞 **目录** 1.什么是HTML 2.固定格式 3.第一个HTML 3.各部分细节详解 3.1 标题 3.2 段落 3.3 链接 3.4 图像 3.5 表格 3.6 排序 3.6.1 有序排序 3.6.2 无序排序 3.6.3 自定义排序 3.7 表单 3.8 文本输入框 3.9 按钮控件 3.10 radio单选按钮 3.11 checkbox 3.12 下选框 -------------------- <html> <head></head> <body> </body> </html> ## 1.什么是HTML ## HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入[表单][Link 1]、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。 * HTML 指的是超文本标记语言: **H**yper**T**ext **M**arkup **L**anguage * HTML 不是一种编程语言,而是一种**标记**语言 * HTML 不是一种编程语言,而是一种**标记**语言 * HTML 使用标记标签来**描述**网页 * HTML 文档包含了HTML **标签**及**文本**内容 * HTML文档也叫做 **web 页面** ## 2.固定格式 ## <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> 如上面代码所示,每个HTML,都会有固定格式(**Visual Studio Code**可以通过**shifrt+!**键进行快捷生成),否则无法出现运行内容,同时,HTML自身及其编译工具除过**少括号**或者**多标点**这些以外会报错,语法错误已经**多空格少空格**这类错误不会提示,所以敲打代码时务必要认真细心,否则就会打完无法显示结果,面临一点一点找的麻烦. ## 3.第一个HTML ## 新建一个csdn.html文件,内容如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>我的第一个标题</h1> <h2>我的第一个标题</h2> <h3>我的第一个标题</h3> <h4>我的第一个标题</h4> <h5>我的第一个标题</h5> <h6>我的第一个标题</h6> <p>我的第一个段落.</p> </body> </html> **<!DOCTYPE html>** 声明为 **HTML5** 文档 **<html>** 元素是 HTML 页面的根元素 **<head>** 元素包含了文档的元(meta)数据,如 <meta charset="**utf-8**"> 定义网页编码格式为 **utf-8**(由于在大部分浏览器中直接输出中文会出现乱码,所以要在头部将字符声明为**UTF-8**)<meta http-equiv="X-UA-Compatible" content="**IE=edge**">是识别为IE浏览器,<meta name="viewport" content="width=device-width, initial-scale=1.0">为安卓系统识别,我们这里不做细致考究 **<title>** 元素描述了文档的标题 **<body>** 元素包含了可见的页面内容 **<h1>** 元素定义一个大标题(标题等级分为六级,即h1-h6) **<p>** 元素定义一个段落 保存后运行,可在浏览器中显示如下界面 ![12dca6b2f04e4cdba1ee4a9da8cac396.png][] ## 3.各部分细节详解 ## ### 3.1 标题 ### HTML的标题通过<h1>~<h6>标签来定义,标签等级一共分为六级 <body> <h1>我的第一个标题</h1> <h2>我的第一个标题</h2> <h3>我的第一个标题</h3> <h4>我的第一个标题</h4> <h5>我的第一个标题</h5> <h6>我的第一个标题</h6> </body> ### 3.2 段落 ### HTML 段落是通过标签 <p> 来定义的 <body> <p>我的第一个段落.</p> <p>我的第二个段落.</p> <p>我的第三个段落.</p> </body> ### 3.3 链接 ### HTML 链接是通过标签 <a> 来定义的,下图运行之后就可直达百度主页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZONGXP</title> </head> <body> <a href="https://www.baidu.com">这是一个链接使用了 href 属性</a> </body> </html> ### 3.4 图像 ### HTML 图像是通过标签 <img> 来定义的。**注意:** 图像的名称和尺寸是以属性的形式提供的。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZONGXP</title> </head> <body> <img src="zongxp.jpg" width="640" height="640" />//前面为图片的路径,后面为图片长和宽 </body> </html> ### 3.5 表格 ### 表格由 **<table>** 标签来定义。每个表格均有若干行(由 <**tr**> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 **td** 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <**th**> 标签进行定义。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。使用边框属性来显示一个带有边框的表格: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> 上段代码**table**为表格,**table**内的内容都为表格内的内容**tr**里面放数据,**th**作为列名,**td**作为表内数据 ## 3.6 排序 ## ### 3.6.1 有序排序 ### <ol> <li>Coffee</li> <li>Milk</li> </ol> ### 3.6.2 无序排序 ### <ul> <li>Coffee</li> <li>Milk</li> </ul> ### 3.6.3 自定义排序 ### <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> ### 3.7 表单 ### <html> <body> <!--这是一个登录表单--> <form> 用户名:<input type="next" /><br /> 密码:<input type="passwd"><br <input type="button" value="登录" /> <input type="reset" value="重置" /> </form> </body> </html> form在HTML中是"表单的意思",它是一个为用户输入创建HTML表单的标签 ### 3.8 文本输入框 ### <html> <head> </head> <body> 用户名:<input type="next"/><br/> 密码:<input type="passwd"><br </body> </html> **<input type="类型"> input**在这里是作为输入,**type**后的类型,文本类型即为**text** ### **3.9 按钮控件** ### <html> <head> </head> <body> <!--这是一个登录表单--> <form> 用户名:<input type="next"/><br/> 密码:<input type="passwd"><br <input type="button" value="登录"/> <input type="reset" value="重置"/> </form> </body> </html> **<input type="button" value="登录"/>** 上述代码中,当**input**中的类型为button时,意味着这是一个按钮,当按钮需要生效操作时需要在页面中加入form ### 3.10 radio单选按钮 ### <html> <head></head> <body> 性别: <input type="radio" name="sex" />男 <input type="radio" name="sex" />女 </body> </html> **radio**用法常用在性别单选上,在单选时需要两个元素的**name**为同一个,才会实现单选 ### 3.11 checkbox ### <html> <head></head> <body> 爱好: <input type="checkbox" name="hoby" />男 <input type="checkbox" name="hoby" />女 <input type="checkbox" name="hoby" />登山 </body> </html> **checkbox**用法用在多选上面 ### 3.12 下选框 ### <html> <head></head> <body> 课程: <select> <option>JAVA基础</option> <option>JAVA进阶</option> <option>JAVA高级</option> <option>JAVA骨灰级</option> </select> </body> </html> 下选框即为将数据放入**select**的**option**标签中即可 ![2a5841ff25874105a3a290f553a8e9b2.png][] [Link 1]: https://so.csdn.net/so/search?q=%E8%A1%A8%E5%8D%95&spm=1001.2101.3001.7020 [12dca6b2f04e4cdba1ee4a9da8cac396.png]: https://img-blog.csdnimg.cn/12dca6b2f04e4cdba1ee4a9da8cac396.png [2a5841ff25874105a3a290f553a8e9b2.png]: https://img-blog.csdnimg.cn/2a5841ff25874105a3a290f553a8e9b2.png
相关 HTML入门 目录 1.什么是HTML 2.固定格式 3.第一个HTML 3.各部分细节详解 3.1 标题 3.2 段落 3.3 链接 3.4 图像 3.5 表格 3. àì夳堔傛蜴生んèń/ 2023年10月11日 19:36/ 0 赞/ 48 阅读
相关 html入门 HTML基本格式 1 <html> 2 <head></head> 3 <body> 4 this is my 布满荆棘的人生/ 2023年06月03日 09:58/ 0 赞/ 17 阅读
相关 (html入门)HTML 样式 HTML 样式 style 属性用于改变 HTML 元素的样式。 eg: <html> <body style="background-color: àì夳堔傛蜴生んèń/ 2022年09月02日 12:46/ 0 赞/ 226 阅读
相关 html入门 -------------------- HTML基础 1、HTML概述 概念: HTML:HyperText Markup Language 超 小灰灰/ 2022年08月19日 11:17/ 0 赞/ 202 阅读
相关 HTML入门 强烈推荐一个大神的人工智能的教程:[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhanghan] 深藏阁楼爱情的钟/ 2022年07月29日 11:42/ 0 赞/ 181 阅读
相关 HTML 入门 1、什么是HTML HTML(Hyper Text Markup Language),超级文本标记语言 超文本: a 标记 ゝ一世哀愁。/ 2022年07月15日 00:14/ 0 赞/ 180 阅读
相关 HTML 入门 1、什么是HTML HTML(Hyper Text Markup Language),超级文本标记语言 超文本: a 标记 淩亂°似流年/ 2022年07月15日 00:14/ 0 赞/ 176 阅读
相关 HTML入门 HTML入门 1. web概念概述 2. HTML web概念概述 JavaWeb: 使用Java语言开发基于互联网的项目 今天药忘吃喽~/ 2022年05月13日 08:50/ 0 赞/ 227 阅读
相关 HTML入门 HTML入门 1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 2.语法和规范? 3.HTML相关标签学习 傷城~/ 2022年04月06日 05:38/ 0 赞/ 240 阅读
相关 HTML入门 what is HTML HTML: Hyper Text Markup Language 超文本标签语言 对网页中的文本,图片,声音进行描述 HTML格式 ﹏ヽ暗。殇╰゛Y/ 2021年11月16日 16:56/ 0 赞/ 311 阅读
还没有评论,来说两句吧...