HTML语言-CSDN博客

本文链接：https://blog.csdn.net/m0_73200962/article/details/147948780

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过使用标签来定义网页的结构和内容。以下是一些基本的HTML概念和示例：

基本结构

每个HTML文档都遵循一个基本的结构，包括<!DOCTYPE>声明、<html>、<head>和<body>标签。

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

<html> </html> 组成的是一个完整的html页面。

<head> </head> 是头部标签

<title> </title> 是页面标签，就是一个网页的名字

<body> </body>身体标签

简单来说，就是把<html> </html>比做一个人的身体，而<head> </head>就是一个人身体的头部，<body> </body>就是一个人的身体，然后我们写代码就是在完善这个人的身体。

HTML中的常见标签

h标签（headline标题）

h标题一共有六级标题，有h1,h2,h3,h4,h5,h6;都是双标签

h标签的作用：是给内部内容添加对应级别标题的语义。

简单来说，h标签就是几级标题

<body>
     <h1>我是一级标签</h1>
     <h2>我是二级标签</h2>
     <h3>我是三级标签</h3>
     <h4>我是四级标签</h4>
     <h5>我是五级标签</h5>
     <h6>我是六级标签</h6>
    
</body>

P标签（paragraph（段落）

是一个双标签 <p></p>

它的作用 : 是添加一个完整段落的语义

img标签（image）

是一个单标签，文本级标签

它的作用：在指定位置插入一张图

image 标签的属性：

src: 作用是引入图片的路径（图片存放路径必须是在html文件的存放路径下）
alt: 图片加载不出来时候的替换文本
width: 设置图片的宽度
height: 设置图片的高度

<body>
     <imgsrc="3.png"alt="实例"width="220px"title="测试"border="10"> 
     <imgsrc="2.png"alt="出错啦">

</body>

相对路径

相对路径：从 html 文件出发，找到对应图片位置的路径，如果进入到某个文件夹使用‘/’ ，如果出某个文件夹使用 ‘../’

绝对路径

绝对路径重要分为盘符绝对地址，和网站的绝对地址盘符绝对地址

<imgsrc="C:/Users/lmpc/Desktop/1.jpg"alt="">

通过 c 盘根目录出发去查找你对应文件位置，工作中不使用这种方法，因为服务器没有 c 盘 ... 这些目录网站的绝对地址

<img
src="https://bkimg.cdn.bcebos.com/pic/472309f79052982253a702cad8ca7bcb0a46d426?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"alt="">

锚点 (anchor)

是一个双标签，文本级标签

锚点的作用：在指定位置添加一个超级链接，从而实现相应的跳转

a 标签属性（给超级链接添加相应的作用）：

href: 英文hypertext reference （超文本引用）

<body>
    <ahref="http://www.baidu.com">百度</a>
</body>

然后可点击百度跳转

上面的代码 href 属性跳转到百度网站，这个是绝对路径，我们也可以设置相对路径跳转


<body>
    <ahref="7_标签跳转.html">跳转相对路径文件</a>
</body>

target：作用是是否在新的标签页打开链接，值一定是“_blank

<body>
    <ahref="7_标签跳转.html"target="_blank">跳转相对路径文件</a>
</body>

title属性：作用是鼠标移上文字之后的悬停文本

<body>
   <ahref="7_标签跳转.html"target="_blank"title="悬停文本">跳转相对路径文件</a>
</body>

表单元素

表单元素是网页中提供用户进行点击或者输入的控件

form标签

form是表单的意思，form是容器标签，内部存放可输入的控件。如果输入的表单需要提交到数据，所有的控件需要被form表单包裹

method：方法，指的是数据提交的方法，属性值是post和get

action：是数据提交的位置

input标签

input标签是输入框的一种，但不仅仅只是输入框，通过type属性，可以拓展多功能

input的 type 属性非常丰富

输入框

输入框有两个属性：value 和 placeholder

value：设置默认显示的内容，属性值为自定义的内容

placeholder：属性作用是如果没有value的时候提示用户的文字占位

姓名：<input type="text" placeholder="请输入姓名">

密码框

通过type值为password设置的，显示效果是输入后通过掩码形式显示的

密码：<input type="password" placeholder="请输入密码">

单选框

通过type的值为radio设置的，单选按钮都是成组出现的，要想实现一组单选按钮的互斥，需要设置相同的name属性

性别：<input type="radio" placeholder="请选择性别" name="sex">女
<input type="radio" placeholder="请选择性别" name="sex">男
<input type="radio" placeholder="请选择性别" name="sex">保密

复选框

即多选框，通过type值为checkbox设置；复选框可以通过对自身进行多次点击实现选择或者取消；同时也可以选择一个或者多个，建议同一组设置相同的name属性

