html CSS JS入门

HTML

本文简单介绍了HTML的架构体系，常见标签，CSS的常见标签，常见选择器，JS脚本数据结构，基础用法以及窗口弹出和输入事件响应

1、HTML系统架构体系

B/S 浏览器/服务器（Browser/Server）同一客户端，终端为服务器端进行交互，Web Server 如用户手机浏览器交互，建立于广域网
- 维护简单，共享性强，面对范围广
- 安全性较低，个人定制化程度低
C/S 客户端/服务器（Client/Server）将处理的业务分配至服务器端和客户端，降低通讯成本，但维护较为困难，如微信QQ等，
- 专用性强，较安全，稳定且效率较高
- 维护难度较高，中间环节（过载失衡），

2、HTML简介

三项技术： HTML核心规范 CSS层叠样式表 JavaScript

HTML5新特性：原生多媒体，可编程内容，语义Web

HWorld Wide Web Consortium()

<!DOCTYPE html>
<html>
	<head>
		
		<title>我是标签卡标题</title>
	</head>
	<body>
		<h1><font color="blue">这是第一个标题</font>
		<br/>这是换行测试</h1>  <!-- <br>和<br/>均可以使用，但推荐第二种 -->
		<a href="https://www.runoob.com/html/html-elements.html">这是一个连接</a>
		<h2>我是第二个标题</h2>
		<h3>我是第三个标题</h3>
		<p>我大概是一个段落</p>
	</body>
</html>

.html / .htm均为其后缀名，无区别

HTML不支持空格，回车，制表符 <!DOCTYPE html> 声明为HTML文档，其不区分大小写

<html>元素是HTML的根元素 <head>包含文档的meta数据\

<title>\包含文档标题，<body>\包含页面所需显示的内容

<h1>定义一个大标题，<p>定义一个段落

标签卡大小不敏感，但推荐使用小写

3.HTML标签属性

<!DOCTYPE html>
<html>
    <head>
        
        <title>这是文本格式化测试</title>
    </head>
    <body>
        <font size="10" color="red"><b>我是第一个粗体</b>
        <i>我是第一个斜体</i><br/>
        </font><br/>
        <font size="10" color="green"><strong>我是第二个粗体</strong><br/>
        <em>我是第二个斜体</em><br/>
        </font>
        <img src="www.dddd.com/aaa/dsac/jpg" width="500">
        <a href="http://www.xxx.com/" target="_self">这是超链接</a>
        <!-- target+"_self"表示当前页面打开超链接 traget="_blank"表示新空白界面打开超链接-->
    </body>
</html>

绝对路径：URL地址，唯一路径地址，统一资源定位符在任意地点，任意站点均可以直接访问到的有效的URL地址

相对路径：本地硬盘：当前文件所在的目录的层次关系的有效路径

下级或同级目录： ./或不写上级目录 ../或 ../ ../

图片的src属性或超链接的href属性均支持绝对与相对地址

1、表格

展现行列式的二维数据，可用于web页面布局

XML（Extensible Markup Language)：用户自定义标签和属性，，不用于页面展现，主用于数据的存储
CSV（Comma separate value）逗号分隔符格式
数据库，字典，列表

<!DOCTYPE html>
<html>
	<head>
		
		<title></title>
	</head>
	<body>
		<!-- HTML的表格主要是由<table><tr><td>三个嵌套标签组成，其特征与word基本相同 -->
			<!-- 如果不强制设置width和height，则自动调节 -->			
				<!-- 如果定义单元表格长宽合计与总计不一致，则按比例分配，最后一个单元表格向上取整 -->
		<br/><br/>
		<table width="450" height="150" border="1" style="background-color: bisque">
			<tr>
				<td></td>
			</tr>
			<tr>
				<td></td>
			</tr>
		</table>
    </body>
</html>

1.缩略词与图片导入写法

