web前段-Html学习总结

最新推荐文章于 2022-08-08 15:10:19 发布

hangshun-J

最新推荐文章于 2022-08-08 15:10:19 发布

阅读量301

点赞数

分类专栏： web前段学习文章标签： html web

本文链接：https://blog.csdn.net/JHSHUN/article/details/108409381

版权

web前段学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习 html 之前，我们首先了解 html 四个字母代表什么：
HTML: Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式
标记语言: 通过一组标签，来对内容进行描述 <关键字> , 是由浏览器来解释执行

1.网站文本信息

段落： <p>This is a paragraph</p>
换行： <br />
注释：
水平线：<hr />
标题：<h></h> : size范围：1~6
font 字体定义标签，常用属性：
- color: 颜色
- size : 改变字体大小范围:1~7
- face : 字体
加粗：<b></b>
斜体：<i></i>
加粗, 带语义：<strong></strong>
斜体, 带语义：<em></em>

2.网站图片信息

2.1 图片标签img

img标签常用属性

src：图片地址
width：宽度，其值可以是数字，也可以是百分比
height：高度，其值可以是数字，也可以是百分比
alt：提示。图片加载失败时的提示

2.2 路径问题

使用src写入图片路径时，我们会遇到图片在上级目录的情况，这是需要用 …/ 来写入地址

./  代表当前路径
../  代表上一级路径
../../  代表上上一级目录

例如：

<img src="./picture/2027302.jpg" width="550" />
<img src="../picture/2027302.jpg" width="550" />
<img src="../../picture/2027302.jpg" width="550" />

3.网站友情链接

在学习如何插入链接之前，我们必须要先学习列表标签

3.1 列表标签

无序列表
无序列表为ul，常用属性：type
type属性的可选项有：circle、disc、square
有序列表
有序列表为ol，常用属性：type、start
type属性的可选项有：1，a，A，i，I
start等于几就是从第几个序号开始，必须是数字。

列表项

<li>内容</li>

3.2 超链接标签a

<a href="https://www.baidu.com/" target="_blank">某度</a>

常用属性：
href：指定要跳转去的链接地址，需要加上http协议。（如果访问的是本网站的html文件，还可以写文件路径）
target：指定打开链接的方式
_self：默认打开方式，在当前窗口打开
_blank：从新的标签页打开链接

4.网站首页

4.1 表格标签table

table标签常用属性：
border: 指定边框，如：border=“2px”
width : 宽度
height : 高度
bgcolor : 背景颜色
align : 对齐方式
tr：行标签
td：列标签
table标签的属性，tr和td两个标签也可以使用
下面展示主要代码：

<body>
		<table border="2" width="500" height="100" bgcolor="aquamarine" align="center" >
			<tr bgcolor="antiquewhite" align="center">
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td bgcolor="blue" align="center">1</td>
				<td>1</td>
			</tr>
		</table>
</body>

运行展示：
在这里插入图片描述

4.2 表格的合并

colspan: 跨列合并（横着合并）
rowspan: 跨行合并（竖着合并）
为了防止表格结构错乱，要把被合并的格子删除。
colspan 和 rowspan 都是表格标签的属性，如：colspan=“2”，表示合并2列。

4.3 表格的嵌套

表格的嵌套可以通过在一对table标签中再添加一对table标签来实现
如果想要让嵌套进去的表格填满，可以设置width="100% "

5.网站注册页面

5.1 标签介绍

表单标签form（使用 <form> </form> 时，将整个表单包裹起来）的属性
- action : 直接提交的地址
- method :
  - get 方式：默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
  - post 方式：会将参数封装在请求体中, 没有这样的限制

下面介绍from标签中的几个常用元素input、textarea、select、button：

input 输入标签属性 :
- placeholder : 指定输入框中默认的提示信息
- name : 在表单提交的时候,当作参数的名称
- id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
- type: 指定输入项的类型
  - text : 文本框输入
  - password : 密码框输入
  - radio : 单选按钮
  - checkbox : 复选框
  - file : 上传文件（上传证件照等）
  - hidden : 隐藏域，主要是用来存放页面上一些ID信息
  - tel : 手机号
  - number : 只允许输入数字
  - date : 日期类型，会出现选择器。类似的还有month，week，month
  - datetime-local：允许用户选择日期和时间（无时区）。根据浏览器支持，日期选择器会出现输入字段中
  - 按钮：
    - submit : 提交按钮
    - button : 普通按钮
    - reset : 重置按钮
textarea : 生成文本域, 可以输入一段文本
- cols : 指定宽度
- rows : 指定高度
select : 下拉列表
- option : 定义待选择的选项
button：定义可点击的按钮。如：<button type=“button” οnclick=“alert(‘Hello World!’)”> Click Me! </button>

5.2 代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="../04-网站首页/网站首页.html" method="post" >
		
			<input type="hidden" value="sadfaldsfkjl@o3214813278" name="uid"/>
			<!--文本输入框-->
			用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />
			<!--密码框-->
			密码:   <input type="password" placeholder="请输入密码" /> <br />
			确认密码: <input type="password"  /> <br />
			邮箱:  <input type="text"  /> <br />
			手机号码: <input type="tel"  /> <br />
			靓照: <input type="file" /> <br />
			
			性别: <input type="radio" name="sex" />男
				 <input type="radio" name="sex"  />女  <br />
			爱好:
				<input type="checkbox" />跑步
				<input type="checkbox" />喝酒
				<input type="checkbox" />唱歌
				<input type="checkbox" />写代码
				<br />
			择偶要求:
				<textarea cols="40" rows="4"></textarea><br />
			籍贯	:
				<select>
					<option>--请选择--</option>
					<option>地球</option>
					<option>木星</option>
					<option>火星</option>
				</select>
				<br />
			出生日期: 
				<input type="datetime-local" name="bdaytime"/> <br />
			验证码: <input type="text"  /><br />
			<button type="button" onclick="alert('Hello World!')"> Click Me! </button><br />
			
			<input type="submit"  value="注册"/>
			<input type="button"  value="普通按钮"/>
			<input type="reset"  value="重置按钮"/>
		</form>
	</body>
</html>

运行结果：
在这里插入图片描述

6.网站后台页面

6.1 框架结构:

6.1.1 框架结构标签（frameset）：

框架结构标签（<frameset>）可以将窗口分割为框架
每个 frameset 定义了一系列行或列，即 frameset 标签可以嵌套使用
rows / columns 的值规定每行或每列占据屏幕的面积

注意: 使用 frameset 时必须将 body 标签删掉，否则页面会有问题。

6.1.2 框架标签（frame）：

frame 标签定义了放置在每个框架中的 HTML 文档。
常用属性:
src: 引入的html文件路径
name: 指定框架的名称

6.2 代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset rows="15%,*">
		<frame src="aaa.html" />
		<frameset cols="15%,*">
			<frame src="bbb.html"/>
			<frame src="ccc.html" name="rightFrame"/>
		</frameset>
	</frameset>
</html>

注意：
1.代码中的 aaa.html、bbb.html、ccc.html 文件由于比较简单，博主没有上传，需要读者自行编写
2.网页上生成的框架是可以拖动的，如果想禁止拖动，可以在 <frame> 标签中加入：noresize=“noresize”。

运行结果：
在这里插入图片描述