从头开始学前端 - 好文

小白从头开始学前端

* HTML <https://blog.csdn.net/a5411000/article/details/84338026#HTML_2>
* HTML简介 <https://blog.csdn.net/a5411000/article/details/84338026#HTML_3>
* HTML基础 <https://blog.csdn.net/a5411000/article/details/84338026#HTML_9>
* 表单 <https://blog.csdn.net/a5411000/article/details/84338026#_54>
* CSS <https://blog.csdn.net/a5411000/article/details/84338026#CSS_72>
* css概述 <https://blog.csdn.net/a5411000/article/details/84338026#css_73>
* 插入样式表 <https://blog.csdn.net/a5411000/article/details/84338026#_81>
* css样式 <https://blog.csdn.net/a5411000/article/details/84338026#css_89>
* css框模型 <https://blog.csdn.net/a5411000/article/details/84338026#css_100>
* css定位 <https://blog.csdn.net/a5411000/article/details/84338026#css_116>
* javascript
<https://blog.csdn.net/a5411000/article/details/84338026#javascript_119>
* javascript简介
<https://blog.csdn.net/a5411000/article/details/84338026#javascript_120>
* javascript使用
<https://blog.csdn.net/a5411000/article/details/84338026#javascript_125>
* 引用外部JS文件 <https://blog.csdn.net/a5411000/article/details/84338026#JS_132>
* 操作HTML元素 <https://blog.csdn.net/a5411000/article/details/84338026#HTML_135>
* JavaScript 注释
<https://blog.csdn.net/a5411000/article/details/84338026#JavaScript__141>
* 声明变量 <https://blog.csdn.net/a5411000/article/details/84338026#_146>
* 函数 <https://blog.csdn.net/a5411000/article/details/84338026#_163>

<>HTML

<>HTML简介
HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML
不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页
<>HTML基础

标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。 <h1>This is a title</h1>
段落
HTML 段落是通过 <p> 标签进行定义的。 <p>This is a paragraph</p>
链接
HTML 链接是通过 <a> 标签进行定义的。 <a href="www.baidu.com">This is a link</a>
图像
HTML 图像是通过 <img> 标签进行定义的。 <img src="/img/logo.jpg" />
元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML 元素以开始标签起始 HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性 <html> <body><p>Hello</p></body> <html> HTML
标签对大小写不敏感,但是建议使用小写.
属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在
HTML 元素的开始标签中规定。 <table id="myTable"></table>
样式
HTML 的 style 属性 style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。 <h1
style="background-color:red">This is a title<h1>
注释

<>表单
HTML 表单用于收集用户输入。 <form> First name:<br> <input type="text" name="firstname">
<br> Last name:<br> <input type="text" name="lastname"> </form>
输入类型
<input type="text"> 文本输入 <input type="password"> 密码输入 <input type="submit">
提交表单的按钮 <input type="radio"> 定义单选按钮 <input type="checkbox"> 定义复选框 <input
type="button> 定义按钮 ......
<>CSS

<>css概述
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML
4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为
<>插入样式表

1.外部样式表
2.内部样式表
3.内联样式

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
优先级
内联样式（在 HTML 元素内部）>内部样式表（位于标签内部）>外部样式表>浏览器缺省设置

<>css样式
1.背景：{background:red;} background-color属性不能被继承. 2.背景图像 :
{background-image:url(/i/logo.gif);}background-image也不能被继承.
3.背景重复(用于页面对背景图片进行平铺):{background-repeat:repeat-y/repeat-x;}
4.缩进文本（首行缩进）:{text-indent:5em;} 5.水平对齐：{text-align:left/right/center;}
6.字间隔:{word-spacing:30px;}正值距离会增加,负值距离会减少 7.字体:{font-family:san-serif,'New
York';}字体名有空格需要加‘’或“” 8.字体风格:{font-style:normal/italic/oblique;}正常/斜体/倾斜
9.字体加粗:{font-weight:100~900/normal/bold;} 九级加粗度 400=normal 700=bold
10.字体大小:{font-size:40px;}
<>css框模型

边框：border
外边距：margin
内边距：padding
高度：height
宽度：width

内边距：{padding:10px;} 各边距10px {padding:10px 0.25em 2ex 20%;} 单独属性
padding-top:10px; padding-right:0.25em; padding-bottom:2ex; padding-left:20%;
以上效果相同
<>css定位
position属性: static/relative/absolute/fixed float属性(浮动):left/right/none/inherit
<>javascript

<>javascript简介

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

<>javascript使用
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
例如: <script> alert("Hello World!") </script>
<>引用外部JS文件
<script src="myScript.js"><script>
<>操作HTML元素
使用"id"属性标识HTML元素使用方法 document.getElementById(id)获取元素下面的 JavaScript 语句向
id="demo" 的 HTML 元素输出文本 "Hello World"：
document.getElementById("demo").innerHTML="Hello World";
<>JavaScript 注释
JavaScript 不会执行注释。我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。单行注释以 // 开头。多行注释以
/* 开始，以 */ 结尾。
<>声明变量

数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
各种运算符
+ - * / % ++ --
声明
var name="Bob"; var num=12.5; var x = true; var arr=new Array(); arr[0]="Bob"
arr[1]="Allen" var arr=new Array("Bob","Allen") var person={name:"Bob",age:12}
<>函数
<Button onclick="myFunction()">点击调用函数<Button> html function myFunction(){ js
alert("Hello"); }
if语句、switch语句、for语句、while语句

热门工具换一换