网页基础制作

已于 2022-04-03 20:38:02 修改
阅读量3.3k 收藏 17
点赞数 2
文章标签： 运维 服务器 html
于 2022-01-27 21:16:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lotus4569/article/details/122723438
版权

文章目录

本文内容为个人整理，如有错误和不足请移步原视频，视频链接在文章末尾

网页制作

准备工作

具体内容

HBuilderX简单使用

1.创建新项目
在这里插入图片描述
在这里插入图片描述
2.代码完成后
在这里插入图片描述
3.模板介绍
在这里插入图片描述

注意事项

超文本 写在<>里的文本
写代码时要有代码缩进
当一个标签出现在另一个标签内部时，使用tab键进行缩进

博客写作

以下标签字符均要在<>里输入
1.标签成对出现 h1 /h1
2.h1 标题标签 字体变大加粗
3.&nbsp； 代表一个空格，若想文字中间有空隙可连续输入
有1-6 数字越大标题越小
4.i 斜体
5.hr 单标签 分割线
6.p 段落标签 使输入的内容独立成一段
7.b 字体加粗
8.br 单标签 在一句话中想要再分成两段则在句前输入
在这里插入图片描述

新闻列表

1.titile 标签表示页面标题
2.插入图片
img src=“图片路径“

在这里插入图片描述

title 当鼠标放在图片上显示的文字
alt 当图片加载失败后显示的文字
在这里插入图片描述

3.无序列表
<u1>列表标签，在<u1></u1>中间写<li>
<ul type=”disc”> 实心圆
<ul type=”circle”> 空心圆
<ul type=”square”> 实心方块

4.有序列表
<o1>列表标签，在<u1></u1>中间写<li>
<ol type=”1”> 数字排序
<ol type=”a”> 小写字母排序
<ol type=”A”> 大写字母排序
<ol type=”i”> 小写罗马数字排序
<ol type=”Ⅰ”>大写罗马数字排序

5.超链接
<a href=”网址”>文字</a>在当前页面打开链接
在这里插入图片描述
<a href=”网址”target=“-blank”>文字</a> 在空白窗口打开新页面
在这里插入图片描述

在这里插入图片描述

图片的使用

图片默认底边对齐，从左到右排列，当一行空余不足存放一张图片则会自动换行。
width 调节宽度
px 像素单位
100% 表示充满整个窗口

图片的下载与切图

1.一般可右键，点击图片另存为
2.当右键，没出现图片另存为
按下键盘F12，打开浏览器的控制面板，切换到Elenments，可以看到该页面上所有代码
点击左上角选择按钮，选中图片，则该图片的代码也会被选中
但无img代码，在右侧会找到图片下载地址，点击右键，选择open in new tab
会在新页面打开该图片，点击右键会出现图片另存为
在这里插入图片描述

3.需要在一张图片里截取小图片
打开PS软件，长按切片按钮，选择切片工具，进行选取切片
可按alt+鼠标滚轮放大图片，截取细节
截取完成后按ctrl+alt+shift+s可快速保存截取图片，选上tng24，透明度
在切片选项处选择所有用户切片
在这里插入图片描述

补充命令

<del></del> 在文字上增加删除线
<sup></sup>将文字变为上标
<u></u>给文字加下划线
<enter></enter>文字居中

百度云盘制作

1.图片文字变为一个超链接
<a href=”超链接的网址”>
写好的图片与文字
</a>
2.在原有页面的基础上建立子文件
…/返回上一级目录
<a href=”…/超链接的网址”>
写好的图片与文字
</a>
在这里插入图片描述

表格制作

<table></table> 代表表格
<tr></tr> 代表行
<td></td> 表示单元格
<col> 代表一列 写在第一个<tr>的上一行，<col>的行数代表调整几列
border=”1px” 表格边框属性 写在table后面
cellspacing=“0“ 单元格间隙属性 写在table后面
align=“center“ 对齐方式 写在td后面，也可写在tr后面，调整整行
width 可调整表格宽度，写在td后面
在这里插入图片描述
在这里插入图片描述

简历制作（六行七列）

  1. 先按照需求制作简单的表格
  2. height=“40px” 行高，写在tr后面
  3. 合并单元格：可以理解为删除多余的单元格，只留一个，重新设置长宽
  4. colspan=‘7’ 合并行，表示整个单元格长度达7列，写在td后面
  5. rowspan=“4“ 合并列，表示整个单元格高度达4行，写在td后面
  6. align=“center“ 进行居中对齐

