HTML学习

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&nbsp;&nbsp;1&nbsp;&nbsp;1
大于号: &gt;
小于号:&lt;

<!-- 版权符号 -->
&copy; 版权所有自己

三、主要标签

<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> 密码:&nbsp;&nbsp;&nbsp;&nbsp;<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:正则表达式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值