HTMLCSSJavaScript 手册

Posted 2021-09-01 王睿丶

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTMLCSSJavaScript 手册相关的知识，希望对你有一定的参考价值。

文章目录

喜欢记得点个赞哟，我是王睿，很高兴认识大家！

1、开发技巧

1. Ctrl + 回车键换到下行

2. Ctrl + shift + 回车键换到上行

3. h1*6，在按Tab键就会在编译器上自动生成6个h1标签

4. h1*6>{1级标题}，在按Tab键就会生成6个h1标签，内容都是一级标题

	h$*6>{$级标题}	生成h1、h2、h3...~h6标签，自动递增，而且里面的内容值也会自动递增
	$【读duo le】	它表示一个占位符，它会在每一次生成一行的时候自动递增

6. lorem + Tab 乱数假文，没有任何实际含义的文字，就是为了测试架构来使用的。

7. 插 lorem格式为：h1*6>lorem 就会生成一堆虚假的文字

8. h1*6>lorem1 表示生成6行里，每一行只有一个乱数单词，同理2就会有两个，3就会有三个等等

9. shift + tab 减缩进

2、常见问题

2.1、分割线标签、文字居中、背景图片充满全图

一丶分割线标签

<hr>

二丶文字居中
以table为例：

<table border="1"align="center"></table>

三丶背景图片铺满整个网页：

	<html>
		<head>
			<meta charset="UTF-8">
			<title>img<title>
			<style type="text/css">
				body{
					background-image:url(img/index.jpg);
					background-size:cover;
				}
				</style>
				....
				....

注意：URL 路径是放在和网页同一个文件夹时才能直接写图片名字+扩展名，如果还专门创建了一个文件夹放置图片，记得要先写文件夹的名字再写图片名+扩展名！

2.2、HTML如何引入外部JS文件

2.3、HTML中块级元素如何转为行内元素??

可以通过display: inline-block设置为行内元素。

2.4、怎么在字的中间加一条横线表示这些字被划掉了，用css。

删除线效果

2.5、用a标签在当前网页跳转和打开新页面再跳转

	在当前网页跳转
    <a href="http://www.itcast.cn/" target="_self">传智播客</a>
    打开新网页再跳转
    <a href="http://www.baidu.com" target="_blank">跳到百度</a>

2.6、锚点链接

    <li><a href="#one">平面广告设计</a></li>
    <li><a href="#two">网页设计与制作</a></li>
    <li><a href="#three">Flash互动广告动画</a></li>
    
    <h3 id="one">平面广告设计</h3>		
    <h3 id="two">网页设计与制作</h3>
    <h3 id="three">Flash互动广告动画</h3>

2.7、HTML5页面元素

视频地址：http://stu.ityxb.com/preview/detail/f60ac95f9e1b4178b7abca5b4029d03e

学习内容：
1、ul元素
2、ol元素
3、dl元素
4、列表的嵌套应用
5、header元素
6、nav元素
7、article元素
8、section元素
9、footer元素

代码：
链接：https://pan.baidu.com/s/1Uq87r7rT1tuqJSq0nEE4tQ
提取码：gvmf

结构：

代码截图：

01.html

02.html

03.html

04.html

05.html

06.html

07.html

08.html

09.html

2.8、CSS行内元素和块级元素的转换

https://blog.csdn.net/chengxu_kuangrexintu/article/details/83043169

2.9、内部样式几种常用写法（类、id）

CSS — 内部样式几种常用写法（类、id）
22/100
发布文章
qq_27494201
未选择任何文件
效果图：

一丶类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.p1{
			color: red;
			size: 20px
		}
		.r1{
			color: red;
			size: 20px
		}
		.p2{
			color: red;
			size: 20px
		}
	
	</style>
</head>
<body>

	<h1>本周末任务计划</h1>
	<ul class="p1">
		<li>去书店买书</li>
		<li>去逛街，给爸爸妈妈买新衣服</li>
		<li>周六早上9点去见客户</li>
		<li>周日带着乐乐去去公园画画</li>
	</ul>

	<h1>老哥排行榜</h1>
	<ul class="r1">
		<li>海阔天空</li>
		<li>甜蜜蜜</li>
		<li>一路上有你</li>
		<li>我是一只小小鸟</li>
	</ul>

	<h1>友情链接</h1>
	<ul class="p2">
		<li>购书指南</li>
		<li>账户管理</li>
		<li>配送方式</li>
	</ul>


