推荐W3school、developer.mozilla.org学习
文章目录
- 前言
- 标签
- html标签
- 标题标签h1-h6
- 段落标签p
- 换行标签br
- 超链接标签a
- 锚点定位
- 图像标签img
- 列表标签
- 有序列表ol
- 无序列表ul
- 定义列表dl
- 表格标签
- 表格列合并
- 表单标签
- input:输入框
- 文本框
- 密码框
- 单选按钮
- 复选框
- 上传文件按钮
- 下拉列表
- 文本域
- 只读框和禁用框
- 按钮
- 容器标签div与span
- div标签
- span标签
前言
提示:HTML不区分大小写,是一种超文本的标记语言
另外用VS Code写HTML是有公式的
*
:生成的数量,
{}
:标记中的文本内容
>
:子标记
+
:同级标记
$
:序号
^
:上级
提示:以下是本篇文章正文内容,下面案例可供参考
标签
HTML标记是指HTML语言的标签(tag)和属性(attribute)。
HTML标签是用于定义HTML文档结构、元素的语法和显示效果的代码。
HTML属性是用于控制HTML元素行为和样式的代码。
HTML标签是网页开发中最基础的元素,是构成网页结构的基本单元。
以下是HTML标签的一些常用示例:
html标签
<html>标签定义了HTML文档的根元素,通常在这个标签中包含了<head>和<body>标签,用来定义文档的头部和主体部分
下面的示例代码展示了一个基本的HTML结构:
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 主体部分内写代码 -->
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
</body>
</html>
标题标签h1-h6
用于定义文档标题的标记,共有六个等级,从h1到h6
<!-- 标题标记 h1-h6 独占一行显示,字体变大加粗-->
<h1>一级标题</h1>
<h6>二级标题</h6>
段落标签p
用于定义段落内容的标记
<!-- 段落标记 p 独占一行 段落之间有间距-->
<p>这是第一段内容</p>
<p>这是第二段内容</p>
换行标签br
<!-- 换行标记(单) br 浏览器运行时会忽略掉代码中的换行符-->
<p>
黑云压城城欲催<br>
甲光向日金鳞开
</p>
超链接标签a
<a>
标签用于定义超链接,可以链接到其他页面、文件或页面内的某个位置
超链接a
,必须设置href
属性:跳转地址,可以实现界面跳转
<!-- 文字跳转 点击文字跳转到页面-->
<a href="https://blog.csdn.net/rej177">CSDN二哈喇子!</a>
<!-- 图片跳转 点击图片跳转到页面-->
<a href="https://blog.csdn.net/rej177"> <!-- 绝对路径 -->
<img src="./img.jpg" width="100" height="100"> <!-- 相对路径 -->
</a>
<!-- 运行效果:点击图片跳转到改路径,但图片存放位置与代码同级 -->
锚点定位
HTML锚点是指在同一个文档中为页面的不同部分设置超链接,这样用户在点击链接时直接跳转到相应的页面部分而不需要滚动。
要创建HTML锚点,需要使用以下步骤:
-
给目标元素添加id属性,作为锚点的名称
例如:<h2 id="section1">Section 1</h2>
-
在锚点的链接中添加
#
符号和对应的锚点名称,
例如:<a href="#section1">转到第1行</a>
-
点击链接时,页面会自动定位到对应的锚点位置。
请注意,在单页应用程序中,锚点也可以用于页面内的导航。
<!-- 可用公式生成:ol>li*200{拉黑两分钟}
为了更好的演示所以设置成有序列表,全改p标签也可以-->
<p id="first">街头的乌鸦</p>
<ol>
<li>拉黑两分钟</li>
<li>拉黑两分钟</li>
<li>拉黑两分钟</li>
<!-- 中间省略N行 -->
<li>拉黑两分钟</li>
<li>拉黑两分钟</li>
<li>拉黑两分钟</li>
</ol>
<a href="#first">回到第一个</a>
运行效果:
图像标签img
<img>
标签用于在HTML页面中插入图片,用于定义图片的标记
下面中的 jpg图片要放在与代码同级文件夹下
<!-- 图片标记 img -->
<!-- 必须设置scr属性:图片地址 -->
<img src="./image.jpg">
除了 src
和 alt
属性之外,还有其他属性可以用于控制图片的大小、对齐方式等等
可以使用 width
和 height
属性设置图片的宽度和高度:
alt
属性可省略,如果要加的话应该使用有意义的 alt
属性来提供图片的描述
<img src="./image.jpg" alt="图片描述" width="500" height="300">
<!-- 上述代码中,src属性指定了要显示的图片文件的路径,而 alt属性则提供了一个替换文本,
如果在显示图片时出现问题,则会显示此替换文本。 -->
该标记将显示一个宽度为 500px、高度为 300px 的图片。
需要注意的是,使用 <img>
标记时应该注意图片格式和大小,以确保页面加载速度较快,并且不占用过多的带宽
列表标签
用于定义有序或无序列表的标记
有序列表ol
子标记 列表项:li
每个列表项独占一行显示,列表项前有序号
<!-- ol>li*2 公式生成 -->
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
无序列表ul
子标记 列表项:li
每个列表项独占一行显示,列表项前有圆点图标
<!-- ul>li*2 公式生成 -->
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
定义列表dl
子标记:dt(简要说明),dd(详细描述)
<!-- dl>(dt+dd)*3 公式生成-->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言,用于创建网页</dd>
<dt>CSS</dt>
<dd>层叠样式表,用于控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>一种编程语言,可用于创建动态和交互性效果</dd>
</dl>
表格标签
用于定义表格的标记
table:整个表格
tr:行
列:
th:居中加粗
td:居左不加粗
<table border="1" cellpadding="5" cellspacing="0">
<caption>表格标题</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">表格备注</td>
</tr>
</tfoot>
</table>
表格列合并
跨行合并
1:删除合并后下方多余的列
2:设置rowspan属性,行范围属性
扩列合并
1:删除合并后右侧多余的列
2:设置colspan属性,列范围属性
【例】做一个类似于下图的大一课表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="8">大一课表</td>
<!-- colspan="8",代表后面这个数据横向占8列 -->
</tr>
<tr>
<td>节次</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<!-- rowspan="2", 代表后面这个数据纵向占2行-->
<td>英语</td>
<td>数据库</td>
<td>软件测试</td>
<td>Java</td>
<td>体育</td>
<td></td>
<td></td>
</tr>
<tr>
<td>前端</td>
<td>形势政策</td>
<td>软件测试</td>
<td>Java</td>
<td>体育</td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>Java</td>
<td></td>
<td>前端</td>
<td>数据库</td>
<td>Python</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Java</td>
<td>数学</td>
<td>前端</td>
<td>数据库</td>
<td>Python</td>
<td></td>
<td></td>
</tr>
<tr>
<td>晚上</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8">注意</td>
</tr>
</table>
</body>
</html>
表单标签
表单标记的意义:用于获取用户的输入与选择数据
HTML中的表单标签用于创建用户输入的交互式部分。以下是一些常用的表单标签:
HTML中的常用的表单标签包括:
<form>
:定义表单,用于包裹表单元素。<textarea>
:用于创建多行文本输入框。<option>
:定义下拉列表框中的选项。<label>
:定义表单元素的标签,用于增加对输入字段的描述或说明。<button>
:用于创建按钮<fieldset>
:用于将相关的表单元素分组。<legend>
:定义fieldset元素的标题。<optgroup>
:定义一个选项组,用于在下拉列表框中分组选项。<input type="submit">
:定义提交按钮。<input type="reset">
:定义重置按钮,用于清除表单中的数据。
以上是一些常用的表单标签,可以根据实际需求选择适合的标签来构建表单。
input:输入框
<input>
:定义输入字段,例如文本输入框、密码输入框、单选按钮、复选框等
文本框
placeholder
输入提示属性,value
默认值
<form>
<p>
文本框 <input type="text" placeholder="请输入想输入的内容" value="你好">
</p>
</form>
密码框
<form>
<p>
密码框 <input type="password">
</p>
</form>
单选按钮
<input type="radio">
:定义单选按钮
设置性别或同意与否的时候经常用到
多个单选按钮必须设置相同的name属性,才会单选,
<form>
<p>
<!-- input[type=radio]*2 公式自动生成 -->
<input type="radio" name="sex" checked>是
<!-- checked属性是默认选中 -->
<input type="radio" name="sex">否
</p>
</form>
复选框
<input type="checkbox">
:定义复选框
<form>
<p>
<!-- input[type=checkbox]*4 公式自动生成 -->
<input type="checkbox">JAVA
<input type="checkbox">MySQL
<input type="checkbox">Python
<input type="checkbox" checked>VUE
<!-- checked属性是默认选中 -->
</p>
</form>
上传文件按钮
上传图片或文件时用到,比如买东西时评论带图片
<input type="file">
:定义文件上传字段
<form>
<p>
文件框 <input type="file">
</p>
</form>
下拉列表
<select>
:定义下拉列表框
<form>
<p>
下拉列表 <select>
<option value="">高中</option>
<option value="">专科</option>
<option value="">本科</option>
<option value="">硕士</option>
<option value="">博士</option>
</select>
</p>
</form>
文本域
大段的文字输入
<form>
<p>
文本域
<textarea cols="30" rows="10"></textarea>
</p>
</form>
只读框和禁用框
只读框(readonly)是指用户可以看到文本,但无法编辑它
禁用框(disabled)是指用户既无法看到文本,也无法编辑它
<form>
<p>
只读框 <input type="text" value="只读文本" readonly>
</p>
<p>
禁用框 <input type="text" value="禁用文本" disabled>
</p>
</form>
按钮
HTML按钮是用于在网页中触发特定操作的元素
按钮类型: <button>
元素有不同的类型属性,用于定义按钮的类型。常见的类型包括:
submit
:用于提交表单数据。
reset
:用于重置表单数据。
button
:普通按钮,不会有任何默认行为。
<form>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通</button>
</form>
也可以电钮样式做更改
<!-- 按钮事件: 使用JavaScript可以为按钮添加各种事件,例如点击事件、鼠标悬停事件等 -->
<button onclick="myFunction()">点击我</button>
<!-- 按钮样式: 可以使用CSS来自定义按钮的样式,例如修改背景颜色、字体样式等 -->
<button style="background-color: blue; color: white;">点击我</button>
容器标签div与span
当涉及到HTML标记和CSS样式时,div和span是两个常用的容器标签
它们本身没有特定的语义,而是用于组织和样式化其他HTML元素
div和span没有默认的视觉效果,需要结合css代码使用
div标签
div:区域标记 ,一个复杂的界面必须使用若干个div标记划分出不同的区域
中间一般装的是若干个子标记
div标签是一个块级元素,它通常用于将HTML文档的一部分划分为独立的区域
可以使用div标签来创建布局,将多个元素组合在一起,并对它们应用共同的样式
通过设置div的CSS属性,如宽度、高度、背景色等,可以控制div的外观
给<div>标签设置不同的样式,可以实现各种不同的布局效果。
我们加一点css代码让他更好的显示:
<body>
<!-- 下面的示例代码展示了如何使用div标签创建两个不同的区域: -->
<div style="background-color: lightblue; padding: 20px;">
<div style="background-color: lightgray; margin-bottom: 10px; padding: 10px;">
<h1>这是第一个标题</h1>
<p>你好世界!</p>
</div>
</div>
<div style="background-color: lightblue; padding: 20px;">
<div style="background-color: lightgray; margin-bottom: 10px; padding: 10px;">
<h2>这是第二个标题</h2>
<p>Hello World!</p>
</div>
</div>
</body>
输出结果:
span标签
span:范围标记 ,在一行文本中使用span标记,凸显某一块文本内容
span标记中间装的是纯文本内容
span标签是一个内联元素,它通常用于对文本的一部分进行样式化或标记。
可以使用span标签来对文本中的某个词、句子或字符应用特定的样式,如颜色、字体大小等。
通过设置span的CSS属性,可以改变其外观,但不会破坏文本的流动性。
这里也加一点css代码让他更好的显示:
<body>
<p>这是一个 <span style="color: cyan;">带颜色</span> 的文字</p>
<p>这是一段 <span id="mySpan">可点击的文本</span>。</p>
<script>
document.getElementById("mySpan").addEventListener("click", function() {
alert("你点击了span标签!");
});
</script>
</body>
在第二个方法中使用了 JavaScript 的 addEventListener 方法来给 id 为 mySpan 的 span 标签添加了一个“点击”事件。当用户点击这个 span 标签时,会触发一个函数,该函数使用 alert() 方法在屏幕上显示一个弹出框,其中包含一条消息:“你点击了 span 标签!”。
更具体地说,这段代码的作用是:
使用 document.getElementById() 方法获取 id 为 mySpan 的 span 标签。
使用 addEventListener() 方法向该 span 标签添加一个“点击”事件监听器,当用户点击该 span 标签时触发。
创建一个匿名函数,在用户点击 span 标签时执行该函数。该函数使用 alert() 方法在页面上显示一个弹出框,其中包含一条消息:“你点击了 span 标签!”。
这段代码的效果是向 id 为 mySpan 的 span 标签添加了一个“点击”事件监听器,当用户点击该标签时,会显示一个弹出框,告诉用户他们点击了 span 标签
输出效果: