HTML学习
一、基础标签
<!-- 网页头部 -->
<head><head/>
<!-- 描述性链接 -->
<meta charset="utf-8">
<meta name="keywords" content="我的第一个网站" />
<!-- 网页主体-->
<body><body/>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<!-- 段落标签 -->
<p>我是第一段</p>
<p>我是第二段</p>
<!-- 水平线标签 -->
<hr/>
<!-- 换行标签 -->
我是换行标签<br/>
第二行<br/>
二、样式标签以及特殊符号
<!-- 粗体、斜体 -->
粗体:<strong>love you</strong>
斜体:<em>love you</em><br>
<!-- 特殊符号 -->
空格:1 1 1
大于号: >
小于号:<
<!-- 版权符号 -->
© 版权所有自己
三、主要标签
<div>容器标签<div/>
<img src="" alt="图片名称" title="悬停显示" width="50%" height="50%" />
<!-- 图片标签 -->
<a href="https://blog.csdn.net/" title="打开CSDN">跳转</a>
<!-- 超链接-->
<!-- 锚链接 1、标记 2、跳转到标记-->
<a name="top"></a>
<a href="#top">回到顶部</a>
四、列表标签
<!-- 列表 -->
<!-- 有序 -->
<ol>
<li>ui</li>
<li>后端</li>
<li>前端</li>
<li>运维</li>
</ol>
<!-- 无序 -->
<ul>
<li>ui</li>
<li>后端</li>
<li>前端</li>
<li>运维</li>
</ul>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KIb5lWCE-1636943943771)(C:\Users\AOC\AppData\Roaming\Typora\typora-user-images\image-20211106142248438.png)]
<!--
自定义标签 <dl>
1、dt:列表名称
2、dd:列表内容
-->
<dl>
<dt>第一点</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
<dt>第二点</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
</dl>
五、表格
<table border="2px" bordercolor="green">
<tr>
<td rowspan="4">我是一列</td>
<td colspan="4" >标题表格</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>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>
<td>3-4</td>
</tr>
</table>
border:边框的宽度
tr中的参数:
colspan:跨列,跨多少列
rowspan:跨行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I2LcGTag-1636943943773)(C:\Users\AOC\AppData\Roaming\Typora\typora-user-images\image-20211106143625225.png)]
六、媒体元素
<video src="路径" autoplay controls="controls"></video>
<audio src="路径" autoplay="autoplay" controls="controls"></audio>
七、页面结构分析
header: 头部
footer: 脚部
section: 独立区域
article: 文章
aside: 侧边栏
nav: 导航栏
八、内嵌网页iframe框架
用法一:
<iframe src="//player.bilibili.com/player.html?aid=633641984&bvid=BV1Vb4y1h7Ei&cid=428803912&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
用法二:
<iframe src="" name="video" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="50%" height="70%" style="margin-left: 400px; margin-top: 30px;"> </iframe>
<br>
<a href="//player.bilibili.com/player.html?aid=633641984&bvid=BV1Vb4y1h7Ei&cid=428803912&page=1" target="video"style="margin-left: 400px;">播放视频</a>
<a href="2.html" target="video">媒体</a>
使用a标签来定义链接,target定位到iframe标签中的name。
九、表单
1、form标签
<form action="get.html" method="get">
</form>
基本参数,
2、 input标签
<!--普通输入框 text-文本-->
<p> 用户名:<input name="name" type="text"></p>
<p> 密码: <input name="password" type="text"></p>
<!-- 单选框 -->
<input type="radio" value="boy" name="sex" checked="checked"/>男
<input type="radio" value="girl" name="sex" />女
<!-- 多选框 checkbox-->
<p>爱好:
<input type="checkbox" name="hobby" value="sleep" />睡觉
<input type="checkbox" name="hobby" value="bas" />篮球
<input type="checkbox" name="hobby" value="yu" />羽毛球
<input type="checkbox" name="hobby" value="sorce" />足球
</p>
<!-- 按钮 button 图片按钮image -->
<p>按钮:
<input type="button" name="btn1" value="点击边长"/>
<input type="image" src="recource/11.png" />
</p>
<!-- 文件域 -->
<p>
<input type="file" name="files"/>
</p>
<p>滑块:
<input type="range" name="voice" max="100" min="0" step="1" />
</p>
<p style="margin-left: 50px;">
<input type="submit" name="button" value="提交" />
<input type="reset" name="reset" value="重填" />
</p>
3、下拉框/文本标签
<!-- 下拉框 -->
<p>下拉框:
<select name="列表名称" value="空" style="width: 100px;">
<option value="1">第一</option>
<option value="2">第二</option>
<option value="3">第三</option>
<option value="4">第四</option>
<option value="0" selected="selected" hidden="hidden">默认</option>
</select>
</p>
<!-- 文本域 -->
<p>反馈:
<textarea name="textarea" cols="50" rows="10">内容</textarea>
</p>
4、其他属性
label标签可以指向输入框的id----增加鼠标可用性
readonl:只读
hidden:隐藏
disabled:禁用
5、表单初级验证
placeholder:提示输入
required:不能为空
pattern:正则表达式
on>
<!-- 文本域 -->
<p>反馈:
<textarea name="textarea" cols="50" rows="10">内容</textarea>
</p>
4、其他属性
label标签可以指向输入框的id----增加鼠标可用性
readonl:只读
hidden:隐藏
disabled:禁用
5、表单初级验证
placeholder:提示输入
required:不能为空
pattern:正则表达式