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

前端知识1html

news 2025/8/1 1:27:58

VScode一些快捷键

·Ctrl+/——注释

·!——生成html框架元素

·*n——生成n个标签

·直接书写html的名字回车生成对应的标签

常见标签

span：

<span style="color: red;">hello</span>
<span>demo</span>

span实现：

标题标签：

<h1>标题标签</h1><h2>标题标签</h2><h3>标题标签</h3><h4>标题标签</h4><h5>标题标签</h5><h6>标题标签</h6>

标题标签实现：

div：

<div>文本信息</div>
<div>文本信息</div>
<div>文本信息</div>

div实现：

p：

<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>

p实现：

a：

 <!-- 超链接标签 href跳转的资源target设置资源打开窗口的方式_self本窗口打开_blank新窗口打开 窗口名 指定窗口打开-->
<a href="https://google.com/" target="aa">点击跳转</a>

a实现：

列表标签：

<ul><li>代办事项1</li><li>代办事项1</li><li>代办事项1</li><li>代办事项1</li>
</ul>

列表标签实现：

表格标签：

<!-- tr行 -->
<!-- td单元格 th加粗居中-->
<!-- thead 头 tbody身子 tfoot脚-->
<!-- border="1"表示表格有边框 cellspacing="0"单元格之间的间距为0--><table border="1" cellspacing="0" cellpadding="10px" width="500px" height="200px"><tfoot><tr><th>id</th><th>name</th><th>age</th><th>sex</th></tr></tfoot><tr><td>1</td><td>张三</td><td>25</td><td>男</td></tr><tr><td>2</td><td>李四</td><td>20</td><td>女</td></tr><thead><tr><td>3</td><td>王五</td><td>25</td><td>男</td></tr></thead></table>

表格标签实现：

窗口标签：

<!-- 窗口标签  嵌套其他页面 frameborder="0"把任意页面更加逼真的嵌入到当前窗口 name表示窗口的名字 -->
<iframe src="https://xilazimu.net/" name="aa" height="600px" width="900px" frameborder="0"></iframe>

窗口标签实现：

form标签：

<form action=""><input type="text">单行文本框<br><input type="password">密码框<br><input type="radio" name="sex">男<input type="radio" name="sex">女<br><input type="checkbox">篮球<input type="checkbox">足球<input type="checkbox">橄榄球<br><select name="" id=""><option value="">计算机学院</option><option value="">工学院</option><option value="">神学院</option><option value="">法学院</option></select><input type="file"><input type="date">日期<br><br><input type="datetime-local">时间<br><br><!-- rows行 cols宽度--><textarea rows="10" cols="40"></textarea>多行文本域 <br><br><input type="button" value="普通按钮"><input type="submit" value="提交按钮"><input type="reset" value="重置按钮">
</form>