登录表单

  1. <form></form> 代表登录表单
  2. <input type=”text(文本) 、password(密码) 、button(按钮)、 radio(单选框) 、checkbox(复选框) 、submit(提交按钮) 、reset(重置) 、file（文本选择框）”> 表示输入，可使表单呈现文本框，密码等
  3. Action =后面跟网址，即表单的提交地址，写在form后面000000000000
  4. 表格标题 <td></td> 变为<th></th> 会使文字居中加粗显示
  5. <colgroup span=”6” width=”100px”> 同时设置前六列的宽度
  6. <colgroup span=”1” width=”200px”> 表示最后一列宽度单独设置

1.form必须有action属性，表示提交地址
2.所有需要提交的数据，input必须有name属性
3.input按钮的文字，使用value属性表示
4.input必须放在form标签内才能提交

表单补充

  1. post请求 提交数据，不需要服务器反馈，将数据以隐蔽的形式发给服务器，通过F12可以看到
  2. get请求 获取数据，会有服务器反馈
  3. get请求发送的数据都写在地址栏上，用户可见
  4. post请求发送的数据用户不可见
  5. get请求不能提交大量数据，但post可以，因此不要混用

认识CSS

CSS ：用来修饰网页样式的语法，也叫做重叠样式表
style 表示风格、样式 ，写在input里
style=“color:red” 字体变为红色
style="width：80px；height：30px"按钮的宽度高度
background-color：darkseagreen；按钮背景颜色
若有想要的颜色可用颜色拾取器来确定颜色编号写在：后

容器

span,一个容器标签，双标签，不具备任何特殊功能，仅当作容器来使用。用于包裹一段文本，便于给文本增加样式。
style=“background-color: gray;”写在p标签后，颜色会占一行
font -size 调节字体大小
div 一个通用容器标签，双标签，不具备任何特殊功能，仅当作容器来使用。可以包裹任何内容，也可以容器直接互相包裹。在容器为空时，默认宽度100%，高度为零 。
margin：auto； 容器居中
text-align: center; 让内部元素水平居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="color: #555; margin:auto; width:500px;">
		<p style="text-align: center;">
		<span style="background-color: gray; color:white; font-size:24px；">千锋简介</span>
		</p>
		<p>
		<b>北京千锋互联科技有限公司（简称千锋）</b>
		成立于2011年1月。公司总部位于北京，目前已在
		<span style="color:#41A863;">深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原</span>
		建立分公司。
		</p>
		<p>
		千锋旗下现有教育培训、人才服务、项目研发、创业孵化等业务。
		教育培训业务主要为大学生、企业提供技术培训服务；人才服务业务主要为企业提供优秀的互联网研发人才；
		项目研发业务主要为企业提供APP解决方案及APP项目研发；
		创业孵化业务为有创业梦想的学员设立，为其提供创业辅导及天使投资等服务。
		</p>
		<p>
		千锋秉承着
		<span style="color:#F40;">
			“用良心做教育”
		</span>
		的理念踏踏实实的做事，
		创办7年，现已成为业内口碑好、规模大、教学强的移动互联网研发培训机构。
		目前累计与国内
		超过8200多家
		IT相关企业建立人才输送合作，与
		<b>562所大学</b>
		建立实训就业合作，每年为中国IT企业输送上万名移动开发工程师。计划未来5年内实现年营收过10亿，为中国教育行业贡
		</p>
	</body>
</html>

布局

div id="banner"横幅
div id="navigation"导航器
div id="bottom"底部
在body后输入 style=“margin：0；” 可使图片充满边框
写在html后的命令可改变整个页面

<!DOCTYPE html>
<html style="background-color:#666">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="margin:0;">
		<div id="banner"></div>
		<img src="../002新闻列表/img/QQ图片20210201140703.jpg" width="100%" height="100px">
		<div id="navigation" style="height: 80px; line-height: 80px;text-align: center;background-color:white;">
			<a href="#"style="text-decoration:none;color:black;margin:0 15px;"></a>
	        <a href="#"style="text-decoration:none;color:black;margin:0 15px;">关于王力</a>
			<a href="#"style="text-decoration:none;color:black;margin:0 15px;">产品世界</a>
			<a href="#"style="text-decoration:none;color:black;margin:0 15px;">新闻中心</a>
			<a href="#"style="text-decoration:none;color:black;margin:0 15px;">网络事件</a>
			<a href="#"style="text-decoration:none;color:black;margin:0 15px;">联系我们</a>
			<a href="#"style="text-decoration:none;color:black;margin:0 15px;">关于我们</a>
			<a href="#"style="text-decoration:none;color:black;margin:0 15px;">网络新闻</a>	
			</div>
		<div id="bottom" style="height: 40px; line-height: 40x;text-align: center;font-size:14px;">
			版权所有：浙江王力门业有限公司&nbs支持派桑网络
		</div>
	</body>
