前端-HTML-zxst
HTML
-
HTML是超文本标记语言（HyperText Mark-up Language）
-
CSS是层叠样式表（Cascading Style Sheets）
-
JS，即JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言
<!--doctype标签声明这个文件是一个html文件-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title></title></head><body></body>
</html>
- html使用的是一些标签（标记标签）
- 标签是由尖括号包着的关键字
- 标签一般情况下都是成对出现
- 第一个叫开始标签，后边的叫结束标签
- 标签可以包含标签，但是标签不可以交叉使用
- 一个html文件，就叫一个html文档，也就是一个网页
常用标签
- 超链接
- target属性
- _self（默认）
- _blank
- target属性
<a href="www.baidu.com" target="_slef">百度一下</a>
- 图片
- src：既可以写相对地址，也可以写绝对地址。相对地址是相对于html文件所在的昂前目录。需要先将图片导入到项目中，比如放到 img 目录下，才可以通过该属性找到图片。
- width
- height
另外这个标签可以不用关闭的，或者说可以自关闭。
<img src="img/xiaomi.jpg"/>
- 换行
<br />
- 水平线
<hr />
- 六级标题
<h1>一级标题</h1> <h6>六级标题</h6>
- 列表（无序列表）
<ul><li>A.选C</li><li>C.选A</li>
</ul>
- 列表（有序列表）
<ol><li>A.选C</li><li>C.选A</li>
</ol>
- 空格（转义字符）
空格：&nmsp; 小于号：< 大于号：>
- 块
尝试用着标签进行网页布局
<div></div>
- 表格
- 表头
- 行标签
- 列标签
- 表体
- 行标签
- 列标签
- 表尾
- 行标签
- 列标签
- 表头
<table><thead><tr><!--表头里面我们一般不写 <td> 而写 <th>--><th>第一列</th><th>第二列</th><th>第三列</th></tr></thead><tbody><tr><!--合并单元格一般是在 th 和 td 标签上操作colspan="x",x表示这个标签占x列合并不仅有列合并，也有行合并--><td colspan="2">a1</td><td>a2</td><td>a3</td><td rowspan="2">a1</td><td>a2</td><td>a3</td></tr></tbody><tfoot><tr><td></td></tr></tfoot>
</table><!--像这种情况，加载网页时，会自动加上<tbody>标签因此表格标签很容易造成层级错误
-->
<table><tr><td></td></tr>
</table>
- 段落标签
<p>文本内容</p>
- span标签
<span></span>
块级元素，行级元素
-
块级元素
独占一行，另起一行显示，后边的元素也是另起一行
可以设置宽高，但是只是控制了中间内容，任然改变不了是个块级元素，所以还是独占一行。
-
行内元素
和相邻的元素挨在一起，如果到头了再另起一行。
宽高都无法设置，宽高的值源于内容。
-
行内块级元素
整合了两种元素的优点
表单
- 表单
- form 标签，一个 form 就是一个表单
- action属性：通过不同的请求地址区分不同的行为
- target：和超链接的 target 属性效果一样
- method：代表表单提交的方式
- get（默认）
- post
- form 标签，一个 form 就是一个表单
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PRPNXFNZ-1677157615690)(C:\Users\99498\AppData\Roaming\Typora\typora-user-images\image-20230214201937581.png)]
- 表单项
- input 标签，是一个自关闭标签
- type 属性
- text：文本类型（默认）
- password：密码类型
- number：只允许输入数字
- date：日期
- radio：单选，只能选中不能取消
- checkbox：多选
- button：按钮，提交表单
- file：浏览并选择本地文件
- name 属性，只有name的值一样，radio 才能有我们想要的单选效果。另外，name 最重要的作用是提交表单时给每个参数起一个名字
- value：一般用来设置按钮的文字信息，或者输入框的初始值
- checked：选中属性，可以不写属性值
- readonly：只读，可以不写属性值
- type 属性
- select标签，下拉框，默认选择第一个
- option：选项
- value：选择的东西提交的时候，不能直接提交文字，但是可以提交编号之类的信息，需要用到value属性
- selected：下拉框选中，可以不写属性值
- option：选项
- textarea标签，大文本区域
- button标签，也是一个按钮，只有放在表单里面才有提交的作用，不常用。
- input 标签，是一个自关闭标签
<!--注意action的值不宜过程，可以通过斜杠“/”划分注意提交的地址也有相对和绝对之分，比如1. /employee/add提交后url变成：http://127.0.0.1:8848/employee/add?name=zhangsan&pwd=1254&age=21&birthday=2023-01-30&gender=on&hobby=on&hobby=on&province=%E5%B1%B1%E4%B8%9C%E7%9C%812. employee/add提交后url变成：http://127.0.0.1:8848/HTML1/employee/add?name=%E5%BC%A0%E4%B8%89&pwd=123&age=231&birthday=2023-01-31&hobby=on&hobby=on&province=1注意：form 表单一提交是要换页面的！
-->
<form action="/employee/add">用户名：<input type="text" name="name"/><br/>密码：<input type="password" name="pwd"/><br/>年龄：<input type="number" name="age"/><br/>生日：<input type="date" name="birthday"/><br/>性别：男<input type="radio" name="gender"/>女<input type="radio" name="gender"/><br/>爱好：网球<input type="checkbox" checked="checked" name="hobby"/>游戏<input type="checkbox" checked name="hobby"/><br/>省份：<select name="province"><option value="1">山东省</option><option value="2">山东省</option></select><br/><input type="submit" value="提交"/><br/>
</form>
点击提交按钮，地址栏的信息变成
http://127.0.0.1:8848/employee/add?name=zhangsan&pwd=1254&age=21&birthday=2023-01-30&gender=on&hobby=on&hobby=on&province=%E5%B1%B1%E4%B8%9C%E7%9C%81