从头开始学前端

最新推荐文章于 2024-07-03 13:52:56 发布

Mr.syh

最新推荐文章于 2024-07-03 13:52:56 发布

阅读量7.8k

点赞数 5

文章标签： html css javascript

本文链接：https://blog.csdn.net/a5411000/article/details/84338026

版权

小白从头开始学前端

HTML
CSS
javascript

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语句

Mr.syh

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