HTML-day1（学习自用）

目录

一、HTML介绍

二、常用的标签

1、各级标题（h1-h6）

2、段落标签（p）

3、文本容器（span）

4、图片标签（img）

5、超链接标签（a）

6、表格（table）

7、列表（ol、ul）

有序列表:ol

无序列表:ul

8、表单（form)--重要

8.1 form

8.2 input

8.3 label--标签框

8.4 select--下拉框

8.5 button-按钮

---

一、HTML介绍

 

二、常用的标签

1、各级标题（h1-h6）

h1->h6标题逐渐变小

<h1>望庐山瀑布</h1>
<h2>日照香炉生紫烟</h2>
<h3>遥看瀑布挂前川</h3>
<h4>飞流直下三千尺</h4>
<h5>疑是银河落九天</h5>

2、段落标签（p）

块级标签（独占一行）

<!-- 段落 --><!--块级标签（block） 独占一行 -->
<p>日照香炉生紫烟，遥看瀑布挂前川。</p>
<p>飞流直下三千尺，疑是银河落九天。</p>

3、文本容器（span）

内联标签（默认会在一行上显示）

<!-- 文本容器 内联标签（inline），默认会在一行上显示-->
<span>文本容器SpanA</span>
<span>文本容器SpanB</span>

4、图片标签（img）

<!-- 相对地址 -->
<!-- 可以使用./代表当前路径 -->
<img src="./image/pubu.png" width="400",height="400">
<img src="https://ts1.tc.mm.bing.net/th/id/R-C.d9ef0ad72f0ca06596d3f08e
4c776b8e?rik=x9sZoRDgdGqyrw&riu=http%3a%2f%2fp0.ifengimg.com%2fpmop%2f2018
%2f0531%2fA084C2601702A8793B9A2FEBFA7AB4919C268A5C1_size1303_w1080_h685.png
&ehk=tETvMUmGls88fnz1TEirRhLis3P%2ftG3G2jiPiSjECgk%3d&risl=&pid=ImgRaw&r=0"
width="400",height="400"/>

5、超链接标签（a）

<!-- 超链接 _self（在本页面打开）_blank（在新页面打开）_self（在本页面打开）-->
<a href="https://www.baidu.com" target="_blank"><h1>百度链接</h1></a>
<a href="https://www.baidu.com" target="_self"><img src="./image/pubu.png"
width="400",height="400"></a>
<a href="EasyA.html"><h1>跳转到EasyA页面</h1></a>

6、表格（table）

表格：table

行：tr

数据：td

<table><tr><td>编号</td><td>性别</td><td>年龄</td></tr><tr><td>1</td><td>张三</td><td>18</td></tr>
</table>

colspan：占用几列。

rowspan：占用几行。

 

<!-- 表格 --><table><!-- 加粗显示 -->  <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead><!-- 写完thead下面可以用tbody将tr td扩起来 不过用处不大 见到认识就行 --><tbody><tr><td>1-1</td><!-- 占用两列 --><td colspan="2">1-2</td><!-- <td>1-3</td> --><td>1-4</td></tr><tr><td>2-1</td><td rowspan="2">2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><!-- <td>3-2</td> --><td rowspan="2" colspan="2">3-3</td><!-- <td>3-4</td> --></tr><tr><td>4-1</td><td>4-2</td><!-- <td>4-3</td> --><!-- <td>4-4</td> --></tr></tbody></table>

注意在title下面加上：

<style>table,td,th{border:1px solid green;}
</style>

结果如下图所示：
 

7、列表（ol、ul）

有序列表:ol

<ol><li>橘子</li><li>香蕉</li><li>苹果</li><li>西瓜</li><li>柚子</li>
</ol>

无序列表:ul

<ul><li>橘子</li><li>香蕉</li><li>苹果</li><li>西瓜</li><li>柚子</li>
</ul>

结果如下图所示：

8、表单（form)--重要

8.1 form

表单可以通过设置action属性指定数据提交的目标URL，通过method属性指定提交方式（通常是GET或POST）。

当用户点击提交按钮（<input type="submit">或<button type="submit">）时，表单会将所有输入控件的值打包发送到指定的服务器端脚本进行处理。

GET：