<!DOCTYPE>
<html>
    <head>
        
        <title>缩略词写法</title>
    </head>
    <body>
        <!--abbr/acronym中的title属性可以表示缩略词 img中的title可以表示提鼠标悬停词，alt表示未找到图片时的提示词 -->
        <abbr title="World of Warcraft">WOW</abbr>
        <acronym title="Monster Hunter World">MHW</acronym>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578027094180&di=900a3b7d66c1aca2254a0d6c6d200d7c&imgtype=0&src=http%3A%2F%2Fatt.xmnn.cn%2Fbbs%2Fforum%2F201310%2F23%2F205306jpq8q64polzp6zzh.jpg" 
		title="aaa" alt="some " width="600">
        <a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578027094180&di=900a3b7d66c1aca2254a0d6c6d200d7c&imgtype=0&src=http%3A%2F%2Fatt.xmnn.cn%2Fbbs%2Fforum%2F201310%2F23%2F205306jpq8q64polzp6zzh.jpg"
		 target="_blank"><img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1364292575,3034961265&fm=26&gp=0.jpg"</a>
        <p>
            这是一段测试文字
        </p>
        <p>
            <!-- bdo dir="rtl"（right to left）表示文字从右至左显示，ltr表示从左至右-->
            <bdo dir="rtl">这是一段测试文字</bdo>
        </p>
    </body>
</html>

2.标签暂时总结

<b>/<strong>	加粗	<i>/<em>	斜体
<s>/<del>	删除线	<ins>/<u>	下划线
<pre>	预定义格式	<code>	计算机代码
<kbd>	键盘码	<tt>	打字机码
<samp>	代码样式	<var>	定义变量
<bdo dir>	文字方向	<abbr>/<acronmy>	缩写
<table><thead>	<tbody>	<tfoot><tr><td>	<caption>
<align><valign>	center与middle	<colspan><rowspan>
<cellspace>	向里走，不影响width	<cellpadding>	向外走，影响width

3.表单

<!DOCTYPE>
<html>
    <head>
        
        <title>表单测试</title>
    </head>
    <body>
        <form action="" method="post">
            <p>
                <!--Defines a set of related from elements that are closed in a box-->
                <fieldset>
                    <!--Defines the title of field -->
                <lenged>Class_Test</lenged>    
               <!-- checkbox多选框 button按钮 radio单选框（圆圈）-->
                请输入用户名：<input type="checkbox" value=""/>
                button:<input type="button" name="button" value="button"/><br/>
                password:<input type="password" name="test_password" value="test_password" maxlength="3"/><br/>
                <!-- radio button name must setting same-->
                <input type="radio" name="radio_test" value=male>male<br/>
                <input type="radio" name="radio_test" value=female>female<br/>
                <select name="test" size="1" style="width=100px;">
                    <option value="a">a</option>
                     <option value="b">b</option>
                     <option value="c" selected="selected">c</option>
                     <option value="d">d</option>
                </select>
                </fieldset>
            </p>
        </form>
    </body>
</html>

label	meaning	label	meaning
<radio>		<checkbox>
<button>		<password>

4.小黑点写法与不用boder实现外边框方法

<font size="6" color="red">●</font>
<td width="14" height="14" bgcolor="red" style="boder-radius:7px;"></td>
<p>
   &nbsp; 
</p>
<table width="200" border="0" cellspace="1" bgcolor="red">
    <tr bgcolor="aqua">
        <td></td>
    </tr>
</table>

CSS

1、HTML与CSS

表格局限 ->DIV+CSS

表格时一个整体，单元与单元格之间联系紧密，无法实现灵活调整
无法实现响应式布局（Responsive Layout）

2、CSS 选择器：决定当前CSS样式影响元素

标签选择器：对当前作用范围内的所有标签元素
ID选择器：对编号元素实现样式设置
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  
  HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
  
  .para1{ text-align:center; color:red; }
class选择器：对某一类元素实现样式设置
- class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
  
  class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
  
  .center {text-align:center;}
  
  p.center {text-align:center;}
组选择器：按照层次索引实现样式设置
- 后代选择器选取所有 <p> 元素插入到<div> 元素中:
  - div p{ background-color:yellow; }
- 子元素选择器子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
  - div>p { background-color:yellow; }
- 相邻兄弟选择器：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
  
  如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
  
  选取了所有位于 <div> 元素后的第一个 <p> 元素:
  
  div+p { background-color:yellow; }
- 后续兄弟选择器：后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
  - div~p { background-color:yellow; }
伪类选择器：按照组内元素顺序实现样式设置（first-children；）
- 伪类选择器参考菜鸟教程

2、标签选择器

