网页开发准备（三）

已于 2022-03-15 11:31:10 修改
阅读量1.2k 收藏
点赞数 1
文章标签： html javascript css
于 2022-03-15 09:50:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46834909/article/details/123455383
版权

 提高下代码的效率还可以使用其他插件

有用资源1：html菜鸟教程

有用资源2：具体可参考HTML 标签参考手册，

本文主要介绍如何与CSS、JS交互

目录

HTML标签内容

CSS书写方式1之外部样式：

CSS书写方式2之内页样式（style标签）：

CSS书写方式3之行内样式：

引入JS（JavaScript）

与src

HTML标签内容

<!DOCTYPEhtml>
<!--文档类型声明，最新版本甚至可以不声明-->

<head>

含义标签1用法
meta定义HTML元信息

<meta charset="UTF-8">
<!--字符编码--> 

含义标签2用法
link

CSS书写方式1之外部样式：

<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >

含义标签3用法
style

CSS书写方式2之内页样式（style标签）：

<style type="text/css">[...]</style>，此处突然发现了class的作用，它属于全局属性（用来配置所有元素共有的行为，（行为）可用在任何一个元素身上--可以理解为每个公民（元素）都有身份证，我们可以针对这个事实（行为）定义拥有身份证的都是公民）

<head>
    <style type="text/css">
    h1.intro {color:blue;}
    p.important {color:red;}
    </style>
</head>
    
<body>
    <h1 class="intro">Header 1</h1>
    <p>段1：我是谁，我都没关系还出现在这，哭了</p>
    <p class="important">段2：请注意这个重要的段落。:)</p>
 </body>

</head>

<body>

HTML和CSS

含义主要标签用法
标题（一级，二级，三级）h1,h2,h3
段落p 
<p>[...]</p>或[...]<p>
换行br 
[...]<br />或[...]<br>
容器（容纳其他标签）div
表格table,tr,td
列表ul,ol,li
图片img
表单input
链接a

CSS书写方式3之行内样式：

<h1 style="color:blue;text-align:center">This is a header</h1>

<body>
    <h1 style="color:blue;text-align:center">This is a header</h1>
    <form action="/example/html5/demo_form.asp" method="get">
        用户名：<input type="text" name="usr_name" />
        加密：<keygen name="security" />
        <input type="submit" />
        </form>
        <hr />
</body>


<hr />:分区线

含义标签4用法
nav

最常用的nav导航；article文章;section章节;header页眉;footer页脚;aside附注;

 <nav>
        <a href="/html/">HTML</a> |
        <a href="/css/">CSS</a> |
        <a href="/js/">JavaScript</a> |
        <a href="/jquery/">jQuery</a>
 </nav>

 

含义标签5用法
script定义客户端脚本，如JavaScript。使用src指向地址。

引入JS（JavaScript）

与src

这个src也是指向路径，和之前link引用、a链接引用有什么关系呢？

<script type="text/javascript" src="myscripts.js"></script>
<link type="text/css" href="theme.css" />

答：src的内容是引入，所指是页面必不可少的；href的内容是引用，所指是页面相关联内容。

</body>

