2021.9.17HTML
2021.9.17
HTML
1.基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta标签是描述性标签 -->
<!-- meta标签一般用来做SEO -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!--
块元素：无论内容多少，该元素独占一行
（p,h1~h6...）
-->
<!--
行内元素：
内容撑开宽度，左右都是行内元素的可以排在一行
(a,strong,em...)
-->
2.基本标签
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6>
?
<!-- 段落标签 -->
子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？
有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”
?
?
<p>子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</p>
<p>有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”</p>
?
?
<!-- 换行标签 -->
子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？？人不知而不愠，不亦君子乎<br>
有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”
?
<!-- 水平线标签 -->
<hr>
?
<!-- 粗体，斜体 -->
<h1>字体样式标签</h1>
粗体：<strong>I am your mom</strong><br>
斜体：<em> I am your mom</em>
?
<!-- 特殊符号 -->
空 格：<br>
>大于符号<br>
<小于符号<br>
©hhhhh版权所有<br>
<!-- 特殊符号记忆方式 -->
<!--
& ;
-->
3.图像及链接
<!-- 图像标签 -->
<!--
src：图片地址（相对地址，绝对地址）
../ 上级目录
?
-->
<img src="../resource/814380_screenshots_20201230194406_1.jpg" alt="图片" title="悬停文字" width="200" height="180">
?
<!-- 链接标签 -->
<!--
href:必填，表示跳转到哪里
target:表示窗口在哪里打开
-->
<a href="https://www.baidu.com" target="_blank">11</a>
<a href="https://www.baidu.com" target="_self">22</a>
?
<!-- 锚链接 -->
<!--
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
?
<!-- 功能性链接 -->
<!--
邮件链接：mailto：
QQ链接：
-->
<a href="mailto:1442487210@qq.com">联系我</a>
4.列表
<!-- 有序列表 -->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C</li>
</ul>
<!--
自定义列表
dl:标签
dt:列表名称
dd:列表选项
?
-->
<dl>
<dt>Java</dt>
?
<dd>Python</dd>
<dd>运维</dd>
<dd>C</dd>
<dd></dd>
<dd></dd>
?
<dt>位置</dt>
<dd>西安</dd>
<dd>西安</dd>
<dd>西安</dd>
</dl>
5.表格
<!-- 表格Table -->
<!--
行：tr
列：td
-->
<table border="1px">
<tr>
<!-- colspan跨列 -->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowspan跨行 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
<table border="1px">
<tr>
<td colspan="4">课表</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>语文</td>
<td>科学</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>语文</td>
<td>科学</td>
</tr>
</table>
6.视频与音频
<!-- 视频与音频 -->
<video src="../" controls autoplay></video>
<audio src="../" controls autoplay></audio>
?
7.内联框架
<!-- iframe内联框架 -->
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
?
8.表单与提交
<!-- 表单 -->
<!--
action：表单的提交位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
get方式提交，我们可以在url中可以看到提交的信息，不安全，高效
post方式提交，比较安全，传输大文件
-->
<form action="https://www.baidu.com" method="GET"></form>
?
<!-- 提交与重置 -->
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
9.文本框和单选框
<!--
文本输入框：input type=”text“
value:默认初始值
maxlength：最大能写几个长度
size：文本框长度
-->
<p>名字：<input type="text" name="username" ></p>
<!-- 密码框：imput type=”password“ -->
<p>密码：<input type="password" name="password"></p>
?
<!--
单选框标签
input type=”radio“
value：单选框的值
name：表示组
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
10.按钮和多选框
<!--
多选框标签
input type="checkbox"
-->
<p>
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">代码
<input type="checkbox" value="girl" name="hobby">女孩
<input type="checkbox" value="game" name="hobby">游戏
?
</p>
?
<!--
按钮
input type="button"普通按钮
input type="image"图像按钮
input type="submit"提交按钮
input type="reset"重置按钮
-->
<p>
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resource/捕获2.PNG" width="200" height="100">
</p>
11.列表框文本域文件域
<!-- 下拉框，列表框 -->
<p>国家
<select name="列表名称">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="RS" selected>瑞士ETH</option>
<option value="Indian">印度</option>
</select>
</p>
?
<!-- 文本域 -->
<p>反馈:
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
?
<!-- 文件域 -->
<p>
<input type="file" name="files">
<input type="button" value="上传文件" name="upload">
</p>
12.搜索框滑块和简单验证
<!-- 邮件验证 -->
<p>邮箱:
<input type="email" name="email">
</p>
?
?
<!-- URL -->
<p>URL:
<input type="url" name="url">
</p>
?
<!-- 数字验证 -->
<p>数字:
<input type="number" name="number" max="100" min="0">
</p>
?
<!-- 滑块 -->
<p>滑块:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
?
<!-- 搜索框 -->
<p>搜索:
<input type="search" name="search">
</p>
13.表单的应用
<!-- 增强鼠标可用性 -->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<!--
隐藏域 hidden
只读 readonly
禁用 disable
-->
14.表单的初级验证
placeholder 提示信息
required 非空判断
pattern 正则表达式
<p>自定义邮箱:
<input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
跟着狂神学Java遇见狂神说的个人空间_哔哩哔哩_bilibili
2021.9.17HTML
原文：https://www.cnblogs.com/Longyuqin/p/15307211.html