前端-HTML-zxst_前端纯js的127.0.0.1:8848怎么形成的-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45591813/article/details/129190271

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%81
	2. 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