</html>

当对标签里的style有大量的重复或修饰时，可用<style></style>标签
class 类别 如class=“nav” 在<style>里写作.nav

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		html{
			background-color:#666;
		}
		body{
			margin:0;
		}
		#navigation{
			height: 80px; line-height: 80px;text-align: center;background-color:white;
		}
		#bottom{
			height: 40px; line-height: 40x;text-align: center;font-size:14px;
		}
		.nav{
			text-decoration:none;color:black;margin:0 15px;
		}
		#banner img{
			width:100%;
		}
		</style>
	</head>
	<body>
		<div id="banner"></div>
		<img src="../002新闻列表/img/QQ图片20210201140703.jpg"  width="100%"height="100px">
		<div id="navigation">
			<a href="#" class="nav"></a>
	        <a href="#" class="nav">关于王力</a>
			<a href="#" class="nav">产品世界</a>
			<a href="#" class="nav">新闻中心</a>
			<a href="#" class="nav">网络事件</a>
			<a href="#" class="nav">联系我们</a>
			<a href="#" class="nav"">关于我们</a>
			<a href="#" class="nav">网络新闻</a>	
			</div>
		<div id="bottom">
			版权所有：浙江王力门业有限公司&nbs支持派桑网络
		</div>
	</body>
</html>

页面导航

  1. 类别名称 item
  2. text-decoration: none; 去除下划线
  3. href=“#” “#”是默认当前页面，可以把#换成想跳转的页面。
  4. <span>|</span> 分割线
  5. border 超链接增加边框 样式 solid实线 dashed粗虚线 dotted细虚线
  6. border-right 只增加右边框
  7. 优先级 行内样式大于内部样式
  8. padding：0 15px 边框拉长
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style >
			#navigation {
				text-align: center;
			}
			.item {
				text-decoration: none;
				color: black;
			}
		</style>
	</head>
	<body>
		<div id="navigation">
		<a href="#"class="item">首页</a>
		<span>|</span>
		<a href="#"class="item">办公家居</a>
		<span>|</span>
		<a href="#"class="item">数码科技</a>
		<span>|</span>
		<a href="#"class="item">母婴</a>
		<span>|</span>
		<a href="#"class="item">团购</a>
		<span>|</span>
		<a href="#"class="item last">秒杀活动</a>
		</div>
	</body>
</html>

选择器的权重

  1. 行内>id>类别>标签>通用选择器
    <style=“…”> > #box{…} > .con{…}> div{…} > *{…}
  2. 如果#box p .tt 表示box ID 下面的p标签的tt类别 权重为三个标签代表的权重相加
  3. 选择器选择范围越小越精确，优先级越高
    在这里插入图片描述

https://study.163.com/course/introduction/1006457017.htm?inLoc=ss_sslx_Web%E5%89%8D%E7%AB%AF%E6%95%99%E7%A8%8B-HTM

