html总结

最新推荐文章于 2022-06-26 16:26:24 发布

hai .

最新推荐文章于 2022-06-26 16:26:24 发布

阅读量119

点赞数 3

分类专栏：前端html 文章标签： html

本文链接：https://blog.csdn.net/weixin_47337347/article/details/114625575

版权

前端html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML简介

HTML是超文本标记语言（HyperText Markup Language）的缩写。平时我们所看到的网页界面就是用HTML来实现的（当然一些花里胡哨的样式、style是由CSS实现的）。HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。在浏览器中看到的任何网页上通过点击鼠标右键->查看源代码（或者进入控制台）就可看到HTML文档。

HTML标签

HTML标签格式

HTML中的标签分为单标签和双标签，如 <head></head>就是一个双标签 ,<br/>（换行）就是一个单标签。

HTML标签介绍

`HTML注释`：

html的注释格式为：'。

`<HTML>标签`：

<html></html>:这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。

`块标签`：

块元素，在页面独占一行的标签。

`行内标签`：

行内元素，在页面上不会独占一行的标签。

`<head>标签`：

<head></head>:这个标签里面可以包含想在搜索结果中出现的关键字、网页的名称和页面描述、CSS样式、字符集声明等。

`标题标签`：

HTML提供了6个等级标题，分别为h1~h6。

`格式化标签`：

<b>粗体</b>
<big>大号字体</big>
<small>小号字体</small>

`字符实体`：

具体的字符实体请查询右侧链接->字符实体链接

&nbsp:表示空格。
&lt；:表示小于号。

`<a>标签`：

可以给文字、图片、音乐、其他标签添加超链接功能，target设置链接的打开方式， _blank新建一页打开,_self表示当前页面打开。举个例子：<a href="https://www.baidu.com" target="_self"> 百度</a>
可以通过超链接完成锚点的设置
1. 锚点：，也称书签，用于标记页面的某个元素或位置，多用于在长页面中进行跳转，如很多网页从网页底部点击锚点直接回到网页顶部这个事件。
2. 代码例子：
  <a href="#middle">跳到中部</a>
  <a href="#bottom">跳到底部</a>
  <a name="top">顶部</a>
  <br/>
  <br/>
  <br/>
  <a name="middle">中部</a>
  <br/>
  <br/>
  <br/>
  <a name="bottom">底部</a>
  <a href="#top">跳到顶部</a>
3. 注意事项：
  - 元素的id值必须是唯一的。
  - 超链接中的地址需要有#符号。

`多媒体标签`：

加载图片
1. <img src="图片链接" width="800px" height="800px" /> 。
2. 加载网络图片，只需把src的值改为网上的图片链接即可。
3. img标签中的alt属性为当图片加载不出来时所显示的信息。
加载音频
1. 用法：<audio src="音频文件" controls="controls" autoplay="autoplay" loop="loop"></audio>
2. controls 播放控制器,值与变量一样时，可以省略值
3. autoplay 自动播放
4. loop 播放完后在从头开始播放，循环播放
加载视频
1. 用法： <video src="视频文件" controls="controls" autoplay="autoplay" loop="loop" width="30%" height="30%"></video>
2. width = 30%表示宽度占屏幕的30%。

`列表标签`：

有序列表 order list 简称ol
- <ol type="1"> <li>列表的每一项</li> </ol>
- type的值有 1、a、i 等等，表示列表的每一项的依次序号，例如，type = “i”，那么有4项<li>的排序序号分别是i、ii、iii、iv。
无序列表 unorder list 简称ul，与有序列表类似，只是type中的取值不同，取值有circle、disc、square，分别表示每一项<li>前面的标号为空心圆圈、实心圆圈、矩形。

`表格Table标签`：

  <!--px为像素  boder：规定表格边框的宽度
   cellspacing：规定单元格之间的空白。
  cellpadding：规定单元边沿与其内容之间的空白。-->
