码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记NO.1

时间:2015-02-03 19:28:29      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:html   intellij idea   

HTML:
是用来描述网页的一种语言
超文本标记语言Hyper Text Markup Language
不是编程语言,是一种标记语言


新特性:
用于绘画的canvas标签
用于媒介回放的video和audio元素->视音频文件
对本地离线存储的更好支持
新的元素内容:如article、footer、header、nav、section
新的表单控件:如:calender、date、time、email、url、search
浏览器的支持:chrome、firefox以及Opera和IE9


开发工具:
常用:WebStorm、notepad++、Eclipse、text sublime、Dreamweaver等
推荐:Intellij IDEA

需要掌握的技能:
HTML5 XHTML CSS3 JavaScript jQuery:jQuery-Ui jQuery-Mobile

HTML基础讲解:

声明:<!DOCTYPE>
html也有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确
地显示出HTML页面。这就是<!DOCTYPE>的用处

不同版本的HTML有不同的HTML声明
到HTML5直接使用:<!DOCTYPE html>

常用标签属性:
<h1>:align对齐方式
<body>:bgcolor背景颜色
<a>:target规定在何处打开连接

通用属性:
class : 规定元素的类名
id    : 规定元素唯一ID
style : 规定元素的样式
title : 规定元素的额外信息

格式化:
<b>粗体文本
<big>大号字------html5过时通常使用css来代替
<em>着重文字
<i>斜体字
<small>小号字
<strong>加重语气
<sub>下标字
<sup>上标字
<ins>定义插入字
<del>定义删除字

HTML5样式、连接和表格

标签:
<style>样式定义
<link>资源引用----如引入CSS样式

属性:
rel="stylesheet":外部样式表
type="text/CSS":引入文档的类型
margin-left:边距----距离左边或者右边的距离

三种样式表插入方法:

外部样式表:reference link ->rel http refernece link ->href
<link rel="stylesheet" type="text/css" href="mystyle.css">

内部样式表:
<style type="text/css">
body{background-color:red}
p{margin-left:20px}
</style>

内联样式表:
<p style="color:red">

连接属性及其使用:

1、连接数据:
文本连接
图片连接

2、属性:
href属性:指向另一个文档的连接
name属性:创建文档的连接

3、imag标签属性:
alt:替换文本属性
width:宽
height:高

HTML表格
<table>定义表格
<caption>表格标题
<th>表格的表头
<tr>表格的行
<td>表格的单元
<thead>表格的页眉
<tbody>表格的主体
<tfoot>表格的页脚
<col>表格的列属性

HTML列表:
<ol>有序列表
<ul>无序列表
<li>列表项
<dl>列表
<dt>列表项
<dd>描述

无序列表使用标签:<ul>、<li>
属性:disc、circle、square

有序列表使用标签:<ol>、<li>
属性:A、a、I、i、start

嵌套列表使用标签:<dl>、<dt>、<dd>

HTML块:

块元素:
块元素在显示时,通常会以新行开始,如:<hl> <p> <ul>

内联元素:
内联元素通常不会以新行开始,如:<b> <a> <imag>

<div>元素:也被成为块元素,其主要是组合HTML元素的容器

<span>元素:是内联元素,可作为文本的容器

HTML布局:
div或者table来进行布局

HTML表单:
表单用于获取不同类型的用户输入

常用标签:
<form> 表单
<input> 输入域
<textarea>文本域
<label>控制标签
<fieldset>定义域
<legend>域的标题
<select>选择列表
<optgroup>选项组
<option>下拉列表中的选项
<button>按钮

HTML学习笔记NO.1

标签:html   intellij idea   

原文地址:http://blog.csdn.net/zs2538596/article/details/43448137

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!