</body>
</html>

二丶 id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		#p1{
			color: red;
			size: 20px
		}

		#r1{
			color: #0DFC8B;
			size: 20px
		}
		#p2{
			color: #F806D8;
		}
	</style>
</head>
<body>

	<h1>本周末任务计划</h1>
	<ul id="p1">
		<li>去书店买书</li>
		<li>去逛街，给爸爸妈妈买新衣服</li>
		<li>周六早上9点去见客户</li>
		<li>周日带着乐乐去去公园画画</li>
	</ul>

	<h1>老哥排行榜</h1>
	<ul id="r1">
		<li>海阔天空</li>
		<li>甜蜜蜜</li>
		<li>一路上有你</li>
		<li>我是一只小小鸟</li>
	</ul>

	<h1>友情链接</h1>
	<ul id="p2">
		<li>购书指南</li>
		<li>账户管理</li>
		<li>配送方式</li>
	</ul>


</body>
</html>

效果图：
在这里插入图片描述

一丶类

Document

<h1>本周末任务计划</h1>
<ul class="p1">
	<li>去书店买书</li>
	<li>去逛街，给爸爸妈妈买新衣服</li>
	<li>周六早上9点去见客户</li>
	<li>周日带着乐乐去去公园画画</li>
</ul>

<h1>老哥排行榜</h1>
<ul class="r1">
	<li>海阔天空</li>
	<li>甜蜜蜜</li>
	<li>一路上有你</li>
	<li>我是一只小小鸟</li>
</ul>

<h1>友情链接</h1>
<ul class="p2">
	<li>购书指南</li>
	<li>账户管理</li>
	<li>配送方式</li>
</ul>

二丶 id Document

<h1>本周末任务计划</h1>
<ul id="p1">
	<li>去书店买书</li>
	<li>去逛街，给爸爸妈妈买新衣服</li>
	<li>周六早上9点去见客户</li>
	<li>周日带着乐乐去去公园画画</li>
</ul>

<h1>老哥排行榜</h1>
<ul id="r1">
	<li>海阔天空</li>
	<li>甜蜜蜜</li>
	<li>一路上有你</li>
	<li>我是一只小小鸟</li>
</ul>

<h1>友情链接</h1>
<ul id="p2">
	<li>购书指南</li>
	<li>账户管理</li>
	<li>配送方式</li>
</ul>

文章目录暂无目录文章内添加@[TOC]自动根据文章标题生成目录

Markdown 1575 字数 111 行数当前行 1, 当前列 0HTML 1351 字数 88 段落
引用 – Ctrl+Shift+Q

2.10、外部、内部、内联及它们的优先级顺序

一丶外部样式

首先先在相对与网页同一个路径下建立一个扩展名以.css的文件，将它用记事本打开，放入代码：
如图：

然后利用 link 标签即可导入外部样式文件，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
		
		<link rel="stylesheet" type="text/css" href="index.css">

</head>

<body>
	<p>加油！</p>
</body>
</html>

效果图：

—————————————————————————————————————————

二丶内部样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>

	<style type="text/css">
		p{
			text-align: center;
			font-size: 30px;
		}
	</style>
	
</head>

<body>

	<p>加油！</p>

</body>
</html>

—————————————————————————————————————————

三丶内联样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>

</head>

<body>

	<p style="text-align: center;font-size: 30px;color: red">加油！</p>

</body>
</html>

—————————————————————————————————————————

四丶优先级详解

如果在HTML文件中同时出现了三种样式的写法，那么他们会查漏补缺，意思也就是说会把没有的效果自动加上去，已有的效果才会按照它们各自的优先级大小进行选择。
那么优先级顺序为：内联样式 > 内部样式 > 外部样式

2.11、console.log(iVal)是什么？显示在哪里？

1.是什么？

两种含义：
1.终端的输入输出信息的记录日志
2.console.log()是用来调适javascript的

2.在哪里？
拿谷歌浏览器来说，进入页面，然后按f12进入页面调试模式，里面有一个console选项，你点一下，就可以看到你console.log输出的内容了

3、知识总结

