当前位置：首页 > news >正文

HTML 初识

news 来源：原创 2025/4/22 8:37:33

段落标签

<p><!-- 段落标签 -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nam assumenda harum voluptate vel minus nesciunt aspernatur, expedita reiciendis officiis exercitationem odit at fugit eos voluptatum nisi voluptatem dolorem labore.</p>

使用可以分段，在其中输入多个空格或者换行都只是相当于输入一个空格。

空格符

如果要有多个空格，则需要使用HTML的空格符：

下面是示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>我的第一个HTLM文件</title>
</head>
<body><!-- <h1>一级标题</h1><h2>二级标题</h1><h3>三级标题</h1><h4>四级标题</h1><h5>五级标题</h1><h6>六级标题</h1> --><p><!-- 段落标签 -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.</p><p><!-- &nbsp; 非断行空格 -->&nbsp;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum sapiente fugiat excepturi, qui amet laboriosam necessitatibus, tempore officia ipsa hic numquam asperiores, eaque quae velit doloribus illum modi! Cum, aspernatur.</p><!-- &ensp; 半角空格，宽度为当前字体的一半 -->&ensp;  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea iste architecto incidunt. Numquam, earum, autem vero aliquid reprehenderit repudiandae voluptatibus quasi minus repellendus quod provident itaque a iure illum beatae.<p><!-- &emsp; 全角空格，宽度等于当前字体-->&emsp;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat fugiat aliquam delectus veritatis tempore. Laboriosam veniam odit laborum officiis sed est temporibus quas, ducimus alias culpa voluptatibus ad illum libero.</p><p><!-- &thinsp;窄空格，宽度小于一个字符 -->&thinsp;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolor tempore nobis, eius consequatur veniam quasi id? Quae, rerum voluptatibus inventore accusantium tempore sapiente temporibus! Officia autem ducimus error magni.</p>
</body>
</html>

可以自行比对一下这些空格符号的区别。

换行符

换行符 或者 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><p>第一行<br/>第二行<br>第三行</p>
</body>
</html>

下面是刷新后的页面显示：

图片标签

<img src="" alt="" width="" height="">

img：标签。src、alt：标签的属性，width、teight：宽度和高度，只设置一个会高宽等比例缩放

src可以填本机的图片的绝对路径，也能复制网上的图片链接。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title></head><body><img src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650" alt="这是一个图片"></body></html>

运行结果可以自行试试。

超链接：a

外部链接

<a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9">百度</a>

href：表示点击后会跳转到哪个页面，

target：打开方式，默认_self，如果是_blank，则用新标签页打开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9" target="_blank">百度</a></body>
</html>

href内填的是网页的连接地址，target是转跳方式，在这里_blank是以新页面打开超链接。

内部链接

<a href="test1.html" target="_blank">test1</a>

test1.html是本机上的一个html文件，我们也可以通过指定本机的绝对路径或者是相对路径进行转跳。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><a href="test1.html"  target="_blank">test1</a><br></body>
</html>

下载文件

<a href="1.rar">下载文件</a>

href链接如果是个压缩包，点击链接可以下载对应路径下已经已创建的压缩文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><a href="1.rar">下载文件</a></body>
</html>

表格标签

table标签：表示表格

tr：表示表格的一行

tb：表示一个单元格

thead：表格的头部区域

tbody：表格的主题区域

table包含tr、tr包含tb

table的参数：style可以设置表格的长宽，border设置线的粗细和颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><table style="width: 500px;  height: 400;" border="1px black"><tr><td colspan="2">a</td><!-- <td>b</td> --></tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>h</td></tr><tr><td>i</td><td>j</td></tr></table></body>
</html>

生成的单元格长这样：

如果不想要边框，我们可以在table接着添加其他的参数，如：cellspacing = "0"可以去掉空白线

<table style="width: 500px; height: 400;" border="1px black" cellspacing = "0">

单元格合并

<tr>

<td colspan="2">a</td>



</tr>

td标签里添加colspan = ""与rowspan=""标签可以选择合并单元格行列：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><table style="width: 500px;  height: 400;" border="1px black" cellspacing = "0"><tr><td colspan="2">a</td><!-- <td>b</td> --></tr><tr><td>c</td><td rowspan="3">d</td></tr><tr><td>e</td><!-- <td>f</td> --></tr><tr><td>g</td><!-- <td>h</td> --></tr><tr><td>i</td><td>j</td></tr></table></body>
</html>

