javaweb之前端三剑客

最新推荐文章于 2022-11-01 11:00:00 发布

宋丹尼尔

最新推荐文章于 2022-11-01 11:00:00 发布

阅读量267

点赞数 4

本文链接：https://blog.csdn.net/ilikeu777/article/details/115253764

版权

学习记录专栏收录该内容

31 篇文章 0 订阅

订阅专栏

前端三剑客：HTML，CSS，JavaScript

HTML:构建一个pc和移动端展示的页面（搭骨架/骨）。
CSS：使样式，显示更加丰富（装修/皮）。
JavaScript：调用后端窗口（API）（魂）。

HTML：运行需要浏览器

HTML的一些元素类型：

块级元素：<p>我是内容</p>   //用于分割下一块的内容，间隙较大。

行级元素：<span>我是内容</span> //没有具体的意义，为css修饰做准备

空元素：<img src="图片地址">  //这是输入图片插件时所用到的元素，可与css一起修饰

input：主要有文本框，密码框，按钮 
eg：<input type="botton" value="提交"> //这是一个按钮框，value是给这个按钮一个名称

超链接：<a target="_black" herf="https://www.baidu.com">百度</a> //这里解释一下target="_black"这个参数是指使用新页面打开当前连接，以防以主页面冲突。herf="https://www.baidu.com"指的是具体的链接地址。

有序列表：<ol> // order list
			<li> list </li>
		</ol>

无序列表：<ul> // order list
			<li> list </li>
		</ul>

换行的三种方式：
<br>  //这是直接的换行符，间隙较小
<p></p> //刚才已经说过这是块级元素，间隙较大，可以起到换行的作用
<div></div> // 这个符号是一种开辟一个空间的符号，可以与其他元素嵌套使用。也可以起到换行的作用

HTML组成

<html>
<head>  // 这是标题元素
<meta charset="utf-8">//这个参数是将来为项目部署所准备的环境，建议先写上
<title>我是标题</title> //这是网页的标题
</head>
<body> //这是内容部分
<h1>正文</h1>//这是表示标题的大小  可以根据自己的需求调节大小
</body>
</html>

CSS

引入css：

<link rel="styleSheet" type="text/css" href="css文件名.css">

样式的定义方式：
行级样式：

<img style = "width:300px;height:200px;" src="car,jpg">

全级样式：

<style>
.myimgsty{
width:300px;
height:200px;
}
</style>

<img class="myimgsty" src="car.jpg">

给某类控件定义统一的样式：

div{
background-color:red;
}

css文本居中：

<div style="tset-align":center;">

JavaScript

语言特点是弱化数据类型。
传参的时候不用设置类型数据。

<script>
js方法实现区，在<head>中写
</script>

使用js输出HTML代码：

document.write("<h1>我是js输出的内容</h1>");

js for循环：

for(var i = 1;i<7;i++){
document.write("<h"+i+"我是H“+i+"</h"+i+">");
}

页面唯一：

<h1> 密码：<input id="input1" name="input2" type="password"></h>

js获取页面信息：

var input_userName = document.getElementById("input1");
console.log("用户填写的用户名是：“+input1+input1.value");

默认展示网页：

<iframe id="ifr" style="width:100px;height:500px;" src="https://www.baidu.com"></iframe>

方法内选用网页：

document.getElementById("ifr").setAttribute("src",url);

好了今天先分享到这里，明天我会上传一个我的计算器网页为大家详细讲解，谢谢！

宋丹尼尔

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
6
评论
javaweb之前端三剑客

前端三剑客：HTML，CSS，JavaScriptHTML:构建一个pc和移动端展示的页面（搭骨架/骨）。CSS：使样式，显示更加丰富（装修/皮）。JavaScript：调用后端窗口（API）（魂）。HTML：运行需要浏览器HTML的一些元素类型：块级元素：<p>我是内容</p> //用于分割下一块的内容，间隙较大。行级元素：<span>我是内容</span> //没有具体的意义，为css修饰做准备空元素：<img src="图片
复制链接

扫一扫