从零开始的H5之路

时间 2020-10-21

标签 css html 编程 canvas 浏览器网络 app 编程语言学习 url 栏目 CSS 繁體版

原文原文链接

HTML5的优势css

跨平台运行html

硬件要求低编程

flash以外的选择canvas

HTML5的新特性浏览器

用于绘画的canvase标签网络

用于媒介回放的ivdeo和audio元素app

对本地离线储存的更好支持编程语言

新的特殊内容元素学习

如：article、footer、header、nav、sectionurl

新的表单控件

如：calendar、data、time、email、url、search

Safari、Chrome、Firefox以及Opera包括IE9都支持HTML5。

学习HTML5须要掌握：HTML XHTML CSS CSS3 JavaScript JQuery HTML5

首先咱们开始学习HTML。

HTML简介

HTML指的是超文本标记语言：HyperText Markup Language

HTML不是编程语言，而是标记语言

标记语言是一套标记标签

HTML使用标记标签描述网页

HTML文档包含了HTML标签及文本内容

HTML文档也叫Web文档

HTML头文件

"<!DOCTYPE>"声明有助于浏览器中正确显示网页。网络上有不少不一样的文件，若是可以正确声明HTML的版本，浏览器就能正确显示网页内容。

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"">

HTML基础标签

HTML元素

HTML元素指的是从开始标签到结束标签的全部代码。

例如

内容

其中“内容”就是< a>标签的元素。

HTML元素语法：

元素的内容是开始标签与结束标签之间的内容

空元素在开始标签中进行关闭

大多数HTML元素可拥有属性

大多数的HTML元素都是能够嵌套的。

HTML属性

标签能够拥有属性为元素提供更多的信息

属性以键值对的形式出现。如：id=“id”。

经常使用标签属性：

“< h1>”:align对齐方式

“”:bgcolor背景颜色

“< a>”:target规定在何处打开连接

通用属性

class:规定元素的类名

id:规定元素惟一的ID

style:规定元素的样式

title:规定元素的额外信息

head标签

元素包含了全部的头部标签元素。在元素中你能够插入脚本(scripts)、样式(css)、以及各类meta信息。
function(){ //外汇返佣 http://www.fx61.com/

能够添加在头部区域的元素标签为:

body标签

标签订义文档的主题。其元素包含文档的全部内容。

HTML标题

HTML段落

HTML段落是由

标签订义的。浏览器会自动在段落的先后添加空行。< p>标签是块级元素。

咱们能够自定义一个标签，并在html中使用它

<!DOCTYPE html>

<head>

<title>Title</title>

document.createElement("myNode");//建立一个元素

</script>

<style>

myNode{

display: block;

width: 100px;

height: 100px;

background: red;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

城市： <input type="text" list="cityData">

<option>abaasd</option>

<option>adasdww</option>

<option>bsdas</option>

<option>csdas</option>

<option>fsdas</option>

<option>dsdas</option>

</datalist>

</form>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {

margin: 0;

}

ul, ol {

margin: 0;

list-style: none;

padding: 0;

}

a {

text-decoration: none;

}

* {

margin: 0;

padding: 0;

}

.main{width: 1200px;margin: 50px auto;box-shadow: 0 0 10px 0 deeppink}

.main .username{width: 400px;height: 30px}

.main .password{width: 400px;height: 30px}

.main form div{margin-top: 15px}

</style>

</head>

<body>

用户名:<input class="username" type="text" name="username" placeholder="用户名"/>

密码:<input class="password" type="password" placeholder="密码" />

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</body>

</html>