<table align="center" width="40%" border="1px" cellspacing="0px"> 
			<thead bgcolor="lightgoldenrodyellow">
				<tr><!--代表每一行 table row-->
				<!--th与td的差别就是th包裹的内容会加粗	-->
					<th>姓名</th> 
					<th>年龄</th> 
					<th>班级</th> 
					<th>分数</th> 
				</tr>
			</thead>
			
			<tbody bgcolor="blanchedalmond"> <!-- 如果不写tbody标签，浏览器会默认加上tbody->
				<tr><!--代表每一行-->
		  			<td>小王</td> 
					<td>18</td> 
				 	<td>1班</td> 
					<td>90</td> 
				</tr>
				<tr><!--代每表一行-->
					<td>小李</td> 
					<td>17</td> 
					<td>1班</td> 
					<td>95</td> 
				</tr>
			</tbody>	
			<tfoot bgcolor="cornflowerblue">
				<tr><!--代每表一行-->
					<td>总人数</td> 
					<td>10</td> 
					<td>总分数</td> 
					<td>100</td> 
				</tr>
			</tfoot>
		</table>
		<!--除以上属性外还有2个重要的属性，在td和th标签里面设置colspan或者rowspan，
		分别表示该th或td标签包裹的内容占的列单元格数或者行单元格数，
		如<th colspan="3">学生成绩单</th> 表示学生成绩单占3个列单元格。-->

`<input>标签`：

<input>标签用于搜集用户信息。根据不同的 type 属性值，输入字段有不同形式。输入字段可以是文本字段(type=“text”)、密码框(type=“password”)、按钮(type= “button”)等等。
下面介绍部分类型的输入标签

		账号:<input type="text" /> <br />
		密码:<input  type="password"/> <br />
		
		<!--1.同一组单选框必须有相同的name属性
			2.checked 默认被选中
		-->
		性别:<input type="radio" name="gender" checked="checked"/>男 
		<input type="radio" name="gender" />女
		
		<!--复选框 -->
		爱好：
			<input type="checkbox" name="hobby"/>篮球
			<input type="checkbox" name="hobby"/>羽毛球
			<input type="checkbox" name="hobby"/>足球
			<input type="checkbox" name="hobby"/>乒乓球

`form表单标签`：

<form></form>：当网站需要传送一些信息，如用户名、密码等，需要使用表单(form)包裹要传输的内容。

<!--
			1.通过action属性表示提交的地址
			2.通过method属性确定数据提交的方式
				get方式: 1.数据通过地址栏传递，地址栏有长度限制，数据量有限；
				 		2.地址栏只能放文字 ；
				 		3.数据显示在地址栏上，数据容易暴露。
				post方式: 1.数据单独打包成数据包发送，大小一般认为没有限制，传输数据量大； 
						  2.数据包可以放文字，也可以上传文件。
			4.提交按钮 <input type="submit" value="提交" /> 必须在表单内部，标志提交的是当前所在的表单
			5.给提交数据的输入框添加name 和 value属性,name就是给输入的数据起名字，用于区分不同数据的含义;value 其实就是输入框上我们实际输入的值
				单选框、复选框中特别需要添加value属性的值。
				-->
<form action="https://www.baidu.com" method="get">  
	
			账号:<input type="text" name ="username"/><br />
			密码:<input  type="password" name= "password"/><br />
			<br />
			<!--提交按钮-->
			<input type="submit" value="提交" />
		</form>

`iframe标签`：

<iframe>标签：常用于将多个不同的页面组织在同一个页面上,src属性就是用于装要打开的页面的链接。

<iframe src="https://www.baidu.com" width="40%" height="400px" name="ifr"></iframe>

hai .

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html总结

HTML简介HTML是超文本标记语言（HyperText Markup Language）的缩写。平时我们所看到的网页界面就是用HTML来实现的（当然一些花里胡哨的样式、style是由CSS实现的）。HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。在浏览器中看到的任何网页上通过点击鼠标右键->查看源代码（或者进入控制台）就可看到HTML文档。HTML标签HTML标签格式HTML中的标签分为单标签和双标签，如 <head></head>就是一个双标签 ,&
复制链接

扫一扫