3.1、元素、属性、属性分类、空元素、元素嵌套、元素家族、、根元素、 lang属性、文档头—head、编码、文档元数据—meta、 body、文档声明

一丶元素
元素 = 起始标记 + 结束标记 + 元素内容 + 元素属性

二丶属性
属性=属性属性名 + 属性值

三丶属性分类
局部属性：某些元素特有的属性
全局属性：所有元素通用比如：title

四丶空元素
有些元素没有结束标记，这样的元素叫做：空元素，它是不会显示内容的

五丶元素嵌套

元素嵌套是可以的，比如说：

	<div>
	<p></p>		正确
	</div>

但是一定要注意！元素不能相互嵌套！比如说：

<div>
	<p>			错误
	</div>		
	</p>

六丶元素家族

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

七丶文档声明—!DOCTYPE

<!DOCTYPE html>

【1】
文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5，不写文档声明，将导致浏览器进入怪异渲染模式。

【2】
这个不是元素要注意！

八丶根元素—html

<html lang="en"></html>

根元素，一个页面最多只能有一个，并且该元素是所有其他元素的父元素或祖先元素。
HTML5版本中没有强制要求书写该元素（根元素）。

九丶 lang属性

【1】
lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言（汉语、英文等等）书写而成的。

【2】
在lang属性中设置汉语，html lang=“zh-CN”【已过时】，html lang=“cmn-hans”【现在用的是】

十丶文档头—head

	<head>
		....
	</head>

文档头，文档头内部的内容，不会显示到页面上

十一丶编码

中国大陆的编码—GB2312，台湾编码—GBK，万国码（世界所有语言的集合）— UTF-8，它的通用性很强，但是也有缺点

十二丶文档元数据—meta

<meta>

【1】

元素的 charset 属性：指定网页内容编码

【2】

用于移动端设备屏幕适配

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【3】

告诉用户使用IE浏览器时，建议使用 edge 内核

<meta http-equiv="X-UA-Compatible" content="ie=edge">

十三丶 body

<body>

文档体，页面上所有要参与显示的元素，都应该放置到文档体中

3.2、语义化思想与规范

一丶什么是语义化？
【1】每一个HTML元素都有具体的含义，比如：

a 超链接
p 段落
h 标题

【2】所有元素与展示效果无关，元素展示到页面中的效果，应该由CSS决定

我拿两张图举个例子：

那么肯定会有同学问了：为什么默认情况下h1就会加大加粗呢？
这是因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

所以说，一个效果的展示，跟她的元素是没有任何关系的，也就是说不管它是大是小，是粗是斜，他是什么元素的就是什么元素的，更不会因为展示效果改变它原有的元素名称！

二丶重要理论

选择什么元素，取决于内容的含义，而不是显示出的效果，不要去想它显示什么样子的，记住！！！

三丶为什么需要语义化
【1】为了搜索引擎优化（SEO）

搜索引擎：百度

以上是关于HTMLCSSJavaScript 手册的主要内容，如果未能解决你的问题，请参考以下文章

sublime Text emmet插件使用手册

HTMLcssjavascript 实现新年红包

htmlcssjavascript 实现红包雨

转载：Emmet使用手册

java项目小手册

前端开发必备！Emmet使用手册(转自 http://www.w3cplus.com/tools/emmet-cheat-sheet.html)

HTMLCSSJavaScript 手册

文章目录

1、开发技巧

2、常见问题

2.1、分割线标签、文字居中、背景图片充满全图

2.2、HTML如何引入外部JS文件

2.3、HTML中 块级元素 如何转为 行内元素??

2.4、怎么在字的中间加一条横线表示这些字被划掉了，用css。

2.5、用a标签在当前网页跳转和打开新页面再跳转

2.6、锚点链接

2.7、HTML5页面元素

2.8、CSS行内元素和块级元素的转换

2.9、 内部样式几种常用写法（类、id）

2.10、外部、内部、内联及它们的优先级顺序

2.11、console.log(iVal)是什么？显示在哪里？

3、知识总结

3.1、元素、属性、属性分类、空元素、元素嵌套、元素家族、、根元素、 lang属性、文档头—head、编码、文档元数据—meta、 body、文档声明

3.2、语义化思想与规范

2.3、HTML中块级元素如何转为行内元素??

2.9、内部样式几种常用写法（类、id）