何为HTML
HTML是用来描述网页的一种语言
HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML不是一种编程语言，而是一种标记语言（Markup Language），标记语言是一套标记标签（Markup Tag）
HTML使用标记标签来描述网页
HTML源码基础
标签的使用
title标签：定义网页标题
<!--xxx-->：注释标签（xxx处写注释）
h1~h6标签：标题标签
ul标签：无序列表标签（里面可以继续嵌套无序标签或有序标签）
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鄂J-Monkey</title> <!--网页标题-->
</head>
<body>
<ul><!--ul标签是添加无序列表标签-->
<li>中国农业银行
<ul><!--无序列表里嵌套无序列表-->
<li>中国农业银行湖北分行
<ol><!--无序列表里嵌套有序列表-->
<li>中国农业银行湖北黄冈分行</li>
<li>中国农业银行湖北武汉分行</li>
<li>中国农业银行湖北荆门分行</li>
</ol>
</li>
<li>中国农业银行黄冈分行
<ul><!--无序列表里嵌套无序列表-->
<li>中国农业银行黄冈分行罗田支行</li>
<li>中国农业银行黄冈分行黄梅支行</li>
<li>中国农业银行黄冈分行红安支行</li>
</ul>
</li>
</ul>
</li>
<li>中国银行
<ul><!--列表里嵌套列表-->
<li>中国银行湖北分行
<ol><!--无序列表里嵌套有序列表-->
<li>中国银行湖北黄冈分行</li>
<li>中国银行湖北武汉分行</li>
<li>中国银行湖北荆门分行</li>
</ol>
</li>
<li>中国银行黄冈分行
<ul><!--无序列表里嵌套无序列表-->
<li>中国银行黄冈分行罗田支行</li>
<li>中国银行黄冈分行黄梅支行</li>
<li>中国银行黄冈分行红安支行</li>
</ul>
</li>
</ul>
</li>
<li>中国工商银行</li>
<ul><!--列表里嵌套列表-->
<li>中国工商银行湖北分行
<ol><!--无序列表里嵌套有序列表-->
<li>中国工商银行湖北黄冈分行</li>
<li>中国工商银行湖北武汉分行</li>
<li>中国工商银行湖北荆门分行</li>
</ol>
</li>
<li>中国工商银行黄冈分行
<ul><!--无序列表里嵌套无序列表-->
<li>中国工商银行黄冈分行罗田支行</li>
<li>中国工商银行黄冈分行黄梅支行</li>
<li>中国工商银行黄冈分行红安支行</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
ol标签：有序列表标签（里面可以继续嵌套有序标签或无序标签）
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鄂J-Monkey</title> <!--网页标题-->
</head>
<body>
<ol><!--ol标签是添加有序列表标签-->
<li>中国移动
<ol><!--有序列表里嵌套有序列表-->
<li>中国移动湖北公司
<ol><!--有序列表里嵌套有序列表-->
<li>中国移动湖北公司黄冈分公司</li>
<li>中国移动湖北公司武汉分公司</li>
<li>中国移动湖北公司荆门分公司</li>
</ol>
</li>
<li>中国移动广东公司
<ul><!--有序列表里嵌套无序列表-->
<li>中国移动广东公司深圳分公司</li>
<li>中国移动广东公司广州分公司</li>
<li>中国移动广东公司佛山分公司</li>
</ul>
</li>
</ol>
</li>
<li>中国电信</li>
<li>中国联通</li>
</ol>
</body>
</html>
a标签（里面href属性定义为一个URL时，则是跳转到某一个URL地址，target属性为空时，表示在当前标签页打开URL）
[HTML] 纯文本查看 复制代码 <a href = "http://www.baidu.com">跳回百度</a>
a标签（里面href属性定义为一个URL时，则是跳转到某一个URL地址，target属性若定义为_blank时，则在空白标签打开UR）
[HTML] 纯文本查看 复制代码 <a href = "http://www.baidu.com" target = "_blank">跳回百度</a>
a标签（里面href属性若定义为一个属性名时则表示跳转到该属性名所在位置（通常用于一键返回到网页开头）
img标签（默认只使用src属性得到的是原始大小的图片）
img标签（除了使用src属性外还可以使用width和height属性来定义图片的大小）
img标签（img标签外面加一层a标签，实现点击图片跳转到指定页面）
[HTML] 纯文本查看 复制代码 <a href = "https://www.ltxit.com/"><img width = "85px" height = "69px" src = "https://www.ltxit.com/static/image/common/logo.svg"></a>
iframe标签（默认只使用src属性就可以在网页中嵌套一个网页）
[HTML] 纯文本查看 复制代码 <iframe src = "https://www.ltxit.com"></iframe>
iframe标签（除了使用src属性外还可以使用width和height属性来定义嵌套的网页的大小）
[HTML] 纯文本查看 复制代码 <iframe width = "666px" height = "315px" src = "https://www.ltxit.com"></iframe>
textarea标签（输入框大小可通过右下角自由拉扯）
[HTML] 纯文本查看 复制代码 <textarea>我是textarea标签</textarea><br>
input标签（<input> 输入框大小是固定的）
input标签（后面直接加文本）
input标签的placeholder属性（输入框内添加指导性内容）
input标签的type属性（如果不写type属性，默认就是“text”）
input标签的type属性（密文书写可将type属性设置为“password”）
input标签的type属性（单选框可将type属性设置为“radio”）
input标签的type属性（单选框仅仅指定type属性为“radio”还不够，需要指定“name”和“value”这两个属性，“name”这个属性类似于做单选题时的题目（即该选项归属哪个题目），同一个“name”只能选择一个选项；“value”这个属性是对应选项的值）
注意：这里有个坑--->后续将该选项提交到服务器时，仅会提交<input type = "xx" "name" = xx>这个标签里面的内容，后面定义的选项名称仅会在浏览器端显示，不会提交到服务器的，所以需要在标签里面通过“value”属性来定义选项名称。
input标签的type属性（复选框可将type属性设置为“checkbox”）
input标签的type属性（复选框仅仅指定type属性为“checkbox”虽然看起来功能是实现了，但是还需要指定“name”和“value”这两个属性，“name”这个属性类似于做多选题时的题目（即所选选项归属哪个题目），同一个“name”的多个选项才是有效的多选；“value”这个属性是对应选项的值）
注意：跟上面的radio属性一样的这里有个坑--->后续将该选项提交到服务器时，仅会提交<input type = "xx" "name" = xx>这个标签里面的内容，后面定义的选项名称仅会在浏览器端显示，不会提交到服务器的，所以需要在标签里面通过“value”属性来定义选项名称。
input标签的type属性（上传文件可将type属性设置为“file”）
input标签的type属性（提交按钮可将type属性设置为“submit”）
select标签（下拉框标签）
form标签（表单标签，用来给服务器提交表单数据的）
form标签对里面的所有有“name”属性的数据都会被提交
form提交表单的格式：
<form action = "提交到哪个url地址" method = "get或post">
需要提交的表单数据
</form>
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鄂J-Monkey</title> <!--网页标题-->
</head>
<body>
<form action = "http://bbs.ltxit.com" method = "get">
<textarea>我是textarea标签</textarea><br>
<select>
<option>---请选择省份---</option>
<option>湖北省</option>
<option>广东省</option>
<option>江苏省</option>
<option>浙江省</option>
<option>湖南省</option>
</select><br>
<input type = "file"><br>
<input type = "radio" name = "sex" value = "男生"> 男生<br>
<input type = "radio" name = "sex" value = "女生"> 女生<br>
<input type = "radio" name = "sex" value = "未知"> 未知<br>
<input type = "checkbox" name = "operator" value = "中国移动"> 中国移动<br>
<input type = "checkbox" name = "operator" value = "中国电信"> 中国电信<br>
<input type = "checkbox" name = "operator" value = "中国联通"> 中国联通<br>
<a href = "https://www.ltxit.com/"><img width = "85px" height = "69px" src = "https://www.ltxit.com/static/image/common/logo.svg"></a><br>
<input type = "submit"><br>
<a href = "#baidu">返回最上面</a>
</form>
</body>
</html>
属性的使用
id属性：一般用来表示网页中唯一值（即：同一个网页id不可重复）
[HTML] 纯文本查看 复制代码 <input type = "text" id = "text"><br><!--指定这个文本输入框的id值为“text”-->
class属性：通常用作CSS的一个参考
style属性：通常用作网页美化
checked属性：设置默认值的（例如给单选设置一个默认值）
[HTML] 纯文本查看 复制代码 <input type = "radio" name = "sex" value = "女生" checked> 女生<br><!--将“女生”这个选项做为默认选项-->
disabled属性：设置后该项就不可用，也不可点击
[HTML] 纯文本查看 复制代码 <input type = "radio" name = "sex" value = "男生" disabled> 男生<br><!--将“男生”这个选项设置为不可用-->
readonly属性：设置后该项仅可读，不可进行其他操作（仅适用于input标签的“text”和“password”以及“textarea”标签有效，其它标签不生效）
[HTML] 纯文本查看 复制代码 <input placeholder = "输入需要百度的内容" readonly> 百度一下<!--将这个文本输入框设置为只读（不可写）-->
| 
鄂公网安备42110002000175号 )
发表于 2025-6-28 08:58
