HTML-前端设计

最新推荐文章于 2024-04-29 16:27:27 发布

weixin_47358951

最新推荐文章于 2024-04-29 16:27:27 发布

阅读量419

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_47358951/article/details/125699877

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

HTML-前端设计

一、B/S 软件的结构

在这里插入图片描述
客户端：浏览器
服务器端：web服务器

二、前端的开发流程

在这里插入图片描述

三、网页的组成部分

页面由三部分内容组成！分别是内容（结构）、表现、行为。
内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容，我们使用 html 技术来展示。
表现，指的是这些内容在页面上的展示形式。比如说，布局，颜色，大小等等。一般使用 CSS 技术实现。
行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。

四、HTML 简介

Hyper Text Markup Language （超文本标记语言）
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

1、HTML 文件的书写规范

<!--表示整个 html 页面的开始-->
<html>
	<!--头信息-->
	<head>
		<title>标题</title>
	</head>
	<body>
		body 是页面的主体内容 页面主体内容 
	</body>
</html>
<!--表示整个 html 页面的结束-->

2、HTML 标签

标签的格式：<标签名>封装的数据</标签名>
标签名大小写不敏感
标签拥有自己的属性
标签又分为，单标签和双标签

3、font 字体标签

font 标签：字体标签，它可以用来修改文本的字体，颜色，大小(尺寸)
color 属性：修改颜色
face 属性：修改字体
size 属性：修改文本大小

<html>
	<body> 
		<font color="red" face="宋体" size="7">我是字体标签</font> 
	</body>
</html>

4、特殊字符### 5、标题标签

<html>
	<body>
		<h1 align="left">标题 1 左对齐</h1>
		<h2 align="center">标题 2 居中</h2>
		<h3 align="right">标题 3 右对齐</h3>
	</body>
</html>

6、超链接

a 标签：超链接
href 属性：设置连接的地址
target 属性：设置哪个目标进行跳转

<a href="http://localhost:8080" target="_self">打开当前页面</a>

7、列表标签

<html>
	<body>
		<ul type="none">
			<li>无序列表-1</li>
			<li>无序列表-2</li>
			<li>无序列表-3</li>
		</ul>
		<ol type="none">
			<li>有序列表-1</li>
			<li>有序列表-2</li>
			<li>有序列表-3</li>
		</ol>
	</body>
</html>

8、img 标签

img 标签：图片标签，用来显示图片
src 属性：可以设置图片的路径
width 属性：设置图片的宽度
height 属性：设置图片的高度
border 属性：设置图片边框大小
alt 属性：设置当指定路径找不到图片时,用来代替显示的文本内容

<img src="../imgs/1.jpg" width="200" height="260" border="1" alt="图片找不到"/>

9、表格标签

table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式

<html>
	<body>
		<table align="center" border="1" width="300" height="300" cellspacing="0">
			<tr>
				<th>1.1</th>
				<th>1.2</th>
				<th>1.3</th>
			</tr>
			<tr>
				<td>2.1</td>
				<td>2.2</td>
				<td>2.3</td>
			</tr>
			<tr>
				<td>3.1</td>
				<td>3.2</td>
				<td>3.3</td>
				</tr>
		</table>
	</body>
</html>

10、跨行跨列表格

colspan 属性：设置跨列
rowspan 属性：设置跨行

<html>
	<body>
		<table width="500" height="500" cellspacing="0" border="1">
			<tr>
				<td colspan="2">1.1</td>
				<td>1.3</td>
				<td>1.4</td>
				<td>1.5</td>
			</tr>
			<tr>
				<td rowspan="2">2.1</td>
				<td>2.2</td>
				<td>2.3</td>
				<td>2.4</td>
				<td>2.5</td>
			</tr>
			<tr>
				<td>3.2</td>
				<td>3.3</td>
				<td>3.4</td>
				<td>3.5</td>
			</tr>
			<tr>
				<td>4.1</td>
				<td>4.2</td>
				<td>4.3</td>
				<td colspan="2" rowspan="2">4.4</td>
			</tr>
			<tr>
				<td>5.1</td>
				<td>5.2</td>
				<td>5.3</td>
				</tr>
			</table>
		</body>
</html>

11、iframe 框架标签

ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面

<html>
	<body> 
		我是一个单独的完整的页面
		<br/>
		<br/>
		<iframe src="3.标题标签.html" width="500" height="400" name="abc">
		</iframe> 
		<br/>
		<ul>
			<li>
				<a href="0-标签语法.html" target="abc">0-标签语法.html</a>
			</li> 
			<li>
				<a href="1.font 标签.html" target="abc">1.font 标签.html</a>
			</li> 
			<li>
				<a href="2.特殊字符.html" target="abc">2.特殊字符.html</a>
			</li>
		</ul>
	</body>
</html>

12、表单标签

表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.
form 标签就是表单
input type=text 是文件输入框，value 设置默认显示内容
input type=password 是密码输入框，value 设置默认显示内容
input type=radio 是单选框，name 属性可以对其进行分组，checked="checked"表示默认选中
input type=checkbox 是复选框，checked="checked"表示默认选中
input type=reset 是重置按钮，value 属性修改按钮上的文本
input type=submit 是提交按钮，value 属性修改按钮上的文本
input type=button 是按钮，value 属性修改按钮上的文本
input type=file 是文件上传域，input type=hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框，option 标签是下拉列表框中的选项，selected="selected"设置默认选中
textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值），rows 属性设置可以显示几行的高度，cols 属性设置每行可以显示几个字符宽度
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
GET 请求的特点是：
1、浏览器地址栏中的地址是：action 属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是：
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制

<html>
	<body>
		<form action="http://localhost:8080" method="post">
			<input type="hidden" name="action" value="login" />
			<h1 align="center">用户注册</h1>
			<table align="center">
				<tr>
					<td> 用户名称：</td>
					<td>
						<input type="text" name="username" value="默认值"/>
					</td>
				</tr>
				<tr>
					<td> 用户密码：</td>
					<td>
						<input type="password" name="password" value="abc"/
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="sex" value="boy"/>男 
						<input type="radio" name="sex" checked="checked" value="girl" />女 
					</td>
				</tr>
				<tr>
					<td> 兴趣爱好：</td>
					<td>
						<input name="hobby" type="checkbox" checked="checked" value="java"/>Java 
						<input name="hobby" type="checkbox" value="js"/>JavaScript 
						<input name="hobby" type="checkbox" value="cpp"/>C++ </td> </tr> <tr><td>国籍：
					</td>
					<td>
						<select name="country">
							<option value="none">--请选择国籍--</option>
							<option value="cn" selected="selected">中国</option>
							<option value="usa">美国</option>
							<option value="jp">日本</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>自我评价：</td>
					<td>
						<textarea name="desc" rows="10" cols="20">我才是默认值</textarea>
					</td>
				</tr>
				<tr>
					<td>
						<input type="reset" />
					</td>
					<td align="center">
						<input type="submit"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

13、其他标签

<html>
	<body> 	
		<div>div 标签 1</div>
		<div>div 默认独占一行</div>
		<span>span 标签 1</span>
		<span>span 标签 它的长度是封装数据的长度</span>
		<p>p 段落标签 1</p>
		<p>p 段落标签 默认会在段落的上方或下方各空出一行来</p>
	</body>
</html>