1.什么是HTML？ HTML是HypeText Mark-up Language的简称，即超文本标记语言，是用于创建网页的标准标记语 言。 HTML的全称为：HypeText Mark-up Language，指的是超文本标记语言。它不是一种编程语言（如 java、C语言等），是一种标记语言，是一套标记标签，用来描述网页。标记：就是标签。<标签名称> </标签名称>。 白话：用 来写网页的一门语言，有很多标签组成 所谓的超文本： 1、因为网页可以放图片、视频、音频等内容（超越文本限制） 2、还可以在网页中跳转到另一个网页中（超链接文本） 2.HTML的作用 用来开发 网页 3.网页的组成部分 HTML：负责网页的架构；(骨架) CSS：负责网页的样式，美化；（衣服） JavaScript（JS）：负责网页的行为；（动作） 4.工具介绍 python开发推荐工具pycharm 网站开发推荐工具vscode 需要装的插件有 如何创建项目？ 在桌面创建一个文件 将文件拖入指定的区域 你那个创建的文件夹 也就变成了 项目文件夹 HTML文件的命名 HTML文件的文件后缀名为.html 文件名中不要包含特殊符号，如空格、$等。 5.结构介绍 这个尖括号 就叫标签 1. 生成结构 vscode会自动帮我们生成html结构 什么叫标签 2. 结构详情介绍 html由标签和属性构成。 标签：长在尖角号后面的第一个单词就是标签 属性：长在标签后面的并且用空格隔开的，称作 属性 结构标签介绍 shift + ! 回车 <!-- 文档类型声明 告诉浏览器当前文档使用的是HTML5标准。它帮助浏览器正确地解析和呈现网页内容。 --> <!DOCTYPE html> <!-- html为根标签 最外部的标签 --> <html lang = "en" > 6.网页中常见的标签 1. 标题标签 h1标签 h2标签 h3标签 h4标签 h5标签 h6标签 2. 段落标签 一般用来写文章段落 p标签 3.强调标签 <!-- head包裹的称为头部区域 是负责对网页进行设置标题、编码格式以及引入css和js文件的。--> <head> <!-- 网页采用utf-8的编码格式 --> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <!-- 网页的标题 --> <title> Document </title> </head> <!-- body标签 内容标签 白色部分 如果要写内容应该把内容写到body标签里面 --> <body> <!-- 如何打开？1.直接点击源文件 2.通过vscode来打开 可以实时的刷新 --> <!-- 第二种方式需要搜索插件 liveserve 这个插件的作用是打开网页并实时刷新 --> <!-- 安装成功了 右击就会多出一个open --> <!-- 文件有一个自动保存需要勾选上这样你写的代码就会实时的更新 --> 床前明月光 疑是地上霜 </body> </html> <body> <h1> hello word </h1> <h2> hello word </h2> <h3> hello word </h3> <h4> hello word </h4> <h5> hello word </h5> <h6> hello word </h6> </body> <body> <p> 这是一段文章 </p> </body> em标签 作用：倾斜 <body> <em> 我是作用是倾斜 </em> </body> b标签 作用：加粗 <body> <b> 我是作用是加粗 </b> </body> 4.换行标签 br标签 <body> 窗前明月光 <br> 疑是地上霜 <br> 举头望明月 <br> 低头思故乡 </body> 5.分割标签 hr标签 作用：标签变成分割线 <body> 你好呀 <hr> 哈哈 </body> 6.div标签 div标签 是用来布局的，并没有语义，只是一个区块 <body> <div> 这只是一个盒子 </div> </body> 7.span标签 没有语义，一般用来包裹文字,让文字更好被选中。 <body> <span> 这只是一个盒子 </span> </body> 8.img标签(图片标签) 作用：插入图片 属性 1. src：引入图片路径 2. alt：对图片的描述。 如果由于某种原因，浏览器无法加载图像，它将显示 alt 属性中的文本， 以提供对图像内容的描述。 3. height：设置图片的高 4. width：设置图片的宽度 <body> <!-- 可以链接引入 --> <img src = "https://img1.baidu.com/it/u=176026669,1083095139&fm=253&fmt=auto&app=120&f=JPEG? w=879&h=500" alt = "如果图片加载失败" > <!-- 也可以本地引入 --> <img src = "图片.png" alt = "" > </body> 9.a标签 作用：点击跳转到另一个网页 href：指定访问资源的URL target：指定打开资源的方式 _self：默认值，在当前页面打开 _blank：在新的页面打开 <body> <a href = "https://baidu.com" > 点击当前页面跳转到百度 </a> <a href = "https://baidu.com" target = "_blank" > 点击重新打开页面跳转到百度 </a> </body> 10.列表标签 有序列表 ol li <body> <!-- ul标签定义无序列表 --> <ol> <!-- li标签定义列表项目 --> <li> 1 </li> <li> 1 </li> <li> 1 </li> <li> 1 </li> </ol> </body> 无序列表 ul ol <body> <!-- ul标签定义无序列表 --> <ul> <!-- li标签定义列表项目 --> <li> 1 </li> <li> 1 </li> <li> 1 </li> <li> 1 </li> </ul> </body> 11.表格标签 姓名 年龄 张三 18 12.表单标签 在网页中主要负责数据采集功能 表单项(元素)：不同类型的input元素、下拉列表、文本域等 input标签 type属性： text：默认值、定义单行输入字段 password：定义密码字段 radio：定义单选框 checkbox：复选框 <table> <!-- tr添加一行 --> <tr> <!-- 添加表头 --> <th> 姓名 </th> <th> 年龄 </th> </tr> <!-- 添加一行 --> <tr> <!-- 添加列 --> <td> 张三 </td> <td> 18 </td> </tr> </table> <body> <input type = "text" > </body> <body> <input type = "password" > </body> <body> <!--单选框--> <!--想要多个单选按钮互斥，需要把他们的name设为一样的--> <!--要格外注意加value及对应的值，这样提交以后会把这个值提交进去，从而区分 是男是女--> <input type = "radio" name = "gender" value = "1" > 男 <input type = "radio" name = "gender" value = "2" > 女 </body> <body> <input type = "checkbox" name = "hobby" value = "1" > 旅游 <input type = "checkbox" name = "hobby" value = "2" > 电影 <input type = "checkbox" name = "hobby" value = "3" > 阅读 </body> button：按钮 <body> <!--按钮--> <input type = "button" value = "一个普通按钮" > <button> 一个普通按钮的第二个写法 </button> </body> file：会将文件上传 <body> <!--上传文件--> <input type = "file" ><br> </body> video：视频 <!-- controls：显示视频控制栏（播放、暂停、音量等）。 autoplay：视频加载后自动播放。 --> <video controls autoplay > <source src = "mda-qdqxj7s4d6njpv18.mp4" > </video> select：定义下拉列表，option定义列表项 <body> <select> <option value = "1" > 红色 </option> <option value = "2" > 绿色 </option> <option value = "3" > 黄色 </option> </select> </body> textarea ：文本域 <body> <textarea></textarea> </body>
标签：网页,标签,基础,HTML,跳转,word,hello From： https://blog.csdn.net/qq_39218045/article/details/141610865