从头开始学前端

小白从头开始学前端

  • HTML
    • HTML简介
    • HTML基础
    • 表单
  • CSS
    • css概述
    • 插入样式表
    • css样式
    • css框模型
    • css定位
  • javascript
    • javascript简介
    • javascript使用
    • 引用外部JS文件
    • 操作HTML元素
    • JavaScript 注释
    • 声明变量
    • 函数

HTML

HTML简介

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

HTML基础

标题

HTML 标题(Heading)是通过 

-

等标签进行定义的。

This is a title

段落

HTML 段落是通过 

标签进行定义的。

This is a paragraph

链接

HTML 链接是通过  标签进行定义的。
This is a link

图像

HTML 图像是通过  标签进行定义的。

元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数 HTML 元素可拥有属性

Hello

HTML 标签对大小写不敏感,但是建议使用小写.

属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name="value"。
属性总是在 HTML 元素的开始标签中规定。

样式

HTML 的 style 属性
style 属性的作用:
提供了一种改变所有 HTML 元素的样式的通用方法。

This is a title

注释


表单

HTML 表单用于收集用户输入。
First name:

Last name:

输入类型

 文本输入
 密码输入
  提交表单的按钮
 定义单选按钮
 定义复选框
从头开始学前端_第1张图片

内边距:{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 中的脚本必须位于  标签之间。
脚本可被放置在 HTML 页面的  和  部分中。
例如:

引用外部JS文件


                    
                    

你可能感兴趣的:(从头开始学前端)