HTML+CSS+JavaScript轻松学习

已于 2022-04-04 00:46:35 修改
阅读量99 收藏
点赞数
文章标签： html
于 2022-04-04 00:44:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52496877/article/details/123947471
版权

HTML部分讲义稿

html第1讲

<html>

<head>

<title>第一个网页</title>

</head>

<body>

<!-1-><font color=red>hello world</font>                       <!--使用<font color=red></font>来调整字体颜色-->

</br>

<!-2-><font size=7 color=blue>hello world1</font>               <!--使用<font size=7></font>来调整字体大小,但是size里面的取值是1—7-->

</br>

<!-3-><font style="font-size:150px" color=yellow>hello world2</font>   <!--使用CSS中<font style="font-size:40px"></font>将字体调整更大-->

</br>

<!-4-><p><font color=cyan>为字体更换颜色4</font></p>

<b> <font color="red">hhhhh</font></b>

<!-5->

</body>

</html>

html第2讲

Html的超链接：

例子：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<!--*****************html超链接案例***************-->

<!--*****************html超链接默认格式***************-->

<a href="http://www.sohu.com">超链接</a>           </br>               <!--超链接基本格式-->

<!--**target常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**-->

<a href="http://www.sohu.com"target= "-blank">在新窗口打开</a>     <!--超链接在新窗口下打开文件--></br>

<a href="http://www.sohu.com"target= "-self">在本页面打开</a>      <!--超链接在本页面打开文件--></br>

<a href="mailto:yanli457352797@hotmail.com">给自己写信</a>

</body>

</html>

Html图片元素（标记）：

<img src ="图片路径" width="宽度" height=”高度” ></img>  

案例：（网页上显示图片）

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题文档</title>

</head>

<body>

<!--*****************图片元素***************-->

<img src ="a.jpg" width="100" >                               <!--***********插入图片************-->  

<a href="http://www.sohu.com"><img src ="a.jpg" width="100" ></a> <!--***********图片链接************-->

<img src ="http://img.blog.163.com/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" >

<img src ="a.jpg" width="100" border="10" > </img>            <!--*******border表示为插入的图片加上边框********-->

</body>

</html>

Table表格：

<!--<table border=”边框宽度 “cellspacing”两个列行间的距离大小” cellpadding”各行列间的内容被填充" align="表格的位置" bgcolor="设置表格背景颜色"></table    <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***-->

案例：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题文档</title>

</head>

<body>

******************表格,为表格添加背景****************</br>

<!--<table border=”边框宽度 ”cellspacing”空隙大小” cellpadding”填充大小" align="表格的位置" bgcolor="设置表格背景颜色"></table>-->

<table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan">

<tr align="center"><td >1</td><td>2</td><td>3</td></tr>                          <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***-->

</table>

</body>

</html>

html第3讲

合并单元格：

colspan=跨行列数

roespan=跨列行数

<head>

  <title> 表格</title>

  ***********菜谱***********

  <table border=1 bordercolor=red cellspacing=0 align="center"  width=500px cellpadding="0" height=180>

  <tr align=center><td colspan=3>周一菜谱</td>></tr>

  <tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr>

  <tr align=center><td>豆腐</td>><td>白菜</td></tr>

  <tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr>

  <tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr>

 </head>

 <body>

 </body>

</html>

注释：<tr align=center></tr>在此处表示字体的对齐方式

html第4讲

无序列表（html常用标记/元素-ui/li）

格式:      Html列表——无序列表

<ul type=”属性值”>

<li>列表内容</li>

</ul>

<ul>的属性设定（常用）：

例如：<ul tyre=”square”>

Type=”squre”

设定符号款式，其值有三种，如下，默认为Typr=”disc”

Type=”disc”时的列项符号是实心圆点

Type=”circle”时的列项符号为空心圆

Type=”square”时的列项符号为空心正方形

************无序列表代码例子*********

<html>

<body>

<ul type="circle">

<li>1</li>

<li>1</li>

<li>1</li>

</ul>

</body>

</html>

Html列表——有序列表ol称顺序列表标记

<ol type=”属性值” start=”起始值”>

<li>列表内容</li>

</ol>的属性设定（常用）：

例如：<ol type=”i” start=”4”></ol>

type=”i”

设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字

************有序列表代码例子*********

<html>

<body>

<ol type="1">

<li>1</li>

<li>1</li>

<li>1</li>

</ol>

<ol type="1" start=”5”>

<li>1</li>

<li>1</li>

<li>1</li>

</ol>

</body>

</html>

Html框架标记（元素）frameset/frame

<Frameset frameborder=”边框大小” cols=”按照列的百分比,隔开”>rows=” 按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>

实例：

qq.html

<html>

<body bgcolor=blue>

歌词

</body>

</html>

ee.html

<html>

<body bgcolor=red>

费玉清

</body>

</html>

All.html

<html>

<frameset cols="20%,*" frameborder=100>

<frame src="qq.html" noresise name=”song” />

<frame src="ee.html" noresise name=”jun” / >

