HTML标签学习
HTML标签学习
1.HTML标签初步认识
HTML是以一个一个标签组成的，标签中可以添加属性，来改变他们的样式。
<!--双便签-->
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
<!--单便签-->
<便签/>
<便签>
2.HTML注释
多行注释：
<!--
html注释
-->
单行注释：
<!--html注释-->
3.HTML标准结构
<!DOCTYPE HTML>
<!--HTML文件的根-->
<html>
<!--头部-->
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<!--体-->
<body>
<!--体内写内容-->
</body>
</html>
4.HTML基础标签
段落便签
<!--被p标签标记的文字会形成一个段落-->
<p>这是一个段落</p>
<p>这是另一个段落</p>
标题字
<!--
被h标签标记的文字会形成一个标题
标题由大到小，1大
-->
<h1>这是一个标题</h1>
<h2>这是另一个标题</h2>
<h3>这是另一个标题</h3>
<h4>这是另一个标题</h4>
<h5>这是另一个标题</h5>
<h6>这是另一个标题</h6>
换行
hello<br>world！
横线
<!--横线-->
<hr>
<!--设置横线格式-->
<hr color="red" width=50%>
居中标签
<center>这段文字将居中</center>
预留格式文字
<!--保留当前文字格式输出-->
<pre>
for(int i =0;i<10;i++)
System.out.println("hello world!");
</pre>
特殊字体
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
<!--出现在文字上端-->
10<sup>2</sup>
<!--出现在文字下端-->
10<sub>2</sub>
<!--字体标签-->
<font color="red", size="50">字体标签</font>
实体符号
实体符号由&开始，由；结束。实体符用于解决HTML的语法一些标记符号冲突。
<!--小于号-->
<
<!--大于号-->
>
<!--空格-->
表格
border边框，width表格（每个单元）宽度，hight表格高度。align对齐方式，放在table整个表格居中，放在tr整个行单元内容居中，放在td单元内容居中。
<!--表格-->
<table align="center" border="1px" width="60%" hight="150px">
<!--便签col可以设置列的属性,一个代表一列-->
<col width="60px">
<col width="60px">
<!--行-->
<tr>
<!--单元格th 自带居中加粗-->
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr align="center">
<!--单元格-->
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td align="center">1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<!--单元格合并
rowspan行合并单元格,row合并删下面单元格，colspen和并，删除没有要求
-->
<table align="center" border="1px" width="60%" hight="150px">
<!--行-->
<tr align="center">
<!--单元格-->
<td>a</td>
<td>b</td>
<td rowspan="2">c</td>
</tr>
<tr>
<td align="center">1</td>
<td>2</td>
<!--<td>3</td>-->
</tr>
</table>
<!--瓜分表格 便于以后js处理（thead,tbody,tfoot）-->
<!--cellspacing属性表示单元格间隙-->
<table align="center" border="1px" cellspacing="0" width="60%" hight="150px">
<!--行-->
<thead>
<tr align="center">
<!--单元格-->
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<thead>
<tfoot>
<tr>
<td align="center">1</td>
<td>2</td>
<td>3</td>
</tr>
<tfoot>
</table>
编码告知
<!--告知浏览器以utf-8编码方式打开HTML文件,写在头部-->
<head>
<meta charset="utf-8">
</head>
背景图片
<!--bgcolor设置背景颜色，backgound设置背景图片。背景图片如果重复可以通过CSS来设计-->
<body bgcolor="red" background="img/myimg.png">
</body>
图片
<!--
设置图片大小时设置图片宽度，高度自动等比缩放
title设置图片鼠标悬停信息
alt设置图片加载失败时显示提示信息
图片默认是重左到右排列显示的
如果使用的是%来设计图片的大小，是按窗口比例来设置的
-->
<img src="img/myimg.png" width="100px" title="我是图片" alt="图片加载失败"/>
超链接
通过超链接可以从浏览器向服务器发送请求，浏览器向服务器发送请求（request）,服务器响应浏览器(response)
<!--href设置连接地址，也可以是本地路径-->
<a href="https://www.baidu.com/">百度</a>
<a href="img/myimg.png">本地图片</a>
<!--图片连接-->
<a href="https://www.baidu.com/">
<img src="img/baidu.png"/>
</a>
<!--target属性设置打开窗口
_blank:新窗口 _self:当前窗口 _top:顶级窗口 _parent:父窗口
-->
<a href="https://www.baidu.com/" target="_blank">百度</a>
列表
ul标签表示无序列表，li表示列表项
<!--无序列表-->
<!--type设置前面的显示标记-->
<ul>
<li>a</li>
<li>b</li>
</ul>
<!--镶嵌无序列表-->
<ul type="circle">
<li>a
<ul>
<li>apple</li>
<li>app</li>
</ul>
</li>
<li>b
<ul>
<li>boy</li>
<li>bag</li>
</ul>
</li>
</ul>
<!--有序列表-->
<!--type设置前面的显示标记-->
<ol>
<li>a</li>
<li>a</li>
</ol>
表单
表单提交的数据可以重浏览器上方的地址输入宽看到，提交格式是:
格式：action?name=value&name=value(键值对格式)
name和value对于属性值
如果属性method的值是post将无法在地址框上看到提交的键值对
并且键值对用&分割，想要提交数据必须有namee属性，没name无法提交信息，因为提交数据以键值对形式提交。
form表单method属性：
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上
get请求和post请求区别
1.get请求通常表示获取数据(同时也能发送数据)
2.post请求通常表示提交数据
3.get请求发送的数据都写在地址栏上
4.post请求发送的数据用户不可见
5.get请求不能提交大量数据，但post可以，建议不要混用（虽然两者都能发送数据）
<!--
表单收集用户信息
1.type属性设置类型
type="text"为文本框
="password"密码输入框
="checkbox"复选框
="radio"单选按钮
="image"图片按钮
="submit"提交按钮
="reset"重置按钮
="button"普通按钮
="file"文件选择框
="hidden"隐藏框
name:给定表单名称，表单命名之后就可以用脚本语言(如VBScript或JavaScript)对它进行控制。
method:用于指定表单处理表单数据方法，
method的值（get、post，默认get）。
action:指定处理表单信息的服务器端应用程序。
value：文本框或者按钮显示的文本，指定输入框中初始值；
-->
<form name="form1" method="post" action="http://192.168.111.5:8080/form" enctype="text/plain">
姓名：<input type="text" name="name"/>
分数：<input type="text" size="4" name="result"/>
<input type="submit" value="提交"/>
<input type="reset" value="成绩重置"/>
</form>
表单中的复选框和单选框等
<form>
用户名<input type="text" name="username"/>
<br>
密码<input type="password" name="password"/>
<br>
<!--同name单选框为同一组-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
<!--同name复选框同一组，checked属性为设置默认选中-->
兴趣
<input type="checkbox" name="interesting" value="sing">唱歌
<input type="checkbox" name="interesting" value="dance" checked>跳舞
<br>
<!--同name复选框同一组 ，selected属性为默认选择项-->
<!--multiple支持多选,size设置显示条目数量-->
下拉框
<select name="grade" multiple="multiple" size="2">
<option value="1">等级1</option>
<option value="2" selected>等级2</option>
<option value="3">等级3</option>
</select>
<br>
文本域
<textarea row="10" cols="30" name="textarea"></textarea>
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
<!--file控件，文件上传专用。-->
<input type="file"/>
</form>
表单和超链接
<!--表单提交方式可以是get，也可以是post-->
<form></form>
<!--超链接提交方式只可以是get-->
<a></a>
表单隐藏域和文件
<form action="http://localhost:8080">
<!--隐藏框的内容，网页页上看不到，但是隐藏框的数据能提交到服务器-->
<input type="hidden" name="hidden" value="value"/>
用户代码<input type="text" name="usercode"/>
<br>
<input type="submit" value="提交"/>
</form>
文件提交
<form>
<!--file控件上传文件-->
<input type="file"/>
</form>
表单中文本框的readonly和disabled
readonly和disabled都是只读，但是readonly能向服务器提交数据，disabled直接不可用
<form>
用户名：<input type="text" name="username" value="jack" readonly/>
用户名：<input type="text" name="username" value="jack" disabled/>
</form>
maxlength属性
<form>
<!--maxlength控制用户输入字符长度-->
用户名：<input type="text" name="username" maxlength="3"/>
</form>
id属性
id能可以更容易定位元素，更方便JavaScript获取元素（节点）。通常我们是通过id来获取元素
<!--html中每个元素都有id属性，id属性是改节点的唯一标识。id属性不能重复-->
<form id="myf">
<input type="text" id="username" name="username"/>
<input type="password" id="password" name="password"/>
</form>
DOM树
html文件可以看成一课树，这课树叫做DOM树，其中HTML便签是根节点，其有head和body两个孩子，便签一层一层地延伸下去。JavaScript主要就是对这课DOM树进行增删改。
5.div标签和span标签
div和span是图层，图层能灵活地布局网页。
div
<!--默认情况下div独占一行-->
<div id="mydiv">这是一个div</div>
span
<!--默认span只占自己使用的空间-->
<span id="myspan">这是span</span>
6.content属性
https://blog.csdn.net/u012402190/article/details/70172371
下一张： CSS样式学习.
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）