HTML基础精简版知识点学习总结

最新推荐文章于 2024-09-20 13:42:43 发布

←whisky￡

最新推荐文章于 2024-09-20 13:42:43 发布

阅读量69

点赞数

分类专栏： java基础知识整理使用文章标签： html html5

本文链接：https://blog.csdn.net/qq_48488331/article/details/110201243

版权

java基础知识整理使用专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础概念，包括有序列表、无序列表、表格、video与audio元素的使用，以及页面结构分析、iframe内联框架和表单语法。通过实例展示了如何创建和操作这些元素，为网页开发提供了基础指导。

摘要由CSDN通过智能技术生成

HTML

超文本标记语言

一、HTML是什么？

超文本标记语言， java跨平台通过的是JVM虚拟机， html则是对世界知名的浏览器都支持的语言

二、有序列表与无序列表


<ol>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ol>

<hr/>
<!--无序列表-->
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

<!--自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
-->

<dl>
	<dt>学科</dt>
	<dd>python</dd>
	<dd>java</dd>
	<dd>linux</dd>
	<dt>位置</dt>
	<dd>西安</dd>
	<dd>重庆</dd>
	<dd>武汉</dd>
</dl>

3.表格

	<table>
		<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>
		<tr>
			<td>4-1</td>
			<td>4-2</td>
			<td>4-3</td>
			<td>4-4</td>
		</tr>
	</table>
<table>
		<tr>
			<!--colspan跨列也叫合并单元格 ，拥有这个属性的标签将占有指定个数单元格大小的位置，因此需要删除多余的单元格，如下就是合并第一行的四格-->
			<td colspan = "4">1-1</td>
		
		</tr>
		<tr>
		<!--rowspan跨行操作 ，合并的是不同行之间的合并-->
			<td rowspan = 3>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>
		<tr>
			<td>4-1</td>
			<td>4-2</td>
			<td>4-3</td>
			<td>4-4</td>
		</tr>
	</table>

2.video 与 audio数据加载

代码如下（示例）：


<video src = "URL" controls  autoplay> </video>
<audio src = "URL" controls  autoplay> </audio>

页面结构分析


<header> </header>

<section> </section>


<footer></footer>

iframe内联框架


<body>
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> 
</iframe>

<!--name 框架的表示名 -->
<iframe src="URL" name="mainFrame" frameborder="0" width="1000px" height="800px" ></iframe>

<!--name 框架的表示名 -->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px" ></iframe>

<!--将指定页面跳转到框架中去 -->
<a href="index.html" target="hello">点击跳转</a>
</body>

表单语法

<body>
<form action="准备接收书籍的页面.html" mothod="get">
	<!--文本输入框 input type = text
	value 默认初始值
	maxlength 最大的长度 size 是文本框的宽度
	readonly 自读标签 添加这个标签后后 ， 页面对应属性就只显示默认值， 而且不能对默认值进行修改操作 ，可用作指定机型的客户端口设置
    hidden 用于隐藏标签 ，但这个标签真实存在，只是在页面中无法显示出来，可以先对标签设置默认值后再进行隐藏 ，防止恶意窃取数据
    placeholder 默认的提示信息 ， 不同与value 它自身不带值
    required 非空设置，
    pattern 正则表达式
	 -->
	<p>名字 : <input type="text" name="usernmae" placeolder="请输入用户名"></p>
	<!--密码输入框 input type = pasword  -->
	<p>密码 : <input type="password" name="password"></p>
	<p>
		<input type="submit" value="默认显示值"></input>
		<input type="reset"></input>
	</p>
	
		<!--单选框要指定name用来分组
		在标签中添加 checked disabled 属性后 ，对应标签选项在启动后为默认被选中状态，但一旦选中其他标签选项 ，此标签将不可被重复选中，即不可再被使用 
	 -->
	 <p>
	<input type="radio" value="gril" name="sex"/>女
	<input type="radio" value="boy" name="sex"/>男
	</p>
	<!---多选框
	input type="checkbox" 
	 -->
	<p>爱好
		<input type="checkbox" value="sleep" name="hobby">睡觉 
		<input type="checkbox" value="play" name="hobby"> 玩
		<input type="checkbox" value="chat" name="hobby"> 聊天
		<input type="checkbox" value="game" name="hobby"> 游戏
	</p>
	
		<!---
		按钮组件
	 -->
	<p>	
	<input type="button" name="btn1" value="点击边长"/>
	<input type="image" src="图片地址">
	</p>
	<p>
	<input type="submit">
	<input type="reset" value="清空表单">
	</p>
		
	<!---
		下拉框 列表项
	 -->
	<p>
		<select name="列表名称">
			<option value="china">中国</option>
			<option value="US">中国</option>
			<option value="eth" selected>瑞士</option>
		<select>
	</p>

<!---
		文本域
		cols="10" rows="50"
-->

<p> 
	<textarea name="textarea" cols="10" rows="50">文本内容</textarea>
</p>

<!---
		文件域
		name="files" 必须要使用name标签中的files属性，不然不能实现文件上传功能
		name="upload" 这个属性是与files属性配套使用
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>

<!---
		邮件验证
-->

<p>邮箱：
	<input type="email" name="email">
	
</p>
<p>url
	<input type="url" name="url">
</p>

<p>数字
	<input type="number" name="num" max="100" min="0" step="10">
</p>

<p>滑块
	<input type="range" name="voice" max="100" min="0" step="2">
</p>

<!---
		搜索框
-->
<p>搜索
	<input type="search" name="search" >
</p>

<!---
		增强鼠标可用性
		label for="mark"   for的值为对应标签的id ，只有当label匹配到for对应的标签的时候 ， 响应的标签才会拥有鼠标加强效果
-->
<p>
	<label for="mark">你点我试试</label>
	<input type="search" name="search"  id="mark">
</p>


<!---
	通过pattern来设置对应的正则表达式 ，只用当用户在页面所输入的内容满足正则表达式的规格要求时，才可以提交
-->
<p>自定义邮箱：
	<input type="text" pattern = "相对应的正则表达式--比如验证邮箱的正则表达式">
</p>
<from>
</body>