慕课-Web前端工程师成长第一阶段(基础篇)

最新推荐文章于 2024-12-06 08:08:58 发布

七块的学习笔记

最新推荐文章于 2024-12-06 08:08:58 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：编程语言文章标签：前端工程师布局 html

本文链接：https://blog.youkuaiyun.com/sinat_23880167/article/details/78519146

编程语言专栏收录该内容

42 篇文章

订阅专栏

第一步了解HTML和CSS

div写注释很重要，不然找不到

<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

<q>用来引用简短的文本</p>
<blockquote>用来引用长文本</blockquote>

nb(牛逼)sp(space) 好牛逼的空格!           &nbsp;

<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
<code>标签在网页上显示程序代码（少）
<pre>在网页中显示代码段（多）
<a href="目标网址" target="_blank">click here!</a>
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">(HTML中src是source的缩写，这里是源文件的意思)
1、src：标识图像的位置；2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；（机器看）3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；（人看）


<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
Form中的get和post方法，在数据传输过程中分别对应了GET和POST方法。
二者主要区别如下：
1、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
如下形式：
     http://www.imooc.com/test.asp?name=lilian&password=12345678
2、Get是不安全的，因为在传输过程，数据被存放在请求的URL地址中，这样就可能会有一些隐私的信息被第三方看到。
3、Get方式传输的数据量非常小，一般限制在 2KB 左右，但是执行效率却比 Post 方法好；而 Post 方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，根据微软方面的说法，微软对用 Request.Form()可接收的最大数据有限制，IIS4中为 80KB 字节，IIS5 中为 100KB 字节。
综上所述，请尽量用 Post 方法。

  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<link href="style.css" rel="stylesheet" type="text/css" />

一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素
.food>li
伪类其他标签也能用
p{color:red!important;}

缩进    text-ident:2em
text-align:center; 段落居中     text-align:left;段落居左     text-align:right;段落居右
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：同时具备内联元素、块状元素的特点
<img>、<input>
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
在网页中，元素有三种布局模型：
1、流动模型（Flow）   默认的网页布局模式
2、浮动模型 (Float)     float:left
3、层模型（Layer），层模型有三种形式：

1、绝对定位(position: absolute)   最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

2、相对定位(position: relative)    它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置

3、固定定位(position: fixed)

以谁为参照物加 position:relative; (父元素）
移动的盒子加 position;absolute; （子元素）

设置颜色的方法也有很多种：
1、英文命令颜色p{color:red;}
2、RGB颜色p{color:rgb(133,45,200);}每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：p{color:rgb(20%,33%,25%);}
3、十六进制颜色p{color:#00ffff;}

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的
1. position : absolute 
 2. float : left 或 float:right 
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

第二步学习JavaScript

语句末尾的分号 ; 不能省略

window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
1.链接地址  2.打开方式 3，4.尺寸大小  5.窗口菜单 6.工具条

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
    border:#333 solid 1px;
	padding:5px;}
p{
	line-height:18px;
	text-indent:2em;
    }
.two{color:red;
    border:2px solid blue;}
</style>
</head>
<body>
  <h2 id="con" style="text-align:center">JavaScript课程</H2>
  <div id="txt"> 
        <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
        <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
  <form>
   <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" onclick="changeColor()" value="改变颜色" > 
    <input type="button" onclick="jialei()" value="添加类" >  
    <input type="button" onclick="changeSize()" value="改变宽高" >
    <input type="button" onclick="hidetext()" value="隐藏内容" >
    <input type="button" onclick="showtext()" value="显示内容" >
    <input type="button" onclick="resettext()" value="取消设置" >
  </form>
  <script type="text/javascript">
    var myh = document.getElementById("con");
    var mydiv = document.getElementById("txt");
    function jialei(){
    myh.className="two";}
//定义"改变颜色"的函数
function changeColor(){
    myh.style.color="red";
    myh.style.backgroundColor="#ccc";
    mydiv.style.color="red";
    mydiv.style.backgroundColor="#ccc";
}

//定义"改变宽高"的函数
function changeSize(){
    mydiv.style.width="300px";
    mydiv.style.height="300px";
}

//定义"隐藏内容"的函数
function hidetext(){
    mydiv.style.display="none";
}

//定义"显示内容"的函数
function showtext(){
    mydiv.style.display="block";
}

//定义"取消设置"的函数
function resettext(){
    var mychose = confirm("确定取消所有设置吗？");
    if(mychose==true){
    mydiv.removeAttribute("style");
    }
}



  </script>
</body>
</html>

创建数组：js中创建数组可以有以下几种方式：1. var arr = new Array（）；       定义数组的时候注意A是大写的。
2 var arr = new Array(size);size代表数组中元素个数
3 var arr = new Array(元素1，元素2，...)
4 var arr =[元素1, 元素2， 元素3......]  这种为非官方写法

break跳出循环，循环体不再执行
continue跳过本次循环，整个循环体继续执行

js计时器
setTimeout() 指定的延迟时间后执行代码     setInterval(代码，交互时间);
clearTimeout() 取消setTimeout()设置
setInterval() 每隔指定的时间执行代码
clearInterval() 取消setInterval()设置
var url = window.location.href;//获取当前窗口的url   收藏

document.getElementByName(name)与
getElementByld()方法不同的是，通过元素的name属性查询元素，而不是通过id属性
注意：
1.因为文档中的name属性可能不唯一，所有getElementsByName（）方法返回的是元素的数组，而不是一个元素。
2.和数组类似的也有length属性，可以和访问数组一样的方法来访问，从0开始。
getElementsByTagName()