首页 前端知识 一篇博客带你学会HTML(前后端必会、万字笔记)

一篇博客带你学会HTML(前后端必会、万字笔记)

2024-06-18 22:06:44 前端知识 前端哥 492 488 我要收藏

vsCode速写规则

! + enter 生成html框架

在这里插入图片描述

ctrl + / 注释

生成html元素:直接写html,enter直接生成 并且添加内容

如 div 、input:button 自动生成
直接生成元素内容 如div{你好}
在这里插入图片描述

批量生成

如 div*10
当然也可以添加内容
也可以配合$使用:
在这里插入图片描述

在这里插入图片描述

> 元素嵌套

在这里插入图片描述

在这里插入图片描述

+ 同级生成


在这里插入图片描述

每个元素都有的属性

id 名字
class 类 允许重复
style 给元素加样式:颜色,大小等。
<style></style>
中一般放用的多的共有的样式,而内联style我们一般放元素其特有的样式,复用会方便很多。

. class # id

样式放入css中 link 连接快速使用

在这里插入图片描述

标签

span 文本标签

<span style="color:red;font-size:30px">h</span><span>ello</span>

在这里插入图片描述

div 竖着布局的标签

<div>h</div>ello</div>

在这里插入图片描述

h1~h6 标题标签

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

在这里插入图片描述

p 段落标签

除了竖着布局,间隔也会大一点。

<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>

在这里插入图片描述

a 超链接标签

href 资源位置

href属性:设置资源路径,跳转到哪里。

<a href="https://www.baidu.com/" >点击跳转</a>

在这里插入图片描述

target 打开位置

target:当前网页打开或空白网页打开。

_self:默认的,在当前窗口打开.

<a href="https://www.baidu.com/" target="_self">点击跳转</a>

_blank:新页打开。

<a href="https://www.baidu.com/" target="_blank">点击跳转</a>

a 锚点标签

需要一个name属性,给锚点起名,想要跳到那里就放到哪。
配合超链接使用。

名字前面加上#,可以作为区分。
跳转到开头

<a name = "aa">开头</a>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<a href="#aa">点击跳转</a>

在这里插入图片描述

固定位置

position:fixd;
在屏幕的固定位置,滑动不改变位置。

<a href="#aa" style= "position:fixed;right:100px;bottom:100px;">点击跳转</a>