</frameset>

</html>

注释：all.html中不能带body标记

综合案例：

all.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>  

 </head>

<frameset rows="30%,*" border="0">

<frame src="top.html"noresize/>

<frameset cols="20%,*">

<frame src="left.html" border=0 noresize/>

<!--frame元素中有一个属性，相当于给该frame取名-->

<frame src="right1.html"name="right"/>

</frameset>

</frameset>

</html>

top.html

<html>

 <head>

  <title> New Document </title>

 </head>

 <body >

  <img src="logo1.jpg" ></img>

 </body>

</html>

Left.html

<html>

 <head>

  <title> New Document </title>

 </head>

 <body bgcolor=pink>

  <a href="right1.html"target="right">青花瓷1</a></br>

  <a href="right2.html"target="right">青花瓷2</a></br>

 </body>

</html>

Right1.html

<html>

 <head>

  <title> New Document </title>

 </head>

 <body bgcolor=blue>

  <p>right1.html</p>

 </body>

</html>

Right2.html

<html>

 <head>

  <title> New Document </title>

 </head>

 <body bgcolor=yellow>

  <p>right2.html</p>

 </body>

</html>

html第5讲

html表单form：

介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器

语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”>       

各种元素（输入框，下拉列表，文本域，密码框）

<input type=submit>

<input type=reset>

</form>

代码：

提交界面.html

<html>

 <head>

  <title> 登陆界面 </title>

 </head>

 <body>

 <h1>登陆界面</h1>

  <form action="ok.html" method="get" align=center>

  用户名：<input type="text" name="username"/></br>

  密  码：<input type="password" name="pwd"/></br>

  <input type="submit" value="登录"/>

  <input type="reset" value="重新填写"/>

  </form>

 </body>

</html>

Ok.html

<html>

 <head>

 </head>

 <body>

 ok

 </body>

</html>

表单中提供给用户的输入形式有：<input  type=* name=**>

*=text文本框,  password密码框,  checkbox复选框 ,  radio单选框,  image图片按钮,  hidden , submit提交按钮,  reset重置按钮

name是你给表单元素取的名子

**=Symbolic  Name for CGI script

Action:指定把请求交给那个界面

 其他：

<html>

 <head>

  <title> New Document </title>

 </head>

 <body>

 1****************复选框*******************</br>

  <form action="" method="post" >

 <input type="checkbox" name="1"/>苹果<p>

  <input type="checkbox" name="1"/>香蕉<p>

 <p ><font color=red>*****************单选框******************</font></p></br>

  <input type="radio" name="1"/>苹果<p>

  <input type="radio" name="1" checked/>香蕉<p>

2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br>

  <input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p>

<p ><font*****************图片按钮******************</font></p></br>

   <input type="image" name="submit" src="a.jpg" width=30  align="top"/>苹果<p>

   *****************下拉列表******************</br>

   <select name="like">

   <option valu= select>--请选择--</option>

   <option valu=网游 select>网游</option>

   <option valu=足球 select>足球</option>

   <option valu=游泳 select>游泳</option>

   </select></br>

*******文本区**<!--cols表示行，rows表示列-->*******</br>  

<textarea name="comment" rows="4" cols="25">

请输入文本</textarea>

   </select></br>

************请选择要上传的文件*************</br>

   <input type="file" name="myfile">请选择文件

</br>

************按钮*************</br>

<input type="button" value="点击一下吧"/>

   </input>

  </form>

 </body>

</html>

DIV+CSS、javascript课程请参考正式课件

