HTML5自学笔记上
2024-05-11 08:10:16
资料链接如下：
课堂案例展示
html5速查宝典
css3速查宝典
第一个html程序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第一个程序</title>
</head>
<body><h1>Hello world</h1><p>I love studying</p>
</body>
</html>
插入图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第一个程序</title>
</head>
<body>
<h1>Hello world</h1>
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
<p1>I love studying</p1>
</body>
</html>
网页中加入超链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第一个程序</title>
</head>
<body>
<h1>Hello world</h1>
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
<a href="http://bbs.fishc.com">学习中遇到不会的问题请点击</a>
<p1>I love studying</p1>
</body>
</html>
在新页面打开链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第一个程序</title>
</head>
<body>
<h1>Hello world</h1>
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
<a href="http://bbs.fishc.com"target="_blank">学习中遇到不会的问题请点击</a>
<p1>I love studying</p1>
</body>
</html>
meta的常用方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 自适应屏幕大小设置文字的排版--><meta name="keywords" content="富强 民主 文明 和谐">
<!-- 搜索的关键词--><meta name="description" content="自由 平等 公正 法制">
<!-- 网页的简介描述--><meta name="author" content="zyj">
<!-- 网页的作者--><meta http-equiv="refresh" content="5; http://baidu.com">
<!-- 实现网页的自动跳转，5秒后自动跳转到http://daidu.com网页--><title>第一个程序</title>
</head>
<body>
<h1>Hello world</h1>
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
<a href="http://bbs.fishc.com"target="_blank">学习中遇到不会的问题请点击</a>
<!--加入target="_blank"之后会使网页在新页面打开-->
<p1>I love studying</p1>
</body>
</html>
style方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>海贼王，让梦想启航</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="keywords" content="励志"><meta name="description" content="希望自己2021年乘风破浪，一切顺利吧"><meta name="author" content="zyj"><style>body{background-image: url("resources/background.png")}h1{text-align: center;/*居中*/color: white;}h2{margin-left: 60%;/*设置左外边距*/color: white;}p{text-indent: 32px;/*缩进为32个像素*/font-size: 16px;/*设置文字大小*/line-height: 32px;/*设置行高*/color: white;}img{position: absolute;/*绝对路径*/left: 50%;/*位于剧左边50%*/margin-left: -181px;}</style><style media="print">h1{color: black;}h2{color: black;}p{color: black;}</style>
<!-- 给打印机设置专门的网页打印格式--><style media="screen and (min-width:512px) and (max-width:1024px)">body{background-imge:url("resources/background.png");}</style>
<!-- 为网页的大小设置范围-->
</head>
<body>
<h1>Hello world</h1>
<h2>fighting</h2>
<p1>I love studying</p1>
<a href="http://bbs.fishc.com"target="_blank">学习中遇到不会的问题请点击</a>
<!--加入target="_blank"之后会使网页在新页面打开-->
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
</body>
</html>
link链接和base基址的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>海贼王，让梦想启航</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="keywords" content="励志"><meta name="description" content="希望自己2021年乘风破浪，一切顺利吧"><meta name="author" content="zyj"><link rel="stylesheet" type="text/css" href="style.css">
<!-- 链接style.css的布局--><link rel="stylesheet" type="text/css" media="print" href="print.css">
<!-- 链接print.css的布局--><link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen 512 to 1024.css">
<!-- 链接screen 512 to 1024.css的布局--><link rel="icon" type="image/x-icon" href="resources/ico.ico">
<!-- 设置网页的标志--><base href="http://demo.fishc.com/html5/lesson4/" target="_blank">
<!-- 设置基准路径-->
</head>
<body>
<h1>Hello world</h1>
<h2>fighting</h2>
<p1>I love studying</p1>
<br /><a href="test1">第一个例子</a>
<!--访问http://demo.fishc.com/html5/lesson4/test1-->
<br /><a href="test2">第二个例子</a>
<!--访问http://demo.fishc.com/html5/lesson4/test2-->
<br /><a href="test3">第三个例子</a>
<!--http://demo.fishc.com/html5/lesson4/test3-->
<br /><img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
</body>
</html>
style.css
body
{background-image: url("resources/background.png")
}
h1{text-align: center;/*居中*/color: white;
}
h2{margin-left: 60%;/*设置左外边距*/color: white;
}
p{text-indent: 32px;/*缩进为32个像素*/font-size: 16px;/*设置文字大小*/line-height: 32px;/*设置行高*/color: white;
}
img{position: absolute;/*绝对路径*/left: 50%;/*位于剧左边50%*/margin-left: -181px;
}
内嵌式脚本（嵌入JavaScript）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内嵌式脚本</title><script type="text/javascript" src="hi.js"></script>
</head>
<body>
<p>下边</p>
</body>
</html>
document.write("上边")
用JavaScript代码替换html中的文本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内嵌式脚本</title><script type="text/javascript" src="hi.js" defer>// 调用hi.js中的JavaScript代码，defer延迟等html执行结束执行</script><noscript><p>都什么年代了，没有JavaScript</p>>//不支持JavaScript执行代码</noscript>>
</head>
<body>
<p>我是谁？</p>
<p>我从哪里来？</p>
<p>我要到哪里去？</p>
</body>
</html>
var x = document.getElementsByTagName("p");for (var i=0;i<x.length;i++)
{x[i].innerText = "到此一游";
}
HTML5自学笔记上相关推荐
- C语言入门 —— 非科班大一学生的C语言自学笔记
初入前端的北京某211大一非科班生(没错上学期还是日语生)的C语言自学笔记 本文约8k字,将介绍:编程基础 数据类型 表达式 语句与控制流 函数 数组,指针 结构体等会随着学习进度推进持续更新~ 学习 ...
- 怎么用vc采集ni卡数据_SystemLink自学笔记（6）：SystemLink架构和数据服务
1. SystemLink架构和数据服务 1.1. 架构和特点 现在在对SystemLink的功能有了一个大概的了解后,可以进一步从它的整体架构学习这门新技术了.NI官网给出了白皮书,原文是英文资料, ...
- JAVA自学笔记22
JAVA自学笔记22 1.操作基本数据类型的流 DataInputStream DataOutputStream 数据输出流允许应用程序以适当方式将基本的Java数据类型写入输出流中.然后,应用程序可 ...
- 深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记
文章目录 弹性盒布局 弹性盒布局概述 弹性盒布局属性 display flex-flow justify-content align-items order flex align-self 总结 弹性 ...
- PostCSS自学笔记（二）【番外篇二】
图解PostCSS的插件执行顺序 文章其实是一系列的早就写完了. 才发现忘了发在SegmentFault上面, 最早发布于https://gitee.com/janking/Inf... 这次我继续研 ...
- 合同相似可逆等价矩阵的关系及性质_线性代数预习自学笔记-11：等价性与相似性...
上一篇:线性代数预习自学笔记-10:线性变换 一.相似矩阵 根据矩阵表示定理,我们知道任意向量空间上的任意线性变换都可以用一个相应的矩阵表示:但一个棘手的问题是,在应用这个定理时,我们不可避免地需要先 ...
- HTML5 学习笔记
HTML5 学习笔记 前言 该学习笔记的相关学习视频:[狂神说Java]HTML5完整教学通俗易懂 目前笔记只有简单的例子和框架,将来在实践中会进一步学习和补充内容 目录 HTML5 学习笔记 前言 ...
- JAVA自学笔记25
JAVA自学笔记25 1.GUI 1)图形用户接口,以图形的方式,来显示计算机操作的界面,更方便更直观 2)CLI 命令行用户接口,就是常见的Dos,操作不直观 3) 类Dimension 类内封装单 ...
- JAVA自学笔记23
JAVA自学笔记23 1.多线程 1)引入: 2)进程 是正在运行的程序.是系统进行资源分配和调用的独立单位.每一个进程都有它自己的内存空间和系统资源. 多进程: 单进程的计算机只能做一件事情,而现在 ...
最新文章
- 九九乘法表口诀python-Python用for循环实现九九乘法表
- Linux内核的各个组成部分,Linux 内核的组成部分
- LeetCode26. Remove Duplicates from Sorted Array
- Oracle查询慢的原因总结
- Java技术：SpringBoot实现邮件发送功能
- 四元数左乘右乘_四元数、欧拉角学习笔记个人理解
- XGBoost-工程实现与优缺点（中）
- Spring事务那些事儿
- pythonmysqlconnector_python操作mysql——mysql.connector
- Jcreator Pro 使用技巧
- 彻底解决--“未能加载文件或程序集“xxx.dll”或它的某一个依赖项”
- Unity DOTween插件和iTween插件使用(笔记)
- 网络层HTPPS和HTTP的概念与区别
- 在家登录学校图书馆知网
- win10安装虚拟机
- 解决Android Studio配置JPush极光推送错误方案
- 软文营销登顶销售奇迹的4U定律你知道吗？
- 哈工大软件构造自我复习总结Part1
- 【聆思CSK6视觉AI开发套件试用】从部署工程师和测试工程师角度体验CSK6
- Linux - 内存管理