这样就固定在右下角了。
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=<_[8GKG41[I(73S3{WFH2_LI.png>&pos_id=img-O6h1sgmu-1712573154972)

br 换行标签

想要哪里换行,放在哪里即可。
未加前:

<a name = "aa">开头</a>

在这里插入图片描述

加了后:

<a name = "aa">开头</a><br>

在这里插入图片描述

img 图片标签

src 属性

src:引入图片路径。

<img src="D:\桌面\一些图片\661918d1cb1dcac5626c48cd2ed9ffc2df142af2.jpg@942w_515h_progressive.webp">

在这里插入图片描述

这是绝对路径访问,也可以用相对路径
同一个文件夹下,直接找名字即可。
也可以…退出或进入文件夹中寻找。

alt

alt:给图片加属性。

默认是隐藏的,若图片没有加载成功时,展示其内容。
在这里插入图片描述

width 宽度 height 高度

可以单独设置width,图片会等比例变化。
当然也可以在style中设置。

列表标签

ul 无序列表

<ul>
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
</ul>

在这里插入图片描述

ol 有序标签

<ol>
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
</ol>

在这里插入图片描述

设置表示顺序

用type属性
如用abc…来排序。

<ol type="a">
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
</ol>

在这里插入图片描述

table 表格属性

tr 设置行
td 行中单元格

	<table>
		<tr>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
		</tr>
			
		<tr>
			<td>小明</td>
			<td>18</td>
			<td></td>
		</tr>
		<tr>
			<td>小华</td>
			<td>19</td>
			<td></td>
		</tr>
	</table>

在这里插入图片描述

border 边框

<table border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td>小明</td>
        <td>18</td>
        <td></td>
    </tr>
    <tr>
        <td>小华</td>
        <td>19</td>
        <td></td>
    </tr>
</table>

width 宽 height 高

不再介绍。

cellspacing 单元格距离

等于零,表示紧挨到一起。

<table border="1" cellspacing="0">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td>小明</td>
        <td>18</td>
        <td></td>
    </tr>
    <tr>
        <td>小华</td>
        <td>19</td>
        <td></td>
    </tr>
</table>

在这里插入图片描述

cellpadding 填充

<table border="1" cellspacing="0" cellpadding="10px">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td>小明</td>
        <td>18</td>
        <td></td>
    </tr>
    <tr>
        <td>小华</td>
        <td>19</td>
        <td></td>
    </tr>
</table>

在这里插入图片描述

thead 头、tbody 身子、tfoot 脚

划分table

rowspan colspan 单元格合并

rowspan 行合并
colspan 列合并
可以选择合并的个数。

<table border="1" cellspacing="0" cellpadding="10px">
    <tr>
        <td >姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td rowspan="2">小明</td> 
        <td colspan = "2">18</td> 
        
    </tr>
    <tr>
        <td>19</td>
        <td></td>
    </tr>
</table>

在这里插入图片描述

练习 制作一个如图的表格

<!DOCTYPE HTML>
<html>
<head>
	<title>我的第一个页面</title>
	<meta charset="UTF-8">
</head>
<body>
	<table border="1"  cellpadding="10px" style="border-color:#2ac;text-align:center;">
		<tr>
			<td colspan = "2">上午</td>
			<td colspan = "2">下午</td>	
		</tr>
		<tr>
			<td>800 ~ 1000</td>	
			<td>1010 ~ 1200</td>	
			<td>1400 ~ 1600</td>
			<td>1610 ~ 1800</td>
		</tr>
		<tr>
			<td rowspan="2">领导讲话</td>
			<td>大会主题报告</td>
			<td>分会主题报告</td>	
			<td rowspan = "2">总结主题报告</td>			
		</tr>
		<tr>
			<td>专家报告</td>
			<td>分组讨论</td>	
		</tr>
		<tr>
			<td colspan = "4">全天观察博物馆中心</td>
		</tr>
	
</body>
</html>

在这里插入图片描述

iframe 框架标签(窗口标签)

嵌套其他页面,直接拿别人写好的。
有的页面不让嵌套。

scr 资源位置

窗口的链接。

<iframe src = "http://lib.hbu.edu.cn/"></iframe>

在这里插入图片描述

width 宽 height 高

不再介绍。

name 名字

可以用于利用上面所介绍的超链接,target指定窗口打开。

<html>
<body>
	<a href = "1.html" target="idx">超链接标签介绍 </a><br>
	<a href = "2.html" target="idx">列表标签介绍 </a><br>
	<a href = "3.html" target="idx">表格标签介绍 </a><br>
	<a href = "4.html" target="idx">框架标签介绍 </a><br>
	<iframe name = "idx" width="500px" height="600px"></iframe>
</body>
</html>

在这里插入图片描述

audio 音频

src 资源位置

一样的,也是取音频链接地址。

<audio src = "bj.mps"></audio>

但现在是看不到的。

controls 手动播放

加上之后就是true,没有加就是false。

<audio src = "bj.mps" controls></audio>

在这里插入图片描述

autoplay 自动播放

<audio src = "bj.mps" autoplay></audio>

loop 循环播放

<audio src = "bj.mps" loop></audio>

video 视频标签

和音频标签用法相似。

src 资源位置

<video src = "test.mp4"> </video>

controls 手动播放

<video src = "test.mp4" controls> </video>

loop 循环播放

<video src = "test.mp4" loop> </video>

width 宽 height 高

不再介绍。
会根据你的大小进行压缩,以便于正常的比例。

input 输入框

根据 type 类型的不同分类。

text 单行文本框

<input type="text"><br>

在这里插入图片描述

readonly 只读
disabled 禁用

password 密码框

<input type="password">

在这里插入图片描述

minlength=“4” maxlength=“8” 4-8位密码

radio 单选框

name 一样的只能选则其中一个。
例如选择男/女:

男:<input type="radio" name = "sex"> 女:<input type="radio" name = "sex">

在这里插入图片描述

checkbox 复选框

篮球:<input type="checkbox"> 足球:<input type="checkbox"> 乒乓球:<input type="checkbox">

在这里插入图片描述

file 文件选择器

<input type="file">

在这里插入图片描述

color 颜色拾取器

<input type="color">

在这里插入图片描述

date 日期选择器

<input type="date">

在这里插入图片描述

datetime-local 日期时间选择器

<input type="datetime-local">

在这里插入图片描述

week 周选择器

<input type="week">

在这里插入图片描述

range 滑块

mid 最小值
max 最大值
value 初始值

<input type="range" min="0" max="150" value="50">

在这里插入图片描述

number 数字选择器

mid 最小值
max 最大值
value 初始值
step 步长

<input type="number" min="0" max="150" value="50" step="10">

在这里插入图片描述

button 普通按钮

<input type="button" value="普通按钮">

submit 提交按钮

配合 form 使用,提交数据并且刷新。
在这里插入图片描述

<input type="submit" value="提交按钮">

resset 重置按钮

配合 form 使用,重置回初始状态。

<input type="reset" value="重置按钮">

spacehoder 加描述内容

required=“required” 必填

form 表单

我们可以把上面input的所有标签放入 form 中。

<!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>
	<form>
		单行文本框
		<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>
		文件选择器
		<input type="file"><br>
		颜色拾取器
		<input type="color"><br> 
		日期选择器
		<input type="date"><br>
		日期时间选择器
		<input type="datetime-local"><br>
		周选择器
		<input type="week"><br>
		滑块
		<input type="range" min="0" max="150" value="50"><br>
		数字选择器
		<input type="number" min="0" max="150" value="50" step="10"><br>
		下拉框
		<select value="2">
			<option value="0">语文</option>
			<option value="1">数学</option>
			<option value="2">英语</option>
		</select><br>
		多行文本框域
		<textarea rows="10" cols="50"></textarea><br>
		<br>
		按钮
		<input type="button" value="普通按钮">
		提交按钮
		<input type="submit" value="提交按钮">
		重置按钮
		<input type="reset" value="重置按钮">
	</form>
</body>
</html>

在这里插入图片描述

select 下拉框 option 选项

<select value="2">
    <option value="0">语文</option>
    <option value="1">数学</option>
    <option value="2">英语</option>
</select>

在这里插入图片描述

textarea 多行文本框域

rows 控制行数
cols 控制列数

<textarea rows="10" cols="50"></textarea>

在这里插入图片描述

其他

confirm 复选框

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12663.html
标签
评论
发布的文章

@JsonSerialize注解的使用

2024-06-24 23:06:21

npm install报错

2024-06-24 23:06:56

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!