爱好：<input type="checkbox" placeholder="请选择爱好" name="hobby">篮球
<input type="checkbox" placeholder="请选择爱好" name="hobby">足球
<input type="checkbox" placeholder="请选择爱好" name="hobby">乒乓球
<input type="checkbox" placeholder="请选择爱好" name="hobby">游泳
<input type="checkbox" placeholder="请选择爱好" name="hobby">健身

其中，单选框和复选框都有默认选择的功能，需要给input标签添加一个checked=“checked”

<input type="checkbox" placeholder="请选择爱好" name="hobby" checked="checked">游泳
<input type="radio" placeholder="请选择性别" name="sex" checked="checked">女

此时我们选择的时候只能点击圆圈或方框才能进行选择，点击文字是不能触发对应单选或者多选框的点击事件的，所以需要label标签去扩大触发范围

<label>
<input type="radio" placeholder="请选择性别" name="sex" checked="checked">女
</label>

文本域

标签是textarea，之前的input只能输入单行的文本，使用textarea标签可以输入多行文本 textarea是一个双标签，是文本级标签；属性值rows和cols

rows：定义文本域的可视区域有几行，单位是数字

cols：当前行显示的字节数量（以英文为准），单位是数字

placeholder：占位符

此时text area默认是可以通过拖动右下角实现放大或缩小文本域的，如果不希望缩放文本域，可以通过设置style的resize属性值为none，去掉可拖拽区域

自我介绍：<textarea cols="40" rows="2" placeholder="请输入自我介绍内容" style="resize: none;"></textarea>

下拉菜单

需要一组标签进行制作，select 和 option

select即选择的意思，表示搭建下拉项

option 是选项的意思，表示搭建下拉项

关系：select>option

设置完成后，显示是默认第一个显示，并不是被选中，使用selected属性，也是selected，即可显示并默认选中

籍贯：<select >
<option >北京</option>
<option >上海</option>
<option >广州</option>
<option >深圳</option>
<option selected="selected">贵州</option>
</select>

div和span

div和span都是常用的布局标签，俗称盒子

div：分割跨度大跨度，div是容器标签，双标签，HTML+css又叫div+css；主要作用是进行网页布局的拆分，没有明确的语义

span：小区域小跨度；作用是一个极限小，只适用于文字的跨度划分作用：分割页面的布局，div指的是跨度布局分割，span是文字分割

表格

表格基础

表格主要由三个标签组成

table英文：table，作用是定义了一个表格的结构 tr英文是table rows作用定义了表格的行

td英文是table dock作用是定义表格的单元格

关系：table里面嵌套tr，tr里面嵌套td，即table>tr>td

<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td>第一行第1列</td>
<td>第一行第2列</td>
<td>第一行第3列</td>
<td>第一行第4列</td>
</tr>
<tr>
<td>第二行第1列</td>
<td>第二行第2列</td>
<td>第二行第3列</td>
<td>第二行第4列</td>
</tr>
<tr>
<td>第三行第1列</td>
<td>第三行第2列</td>
<td>第三行第3列</td>
<td>第三行第4列</td>
</tr>
</table>
</body>

table标签上有两个属性，一个是border=“1”，这个属性是用来设置表格的标签的，如果没有这个属性，标签不显示，第二个属性是style=“border-collapse:collapse”是css样式，作用就是用来合并表格

如果要设置表头可以使用tr-th设置

<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
<th>第4列</th>
</tr>

单元格合并

一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关的属性

rowspan：上下跨行合并 colspan：左右跨列合并

属性值是数字，数字是几就代表跨几行或者跨几列

<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="3">3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan="2">9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
<td rowspan="2">14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td colspan="2">18</td>
</tr>
</table>
</body>

表格分区

一个完整的表格主要包含三个部分：表格标题、表格表头、表格的主体一个table内部实际还有三个分区标签组成

caption：定义表格的主题

thead：定义表格的头部，内部嵌套tr>th

tbody:定义表格主题，内部嵌套tr>td

HTML注释

在代码中的一些特殊的结构，在编辑器中能看到，在浏览器中看不到，这种结构叫做注释，特点是浏览器不加载

作用：

①用来注释代码，添加合理的解释，从而能实现对代码的可读性

<table border="1">
<!-- 标题部分 -->
<caption>各地区固定资产投资情况</caption>
<!-- 表头部分 -->
<thead>
<tr>
<td rowspan="2">地区</td>
<td colspan="2">按总量分</td>
<td colspan="2">按比重分</td>
</tr>

语法为：

快捷键：CTRL + /

②第二个作用是先注释掉一部分不用的代码，便于后期恢复，多用于代码调试