前端漫漫终秃头——HTML成长记录（3）

最新推荐文章于 2025-12-06 19:48:00 发布
原创 最新推荐文章于 2025-12-06 19:48:00 发布 · 259 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #html5 #大前端 #计算机网络

本文详细介绍了HTML中的各种标签及其属性，包括文档声明、元信息标签、列表标签、表格标签、图像标签、链接标签、表单标签等，并解释了它们的具体用法。

标签属性

HTML标签属性

HTML文档声明

<!DOCTYPE html>

meta标签

<meta />
<!--name属性-->
<meta name="keywords" content="HTML学习、前端开发基础知识" />

<!--http-equiv属性-->
<!--定义网页使用的编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" /> <!--简写-->
<!--定义网页自动刷新跳转-->
<meta http-equiv="refresh" content="6;url=http://www.baidu.com" />

name属性值

属性值描述
keywords网页关键字、可多个
description网页的描述
author网页的作者
copyright版权信息

http-equiv属性值

属性值描述
Content-Type定义网页所使用的编码
refresh定义网页自动刷新跳转

ol标签/ul标签

<!--有序列表-->
<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

<!--无序列表-->
<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

有序列表Type属性值

属性值列表项符号
1阿拉伯数字：1、2、3……（默认值）
a小写英文字母：a、b、c……
A大写英文字母：A、B、C……
i小写罗马数字：i、ii、iii……
I大写罗马数字：I、II、III……

无序列表Type属性值

属性值列表项符号
disc实心圆（默认值）
circle空心圆
square实心正方形

td标签

<!--合并行属性(row span)-->
<tr>
    <td rowspan="2">合并行属性：rowspan</td>
</tr>

<!--合并列属性(column span)-->
<tr>
    <td colspan="2">合并列属性：colspan</td>
</tr>

img标签

<img src="" alt="" title="" >

<!--src属性：图片路径-->
<img src="img/images_1.png">

<!--alt属性：对象搜索引擎-->
	<!--alt属性是用来描述当图片无法显示时，页面提示的文字-->
<!--title属性：对象用户-->
	<!--title属性用来当鼠标指针移到图片上时，会显示title中的文字-->

a标签

<a href="链接地址" target="打开方式">please Enter!<a>

target属性

属性值描述
_self在原来窗口打开链接（默认值）
_blank在新窗口打开链接
_parent在父窗口打开链接
_top在顶层窗口打开超链接

表单

form标签属性

<form></form>
属性描述
name表单名称
method提交方式
action提交地址
target打开方式
enctype编码方式
name属性
<form name="myForm"></form>
<!--用来区分不同的表单-->
method属性
<!--定义表单数据的提交方式-->
	<!--method的取值有两个 (get/post) -->
<form method="get"></form>
<form method="post"></form>
action属性
<!--用处：用于指定表单数据提交到哪一个地址进行处理-->
<form action="index.php"></form>
target属性
<form target="_blank"></form>
enctype属性
<!--用于指定表单数据提交的编码方式，一般情况下不需要设置，除非用到上传文件功能-->

input标签

<input type="表单类型" />
属性值描述
text单行文本框
password密码文本框
radio单选框
checkbox复选框
button / submit / reset按钮
file文件上传
search搜索框
单行/密码 文本框属性
<input type="text" />
<input type="password" />
属性描述
value文本框默认值
size文本框长度
maxlength设置单行文本框最多字符数
placeholder不可修改的默认显示 文本
单选框/复选框
<input type="radio">

<form>
    性别：
    <!--单选组的name属性值必须一致才是一组-->
    <label><input type="radio" name="gender" value="man" checked />男</label>
    <!--checked是选择默认值的-->
    <label><input type="radio" name="gender" value="woman" />女</label>
</form>

<input type="checkbox">

<form>
    你快乐吗？：
    <!--复选组的name属性值也必须一致才是一组-->
    <label><input type="checkbox" name="gender" value="18" />18岁以前你快乐吗？</label>
    <label><input type="checkbox" name="gender" value="24" />24岁以前你快乐吗？</label>
    <label><input type="checkbox" name="gender" value="36" />36岁以前你快乐吗？</label>
</form>
按钮
普通按钮
<input type="button" value="取值" />

提交按钮

<input type="submit" value="取值" />

重置按钮

<input type="reset" value="取值" />

文件上传

<input type="flie" />

