HTML入门指南：从基本标签到表单操作

一、HTML文档的基本结构HTML超文本标记语言是构建网页的基础。一个HTML文件就像一个人的身体有头有身体!DOCTYPE html !-- 声明这是一个HTML文件 -- html !-- 根标签包裹所有内容 -- head !-- 头部定义网页的元信息比如标题、编码 -- meta charsetutf-8 !-- 防止中文乱码 -- title我的第一个网页/title !-- 浏览器标签页上显示的标题 -- /head body !-- 身体所有可见的内容都写在这里 -- 欢迎来到我的网页 /body /html小提示!-- 注释内容 --是注释不会显示在页面上只供开发者阅读。二、常用文本标签在body中我们可以用各种标签来格式化文字、换行、添加分割线等。1. 标题标签h1~h6标题有六级h1最大最粗h6最小h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h62. 换行和水平线br换行单标签hr水平分割线单标签第一行br第二行 hr 分割线上面和下面内容分开了3. 段落标签p段落会自动添加上下边距让文章更易读p这是第一个段落。/p p这是第二个段落。/p4. 文字样式标签标签效果说明strong或b粗体强调重要内容em斜体强调语气s~~删除线~~表示不再准确的内容strong粗体强调/strong em斜体强调/em s原价100元/s三、多媒体标签图片、音频、视频1. 图片imgimg src图片路径 width200px height150px title鼠标悬停文字 alt图片加载失败时的替代文字src图片地址可以是本地路径或网络链接width/height宽高title鼠标悬停时显示的文字alt图片无法显示时的提示文本对无障碍访问很重要2. 音频audio和视频videoaudio srcmusic/一千年以后.mp3 controls/audio video srcvideo/快手.mp4 controls width300px/videocontrols属性会显示播放、暂停、音量等控制按钮。视频还可以设置宽高。四、超链接a用超链接可以在网页之间跳转a hrefhttps://www.baidu.com target_blank点击我去百度/ahref跳转的目标网址或本地文件target_blank在新标签页中打开链接否则会在当前页覆盖五、无语义标签div 和 span这两个标签没有默认样式但常常用来“包裹”内容方便后续用CSS加样式或JS做交互。div块级元素独占一行span行内元素多个可以排在同一行div我是块级独自占一行/div span我是行内/spanspan我可以和兄弟排排坐/span六、列表有序、无序、自定义列表让信息更有条理。1. 无序列表ul前面显示圆点或方块适用于并列项ul li苹果/li li香蕉/li li橘子/li /ul2. 有序列表ol前面自动编号ol li第一步打开冰箱/li li第二步放大象/li li第三步关上冰箱/li /ol3. 自定义列表dl常用于术语解释dl dt水果类/dt dd猕猴桃/dd dd西瓜/dd dt编程语言/dt ddPython/dd ddJavaScript/dd /dl七、表格展示数据表格由table、tr行、td列构成。1. 基本表格table border1 width300px height70px tr aligncenter td编号/td td姓名/td td成绩/td /tr tr alignright tds1001/td td张三/td td90/td /tr /tableborder边框粗细设为0则无边框align水平对齐方式left/center/right2. 跨列colspan让一个单元格占据多列table border1 tr td colspan3学员成绩表/td !-- 占3列 -- /tr tr tds1001/tdtd张三/tdtd90/td /tr /table3. 跨行rowspan让一个单元格占据多行table border1 tr td rowspan2张三/td !-- 占2行 -- td语文/tdtd88/td /tr tr td数学/tdtd90/td /tr /table技巧使用colspan和rowspan时要注意被合并的单元格要删掉否则会多出格子。八、表单与用户交互表单用于收集用户输入的数据登录、注册、搜索等。所有表单控件都需要放在form标签内。1. 文本输入框label forusername用户名/label input typetext idusername value默认文字label的for属性关联输入框的id点击文字即可聚焦到输入框。typepassword为密码框输入内容会变成圆点。2. 单选按钮radio一组单选按钮的name属性必须相同才能实现互斥选择。性别 input typeradio namesex value1男 input typeradio namesex value0 checked女 !-- checked表示默认选中 --3. 复选框checkbox允许同时选多个爱好 input typecheckbox namelove value篮球 checked篮球 input typecheckbox namelove value唱歌唱歌4. 文件上传file附件input typefile namefile_name5. 多行文本域textareatextarea cols30 rows5 placeholder请输入备注.../textareacols宽度字符数rows行数6. 下拉列表select国籍 select option中国/option option selected美国/option !-- selected默认选中 -- option英国/option /select7. 按钮input typesubmit value提交 !-- 提交表单 -- input typereset value重置 !-- 重置表单内容 -- input typebutton value普通按钮 !-- 无默认行为常配合JS -- button普通按钮/button !-- 功能同上但更灵活 --注意submit和reset必须在form内部才有效果。普通按钮需要编写JavaScript才能实现功能。总结文档结构html、head、body文本标签h1~h6、p、br、hr、strong、em、s多媒体img、audio、video超链接a列表ul/ol、li、dl/dt/dd表格table、tr、td、colspan、rowspan表单inputtext/password/radio/checkbox/file/submit/reset/button、textarea、select、button