网页设计之HTML

最新推荐文章于 2024-07-24 14:14:30 发布

发自己的光就好

最新推荐文章于 2024-07-24 14:14:30 发布

阅读量2.8k

点赞数

分类专栏： html 文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_53677566/article/details/120611553

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础结构，包括HTML文件结构、标签结构，以及常用的HTML标签，如标题、段落、换行、列表、超链接和图片等。此外，还探讨了超链接的定位功能和表格的创建。同时，文章还提到了表单元素，如单行文本框、密码框、单选按钮、复选框等，并展示了如何创建和使用这些表单组件。

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

文章目录

HTML

HTML

一.HTML结构

1.HTML文件结构

在这里插入图片描述

!DOCTYPE html
html根标签
head头标签
- meta：标签可提供有关页面的元信息
- title：标题
body体标签，网页内容都在里面


<!-- 
html项目结构    
 -->
 
<!DOCTYPE html>       <!-- 声明html的版本 告诉浏览器html版本 去进行解析-->

<html>     <!-- 根标签  所有内容都必须写在根标签中，方便解析查询-->

	<head>     <!-- 头标签  写一些对网页的设置-->
	
		<meta charset="utf-8" />      <!-- 标签可提供有关页面的元信息（meta-information） 
		                                指定网页编码  还可以写一些关键字，作者名称..供搜索引擎搜索-->
		 <meta name=“keywords” content=“手机,家电"> 
		 <meta name="description" content="免费 Web & 编程 教程">
		 <meta name="author" content=“jim">
		 
		
		<link rel="icon" href="ico地址">     <!-- 给标题处添加图标 rel必须写不然网页显示不出来-->
		
		<title></title>    <!-- 标题-->
	</head>
	<body>      <!-- 网页体 网页内容都写在body中-->
		
	</body>
</html>

2.标签结构

标签

HTML中的标记指的就是标签。

HTML使用标记标签来描述网页。

结构：

<标签名>标签内容</标签名> 闭合标签(有标签内容)

<标签名/> 自闭合标签 (无标签内容)

标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用，属性对标签的显示进行各种设置

特性。如：

1.属性的格式：属性名 = “属性值“
1. 属性的位置：开始标签中 <标签名属性名 = “属性值“ >xxx</标签名>
2. 添加多个属性： <标签名属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

二.常用标签

1.标签

标题标签

—

六级标签

段落标签

换行标签

列表无序列表有序列表

超链接超链接有一个重要且我以前不知道的属性 精确定位看以下第二段代码

图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 标题标签  块级标签  占一行 -->
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		
		<!-- 段落标签 段落与段落之间由距离 -->
		<p>2. 四指继续按主屏幕，向上滑动就会显示后台启动的程序
		（其实连按两下home键或者单只从屏幕下方往上拖效果也是一样的）；
		</p>
		<p>2. 四指继续按主屏幕，向上滑动就会显示后台启动的程序
		（其实连按两下home键或者单只从屏幕下方往上拖效果也是一样的）；
		</p>
		
		 <!-- 换行标签-->
		 拉<br>啦
		 
		 
		 <!-- 列表-->
		 <!-- 1.有序列表 -->
		 <ol type="I">   <!-- type 显示风格-->
		 	<li>知识预习</li>
		 	<li>知识学习</li>
		 	<li>知识回顾</li>
		 	<li>知识在回顾</li>
		 </ol>
		 
		 <!-- 2.无序列表 -->
		 <ul type="square">    <!-- type 显示风格-->
		 	<li>知识预习</li>
		 	<li>知识学习</li>
		 	<li>知识回顾</li>
		 	<li>知识在回顾</li>
		 </ul>
		 
		 <!-- 超链接-->
		 <a href="https://www.zhihu.com/" target="_blank">知乎内容</a>
		 <!-- href 资源位置   target 打开文件的方式 如_blank 在当前窗口打开-->
		 
		 
		 <!-- 图片标签 -->
		 
		 <img src="img/hao123.png" alt="hao123,上网从这里开始">
		 <!-- src 图片存放的地址  alt 图片不能显示显示的内容-->
		 
	</body>
</html>