作用：用于从服务器请求数据，通常用于获取资源（如页面内容、搜索结果等）。

典型场景：搜索框查询、获取网页内容、API请求等。

POST：

作用：用于向服务器提交数据，通常用于创建或更新资源（如提交表单数据、上传文件等）。

典型场景：用户注册、登录、提交评论、上传文件等。

8.2 input

文本类型-text（默认）

密码类型-password

数字类型-number

单选框-radio

复选框-checkbox

隐藏域-hidden

普通按钮-button（默认）

提交按钮-submit（提交按钮所在的form标签内容）

重置按钮-reset（恢复表单初始状态）

placeholder-输入框提示按钮

value-设置初始值

checked-实现单选框的默认选中（最后有checked的为默认值，单选框有互斥效果，复选框没有）

disabled-禁用某个下拉框或者复选框

readonly-只读属性，无法修改其内容

<!-- 表单 --><form action="提交的地址" method="post"><!-- 表单组件 --><!-- 文本标签 （input的默认类型）--><div><!-- 代表这个label标签是指向user_name输入框 --><label for="user_name">用户名:</label><input id="user_name" type="text" name="username" placeholder="请输入用户名"/></div><!-- 密码 --><div><label for="user_password"><b>密码:</b></label><input id="user_password" type="password" name="password" placeholder="请输入密码"/></div><div><label for="user_age">年龄:</label><!-- number --><input id="user_age"  type="number" name="number" value="18" placeholder="请输入年龄"/></div><!-- radio 单选框 --><div><label>性别:</label><!-- value指定默认值 --><!-- 属于同一name的单选框可以实现互斥 --><!-- checked实现单选框的默认选中（最后有checked为默认值） --><input type="radio" value="男" name="sex" checked/> 男<input type="radio" value="女" name="sex" checked/> 女 </div><!-- 复选框--><div><label>爱好:</label><!-- checkedbox --><!-- checked默认选中 复选框没有互斥效果 --><input type="checkbox" name="hobby" value="badminton" checked/><label>羽毛球</label><input type="checkbox" name="hobby" value="basketball"/><label>篮球</label><input type="checkbox" name="hobby" value="tabletennis" checked/><label>乒乓球</label><input type="checkbox" name="hobby" value="SB"  disabled/><label>上班(无法选择)</label></div><!-- 下拉框 --><div><label>省份:</label><select name="province"><!-- 若没有value，则这个option的值就是里面的内容（如山东省） --><!-- selected 指定默认选择项 --><!-- disabled禁用某个下拉框或者复选框 --><option disabled selected>请选择省份</option><option value="sd" >山东省</option><option value="hn" >河南省</option><option value="hb">河北省</option><option value="sx" >山西省</option></select></div><!-- 只读属性 无法改变内容 --><div><label>学号:</label><input type="text" name="studentCode" value="21110503002" readonly/></div><!-- 隐藏域 --><input type="hidden" name="id" value="8859"/><!-- 按钮 默认就是提交按钮 --><button type="button">按钮</button><!-- 提交改按钮所在的form表单 --><button type="submit">提交按钮</button><!-- 重置按钮 （恢复表单初始状态）--><button type="reset">重置按钮</button><input type="button" value="普通按钮"/><input type="submit" value="提交按钮"/><input type="reset" value="重置按钮"/><!-- 换行标签 一般不用，一般用块级标签套用--><br /></form>

 

8.3 label--标签框

使用for可以指定input

8.4 select--下拉框

使用option标签来输入各个下拉框的内容

<div><label>省份:</label><select name="province"><!-- 若没有value，则这个option的值就是里面的内容（如山东省） --><!-- selected 指定默认选择项 --><!-- disabled禁用某个下拉框或者复选框 --><option disabled selected>请选择省份</option><option value="sd" >山东省</option><option value="hn" >河南省</option><option value="hb">河北省</option><option value="sx" >山西省</option></select>
</div>

8.5 button-按钮

<!-- 按钮 默认就是提交按钮 -->
<button type="button">按钮</button>
<!-- 提交改按钮所在的form表单 -->
<button type="submit">提交按钮</button>
<!-- 重置按钮 （恢复表单初始状态）-->
<button type="reset">重置按钮</button>