- HTML入门
- DOCTYPE
- 常用标签
- 表格table
- 表单form
HTML入门
软件大致分为两种:CS架构软件和BS架构的软件
C/S和B/S
C/S架构是指客户端/服务器【Client/Server】架构,桌面应用程序采用的多是这种结构,比如我们使用的QQ、Foxmail等
B/S结构是浏览器/服务器【Browser/Server】的简称,通过浏览器就可以访问,比如我们使用淘宝、京东、百度等
BS/CS的优缺点
(1) C/S : 更加安全(面向相对固定的用户群),速度更快(专用服务器),但是需要单独安装客户端,而且每次升级都要重新安装客户端
(2) B/S : 用浏览器代替客户端,不用单独安装,客户端不必维护。但是安全性和稳定性相对CS架构的软件较弱
Java主要用于开发BS架构的软件
DOCTYPE
概念:DOCTYPE是Document Type(文档类型/申明 = DOCTYPE声明)的简写,DOCTYPE不属于HTML标签。在页面中用来指定页面所使用的HTML版本
常用的DOCTYPE
- HTML 5
<!DOCTYPE html>
DOCTYPE 声明必须是HTML文档的第一行,位于 <html> 标签之前
网页文件一定要加上DOCTYPE声明,否则浏览器可能会使用自带的混合怪异模式解析,造成不能理解的问题
现在开发都直接使用H5的声明方式 : <!DOCTYPE html>
常用标签
概念:HTML是以标签来进行描述,学习HTML基本上就是认识HTML标签的含义与作用
分类:
- 单标签:
<标签名 />
我们以图片标签为例进行演示学习- 双标签:
<标签名>内容</标签名>
我们以a标签为例进行演示学习
属性认识:
- HTML标签中可以定义一个或多个属性,提供更多信息
- 属性总是以名称/值对的形式出现,语法为 属性名=“属性值”
- title标签:用来声明网页的标题,例如我们在浏览器中输入百度,浏览器就会显示百度的标题
<title>百度一下,你就知道</title>
-
标签用于创建段落,用来组织和结构化文本
-
标签用于将文本设置为粗体显示
-
标签用于将文本设置为斜体显示
<p>这是一个段落。</p>
<p>这是一段 <b>粗体文本</b></p>
<p>这是一段 <i>斜体文本</i></p>
- 换行br 标签用于在HTML中插入换行符
这是一行文本。<br>这是另一行文本。
这是一行文本。<br><br>这是另一行文本。
- hr标签 用于在HTML中插入水平线 它是一个单标签
<p>这是一段文本。</p>
<hr>
<p>这是另一段文本。</p>
-
标题h1-h6
<h1>
到<h6>
标签用于定义标题级别,从大标题<h1>
到小标题<h6>
-
meta标签:HTML中的Meta标签用于向浏览器提供Web页面的元数据,包括页面的标题、描述、关键字、作者、语言以及其他相关信息。它们被放置在head标签内,不会在主页面上显示
常见的Meta标签及其作用:
1. <meta charset="utf-8">:指定页面的字符编码
2. <meta name="viewport" content="width=device-width, initial-scale=1.0">:指定页面在不同设备上的显示方式,以适应不同屏幕尺寸
3.<meta name="description" content="页面描述">:描述网页的内容,对搜索引擎优化SEO很重要
4.<meta name="keywords" content="关键词">:设置网页的关键字,以便于搜索引擎对网页内容的分析
5.<meta name="author" content="作者名">:设置页面的作者
6.<meta http-equiv="refresh" content="5;url=http://example.com/">:设置网页自动跳转,其中5表示间隔5秒,url表示跳转的地址
- html注释:
<!-- 我是html注释 -->
- 图片img:img标签用于在网页中展示图像,图片标签使用
<img>
标签来定义,它是一个单标签。
<img src="./image.jpg" alt="图片无法正常显示的时候显示的文字" title="图标的标题,鼠标指着的时候显示的标题" />
注意:
1./可以不写 也表示相对路径
2.src的路径可以相对路径,也可以是绝对路径
- 超链接a
用法1:跳转页面
<a href="跳转到的页面路径" target="打开的方式"> 跳转 </a>
target="_self":在当前打开,会覆盖原来的页面
target="_blank":新开一个页面显示
用法2:做锚点
<a id="a1"></a> <!--做锚点-->
<a href="#a1"> 回到定点 </a>
用法3:其他跳转用法
<a href="https://www.baidu.com">去百度</a>
<a href="./1.txt">查看一个文本文档</a>
<a href="../img/1.webp">查看一张图片</a>
<!--实现本地下载:将不认识的文件复制一份-->
<a href="./取色器.exe">下载</a>
表格标签table
rowspan
属性用于定义单元格横跨的行数
colspan
属性用于定义单元格横跨的列数
<caption>
标签用于为表格添加标题。
<thead>
、<tbody>
和<tfoot>
标签用于将表格内容分组为表头、表体和表尾,提高可读性和可访问性
<table border="边框的宽度(整数0-任意数),颜色和类型是默认">
<!-- 表的结构 -->
<!-- <table border="1">
<caption>表格的标题</caption>
<thead>
表头:每一个列的标题
</thead>
<tbody>
表格的数据
</tbody>
<tfoot>
表脚
</tfoot>
</table> -->
<!-- 表格里面都是有行tr,每一行都是有列组成td -->
一般我们都这样写:
<table border="1" width="500">
<tr> <!--表格的行-->
<td>编号</td><!--行里面列-->
<td>姓名</td><!--行里面列-->
<td>性别</td><!--行里面列-->
<td>年龄</td><!--行里面列-->
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr><tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr><tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</table>
注意:th 和 td区别:表示列,th有默认的样式,td没有,th一般作为表头的列,td做表数据的列**
合并单元格:
<body>
<!-- 合并单元格 -->
<table border="1" width="600">
<tr>
<!-- <td colspan="横向合并,合并列的个数">1</td> -->
<td colspan="3">1</td>
</tr>
<tr>
<td>1</td>
<!-- <td rowspan="纵向合并">1</td> -->
<td rowspan="3">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
表单标签 form
概念:页面和后台进行数据交互
提交数据是一个键值对:name属性的值作为建,输入框里面内容作为值
- text 普通输入框
- password 密码输入框
- number 数字输入框
- time 日期输入框
- email 邮箱输入框
- url 域名输入框
- file 文件选择框
- radio 单选框
- checkbox 多选框
- select option 下拉框
- textarea 文本域
- submit 提交按钮
- button 普通按钮
- reset 重置按钮
<form action="提交后台的地址" method="表单提交的方式:get\post">
<!-- get:显示提交,提交的内容在地址可见,安全性能差一点,有大小限制(2k) -->
<!-- post:隐式提交,在地址看不见提交内容,安全性能好一点,没有大小限制 -->
<!-- form表的案例:登录、注册、搜索等 -->
<form action="#" method="get"> <!--没有method,默认get提交--> action="要提交表单的地址"
<!-- 表单里面常有的标签 -->
<!-- 提交数据是一个键值对:name属性的值作为建,输入框里面内容作为值 -->
普通输入框:<input type="text" name="username" placeholder="请输入用户名" /> <br /> <!--默认也是text,br是换行标签-->
密码输入框:<input type="password" name="pwd" placeholder="请输入密码" /><br />
数字输入框:<input type="number" name="age" /><br />
日期输入框:<input type="time" step="1" name="date" /><br />
<!-- type="date":年月日、type="datetime-local":年月日时分、type="datetime-local" step="1":年月日时分秒、type="time":时分秒 -->
邮箱输入框:<input type="email" name="email" /><br /> <!--检查输入邮箱格式-->
域名输入框:<input type="url" name="url" /><br /> <!--检查输入域名格式-->
文件选择框:<input type="file" name="file" /><br />
<!-- 单选框和复选框 -->
<!-- 性别单选框:<input type="radio" name="gender" value="男" checked="checked" />男
<input type="radio" name="gender" value="女" />女<br /> -->
性别单选框:<input type="radio" name="gender" value="男" checked="checked" id="man" /><label for="man">男</label>
<input type="radio" name="gender" value="女" id="women" /><label for="women">女</label><br />
爱好多选框:<input type="checkbox" name="ah" value="吃饭" checked />吃饭
<input type="checkbox" name="ah" value="睡觉" id="sj" /><label for="sj">睡觉</label>
<input type="checkbox" name="ah" value="游戏" />游戏
<input type="checkbox" name="ah" value="发呆" checked />发呆<br />
<!-- 下拉框 -->
地址选择框:<select name="address">
<option>-请选择-</option>
<option value="武侯区">武侯区</option>
<option value="青羊区" selected>青羊区</option>
<option value="高新区">高新区</option>
<option value="天府新区">天府新区</option>
</select><br />
<!-- 文本域 -->
自我评价:<br />
<textarea cols="30" rows="10"></textarea><br />
<!-- 按钮 -->
<input type="submit" value="注册" /> <!--提交按钮,将输入里面数据 提交action里面的地址-->
<!-- <button>注册</button> -->
<input type="reset" value="重置" />
</form>
百变标签input
- `text`:文本框:用于输入文本内容
- `password`:密码框:用于输入密码,输入的内容会以密文显示
- `checkbox`:多选框:用于选择多个选项,可以勾选多个复选框
- `radio`:单选框:用于选择单个选项,只能选择一个单选按钮
- `submit`:提交按钮:用于提交表单数据
- `reset`:重置按钮:用于重置表单数据
- `file`:上传框:用于上传文件
- `date`:日期选择框:用于选择日期
- `email`:邮件输入框:用于输入电子邮件地址,对输入的内容按照右键格式校验
- `number`:数字输入框:用于输入数字
<input type="text" placeholder="请输入姓名">
<input type="password" placeholder="请输入密码">
<input type="checkbox" id="option1" name="option" value="option1">
<label for="option1">选项1</label>
<input type="checkbox" id="option2" name="option" value="option2">
<label for="option2">选项2</label>
<input type="radio" id="radio1" name="radio" value="radio1">
<label for="radio1">单选1</label>
<input type="radio" id="radio2" name="radio" value="radio2">
<label for="radio2">单选2</label>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="file">
<input type="date">
<input type="email" placeholder="请输入电子邮件">
<input type="number" placeholder="请输入数字">
注意:
1. 单选框和多选框需要value属性值区分选的是哪一个?
2. 按钮需要value属性值显示按钮上的文字内容
3. 除了以上两种,其他都可以不要value属性值,但可以通过value属性值设置默认值
3. placeholder是提示语,跟默认值有区别
下拉标签select 用于创建下拉列表,允许用户从预定义的选项中进行选择
<select>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
文本域textarea 用于创建多行文本输入框,允许用户输入多行文本内容
<textarea rows="4" cols="50">这是一个多行文本输入框。</textarea>
注意:表单提交数据的要求
<!--
表单提交数据到后端,必须满足:
1.有form表单 - action属性提交地址
2.表单项必须有name属性值
3.必须有提交按钮
button默认是提交按钮
input的type="submit"
-->