<!DOCTYPE html>
<html>
	<head>
		
		<title></title>
		<style>
			/* CSS style annotation rules
			CSS selector decide this.CSS influence element*/
			div {
				width: 100px;
				height: 50px;
				background-color:red;
				border: solid 5px #7FFF00;
				/* means the distance between the container and the surrounding area is 10px */
				margin: 5px;
				-ms-text-size-adjust: ;
				text-align: center;
				/* User the scroll bar when the contents of container overflow */
				/* overflow: scroll; */
				/* overflow: hidden; */
				/* row of height when same as height of container->vertical center
				only suit for single row */
				line-height: 50px;
				font-size: 5px;				
				float: left
			}
			table {
				width: 180px;
				height: 80px;
				border: 0px;
				border-spacing: 1px;
				background-color: brown;
				font-size: 10px;
			}
			tr {
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<div align="center" contenteditable="true">this is DIV test</div>
		<div>this is another test</div>
		<div>this is next other test</div>
		<div></div>
	</body>
	<table>
		<tr>
			<td>this is table_CSS test</td>
			<td>this is table_CSS another test</td>
		</tr>
	</table>
</html>

3、style sheet

external style sheet

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
internal style sheet
inline style sheet
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

4、box model

div { width: 220px; padding: 10px; border: 5px solid gray;
margin: 0; } ->250px

5、Calculator test

<!DOCTYPE html>
<html>
	<head>
		
		<title>Calculator</title>
		<style>
			#calculator{				
				width: 400px;
				/* 400+2=402 */
				height: auto;
				border:1px solid aqua;
				margin: 0 auto;
				margin-top: 30px;
				border-radius: 20px;
				background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2742238877,3733173728&fm=26&gp=0.jpg");
				box-shadow: 10px 10px 8px 10px rgba(169,169,169,0.9),-10px 10px 8px 10px rgba(169,169,169,0.9)
			}			
			div.top{
				width: auto;
				/* height: 30px; */
				text-indent: 10px;
				text-align: left;
				padding-top:8px ;
				padding-bottom: 8px;
				text-shadow: 0px 0px 4px rgba(255,255,255,0.8);
			}
			div.input{
				width: auto;
				height: 40px;
				/* border: 2px solid #0000FF; */
				text-align: right;
				background-color: rgba(255,228,225,0.4);
				line-height: 40px;
				padding-right: 20px;
				color: aliceblue;				
			}
			div.keyboard{
				width:398px;
				height: 265px;
				border: 1px solid beige;
				font-size: 20px;
				border-radius: 20px;
				color: #00FFFF;				
			}
			div.keyboard>div{
				width: 398px;
				height: 53px;
				margin: 0px;
			}
			div.keyboard>div>div{
				width: 23.4%;
				height: auto;
				float: left;
				line-height: 46px;
				text-align: center;
				border-radius: 7px;
				border: 1px solid #00FFFF;				
				margin: 2px;
			}
			div.keyboard>div>div:hover{
				background-color: rgba(255,215,0,0.6);
				font-size:30px ;
				box-shadow: 0px 0px 10px 10px rgba(255,140,0,0.8);
			}			
		</style>
	</head>
	<body>
		<div id="calculator">
			<div class="top">
				<font size="5" color="red">●</font>&nbsp;
				<font size="5" color="green">●</font>&nbsp;
				<font size="5" color="blue">●</font>&nbsp;
			</div>
			<div class="input">
				this is input
			</div>
			<div class="keyboard">
				<div>
					<div>AC</div>
					<div>+/-</div>
					<div>%</div>
					<div>÷</div>
					
				</div>
				<div>
					<div>7</div>
					<div>8</div>
					<div>9</div>
					<div>x</div>
				</div>
				<div>
					<div>4</div>
					<div>5</div>
					<div>6</div>
					<div>-</div>
				</div>
				<div>
					<div>1</div>
					<div>2</div>
					<div>3</div>
					<div>+</div>
				</div>
				<div>
					<div>0</div>
					<div>some</div>
					<div>.</div>
					<div>=</div>
				</div>			
			</div>
		</div>
	</body>
</html>

JavaScript

1.JavaScript简介

JavaScript是一种轻量级的脚本语言
可插入HTML文档中，也可创建js文件，<script src="MyScprit.js"></script>
外部脚本不能包含<script>

2.JavaScript简析

核心（ECMAScript）：它规定了JavaScript这门语言的一些组成部分：语法、类型、语句、关键字、保留字、操作符、对象。它是JavaScript的核心部分。
文档对象模型（DOM）：专门用于完成和网页之间的交互
浏览器对象模型（BOM）：主要用于对浏览器窗口进行一些操作，比如设置窗口大小，回滚上一页、打开新窗口等。

