HTML学习

最新推荐文章于 2023-03-02 20:40:05 发布

Bango123

最新推荐文章于 2023-03-02 20:40:05 发布

阅读量782

点赞数

文章标签： html html5 前端

本文链接：https://blog.csdn.net/Bango123/article/details/121329840

版权

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>