Lotus4569
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用html语言设计网页教程,HTML网页制作基础
weixin_36328260的博客
05-31 5767
一、HTML基础(1) HTML：超文本编辑语言hyper text markup language(编写网页)文本：用来描述数据，特别单调，只能输文字，不能变彩色，不能插入图片。超文本：丰富多彩的的展示文件(2)www 【w(world)w(wide)w(web)万维网，因特网】含义：建立在Internet上面的，全球的，交互的，多平台的，分布式的信息资源网络多平台的：操作系统 【window ...
利用HbuilderX制作简单网页： HTML5期末大作业——html5漫画风格个人主页
weixin__BJ050106的博客
08-10 3101
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
教你用HBuilderX免费搭建一个网站
最新发布
MoZhaoyun的博客
06-16 2555
如果你有vue的基础，那么HBuilderx工具将会是你更好的选择，他可以快速帮助你搭建网站，即使你只是一个人，利用DCloud你可以使用阿里云免费但受限的服务器资源，后续也可以花费资金升级服务器。而且不需要你学会复杂的数据库操作语句，是用官方提供的api就可以方便的对数据库进行操作，前后端对接也有提供的api方便传输数据，同时还可以帮你托管前端网页，即使你没有域名也可以进行发布。如果你对html/js/vue都不怎么了解，可以先去学习html、js、css等网页所需的基础语言。
Hbuilder创建项目，制作html网页第一天
m0_65230676的博客
06-16 981
/90度 0.1745329 = 10度。//宽500，高600。var text=new PIXI.Text("得分：0000");feiji.style.fontFamily="黑体";
利用HbuilderX制作简单网页
热门推荐
m0_67266042的博客
03-09 2万+
本次综合课程设计要求设计内容不限安卓App，小程序，h5界面等，实现两三功能。 鉴于Android的知识放得太久，且AndroidStudio已被删除，所以尝试下载HbuilderX（十几M大小，操作简单），自学半天设计一个简陋的网页，由于没学过前端，所以很一般。 工具： 项目文件及包含： 1. HTML是描述网页文档的标记语言(网页) HTML的全写是Hyper Text Markup Language 一门标记语言是由很多标记组成的. HTML标记用来描述HTML文档 每个HTML标签描述不同的文档内
HBuilderX 制作网页（大国工匠）
niu_zhou的博客
12-02 4934
html5 网页设计 大国工匠 css代码 浮动清除
HBuilderx制作网页（sony官网）
NLxxxxX的博客
01-26 5514
常用知识点： 1.图片字体编辑 1.web学什么？ HTML5、CSS3等 2.创建网页 步骤：安装插件：工具-插件安装-插件市场 基本结构 注释ctrl+/（注释） 声明文档类型-告诉浏览器基于html的哪个版本执行的 ctrl+n创建文件 html:5创建格式 css？ style风格样式
hbuilderx制作简单网页_简单粗暴，直接教你上手制作网页—前端开发入门
weixin_39518678的博客
11-29 9746
首先我要说学习前端网页制作其实很简单！今天我带着你踏入前端开发的大门，我不会给大家说一些难懂的概念上的东西，有些知识其实不必知道，学习之后再慢慢了解也是可以的。简单粗暴，直接让你上手就完事了！先大致了解一下HTML的构成简单的说HTML网页的构成基本可以理解为是由标签、样式和属性组成的标签：可以理解为是组成网页的框架或是盒子。样式：决定标签的外观(大小、宽高等等)属性：标签本身自带的一些样式或是功...
HTML网页基础制作教程
05-21
本"HTML网页基础制作教程"旨在帮助初学者掌握HTML的基本概念和使用技巧，以便构建自己的静态网页。 HTML由一系列元素组成，这些元素通过标签来定义。每个HTML元素都有开始标签和结束标签，例如`<p>`和`</p>`，它们...
网页制作基础教程
05-24
是一本较好的网页制作教材书,本书详尽地介绍了Dreamweaver 8.0的基本功能。
HbuilderX 打包网站教程.docx
07-23
当你做完一个网页想要让它打包成一个APP的时候，可以参考此文档。此教程是我在工作中经常使用的一种方法，并且实践过无数次。
网页制作教程（含实例，适合初学者）
07-16
适合初学者的HTML网页制作教程，简单明了易懂。
一个简单的HBuilder
03-12
利用HBuilder实现了一个简单的用户注册，登录，读取数据库中数据的功能(服务器和数据库需要自己搭建)。代码是企业实习安卓开发做的，做的一般般。我就是上传来玩一下。
网页制作基础教程Dreamweaver8.zip
06-20
网页制作基础教程主要涵盖使用Adobe Dreamweaver 8这一专业网页设计软件来创建、编辑和管理网站的内容。Dreamweaver 8是初学者入门网页设计的常见工具，它结合了直观的用户界面与强大的代码编辑功能，使得网页制作变...
网页制作基础语言-HTML.ppt
11-15
网页制作基础语言-HTML.ppt HTML（Hypertext Markup Language，超文本标记语言）是万维网的基础语言，用于描述网页的结构和内容。它是构成Web页面的标准语言，通过使用标记（tag）对文文件进行标识，以达到预期的...
Hbuilder中如何快速输入注释标签_编写第一个简单的网页，认识标签
weixin_39569747的博客
11-20 4008
Hbuilder与浏览器的配合使用 上一节我们了解并安装了Hbuilder 和chrome谷歌浏览器的安装。这一小节我们来通过编写一个简单的网页，来看一下Hbuilder和谷歌浏览器的使用方法及各种标签。我们打开Hbuilder，先来创建一个项目，项目也就是我们平时创建的文件夹。我们把它命名为HTMLCSS，这里选择了基本的HTML项目，也就是包含css样式文件夹、js代码javascript文件...
hbuilderx制作简单网页_制作一个简单的网页
weixin_39588104的博客
11-28 8068
HTML(HyperText Markup Language)是一种简单、通用的超文本标记语言，Web服务器返回给客户端的最常见的内容就是HMTL文档。可以用其制作包含图像、文字、声音等精彩内容在内的网页，它由浏览器解释并显示在用户浏览器的窗口中。HTML文档的基本结构如下所示：基本HTML页面从标记开始，到结束。在它们之间，就是头部分和主体部分。头部分用… 标记(Tags)界定，一般包含网页标题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值