3.JavaScript变量

var进行变量赋值，可先声明后赋值，未赋值变量为undefined

重新声明后，变量值不丢失
在函数内部var声明的变量为局部的，只有该函数可以访问，不同函数可以声明同名变量，
在函数外部声明的变量为全局的，网页上所有脚本和函数都可以访问它

var y = new Number;
var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123
var z = null; //clear the variable value
var test = new Array;
var test = new Array("aa","bb","cc");
var Person = {lastname : "lastname",firstname : "lastname",sex : "sex"};//object element must use ":"
Person.lastname;
Person["lastname"];//two method both can invoke object

4.JavaScripe函数

<p id="demo">I can change</p>
<p id="ObjectTest">this object can change!</p>
<p id="objcetTest1">this object can change1!</p>
<button onclick="click_me()">click me!</button>
<button onclick="up_window()">Alert!</button>
<script>
    var tests = new Array("aa","bb","cc");
	document.write(tests);//aa,bb,cc
	function click_me(){
        document.getElementById("demo").innerText = "changed";
        var Test = {
            lastname : "lastname";
            firstname : "firstname"
            age :23;
            fullname : function(){
                return this.firstname+" "+this.lastname;
            };
        }
		document.getElementById("ObjectTest").innerHTML = Test.firstname + ",now age is:" + Test.age;
		document.getElementById("ObjectTest1").innerHTML = Test.fullname();
    }
    function up_window(){
        window.alert("this is Alert function test")
    }
	var person;
	document.write(person+" "+typeof person);// undefined undefined
</script>

===用于判断类型 undefined === null; //false undefined == null;//true

null：用于释放内容和变量值，typeof为object undefined：所有未定义的变量的默认值，类型为undefined

4JavaScript数据类型

6种数据类型：String；number；object；boolean；function；symbol
3种对象类型：Object；Date；Array
2种不含任何值的数据类型：undefined null

PS：Date，Array，null的数据类型均为object

5.incident

<!DOCTYPE html>
<html>
	<head>
		
		<title></title>
	</head>
	<body>
        <!--invoke workA .replace content of work1-->
		<button onclick="getElementById('work1').innerHTML=workA()">work01</button>
		<p id="work1"></p>
         <!--invoke workB and replace content of work2-->
		<button onclick="getElementById('work2').innerHTML=workB()">work02</button>
		<p id = "work2"></p>
        <!--this input is edit to input number x and y-->
		<input type="text" id="xvalue" oninput="workC1()">
		<p id ="demo1">x input</p>
		<input type="text" id="yvalue" oninput="workC2()">
		<p id = "demo2">y input</p>
		<button onclick="getElementById('work3').innerHTML=workC()">work03</button>
		<p id = 'work3'></p>
		<script>
            //countA/B is count the number of click button to empty the content when is works again
			var countA = 0;
			var countB = 0;
            // this workA function is use for implement sum of 100~500
			function workA(){
				var sum = 0;
				for(var i=100;i<=500;i++){
					sum +=i;
				}
				countA++;
				if(countA%2!=0){
					return "the work1 answer is:"+sum;
				}else{
					return null;
				}
			}
            //this workB implement 100~999 specific number
			function workB(){
				var sum = " ";
				for(var i = 100;i<=999;i++){
					var x = parseInt(i%10);
					var y = parseInt((i/10)%10);
					var z = parseInt(i/100);
					if((x*x*x+y*y*y+z*z*z==i)){
						sum = sum+ i.toString()+" ";
					}
				}
				countB++;
				if(countB%2!=0){
					return "the work2 answer is:"+sum;
				}else{
					return null;
				}				
			}
            // this workC1/C2 display the content in edit
			function workC1(){
				var x = document.getElementById('xvalue').value;
				document.getElementById('demo1').innerHTML = "your input x is"+x;
			}
			function workC2(){
				var y = document.getElementById('yvalue').value;
				document.getElementById('demo2').innerHTML = "your input y is"+y;
			}
			function workC(){
				var x = document.getElementById('xvalue').value;
				var y = document.getElementById('yvalue').value;
				return ("the work3 answer is:"+Math.pow(x,y));
			}
		</script>
	</body>
</html>

posted @ 2020-12-04 11:34 WheelCode 阅读(379) 评论(0) 收藏举报

刷新页面返回顶部

WheelCode