282930
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页设计与制作教程（HTML+CSS+JavaScript）第2版+电子教案、素材文件、源代码
03-31
网页设计与制作教程（HTML+CSS+JavaScript）第2版+电子教案、素材文件、源代码 刘瑞新 张兵义主编 炫金呀！
Html_Css_JavaScript教程
03-01
博文链接：https://snowyvalley.iteye.com/blog/67285
HTML + CSS + JavaScript 学习整理 （一）
ahagc的博客
06-12 155
文章目录一. HTML二. CSS1. 隐藏浏览器滚动条2. 边框不占宽度和高度3. 背景图片不平铺4. 选择器三. JavaScript 一. HTML 二. CSS 1. 隐藏浏览器滚动条 ::-webkit-scrollbar { /* 滚动条整体部分 */ width: 0; margin-right: 2px; } ::-webkit-scrollbar-track-piece { /*内层轨道，滚动条中间部分 */ background-color: white; } ::-webk
HTML+CSS+JAVASCRIPT入门学习教程
面壁者LOGIC
10-15 1298
HTML 教程 HTML 参考手册 HTML5 教程 CSS 教程 JavaScript 教程 XML 教程 网站主机教程
HTML-CSS-js教程
qq_41103204的博客
02-10 632
双标签单标签html5的DOCTYPE声明用于定义文档的头部。文档的头部包含了各种属性和信息，包括文档的标题，在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者定义文档的主体，包含文档的所有内容，在页面中显示出来，用户可以直接看到的内容定义文档的标题，可以显示在浏览器的标签栏或状态栏上。标签是标签中唯一必须要求包含的东西，就是说head一定要写title，用来描述HTML网页文档的属性，关键词等。例如。
购物平台网页（HTML+CSS+JavaScript）
05-07
在构建一个购物平台网页的过程中，HTML、CSS和JavaScript这三种技术是不可或缺的基石。它们各自承担着不同的职责，共同打造了网页的结构、样式和交互性。以下将详细阐述这三个方面的知识点。 首先，HTML（HyperText...
基于html+css+JavaScript的个人博客.zip
04-08
在构建一个基于HTML、CSS和JavaScript的个人博客项目中，我们涵盖了网页开发的三个核心方面。HTML（HyperText Markup Language）负责定义页面的结构，CSS（Cascading Style Sheets）用于美化页面样式，而JavaScript...
html+css+js网页设计源代码.zip
05-31
总的来说，这个压缩包提供了一个完整的HTML5网页设计示例，包括了结构（HTML）、样式（CSS）和交互（JavaScript），是一个学习和参考的好资源。通过研究和理解这个项目，可以提升对网页开发的理解，特别是对于初学者...
html+css+javascript 实现小游戏 2048
10-15
《使用HTML+CSS+JavaScript实现2048小游戏详解》 在数字娱乐和教育领域，2048小游戏因其简洁的界面和上瘾的游戏机制，受到了广泛的欢迎。它是一款基于数字合成的智力游戏，玩家通过滑动屏幕使相同数字的方块合并，...
使用html+css+javascript实现聊天室的展示界面，并给出源码
最新发布
06-03
使用 HTML、CSS 和 JavaScript，我们可以轻松地实现一个聊天室的展示界面。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 实现一个简单的聊天室展示界面，并提供源码。 HTML 代码解析 在 HTML 代码中，我们首先...
Day01 html详解
weixin_30378311的博客
07-25 142
day01 html详解 1、html的简介 1.1 什么是html？ - HyperText Markup Language：超文本标记语言，网页语言 ** 超文本：超出文本的范畴，使用html可以轻松实现这样操作 ** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称> ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
全村的希望的博客
12-11 4556
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第11章  CSS简介   1、HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。   2、CSS的出现就是为了改造HTML单调的默认外观。   3、CSS引入方式有3种：外部样式表、内部样式表、行内样式表。   4、在实际开发中，一般都是使用外部样式表 第12章
html、css、javascript简单学习
m0_61454947的博客
04-11 982
html语言：负责网页上显示的内容 1、html语言是解释型语言，不是编译型。 浏览器是容错的 2、html页面中由一对标签组成：<html></html> <html> 称之为 开始标签 </html>称之为 结束标签 3、title 表示网页的标题 4、可以在meta标签中设置编码方式 5、<br/>表示换行 。br标签是一个单标签。 单标签：开始标签和结束标签是同一个，斜杠放在单词后面 6、p 表示段落标签 7、img 标签图片标签
html js css 简明教程,HTML+CSS+JavaScript网页制作简明教程
weixin_36486007的博客
06-08 713
HTML+CSS+JavaScript网页制作简明教程编辑锁定讨论上传视频《HTML+CSS+JavaScript网页制作简明教程》是2014年清华大学出版社出版的图书，作者是王爱华、王轶凤、吕凤顺。[1]书名HTML+CSS+JavaScript网页制作简明教程作者王爱华王轶凤吕凤顺ISBN9787302373803定价36元出版社清华大学出版社出版时间2014年装...
HTML+CSS+JS学习（持续更新中）
m0_46486963的博客
10-28 5342
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素，那么嵌套的元素就相当于一个超链接。在网页中HTML专门用来负责网页的结构，所以在使用HTML标签的时候，应该关注的是标签的语义，而不是他的样式，这里先介绍几个基本的于一标签，还有些常用的标签放在后面具体讲解。标签用来向页面中引入一个外部的音频文件。
HTML+CSS+JavaScript入门教程（万字）
lsl5713的博客
11-24 9730
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML（HyperText Markup Language）:超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言：由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如：使用展示图片W3C标准：网页主要由三部分组成HTMLCSSJavaScipt。
jsp请求重定向和请求转发实现简单登陆
qq_28979869的博客
10-23 1555
代码目录结构（只用到了四个Jsp页面） login.jsp(首页面，简单写了一下一个表单） &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Tran...
表格标签
花&败
01-27 1593
1.简介 现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。 2.创建表格 table、tr、td，他们是创建表格的基本标签，缺一不可 table用于定义一个表格标签。 tr标签 用于定义表格中的行，必须嵌套在 table标签中。 td 用于定义表格中的单元格，必须嵌套在<tr...
HTML+CSS网站开发入门指南
轻松学HTML+CSS网站开发 在本资源中，我们将探索HTML和CSS在网站开发中的应用。HTML是一种超文本链接语言，用于构建网页的结构和内容，而CSS是网页样式表，用于控制网页的外观和布局。通过学习HTML和CSS，我们可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值