前端入门第一课：HTML 基础语法 + 常用标签 + 实战全解

文章目录关于html的一些介绍前端环境的搭建htmlhtml常见标签关于html的一些介绍浏览器中按F12能看到当前页面的前端代码–其中elements是查看标签结构console是查看控制台network是查看前后端交互过程vscode里面创建.html文件然后输入!再按Tab就能给你快速生成一个框架:!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/title/headbody/body/html!DOCTYPE html这是文档类型声明写在 HTML 文件的最开头作用是告诉浏览器当前文件遵循 HTML5 标准让浏览器以标准模式渲染页面html langenHTML 的根标签lang属性用于声明页面的主要语言。langen表示页面为英文页面浏览器会根据这个属性判断是否提供翻译提示中文网站通常会改为langzh-CN。nameviewport指定该 meta 标签的作用是定义页面的 “视口”即设备屏幕上显示网页的可视区域。widthdevice-width让页面宽度自动适配设备屏幕宽度避免手机端页面显示不全、需要横向滑动的问题。initial-scale1.0设置页面加载时的初始缩放比例为 1不放大也不缩小保证页面以原始大小正常显示。引申:以后需要图标图片可以去 https://www.iconfont.cn/ 找前端环境的搭建用vscode的话直接创建.html结尾的文件就行了关于vscode里面的前端插件推荐:Auto Rename Tag:自动同步修改成对的 HTML 标签view-in-browser:快速在浏览器中打开本地 HTML 文件Live Server:启动本地开发服务器 页面自动刷新(就不用按F5或者重新进入才能刷新了)关于前端代码的调试:F12去console然后shiftctrlrhtmlhtml标签:eg:bodyhellobody标签名 (body) 放到 中大部分标签成对出现.body为开始标签/body为结束标签.少数标签只有开始标签称为 “单标签”.开始标签和结束标签之间写的是标签的内容.开始标签中可能会带有 “属性”标签的层次关系有:兄弟关系和父子关系htmlheadtitle第一个页面/title/headbodyhello world/body/htmlhead 和 body 是 html 的子标签title 是 head 的子标签. head 是 title 的父标签.head 和 body 之间是兄弟关系.html文件的基本结构:htmlheadtitle第一个页面/title/headbody页面中显示的内容/body/htmlhtml 标签是整个 html 文件的根标签 (最顶层标签)head 标签中写页面的属性.body 标签中写的是页面上显示的内容title 标签中写的是页面的标题html常见标签注释标签:!-- 我是注释内容 -- --也可以通过ctrl/来进行或取消注释–css的话是//标题标签:h1-h6有六个 从 h1 - h6. 数字越大字体越小和越细h1hello/h1h2hello/h2h3hello/h3h4hello/h4h5hello/h5h6hello/h6段落标签:p这是一个段落/p换行标签:这是个单标签下面会换行br/这俩的区别:段落标签的那种会有明显的间隔空白换行标签没有关于文本的排版:1.会自动根据浏览器宽度来决定排版(多久会迫不得已换行显示)2.html内容首位处的换行和空格均无效3.html文本中直接输入换行显示出来其实只是一个空格4.html文本中输入多个空格显示出来只有一个空格引申:html文本中有些字符必须要打成转移字符才能正确显示:比如:空格空格需要nbsp;才能用于打出连续的空格lt;才能显示gt;才能显示amp;才能显示格式化标签strongstrong 加粗/strongbb 加粗/bem倾斜/emi倾斜/idel删除线/dels删除线/sins下划线/insu下划线/u图片标签:imgsrcrose.jpgalt鲜花title这是一朵鲜花width500pxheight800pxborder5pxsrc是必须带上的,里面填相对路径或者绝对路径或者图片的url其他属性可填可不填:alt: 替换文本。图片加载失败时会才会显示这个文本title: 提示文本。鼠标放到图片上就会有提示.width/height: 控制宽度高度。高度和宽度一般改一个就行另外一个会等比例缩放。否则就会图片失衡.border: 边框参数是宽度的像素。但是一般使用 CSS 来设定.–属性之间用空格(多个空格也行)或换行分割–属性之间不分先后顺序超链接标签:(标签中间必须有文案/图片不然a标签的宽度为0根本点不了超链接)ahrefhttp://www.baidu.comtarget_blank百度/ahref: 必须具备表示点击后会跳转到哪个页面.href后面可以带的链接有:1.外部链接:eg:http://www.baidu.com2.网页内部的链接(写相对路径)3.空链接:eg:#4.下载链接(点击后就直接触发下载):eg:a hreftest.zip下载文件/a这样就会直接下载当前目录下的test.zip文件5.网页元素标签:a href“http://www.sogou.com” img src“rose.jpg” alt“” /a这样的话点击这个照片就会自动跳转到那个链接6.锚点链接:点击后跳转到当前页面的指定位置ahref#one第一集/aahref#two第二集/aahref#three第三集/apidone第一集剧情br第一集剧情br.../ppidtwo第二集剧情br第二集剧情br.../ppidthree第三集剧情br第三集剧情br.../p想让能点击但是不能跳转的话填:a hrefjavascript:void(0);或者a hrefjavascript:;target: 打开方式。默认是_self. 如果是_blank则用新的标签页打开.默认的超链接颜色:没有访问过这个超链接的话是蓝色已经访问过了的话是紫色鼠标放上去的话是红色表格标签:tablealigncenterborder1cellpadding20cellspacing0width500height500trtd姓名/tdtd性别/tdtd年龄/td/trtrtd张三/tdtd男/tdtd10/td/trtrtd李四/tdtdcolspan2女/tdtd11/td/tr/tabletable标签表示整个表格table标签的属性有:align是表格相对于周围元素的对齐方式.aligncenter(不是内部元素的对齐方式)border表示边框.1表示有边框 (数字越大边框越粗),表示没边框.cellpadding: 内容距离边框的距离默认 1 像素cellspacing: 单元格之间的距离。默认为 2 像素width/height: 设置尺寸.tr: 表示表格的一行td: 表示一个单元格合并单元格:跨行合并:rowspann跨列合并:colspann跨列合并左侧是目标单元格跨行合并上方是目标单元格th: 表示表头单元格。会居中加粗thead: 表格的头部区域 (注意和th区分范围是比th要大的)tbody: 表格的主体区域.列表标签:无序列表ulli有序列表olli自定义列表dl(总标签)dt(小标题)dd(围绕标题来说明)ul/ol中只能放li不能放其他标签dl中只能放dt和ddli中可以放其他标签.h3无序列表/h3ulli这是无序列表/li/ulh3有序列表/h3olli这是有序列表/li/olh3自定义列表/h3dldt这是自定义列表/dtdd1/dddd2/dddd3/dd/dl表单标签:表单标签分为两个部分:表单域包含表单元素的区域。重点是form标签.form标签:描述了要把数据按照什么方式提交到哪个页面中formactiontest.html... [form 的内容]/form表单控件输入框提交按钮等。重点是input标签关于input标签:他的属性:type必须有取值种类很多如button、checkbox、text、file、image、password、radio等。文本框:inputtypetext密码框:inputtypepassword单选框:(单选框之间必须有相同的name属性才能实现多选一的效果)inputtyperadionamesex男inputtyperadionamesexcheckedchecked女复选框:inputtypecheckbox吃饭inputtypecheckbox睡觉inputtypecheckbox打游戏普通按钮:inputtypebuttonvalue我是个按钮提交按钮:提交按钮必须放到 form 标签内。点击后会尝试给服务器发送数据form actiontest.html input typetext nameusername input typesubmit value提交 /form清空按钮:清空按钮必须放在form中。点击后会将form内所有的用户输入内容重置。formactiontest.htmlinputtypetextnameusernameinputtypesubmitvalue提交inputtyperesetvalue清空/form选择文件:点击选择文件会弹出对话框选择文件inputtypefilename给input起名字尤其是对于单选按钮具有相同name才能实现 “多选一”。valueinput中的默认值。checked默认被选中用于单选按钮和多选按钮。maxlength设定输入内容的最大长度。label标签搭配input使用点击label也能选中对应的单选 / 复选框for属性指定当前label和哪个相同id的input标签对应此时点击才是有效的。labelformale男/labelinputidmaletyperadionamesexselect标签:(下拉菜单)selectoption--请选择年份--/optionoption1991/optionoption1992/optionoption1993/optionoptionselectedselected1994/optionoption1995/option/selectoption中定义selectedselected表示默认选中,如果没有定义这个的话就是默认选中第一个选项textarea标签:多行文本输入框textarearows3cols50/textarea无语义标签:div(分割)和span(跨度)!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titledivspan/title/headbodydivspan咬人猫/spanspan咬人猫/spanspan咬人猫/span/divdivspan兔总裁/spanspan兔总裁/spanspan兔总裁/span/divdivspan阿叶君/spanspan阿叶君/spanspan阿叶君/span/div/body/html