1.HTML
前言
本文用来记录自己的学习过程，第一次上传文章，有误地方还请多多指教
1.1 HTML简介
HTML是一种开发页面的编程语言，简称超文本标记语言
- 超文本，比普通文本功能丰富，图片，动态效果，超链接，多媒体等等
- 标记，就是标签，HTML语言编程，就是利用各种标签来开发，不同的标签实现不同的效果
- 语言，一种编程语言
主要作用
- 使用搁置标签，实现一个网页
1.2 基本语法
1 HTML文件，后缀是.html
2 编辑可以使用记事本编辑
3 基本语法
-
标签是由尖括号组成
-
标签大部分是由一对标签组成，前面成为开标签，后面的称为闭标签，闭标签有/
-
开标签内可以给标签设置属性，
-
- 属性名 = 属性值
- 多个属性空格隔开
-
HTML中标签和属性是不区分大小写，但是建议全部小写
-
标签可以嵌套
4 基本骨架
<html<!--这是html的根标签--> <head><!--头标签，主要定义当前页面的信息--> <title>第一个HTML界面</title> </head> <body> </body> </html>
5 运行
- 浏览器打开
1.3 开发工具
- VScode
2.HTML标签
2.1 结构标签【重点】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> HTML标签的基本骨架 </body> </html>
2.2 排版标签
排版标签就是对内容的简单布局
- 标题 h1-h6
- 分割线hr
- 换行br
- 段落 p
<!--注释--> <!-- 结构标签，由这些标签组成最基本的HTML页面 --> <html><!--根标签--> <head> <title>排版标签</title> </head><!--头标签--> <body> <h1>这是一个一级标题</h1> <h2>这是一个一级标题</h2> <h3>这是一个一级标题</h3> <h4>这是一个一级标题</h4> <h5>这是一个一级标题</h5> <h6>这是一个一级标题</h6> <!-- 分割线 hr 它是单标签，改变分割线的效果 width: 宽度,单位有两种 1. 像素px，是固定尺寸 2. 百分比，是相对于浏览器的宽度 size：表示粗细，单位像素 color：表示颜色 1. 颜色名 2. 16进制颜色 3. rgb颜色 --> <hr width="500px" /> <hr width="50%" size="50px" color="red" /> <hr width="50%" size="50px" color="#00ffff" /> <hr width="50%" size="50px" color="#3999ff" /> <!-- br换行标签，单标签 p标签：段落标签，表示段落 --> </body> </html>
2.3 块标签【重点】
块标签是我们将来使用最多的一个标签，可以用来布局页面，得配合后续的css来实现
-
div
-
- 将来可以通过css来调整它的尺寸大小，位置，完成页面布局
-
span
-
- 将来一般做提示语
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块标签</title> </head> <body> <!--div标签--> <div style="background-color: rgb(0, 255, 0);"> div标签，行级标签，默认占一行 </div> <span> 这样他们就表示一个组，只能选中一个 </span> </body> </html>
2.4 文字标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字标签</title> </head> <body> <!-- font标签：代表文字 属性可以更改字体效果 size：文字大小。单位没有，从标号开始，1-7，从小到大 color：文字颜色 face：文字字体 --> <font size="5" color="#0aa0ff">将大局逆转把</font><br> </body> </html>
2.5 列表标签【重点】
列表标签是一个非常常见的标签
-
无序标签（最常见）
-
- ul
-
有序标签
-
- ol
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表标签</title> </head> <body> <!-- 有序标签 ol 列表内，有序表项，li --> <ol> <li>首先这个是第一点</li> <li>其次这个是第二点</li> <li>最后这个是最后一点</li> </ol> <!-- 无序标签 ul 列表内，无序表项，li --> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul> </body> </html>
2.6 图片标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片标签</title> </head> <body> <!-- img：图片标签，单标签 src：图片地址 alt：图片加载失败时，显示的文字,图片注释 title：鼠标悬停在图片上时，显示的文字 路径： 1.与页面平级，直接写路径（相对路径） 2.图片在平级文件夹里面 ./代表当前路径 3.图片与本文件夹在不同的文件夹里面 ../代表上一级路径,在向下找 --> <img src="1.jpg" alt="图片加载失败时，显示的文字" title="鼠标悬停在图片上时，显示的文字"> </body> </html>
2.7 超链接标签
超链接标签是一个点击可以跳转到其他页面的一个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超链接标签</title> </head> <body> <!-- a，超链接标签，用来跳转页面 href，要跳转目的地的地址 target，跳转的方式 blank，在新窗口中打开 self，在当前页面中打开 特别注意，有下划线 --> <a href="https://www.baidu.com" target="_blank">百度一下，你就知道了</a> <a href="https://www.youku.com" target="_self">优酷一下，你就知道了</a> <a href="https://www.taobao.com" target="_top">淘宝一下，你就知道了</a> <a href="https://www.4399.com" target="_top">4399一下，你就知道了</a> </body> </html>
表格标签可以展现一个表格，用来填充数据，以及布局页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格标签</title> </head> <body> <!-- 4行3列的表格 表格标签是table 行标签是tr 行内单元格是td 单元格td可以改成th，这样就有加粗效果，一般是表格标题 给table设置属性，让表格看起来更好看 border，边框 width 尺寸 --> <table border="1" width="50%"> <tr> <th>1</th> <!-- 实现加粗效果，需要使用th标签 一般的表格边框就是td标签 --> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html>
3.框架标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>框架标签</title> </head> <body> <ul> <!-- 在a标签内使用属性，将页面跳转至ifram内 设置targe属性,属性值指定iframe的name属性值 --> <li><a href="http://www.baidu.com" target="iframe1">百度</a></li> <li><a href="Demo1-表格标签.html" target="iframe1">腾讯</a></li> <li><a href="http://www.4399.com" target="iframe1">新浪</a></li> </ul> <iframe name="iframe1" width="50%" height="300px"></iframe> </body> </html>
4.表单标签
表单用来和服务器交互，可以将数据发送到后台服务器
表单用来收集数据，比如登陆，注册，搜索
常用的功能，输入框，下拉框，单选框，多选框，文件上传框，文本域，一些按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单标签</title> </head> <body> <!-- 表单 form 属性 action,用来指定submit提交后的服务器路径, 即数据发送到这个路径背后的服务器 ------------------------------------- 各种表单框,要想将数据发送到后台,必须指定一个属性 name ------------------------------------- 输入框 input,单标签 属性value ,是输入框的值,默认展示value中的值 属性placeholder ,背景提示 属性type,有很多值,不同属性值,可以实现不同的输入效果 type=text 普通文本 type=password 密码 type=radio 单选框,需要给多个单选标签设置同一个name属性值 这样他们就是一组 设置一个value属性,以便于提交后展示数据 type=checkbox,复选框,需要给多个复选框设置同一个name属性值 设置一个value属性,以便于提交后展示数据 type=file ,选择文件上传 type=date , 选择日期 type=email , 邮箱 type=hidden , 会将输入框隐藏 type=button , 按钮 type=reset , 重置 type=submit , 提交 ------------------------------------- 下拉框 select 下来选项 option ------------------------------------- 文本域 textarea ------------------------------------- 按钮 button 属性type,有很多值,点击按钮的效果不一样 type=button 纯按钮 type=reset 重置,点击会将表达信息恢复到默认 type=submit 提交,将表达中输入的数据提交都后台服务器 这个后台服务器是form标签中指定的服务器路径 --> <form action="/java2217"> 隐藏框<input type="hidden" name="money"><br> 用户名<input type="text" name="username" placeholder="请输入用户名"/><br> 密码<input type="password" name="pwd"/><br> 性别<input type="radio" name="sex" value="man"/> 男 <input type="radio" name="sex" value="women"/> 女<br> 技能 <input type="checkbox" name="skills" value="javase"/> JavaSE <input type="checkbox" name="skills" value="javaweb"/> JavaWeb <input type="checkbox" name="skills" value="ssm"/> SSM<br> 头像 <input type="file" name="touxiang"/> <br> 生日 <input type="date" name="birthday"/> <br> 邮箱 <input type="email" name="email" value="11111@qq.com"/> <br> 籍贯 <select name="jiguan"> <option value="henan">河南</option> <option value="yunnan">云南</option> <option value="hainan">海南</option> </select> <select name="city"> <option>郑州</option> <option>周口</option> <option>驻马店</option> </select> <br> 个人简历 <textarea></textarea><br> <button type="button">按钮</button> <button type="reset">重置</button> <button type="submit">提交</button> <hr> <input type="button" value="按钮"/> <input type="reset" value="重置"/> <input type="submit" value="提交"/> </form> </body> </html>
5.补充
在html敲空格，没有效果
需要使用
 
这个表示一个空格
