HTML学习笔记

最新推荐文章于 2024-06-10 17:18:33 发布

德艺双馨张老师

最新推荐文章于 2024-06-10 17:18:33 发布

阅读量176

点赞数

文章标签： html web

本文链接：https://blog.csdn.net/weixin_42281516/article/details/104810120

版权

作为后端初步学习前端知识，记录下我学习到一些我认为值得记录的知识。

HTML的基本构成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

</body>

</html>

Doctype

Doctype告诉浏览器使用什么样子的html或xhtml规范来解析html文档。

常用标签

标签一般分为两种：

块级标签
行内标签

p

p标签表示段落，默认段落之间是有间隔的。

br

br标签表示换行，一般情况下用<br/>比较好，更清晰。

a

点击a标签后会跳转href中的地址。

target属性，_blank表示在新的页面打开

<a href="www.github.com" target="_blank">github</a>

锚
```
<a href="#标签id"></a>
```
当点击这种a标签时，会寻找页面中对应id的标签，并将其放置在页面顶部。

input

text：一般文本
```
<input type="text"/>
```
password：密文
```
<input type="password"/>
```
radio：单选框
```
<input type="radio"/>
```
有一点需要注意，如果不加其他的条件，不会产生互斥。给标签加上相同的name属性，便可以实现这几个单选框的互斥。并且添加value属性，在提交的时候可以提交出对应的value。
```
<input type="password" name="gender" value="1"/>男
<input type="password" name="gender" value="0"/>女
```
checkbox：复选框
```
<input type="checkbox" name="" value=""/>
```
多个同名name的复选框，发送数据时是发送的选中的value数组。
```
{
    "...":[...,...,...]
}
```
file：添加文件
```
<input type="file"/>
```
默认情况下提交文件，最后form表单提交的是文件名。想要上传文件的话，需要给form表单添加enctype="mutipart/form-data"。
submit：提交表单
```
<input type="submit" value="submit"/>
```
点击提交按钮后，默认是将表单内容提交到当前地址。如果给form标签添加action属性，则会将表单中的数据发送到该地址。
```
<form action="https://www.sogou.com/web" method="get">
    <input type="text" name="query"/>
    <input type="submit" value="提交"/>
</form>
```
如上的示例代码，在输入内容后点提交按钮，就会向 https://www.sogou.com/web 发送get请求，发送以name属性为key的key-value数据。
```
{
    "query":"..."
}
```
默认情况发送get请求，更改method属性可以发送post请求。
button：按钮
```
<input type="button" value="button"/>
```
reset：重置表单
```
<input type="reset" value="reset"/>
```

select

一般形式
```
<select>
	<option></option>
</select>
```
实现多选

添加multiple属性可以实现下拉框多选，添加size属性可以设定显示个数。
```
<select multiple size="10">
	<option></option>
</select>
```

添加分组

<select>
    <optgroup label="">
        <option></option>
    </optgroup>
    <optgroup label="">
        <option></option>
    </optgroup>
</select>

提交表单数据

<select name="">
	<option value=""></option>
</select>

table

基本形式

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

thead：表头
tbody：表内容
tr：行
td：列

合并单元格

colspan用于水平合并，rowspan用于垂直合并，合并时需要注意只是将原来一格的改成占用多格，注意会不会有多余的行或者列。

德艺双馨张老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

作为后端初步学习前端知识，记录下我学习到一些我认为值得记录的知识。HTML的基本构成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body>&l...
复制链接

扫一扫