菜单 搜索
首页 前端知识 一篇博客带你学会HTML（前后端必会、万字笔记）

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

2024-06-18 22:06:44 前端知识 前端哥 504 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>8：00 ~ 10：00</td>	
			<td>10：10 ~ 12：00</td>	
			<td>14：00 ~ 16：00</td>
			<td>16：10 ~ 18：00</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
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！