表单标签

1：表单域

包含表单元素的区域.重点是form标签

2：表单控件

输⼊框,提交按钮等.重点是input标签

form 标签

<form action="test.html">... [form 
的内容
]</form>

描述了要把数据按照什么⽅式,提交到哪个⻚⾯中

input 标签

各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框。

type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等.。

name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀。

value:input中的默认值，传递给后端判断前端的选择。

checked:默认被选中.(⽤于单选按钮和多选按钮)。

selected：默认被选中值。

placeholder：在输入框里显示的字体。

用户名(文本框)text

<input type="text" size="30" placeholder="请输入用户名">

size：最大字数

密码 password

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

单选按钮 radio

<input type="radio" name = "gender"id = "gender1"> <label for ="gender1">男</label><input type="radio" name = "gender"id = "gender2"> <label for ="gender2">女</label><input type="radio" name = "gender"id = "gender3"> <label for ="gender3">保密</label><br>

lable标签可以点击其中的内容选定按钮；单选框之间必须具备相同的name属性,才能实现多选⼀效果

复选框checkbox

                  <input type="checkbox" name="hobby" id="" value="1">篮球<input type="checkbox" name="hobby" id="" value="2">足球<input type="checkbox" name="hobby" id="" value="3">羽毛球<input type="checkbox" name="hobby" id="" value="4">排球<input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br>

按钮方法

                    <button>这是button标签，按钮1</button><input type="button" name="" id="" value="按钮2"><input type="submit" value="按钮3，提交，搭配form标签使用">

下拉标签Subject

            专业：<select name="" id=""><option name="Subject" value="1">大数据</option><option name="Subject"value="2"selected>软件工程</option><option name="Subject" value="3">物联网</option><option name="Subject" value="4">人工智能</option>

selected:默认选项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单练习</title>
</head>
<body><form action="test1.html" method="get"><!--action提交给谁，method以什么方式提交（传参） -->用户名(文本框) <input type="text" size="30"><br>密码（密码框）<input type="password" size="30"><br>单选按钮 <input type="radio" name = "gender"id = "gender1" value="1"> <label for ="gender1">男</label><input type="radio" name = "gender"id = "gender2" value="2"> <label for ="gender2">女</label><input type="radio" name = "gender"id = "gender3" value="3"> <label for ="gender3">保密</label><br>复选框  <input type="checkbox" name="hobby" id="" value="1">篮球<input type="checkbox" name="hobby" id="" value="2">足球<input type="checkbox" name="hobby" id="" value="3">羽毛球<input type="checkbox" name="hobby" id="" value="4">排球<input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br><!-- 下拉标签 -->专业：<select name="" id=""><option name="Subject" value="1" >大数据</option><option name="Subject"value="2"selected>软件工程</option><option name="Subject" value="3">物联网</option><option name="Subject" value="4">人工智能</option><br></select><!-- 文本域 -->个人简介：<textarea rows="10" cols="50"></textarea><!-- <button>这是button标签（按钮第一种写法，可以搭配form标签使用）</button><input type="button" name="" id="" value="按钮第二种方法"> --> <input type="submit" value="第三种按钮，提交，搭配form标签使用"></form></body>
</html>

下面是打开后的样子：

无语义标签div&span

div 标签,division 的缩写,含义是分割 span标签,含义是跨度。

就是两个盒⼦.⽤于⽹⻚布局。

div是独占⼀⾏的,是⼀个⼤盒⼦，span不独占⼀⾏，是⼀个⼩盒⼦。

<!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><div>一个div</div> <div>一个div</div> <div>一个div</div> <span>一个span</span><span>一个span</span><span>一个span</span>
</body>
</html>

实战：创建一个登录页面

由于我们并不需要真的传递给后端，所以在这做个壳子就行了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title>
</head>
<body><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text"  placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" size="30" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td> <input type="password" size="30" placeholder="请输入密码"></td></tr></table><div><button>注册</button><span>已有账号？</span><a href="#">登录</a></div></body>
</html>