如果您想了解【代码笔记】Web-Javascript-JavaScript简介的相关知识，那么本文是一篇不可错过的文章，我们将对webjavascript进行全面详尽的解释，并且为您提供关于web@前
如果您想了解【代码笔记】Web-Javascript-JavaScript简介的相关知识，那么本文是一篇不可错过的文章，我们将对web javascript进行全面详尽的解释，并且为您提供关于web@前端--html,css,javascript简介、第一个页面(常用标签简介)、【代码笔记】Web - 利用 Dreamweaver 实现 form、【代码笔记】Web--使用Chrome来查看网页源代码、【代码笔记】Web-CSS-CSS background背景的有价值的信息。
本文目录一览：- 【代码笔记】Web-Javascript-JavaScript简介（web javascript）
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
- 【代码笔记】Web - 利用 Dreamweaver 实现 form
- 【代码笔记】Web--使用Chrome来查看网页源代码
- 【代码笔记】Web-CSS-CSS background背景
【代码笔记】Web-Javascript-JavaScript简介（web javascript）
一，效果图。
二，代码。
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>javascript 简介</title> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> </head> <body> <!--第一个javascript程序--> <h1>我的第一个javascript程序</h1> <p id="demo">这是一个段落</p> <button type="button" onclick="displayDate()">显示日期</button> <!--JavaScript：直接写入 HTML 输出流--> <script> document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落</p>"); </script> <!--对事件的反应--> <button type="button" onclick="alert(''欢迎!'')">点我!</button> <!--改变 HTML 内容--> <p id="demo"> JavaScript 能改变 HTML 元素的内容。 </p> <script> function myFunction() { x = document.getElementById("demo"); // 找到元素 x.innerHTML = "Hello JavaScript!"; // 改变内容 } </script> <button type="button" onclick="myFunction()">点击这里</button> <!--改变 HTML 图像--> <script> function changeImage() { element = document.getElementById(''myimage'') if (element.src.match("bulbon")) { element.src = "/images/pic_bulboff.gif"; } else { element.src = "/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> <p>点击灯泡就可以打开或关闭这盏灯</p> <!--改变 HTML 样式--> <h1>我的第一段Javascript</h1> <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p> <input id="demo" type="text"> <script type="text/javascript"> function myFunction() { var x = document.getElementById("demo").value; if (x == "" || isNaN(x)) { alert("不是数字"); }; } </script> <button type="button" onclick="myFunction()">点here</button> </body> </html>
参考资料：《菜鸟教程》
web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1、什么是标签
#1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<head>`、`<body>`都是标签，
#2. HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，开始标签和结束标签之间的就是标签的内容。
#3、有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/>
#1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<head>`、`<body>`都是标签，
#2. HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，开始标签和结束标签之间的就是标签的内容。
#3、有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/>
2、固定的文档结构组织（！Tab）
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
3、固定的文档结构组织--各部分解释
#1、<!DOCTYPE HTML>是 文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
#2、<html></html> 称为 根标签，所有的网页标签都在<html></html>中。
#3、<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的 头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍， <head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
#4、在<body>和</body> 标签之间的内容是网页的主要内容，最终会在浏览器中显示出来。
#1、<!DOCTYPE HTML>是 文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
#2、<html></html> 称为 根标签，所有的网页标签都在<html></html>中。
#3、<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的 头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍， <head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
#4、在<body>和</body> 标签之间的内容是网页的主要内容，最终会在浏览器中显示出来。
4、web前端组成(解耦和)
html:标签(<abs></abs>), 指令（<!...>
）
, 实体(字符实体原生--显示转义)
css:选择器:由标签/类/id单独或组合出现作用域:{}内部区域样式块:满足css链接语法的各种样式
javascript(LiveScript -> JavaScript):BOM:js操作浏览器DOM:js操作页面文档ES:js语法(ECAMScript)
<!doctype html>
<html>
<head>
<meta charset=''utf-8''>
<title>first</title>
</head>
<body>
</body>
</html>
<html>
<head>
<meta charset=''utf-8''>
<title>first</title>
</head>
<body>
</body>
</html>
一、 head内常用标签
1、meta相关
1、meta相关
<meta name="Description" content="具体描述。。。">
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
#移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
#3秒后跳转
<meta http-equiv="refresh" content="3,url=http://www.baidu.com">
#三秒刷新
<meta http-equiv="refresh" content="3">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="gbk">
2、非meta标签
<title>百度一下，你就知道</title>
<link rel="icon" href="https://www.baidu.com/favicon.ico">
<!-- logo图片 -->
<!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> -->
<link rel="shortcut icon" type="image/x-icon" href="icon.png">
#定义内部样式
<style></style>
#引入外部样式文件
<link rel="stylesheet" href="mystyle.css">
#定义JavaScript代码或引入JavaScript文件
<script src="hello.js"></script>
2、非meta标签
<title>百度一下，你就知道</title>
<link rel="icon" href="https://www.baidu.com/favicon.ico">
<!-- logo图片 -->
<!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> -->
<link rel="shortcut icon" type="image/x-icon" href="icon.png">
#定义内部样式
<style></style>
#引入外部样式文件
<link rel="stylesheet" href="mystyle.css">
#定义JavaScript代码或引入JavaScript文件
<script src="hello.js"></script>
二、老版本的
#1、<br> 换行
#2、<hr> 分割线
#3、<font> 修改文字大小，颜色
<font color="red" size="10px">我是哈哈哈</font>
#4、<b> 加粗 <strong>
#5、<u> 下划线 <ins>
#6、<i> 倾斜 <em>
#7、<s> 删除线 <del>
#1、<br> 换行
#2、<hr> 分割线
#3、<font> 修改文字大小，颜色
<font color="red" size="10px">我是哈哈哈</font>
#4、<b> 加粗 <strong>
#5、<u> 下划线 <ins>
#6、<i> 倾斜 <em>
#7、<s> 删除线 <del>
三、h系列标签(只有h1:出于SEO考虑)
h系列标签从h1-h6共6个，h1用作主标题（代表最重要的），其实是h2。。。
h系列标签从h1-h6共6个，h1用作主标题（代表最重要的），其实是h2。。。
四、p标签
<p>论颜值，鹤立鸡群</p> <pre></pre>
<p>论颜值，鹤立鸡群</p> <pre></pre>
五、img标签
#1、用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
#2、注意
2.1 src:网络地址/本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
2.2 图片的格式可以是png、jpg和gif
2.3 默认的宽高显示,只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形
#1、用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
#2、注意
2.1 src:网络地址/本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
2.2 图片的格式可以是png、jpg和gif
2.3 默认的宽高显示,只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形
六、a标签
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
#2、注意：
2.1 a标签不仅可以标记文字，也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>
2.2 a标签必须有href属性，href的值必须是http://或https://开头
2.3 a标签还可以跳转到自己的页面
<a href="a/b/c/aaa.html">锤你胸口</a>
2.4 target="_blank"代表在新页面中打开，_self。
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
<base target="_blank">
如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置
2.5 title="鼠标悬浮显示的内容"
2.1 a标签不仅可以标记文字，也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>
2.2 a标签必须有href属性，href的值必须是http://或https://开头
2.3 a标签还可以跳转到自己的页面
<a href="a/b/c/aaa.html">锤你胸口</a>
2.4 target="_blank"代表在新页面中打开，_self。
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
<base target="_blank">
如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置
2.5 title="鼠标悬浮显示的内容"
假链接
#1、什么是假链接？
就是点击之后不会跳转的链接，我们称之为假链接
#2、假链接存在的意义：
在企业开发前期，其他界面都还没有写出来，
那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替
#3、假链接的定义格式
1、href="#" :会自动回到网页的顶部
2、href="javascript:" ：不会返回顶部
页面内锚点
#1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，
这样a标签才能在当前界面中找到需要跳转到的目标位置
#2、如何为html中的标签绑定一个独一无二的身份证号码呢？
在html中，每一个标签都有一个名称叫做id的属性
这个属性就是用来给标签指定一个独一无二的身份证号码的
#3、所以要想实现通过a标签跳转到指定的位置，分为两步
3.1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
#4、a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置
#1、什么是假链接？
就是点击之后不会跳转的链接，我们称之为假链接
#2、假链接存在的意义：
在企业开发前期，其他界面都还没有写出来，
那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替
#3、假链接的定义格式
1、href="#" :会自动回到网页的顶部
2、href="javascript:" ：不会返回顶部
页面内锚点
#1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，
这样a标签才能在当前界面中找到需要跳转到的目标位置
#2、如何为html中的标签绑定一个独一无二的身份证号码呢？
在html中，每一个标签都有一个名称叫做id的属性
这个属性就是用来给标签指定一个独一无二的身份证号码的
#3、所以要想实现通过a标签跳转到指定的位置，分为两步
3.1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
#4、a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置
【代码笔记】Web - 利用 Dreamweaver 实现 form
一，打开 Dreamweaver---->File---New----> 如下图所示。选择 HTML，点击 OK。
二，会出现如下图所示界面。把光标放到 Body 处。
三，将上面的栏切换到 Design. 如下图所示。
四，Insert--->Form--->Text. 如下图所示。
五，将 Text Field 修改成 “请输入用户名”，如下图所示。
六，切换到 Split 标签，代码如下图所示。
七，将 text 放在 <form></form > 中。因为 text 是表单元素。
参考资料：《菜鸟教程》
【代码笔记】Web--使用Chrome来查看网页源代码
一，用Chrome打开百度页面，如图所示。
二，鼠标右键--->显示网页源代码--->如图所示。
三，鼠标右键--->检查---->如图所示。此时可以通过Device来看不同设备下页面的显示情况。
参考资料：《菜鸟教程》
【代码笔记】Web-CSS-CSS background背景
一，效果图。
二，代码。
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>CSS backgrounds</title> <style> h1 { background-color: #6495ed; } p { background-color: #e0ffff; } div { background-color: #b0c4de; } body { background-image: url(''paper.gif''); background-color: #cccccc; background-repeat: no-repeat; background-position: right top; margin-right: 200px; } body { background: #ffffff url("img_tree.png") no-repeat right top; margin-right: 200px; } </style> </head> <body> <h1>CSS background-color实例!</h1> <div>改文本插入在div元素中.</div> <p>该段落有自己的背景颜色</p> <p>背景图片不重复，设置position实例</p> <p>背景图片只显示一次，并与文本分开</p> <p>实例中还添加了margin-right属性用于让图片与文本间隔开</p> </body> </html>参考资料：《菜鸟教程》
关于【代码笔记】Web-Javascript-JavaScript简介和web javascript的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于web@前端--html,css,javascript简介、第一个页面(常用标签简介)、【代码笔记】Web - 利用 Dreamweaver 实现 form、【代码笔记】Web--使用Chrome来查看网页源代码、【代码笔记】Web-CSS-CSS background背景的相关知识，请在本站寻找。
本文标签：