在这里插入图片描述
超链接定位标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a name="top"></a>
		
		<a href="#one">产品一</a>
		<a href="#two">产品二</a>
		<a href="#three">产品三</a>
		<a href="#four">产品四</a>
		<a href="#five">产品五</a>
		
		
		<h3><a name="one">产品一</a></h3>
		<img src="img/1.png" alt="">
		<h3><a name="two">产品二</a></h3>
		<img src="img/2.png" alt="">
	     <h3><a name="three">产品三</a></h3>
		<img src="img/3.png" alt="">
		<h3><a name="four">产品四 </a></h3>
		<img src="img/4.png" alt="">
		<h3><a name="four">产品五</a></h3>
		<img src="img/5.png" alt="">
		
		<a href="#top" style="position: fixed; right: 20px; bottom: 20px;" > 返回顶部</a>
	</body>
</html>

在这里插入图片描述

2.表格

表格的基本构成标签

table标签：表格标签

tr标签：表格中的行

th标签:表格的表头

td标签：表格单元格

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="50%" border="1" cellpadding="0"
		 cellspacing="0" align="center" background="img/1.png" bgcolor="aquamarine" height="600">
			<tr>
				<th> 学号</th> <th>班级</th>  <th>姓名</th>
				</tr>
			<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			</tr>
			<tr>
			<td>2</td>
			<td>2</td>
			<td>2</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

表格属性和表格结构
在这里插入图片描述

3.表单

form标签：表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器.

在这里插入图片描述

（1）单行文本框
在这里插入图片描述

（2）密码框
在这里插入图片描述

（3）单选按钮
在这里插入图片描述

（4）复选框

在这里插入图片描述

注：
在这里插入图片描述

（5）文件选择框
在这里插入图片描述

（6）下拉框
在这里插入图片描述

（7）多行文本输入框
在这里插入图片描述

（8）按钮

三种按钮
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GvzRZKR2-1633401227859)(C:\Users\封纪元\AppData\Roaming\Typora\typora-user-images\1625826328916.png)]$

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		input  输入框
			type="text"  文本框
			属性：
				id="" 值唯一 ，值自定义值   唯一标记是网页用来区分它的
				name="" 值自定义 向服务器
				value="" 输入的内容最终向服务器提交
				pleaceholder="请输入用户名" 提示信息不属于值
				readonly="readonly" 只读不能输入   如果里面有值可以向服务器发送
				disabled="disabled" 禁用 不能向服务器发送
				
				type="password"   密码框
				
				
				type="radio" 单选框   name相同为一组，互斥只能选中一个，选中的组件必须给value因为如果不定义
				value值这个组件没办法像服务器发值
				
		 -->
		
		
		
		<form action="" method="get">
			<label for="textid">用户名:</label>
			<input type="text" id="text1id" name="text1" placeholder="请输入内容" ><br>
			<label for="pwdid">密码:</label>
			<input type="password" name="pwd1" id="pwdid" placeholder="请输入密码"><br>
			
			性别：<input type="radio" name="radio1" id="radio1id" value="男" />男
			<input type="radio" name="radio1" id="radio2id" value="女" / checked="checked">女<br>
			
			
			
			<!-- 复选框 -->
			请选择学习内容：<input type="checkbox" name="checkbox1" value="java"  checked="checked">java
			<input type="checkbox" name="checkbox1" value="html">html
			<input type="checkbox" name="checkbox1" value="css">css
			<input type="checkbox" name="checkbox1" value="xml">xml<br>
			
			<!-- 下拉框 -->
			请选择城市：<select name="sekect1">
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="天津">天津</option>
				<option value="西安" selected="selected">西安</option>
			</select><br>
			
			附件：<input type="file"  accept=".jpg.png"> <br>
			
			备注：<textarea rows="30" cols="50" name="textarea1">
				
			</textarea>
			
			
			
			
			<input type="submit" id="submit1" name="" />
               <input type="reset" value="重置" />			
			   <input type="button" value="普通按钮" onclick="alert()">
			
		</form>
	</body>
</html>

结果
在这里插入图片描述

三.内联样式

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面

在这里插入图片描述

发自己的光就好

关注

0
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
网页设计之HTML

文章目录HTML一.HTML结构1.HTML文件结构2.标签结构二.常用标签1.标签2.表格3.表单三.内联样式HTML一.HTML结构1.HTML文件结构!DOCTYPE htmlhtml根标签head头标签meta：标签可提供有关页面的元信息title：标题body体标签，网页内容都在里面 <!DOCTYPE html> <!-- 声明html的版本告诉浏览器html版本去
复制链接

扫一扫

专栏目录