textarea标签（多行文本框）

<textarea rows="行数" cols="列数" value="取值">文本内容</textarea>

下拉列表

<select>
    <option>选项内容</option>
    	…………
    <option>选项内容</option>
</select>

下拉列表由<select></select>标签和<option></option>标签配合使用来显示的
select标签属性
属性描述
multiple设置下拉列表可以选择多项
size设置显示几个列表项（整数不小于四）
option标签属性
属性描述
selected是否选中
value选项值
	搭起我的HTML框架，载入你的CSS，再进行岁月版的Javascript演变。————流亦
嵌入式工程师成长之路（11）——职业规划
云轩阁
03-11 6万+
看到这一章的时候，你差不多已经能设计一款小产品了，从产品构思，原理设计，到画板程序，一个人差不多都能搞定了，此时会感觉自己很牛，可以无所不能了。但是这其实是一种错觉，什么时候开始注重自己的基础了，恭喜你已经朝着一名合格的硬件工程师前进了。再深入的学习后，对这些知识已经达到融会贯通，熟记于心的境界，你已经很强了。可是终究，你还是一名硬件工程师。
前端漫漫终秃头——HTML成长记录（2）
流亦的博客
04-19 145
人们常说：“搞计算机的很牛逼，只是他们忘了，你敲代码、你写框架、你也夜深独自一人喃，不过还好、你随秃头走一程”
前端秃头计划（HTML与css）
dirft_din的博客
05-27 338
HTML 与 CSS 主要内容 HTML ​ HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。 ​ 它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。 ​ HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或 .html 为文件后缀名保存。将 HTML 网页文件
简单的学生档案页面（基础的HTML表单使用）
wei257的博客
07-03 4026
本次目标: 一、基础知识 1.form（表单域）：在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下： <form action="URL地址" method="提交方法" name="表单名字"> 内容 </form> 常用属性： action：用...
HTML5实现学生档案
qq_44023710的博客
03-17 3407
简单的一个form表单，用HTML5实现学生档案 首先看看效果： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in
秃头真的是程序员的标配吗
编程开发学习
06-26 2692
从事软件开发多年，程序员这个职业是高度的脑力劳动，几乎天天都盯在电脑屏幕上，经历过几家公司，认识的同事差不多也有几百个了，绝大部分头发还是完好无损的，当然也有个别的秃顶特别厉害，秃顶主要分为局部秃顶和全秃顶，局部秃顶的会多一些，至于大家说到的秃顶和技术是不是一种关系，没有直接的关联，主要和每个人本身的体质有关系。 从事软件开发都会有不同层面的局部秃顶,有几次理发的时候，理发师说到两边头发有点少，...
前端漫漫终秃头——HTML成长记录（1）
流亦的博客
09-15 180
前端漫漫终秃头，而今代码不停敲…… HTML介绍与基本结构。 HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
熬夜会秃头队——冲刺总结随笔
2301_80370029的博客
11-17 302
下一阶段，需要先对之前完成的内容进行一个整合，通过开会的方式再召集所有人对当前的任务进行评估和分析，避免已经出错的环节之后发展成为更大的缺漏。而在总结完了之前的工作之后，再对下一步工作进行分配和调整，对于本阶段较为困难的任务需要分配更多的人员进行工作，而对较简单的任务则减少人力的投入，以此权衡不同任务之间的比重。在下一次的任务之中完成最主要的文件分片上传以及下载。总之，项目的开发依旧前路漫漫，唯有脚踏实地，全力以赴，以认真的心态进行接下来的工作，才能保证项目的。
[秃头之路]锁
丹康丶的博客
07-12 225
锁一、Synchronized 与 Lock二、悲观锁与乐观锁三、乐观锁的基础 --- CAS四、自旋锁五、Synchronized 锁升级： 偏向锁 → 轻量锁 → 重量级锁六、可重入锁（递归锁）七、公平锁、 非公平锁八、可中断锁九、读写锁,共享锁,互斥锁十、回到悲观锁和乐观锁 一、Synchronized 与 Lock   Java中有两种加锁的方式：一种是用synchronized关键字，另...
尚硅谷前端入门html+css学习笔记——HTML4
qq_62237063的博客
08-04 1571
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端全称：HyperText Markup Language 译为： 超文本标记语言1996年W3C制定HTML规范，2014年HTML5由W3C正式发布。
Web开发基于Flask框架的前端技术实践：HTML标签与CSS样式在网站快速开发中的应用解析
09-15
适合人群：具备基本Python编程基础，初学Web开发的1-3年经验研发人员或前端初学者。; 使用场景及目标：①学习HTML常用标签和CSS基础样式以快速构建静态页面；②掌握Flask框架中前端模板的渲染与数据提交处理；③理解...
长路漫漫,读书兴华——端午国旗下讲话小学.pdf
02-22
长路漫漫，读书兴华——端午国旗下讲话小学 亲爱的老师们、同学们： 大家上午好！ 今天，我们站在五星红旗下，共同庆祝中华民族的传统节日——端午节。在这个特别的时刻，我讲话的主题是“长路漫漫，读书兴华”。...
HTML应用指南：利用POST请求获取全国极氪门店位置信息
weixin_45812624的博客
12-03 1546
本篇文章介绍了通过程序化方式采集并分析极氪全国门店数据的完整流程。基于对官网接口的解析，利用 Python 自动请求市级行政区编码，并批量调用门店查询接口，高效获取包含门店名称、地址、高德经纬度、营业时间及开业日期等字段的结构化数据。针对地理坐标，文章对高德（GCJ-02）坐标系进行了标准化转换，确保后续在地图平台上的精准可视化；同时将原始时间戳统一处理为标准日期格式，支撑时间维度分析。在此基础上，揭示出极氪门店“核心城市群密集布局、区域中心精准覆盖”的空间策略。
使用 HTML + JavaScript 实现手写签名功能
QQ26843500的博客
12-04 880
本文介绍了一个基于HTML5 Canvas实现的手写签名网页应用。该应用主要功能包括： 提供米字格背景和范字（"海纳百川"）作为书写参考 支持鼠标和触摸屏两种书写方式 包含清空画布和下载签名图片两个功能按钮 技术实现上使用双Canvas叠加方案，底层Canvas绘制米字格和范字作为引导层，上层Canvas实现手写功能。通过JavaScript事件监听实现笔迹追踪，采用贝塞尔曲线平滑处理书写轨迹。响应式设计适配不同设备，并提供PNG格式的签名下载功能。整体界面简洁，采用蓝色标题栏和白色书写
HTML DOM 对象
wjs2024的博客
12-02 480
DOM（Document Object Model）是一种抽象的模型，用于表示 HTML 和 XML 文档。通过 DOM，开发者可以访问和操作文档中的任何元素，如文本、图像、链接等。DOM 对象化地表示了网页的结构，使得开发者可以像操作对象一样操作网页内容。HTML DOM 对象是网页设计和开发的基础，掌握 DOM 对象的基本概念、常用方法和实际应用，将有助于提高开发效率和代码质量。本文对 HTML DOM 对象进行了简要介绍，希望对您有所帮助。
HTML 基础
wjs2024的博客
12-02 358
HTML是构建网页和网站的基础，掌握HTML基础知识对于成为一名优秀的网页开发者至关重要。本篇文章为您介绍了HTML的发展历程、基本结构、常用标签以及一些高级特性。希望您能够通过学习，更好地掌握HTML，为您的网页开发之路打下坚实的基础。
前端html(3)
最新发布
踢球的IT男，就是分享一些小东西！互相学习，共同进步！
12-06 456
注：表格相关的元素很多，我们这里整理一下：caption:用来设置表格标题；thead:表示表格的头部区域；th:表示表格的头部中的一个列；tbody:表示表格的中间主要显示区域；tr:表示表格的一个行；td:表示表格的和个列；tfoot:设置表格的脚部；colspan:表示横跨几列；
html css js网页制作成品——敖瑞鹏html+css+js 4页附源码
卡拉米
12-02 623
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现。网站采用HTML5+CSS3技术，包含首页、作品展示、历史渊源等页面，使用DIV+CSS布局，兼容主流浏览器。提供了完整的HTML代码示例，展示了导航栏、banner区和作品展示区的实现方法。文章还针对编程初学者给出学习建议，推荐通过牛客网等平台进行编程练习，并分享了获取更多前端开发资源的途径。该网站模板可灵活修改为旅游、美食等各类主题展示网站。
【JavaWeb】HTML_常见标签_表单项标签
qq_43494013的博客
12-04 156
【JavaWeb】HTML_常见标签_表单项标签
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

流亦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值