👨 Biaoge ⏰于2023-05-16 13:00发布 👓阅读量：12202 🏷️文章类型：【 前端技术 】
复制以下代码到编辑器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"> <!--设置编码格式：UTF-8-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置网页在浏览器的等比例大小为1-->
<link href="css/style.css" rel="stylesheet"> <!-- 导入外部的css文件 -->
<script src="js/index.js"></script> <!-- 导入外部的JavaScript文件 -->
<title>前端技术 第二课 认识简单的HTML标签</title> <!-- 网页标题 -->
</head>
<style>
/*CSS样式*/
</style>
<body>
<!--HTML主体-->
<!--请在此处书写代码-->
</body>
<script>
/*js代码*/
</script>
</html>运行到浏览器（无任何样式）
建议#尝试自己敲，尝试更改标签内的中文。注意<!-- -->是注释标签，请不要敲
简单的HTML标签
标题字
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>浏览器效果（浏览器F5刷新）
文本标签
<b>文字加粗</b>
换行<br>
<i>斜体</i>
<br>
<u>下划线</u>
<br>
<del>删除线</del>
<br>
上<sup>标</sup>
<br>
下<sub>标</sub>
<p>段落，自动换行</p>
<hr >水平分隔线浏览器效果
预处理文本pre
<pre>
预格式
意思就是，
你在HTML里怎么写，
页面就怎么展示！
</pre>效果
列表
<ul>
<li>这是一个列表标签</li>
<li>通常ul和li配合使用</li>
<li>ul是指无序标签</li>
</ul>
<ol type="1">
<li>这是一个有序标签</li>
<li>一般情况下，可以设置多种排序方式</li>
<li>ol的type属性，1时是数字排序</li>
<li>A：大写英文排序</li>
<li>I：罗马数字排序</li>
<li>a：小写英文排序</li>
</ol>效果
超链接与图片
<a href="https://彪哥.TOP/" target="_blank">超链接，属性href是目标地址，target是跳转的方式(_blank:打开一个新页面打开，不设置默认是在本页面打开)</a>
<br>
<img src="https://彪哥.top/index/img/logo.png" alt="logo">
img图片标签，src是指图片的地址，alt是指图片无法加载出来时，显示的文字
<br>效果
表格
<table border="1">
<tr>
<th>这是一个表格</th><th>tr标签指的是每一行</th><th>th标签指的是表头</th>
</tr>
<tr>
<td>td标签表示内容</td><td>第二行的第2格子</td><td>第二行的第3格子</td>
</tr>
<tr>
<td>第三行</td>
</tr>
</table>效果
表单、输入框（交互）
<!-- 注释内容 -->是注释标签请不要敲
<h1>表单</h1>
<form action="login.php" method="get" enctype="multipart/form-data">
<!-- 属性enctype="multipart/form-data"一般不写，在需要上传文件时才加入该属性 -->
<!-- action属性是提交到的后端页面网站（因为我们没有写后端，所以提交即404）；method属性是提交的方式一般有两种，get(明文)和post(加密)传输 -->
文本标签：<input type="text" name="text" value="文本标签"/><br>
<!-- input标签是输入框，type属性是输入框的类型，如上是text（文本），name属性是提交时以text名称提交，value是输入框里的值 -->
密码输入框：<input type="password" name="password" placeholder="密码输入框"/><br>
<!-- type="password"是密码输入框，输入的文字会以***显示，placeholder是输入框提示的文字 -->
<input type="checkbox" name="checkbox1" value="多选框1" />多选框1
<!-- checkbox是复选框（多选框）的输入框，注意复选框的name值都是唯一的 -->
<input type="checkbox" name="checkbox2" value="多选框2" />多选框2<br>
<input type="radio" name="radio" value="单选框1"/>单选框1
<!-- radio是单选框的输入框，name都是一样的，一次只能选择一个框 -->
<input type="radio" name="radio" value="单选框2"/>单选框2<br>
下拉列表：<select name="sports">
<!-- select标签是下拉列表，name属性是提交时以sports名称提交 -->
<option value="下拉列表1">下拉列表1</option>
<!-- 每一个option是下拉列表的选项 -->
<option value="下拉列表2">下拉列表2</option>
<option value="下拉列表2">下拉列表3</option>
</select><br>
图片提交按钮：<input type="image" name="image" src="https://彪哥.top/note/css/so.png" /><br>
<!-- type="image"是图片按钮，src属性是图片的地址 -->
文件选择器：<input type="file" name="file" /><br>
<!-- type="file"是文件选择的输入框，通常在上传文件中使用，一般配合form的enctype="multipart/form-data"属性使用 -->
多行文本框：<textarea rows="3" cols="20" name="textarea">多行文本框</textarea><br>
<!-- textarea是多行文本框，属性rows是文本框的行数，cols是宽度，<textarea></textarea>中间是初始化的文本，可自定义，或者删除 -->
<input type="submit" name="go" value="提交按钮"/>
<!-- submit是提交的按钮，当输入完成会，用户点击提交按钮，标签将配合form标签action="login.php"发送到后端 -->
<input type="reset" name="reset" value="重置按钮" /><br>
<!-- reset是重置的按钮，重置文本框的内容 -->
</form>效果
到此结束！
全部代码#
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"> <!--设置编码格式：UTF-8-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置网页在浏览器的等比例大小为1-->
<link href="css/style.css" rel="stylesheet"> <!-- 导入外部的css文件 -->
<script src="js/index.js"></script> <!-- 导入外部的JavaScript文件 -->
<title>前端技术 第二课 认识简单的HTML标签</title> <!-- 网页标题 -->
</head>
<style>
/*CSS样式*/
</style>
<body>
<!--HTML主体-->
<!--请在此处书写代码-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<b>文字加粗</b>
换行<br>
<i>斜体</i>
<br>
<u>下划线</u>
<br>
<del>删除线</del>
<br>
上<sup>标</sup>
<br>
下<sub>标</sub>
<p>段落，自动换行</p>
<hr >水平分隔线
<pre>
预格式
意思就是，
你在HTML里怎么写，
页面就怎么展示！
</pre>
<ul>
<li>这是一个列表标签</li>
<li>通常ul和li配合使用</li>
<li>ul是指无序标签</li>
</ul>
<ol type="1">
<li>这是一个有序标签</li>
<li>一般情况下，可以设置多种排序方式</li>
<li>ol的type属性，1时是数字排序</li>
<li>A：大写英文排序</li>
<li>I：罗马数字排序</li>
<li>a：小写英文排序</li>
</ol>
<a href="https://彪哥.TOP/" target="_blank">超链接，属性href是目标地址，target是跳转的方式(_blank:打开一个新页面打开，不设置默认是在本页面打开)</a>
<br>
<img src="https://彪哥.top/index/img/logo.png" alt="logo">
img图片标签，src是指图片的地址，alt是指图片无法加载出来时，显示的文字
<br>
<table border="1">
<tr>
<th>这是一个表格</th><th>tr标签指的是每一行</th><th>th标签指的是表头</th>
</tr>
<tr>
<td>td标签表示内容</td><td>第二行的第2格子</td><td>第二行的第3格子</td>
</tr>
<tr>
<td>第三行</td>
</tr>
</table>
<br>
<h1>表单</h1>
<form action="login.php" method="get" enctype="multipart/form-data">
<!-- 属性enctype="multipart/form-data"一般不写，在需要上传文件时才加入该属性 -->
<!-- action属性是提交到的后端页面网站（因为我们没有写后端，所以提交即404）；method属性是提交的方式一般有两种，get(明文)和post(加密)传输 -->
文本标签：<input type="text" name="text" value="文本标签"/><br>
<!-- input标签是输入框，type属性是输入框的类型，如上是text（文本），name属性是提交时以text名称提交，value是输入框里的值 -->
密码输入框：<input type="password" name="password" placeholder="密码输入框"/><br>
<!-- type="password"是密码输入框，输入的文字会以***显示，placeholder是输入框提示的文字 -->
<input type="checkbox" name="checkbox1" value="多选框1" />多选框1
<!-- checkbox是复选框（多选框）的输入框，注意复选框的name值都是唯一的 -->
<input type="checkbox" name="checkbox2" value="多选框2" />多选框2<br>
<input type="radio" name="radio" value="单选框1"/>单选框1
< radio是单选框的输入框，name都是一样的，一次只能选择一个框 !---->
<input name valuetype="radio"="radio"="单选框2"/>单选框2<br>
下拉列表：< nameselect="sports">
< 标签是下拉列表，name属性是提交时以sports名称提交 !--select-->
<option value="下拉列表1">下拉列表1</option>
< 每一个option是下拉列表的选项 !---->
<option value="下拉列表2">下拉列表2</option>
<option value="下拉列表2">下拉列表3</option>
</select><br>
图片提交按钮：<input name src type="image"="image"="https://彪哥.top/note/css/so.png"/><br>
< 是图片按钮，src属性是图片的地址 !--type="image"-->
文件选择器：<input name type="file"="file"/><br>
< 是文件选择的输入框，通常在上传文件中使用，一般配合form的enctype属性使用 !--type="file"="multipart/form-data"-->
多行文本框：<textarea cols namerows="3"="20"="textarea">多行文本框</textarea><br>
< textarea是多行文本框，属性是文本框的行数，cols是宽度，!--rows<textarea></textarea>中间是初始化的文本，可自定义，或者删除 -->
<input name valuetype="submit"="go"="提交按钮"/>
< submit是提交的按钮，当输入完成会，用户点击提交按钮，标签将配合form标签action发送到后端 !--="login.php"-->
<input name value type="reset"="reset"="重置按钮"/><br>
< reset是重置的按钮，重置文本框的内容 !---->
</form>
</body>
<script>
/*js代码*/</script>
</html>效果
[#真实网页展示#](点击跳转)
扫一扫
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