彩色沙漏
关注
JavaScript开发环境准备
兰枫
07-01 8084
JavaScript开发环境准备 Nodejs Nodejs是服务器端运行JavaScript的开源、跨平台运行环境。 Nodejs原始作者瑞安·达尔（Ryan Dahl），于2009年发布，使用了V8引擎，并采用事件驱动、非阻塞、异步IO模型。 2010年，npm软件包管理器诞生，通过它，可以方便的发布、分享Nodejs的库和源代码。 Nodejs 4.0引入了ES6语言特性。 我们学习JS，就...
JSP动态网页开发技术
qq_55702063的博客
01-06 4664
一、学习目标‘ 1.JSP概述 2.JSP基本语法 3.JSP指令 4. JSP 隐式对象 二、重点知识 1.1.JSP概述：JSP是什么？ JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。 JSP是一种Java servlet，主要用于实现Java web应用程序的用户界面部分。网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP，它通过网页表单获取
前端秘籍，CSS垂直居中必学八式，一招一式尽显功力
weixin_34279184的博客
05-08 879
前言 设计网页的时候，除了CSS水平居中的需求外，还会经常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中一样都是前端设计师的基本功。 这篇教程将我以往用过的8种CSS实现垂直居中的方法总结出来，也方便日后再用到时回顾。 工具/原料 CSS3 方法/步骤 1.通过verticle-align:middle实现CSS垂直居中。 通过vertical-align:middle实现CSS垂直居...
HTTP请求出现405 not allowed的一种解决办法经验分享
热门推荐
bigdogdogkun的博客
10-15 5万+
在最近对接统一支付平台的过程中，相信很多产品，包括云空间都遇到了支付成功后回调支付成功页时，报405 method not allowed的情况。这是因为支付成功后，回调的请求方式是post，而大多数产品的支付成功页是一个静态页面，要知道Apache、IIS、Nginx等绝大多数web服务器，都不允许静态文件响应POST请求。 以nginx为例，当post请求静态页面时，会直接报405 curl -X POST http://127.0.0.1:8081/test.html <html&gt
HTML 样式实例 - 文本对齐
leechoy
03-05 364
<html> <body> <h1 style="text-align:center">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>
网页开发准备（一）
m0_46834909的博客
03-12 2165
不需要域名 前言 计算机系统只要遵守IP协议就可以与因特网互连互通。 IPV4:32位；IPV6:128位 全网-因特网 局域网（Local Area Network, LAN） 覆盖范围方圆几千米 代表-以太网：IEEE组织的IEEE 802.3标准制定了以太网的技术标准，它规定了包括物理层的连线、电子信号和介质访问层协议的内容。（取代了其他局域网技术如令牌环、FDDI和ARCNET。） 实现：路由器（也可以叫基站，带天线） WiFi技术（Wierless Fidelity, 无线保真
go开发网页后端准备工作
m0_46673598的博客
08-10 2518
go一般用来做web的后端开发，前后端分离的web开发模式越来越多，这个模式需要一个http api服务器，在构建api时，通常会采用一种叫 REST 风格的方式来构建。项目实现了REST 风格+JSON构建的 API 服务器，这是go api开发的常用组合，能满足大多数需求场景。api构建的过程：准备、设计、开发、测试（可选）、部署。api就是一个接口，为前端提供一些功能（增删改查）由来：Go语言亦叫Golang语言，是由谷歌Goggle公司推出。...
微信公众号网页分享功能开发
weixin_41049850的博客
07-13 1万+
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题，和分享链接的描述及分享出去的图像，例如下面的分享出去的链接：                      上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的视觉效果。      微信JS-SDK Demo :这个是微信网页分享出去的标题。     微信JS-SDK,帮助第三方为用户提供更优质的移动web服务：这个...
web网页开发-前端
qq_43369406的博客
04-02 3594
web网页前端开发
网页开发小图标大全
10-01
"网页开发小图标大全"这个资源集就是一个专门为网页开发者准备的图标宝库，它包含了各种类型、风格和用途的小图标，满足网页设计的多元化需求。 首先，图标设计的基本原则是简洁明了。优秀的图标应该能够一眼就让人...
vue预习—开发环境准备
01-08
Visual Studio Code安装及使用 下载地址 ...使用指南 代码提示 ...若要支持网页调试，需安装Debugger for Chrome，如下是基本配置方式 { linkid=830387 version: 0.2.0, configurations: [ { name:
Python Web前端开发HTML+CSS视频教程（三）
06-13
HTML5是现代网页开发的标准，它在HTML4的基础上进行了大量改进和扩展。HTML5引入了许多新特性，如语义化标签（如、、等），离线存储（离线应用的支持）、拖放功能、媒体元素（和）、 canvas画布、svg矢量图等。这些...
企业微信网页应用开发 - 开发环境搭建
wangdong的博客
09-15 4490
微信生态下的小程序和公众号开发已经比较成熟，网上攻略很多，微信开发者工具的支持程度也很完备。但对于企业微信的应用开发，能搜到的信息要少得多。除了官方文档，网上资料大部分是接口调用问题相关的，当然也有部分提到了企业微信应用的开发调试问题。 其实在开始网页应用开发前，我先摸索过几天企业微信小程序的开发。应该是在去年，微信开发者工具IDE中提供了“企业微信小程序插件”，基本上能够在模拟器中调试大部分的接口，算是比较方便。但小部分跟场景相关的还是不行，必须真机调试。这里要补充几句，企业微信和个人微信对于应用的使用
HTML面试题
weixin_62668406的博客
11-14 578
src用于指定要加载的资源路径，常出现于标签由name（指定元数据的名称）和content（提供与name对应的数据）定义，用于描述网页。href用于指定的目标地址和在文档头部使用引入外部样式表时，用href制定样式表的地址。defer适用于需要在HTML完全解析后才运行的JS，尤其是依赖于DOM的JS，适用于包含多个JS的页面。5.
使用Markmap从链接生成脑图并下载为交互式HTML文件
Winfredzhang的博客
11-15 582
在这篇博客中，我们将探讨如何从指定链接中提取内容，生成Markdown格式的脑图，然后使用Markmap将其可视化，并最终下载为交互式HTML文件。通过以上步骤，我们可以轻松从链接中提取内容，生成Markdown格式的脑图，并使用Markmap进行可视化，最终下载为交互式HTML文件。接下来，我们使用Markmap将Markdown格式的脑图可视化。打开链接，使用浏览器的开发者工具（通常按F12）查看网页的结构，并定位文章的主要部分。根据分析的网页内容，我们生成一个Markdown格式的脑图结构。
HTML之图片和超链接的学习记录
qq_74474809的博客
11-12 591
将位图放大后，图片会失真；在实际开发中，最常见位图的图片格式有三种（可以从图片后缀名看出来）​：.jpg（或.jpeg）​、.png和.gif。.jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。alt属性用于描述图片，这个描述文字是给搜索引擎看的，并且当图片无法显示时，页面会显示alt中的文字。title属性也用于描述图片，不过这个描述文字是给用户看的，并且当鼠标指针移到图片上时，会显示title中的文字。所谓的图片路径，指的就是图片地址，这两个叫法是一样的意思。
CSS3_过渡（八）
。
11-15 393
介绍CSS3过渡的属性及用法。
网页作业9
最新发布
小派蒙的博客
11-15 433
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>服务中心</title> <style> * { mar
七日速成：ASP动态网页开发指南
本文是一篇针对初学者的ASP动态网页开发教程，作者以七日速成的方式带领读者快速入门。ASP（Active Server Pages）是一种早期的服务器端脚本语言，用于创建动态网页，特别适合于Windows平台。文章旨在帮助那些对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值