前端-HTML-zxst

文章列表

前端-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

<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; 小于号：&lt; 大于号：&gt;

尝试用着标签进行网页布局

<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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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：只读，可以不写属性值
- select标签，下拉框，默认选择第一个
  - option：选项
    - value：选择的东西提交的时候，不能直接提交文字，但是可以提交编号之类的信息，需要用到value属性
    - selected：下拉框选中，可以不写属性值
- textarea标签，大文本区域
- button标签，也是一个按钮，只有放在表单里面才有提交的作用，不常用。

<!--注意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

前端-HTML-zxst

HTML

常用标签

块级元素，行级元素

表单

相关问题

公告