HTML5入门
- 1.HTML5
- 1.1 html5是什么：
- 1.1 html5基础结构：
- 1.2 html的语法规则
- 1.3 vscode插件推荐
- 1.4 常见标签
学习笔记，尚硅谷2023javaweb教程
w3c html教程
1.HTML5
1.1 html5是什么：
HTML是Hyper Text Markup Language的缩写，意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。 HTML5 在 2008 年正式发布，在 2012 年已形成了稳定的版本，2014年 10月 28日，W3C发布了HTML5的最终版。
超文本：HTML文件本质上是文本文件，而普通的文本文件只能显示字符。通过标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义： 本身是文本，但是呈现出来的最终效果超越了文本。
1.1 html5基础结构：
<!-- <!DOCTYPE html> 文档声明：HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息以及HTML文档遵循的语法标准。 根标签： <html></html> 标签是整个文档的根标签，所有其他标签都必须放在这对标签里面。 头部元素： <head></head> 标签是 <html></html> 第一个一级子标签,用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。 主体元素： <body></body> 标签是 <html></html> 第二个一级子标签,用于标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。 注释： --> <!-- 标签：代码中的一个 <> 叫做一个标签,双标签和单标签 属性：在开始标签中，用于定义标签的一些特征 文本：标签中间的文字 元素：经过浏览器解析后，每一个完整的标签(标签 +属性+文本)可以称之为一个元素。 -->
1.2 html的语法规则
1 根标签是 有且只能有一个；
2 无论是双标签还是单标签都需要正确关闭；
3 标签可以嵌套但不能交叉嵌套；
4 注释语法为 ，注意不能嵌套；
5 属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值；
6 HTML中不严格区分字符串使用单双引号；
7 HTML标签不严格区分大小写，但是不能大小写混用；
8 HTML中不允许自定义标签名，强行自定义则无效；
1.3 vscode插件推荐
Auto Rename Tag 自动修改标签对插件
Chinese Language Pack 汉化包
HTML CSS Support HTML CSS 支持
Intellij IDEA Keybindings IDEA快捷键支持
Live Server 实时加载功能的小型服务器
open in browser 通过浏览器打开当前文件的插件
Prettier-Code formatter 代码美化格式化插件
Vetur VScode中的Vue工具插件
vscode-icons 文件显示图标插件
Vue3 snipptes 生成VUE模板插件
Vue language Features Vue3语言特征插件
1.4 常见标签
标题
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
常用
断落 <p></p> 换行：<br> 水平分割新：<hr> <p> 第1块月壤砖的太空行程#月亮“月壤砖”是我国科学家模拟月壤成分烧制而成的， 呈榫卯结构，有利于未来拼装建造月球基地。它的抗压强度是普通红砖、 混凝土砖的3倍以上，相当于1平方厘米的面积上能承受10多吨的重量。<br> <hr> 月亮为弄清楚“月壤砖”能否胜任月球造房子的任务， “月壤砖”将搭乘“天舟八号”货运飞船前往中国空间站，验证力学、热学性能，以及能否经受得住宇宙辐射。完成太空实验后 </p>
列表
<!-- 有序列表 --> <ol> <li>JAVA</li> <li>前端</li> <li>大数据</li> </ol> <!-- 无序列表 --> <ul> <li>JAVASE</li> <li>JAVAEE</li> <li>数据库</li> </ul> <!-- 超链接 _blank 在新窗口中打开目标资源； _self 在当前窗口中打开目标资源； --> <a href="01fistPage.html" target="_blank">相对路径本地资源连接</a> <br> <a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br> <a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br> <!--多媒体标签 图片 title:属性用于定义鼠标悬停时显示的文字。 alt:属性用于定义图片加载失败时显示的提示文字。--> <img src="img/python.jpg" title="python" alt="pythonlogo" /> <!-- 音视频 autoplay属性用于控制打开页面时是否自动播放 。 controls属性用于控制是否展示控制面板 。 loop属性用于控制是否进行循环播放 。 --> <audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" /> <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" /> <!--表格标签 -->
<!--表格标签 table标签代表表格； thead标签代表表头，可以省略不写； tbody标签代表表体，可以省略不写，浏览器解析DOM时会自动添加； tfoot标签 代表表尾，可以省略不写； tr标签代表一行； td标签代表行内的一格； th标签自带加粗和居中效果的td； --> <h3 style="text-align: center;">员工技能竞赛评分表</h3> <table border="1px" style="width: 400px; margin: 0px auto;"> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> </tr> <tr> <td>1</td> <td>张小明</td> <td>100</td> </tr> <tr> <td>2</td> <td>李小东</td> <td>99</td> </tr> <tr> <td>3</td> <td>王小虎</td> <td>98</td> </tr> </table> <!-- 通过td的rowspan属性实现上下跨行 --> <hr> <table border="1px" style="width: 400px; margin: 0px auto;"> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th> </tr> <tr> <td>1</td> <td>张小明</td> <td>100</td> <td rowspan="3">前三名升职加薪</td> </tr> <tr> <td>2</td> <td>李小东</td> <td>99</td> </tr> <tr> <td>3</td> <td>王小虎</td> <td>98</td> </tr> </table> <hr> <!-- 通过td的colspan属性实左右的跨列 --> <hr> <table border="1px" style="width: 400px; margin: 0px auto;"> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th> </tr> <tr> <td>1</td> <td>张小明</td> <td>100</td> <td rowspan="5">前三名升职加薪</td> </tr> <tr> <td>2</td> <td>李小东</td> <td>98</td> </tr> <tr> <td>总人数</td> <td colspan="2">2000</td> </tr> <tr> <td>平均分</td> <td colspan="2">90</td> </tr> </table> <hr>
表单标签(重点 )
<!-- 表单标签(重点 ) form标签：表单标签，其内部用于定义可以让用户输入信息的表单项标签。 action属性：用于定义信息提交的服务器的地址。 method属性：用于定义信息的提交方式。 get值： get方式提交，数据会缀到url后，以?作为参数开始的标识，多个参数用&隔 开。 post值： post方式提交，数据会通过请求体发送，不会在缀到url后。 input标签：主要的表单项标签，可以用于定义表单项。 name属性：用于定义提交的参数名。 type属性：用于定义表单项类型。 text 文本框 password 密码框 submit 提交按钮 reset 重置按钮 --> <form action="http://www.atguigu.com" method="get"> 用户名 <input type="text" name="username" /> <br> 密 码 <input type="password" name="password" /> <br> <!-- name属性相同的radio为一组，组内互斥； 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务 器；设置checked="checked"属性设置默认被选中的radio，如果属性名和属性值一样的话，可以省略属性值，只写checked即可； --> <input type="radio" name="sex" value="boy" />男 <input type="radio" name="sex" value="girl" checked="checked" />女<br> 籍贯 <input type="checkbox" name="team" value="shandong"/>山东 <input type="checkbox" name="team" value="hebei" checked/>河北 <input type="checkbox" name="team" value="henan"/>河南 <br> 你喜欢的运动是： <select name="sport"> <option value="swimming">游泳</option> <option value="running">跑步</option> <option value="shooting" selected="selected">射击</option> <option value="skating">溜冰</option> </select> <br> <!-- 多行文本框： --> 自我介绍：<textarea name="desc"></textarea> <br> <!-- 文件标签： --> 证件照:<input type="file" name="file"/><br> <input type="submit" value="登录" /> <input type="reset" value="重置" /> </form>
布局
<!-- div标签： 俗称"块 "，主要用于划分页面结构，做页面布局。 span标签： 俗称 "层 "，可以用于划分元素范围，配合CSS做页面元素样式的修饰 --> <div style="width: 500px; height: 400px;background-color: cadetblue;"> <div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;"> <span style="color: blueviolet;">页面开头部分</span> </div> <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;"> <span style="color: blueviolet;">页面中间部分</span> </div> <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;"> <span style="color: blueviolet;">页面结尾部分</span> </div> </div>
