HTML初学笔记

发表于

HTML简介

  • html 是指超文本标记语言，不是编程语言

  • Html5 ：需要熟练掌握快捷键

  • HTML的新特性：

    用于绘画的canvas标签；
    用于媒介回放的video和audio元素
    对本地离线存储的更好支持
    新的特殊元素：article、footer、header、nav、section
    新的表单控件：calendar、date、time、email、url、searth
    浏览器的支持：Safari、Chrome、Firefox、Opera、IE9

注

  • 使用软件 Intellij IDEA -Static Web
  • 新建-New-HTML File(不需要写后缀名）
  • 需要学习的技能 XHTML、CSS3.JavaScript、jQuery:jQuery-UI、jQuery-Mobile

HTML 基础

HTML5的声明：<!DOCTYPE html>
HTML基础标签：head、body
HTML标题：<h1>…<h6>等标签进行定义 {标题字号大小不一样}
HTML段落:<p>标签定义段落
HTML链接:<a>标签定义连接
HTML图像:<img>标签定义图像<img src=”imges/html.png>

HTML元素

开始标签 元素内容 结束标签
<p> this is my web </p>

HTML属性

属性以键值对的形式出现，如：href=“www.jikexueyuan.com”

  • 常用的标签属性：

<h1>:align对齐方式
<body>:bgcolor背景颜色
<a>:target规定在何处打开链接

  • 通用属性:

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

HTML格式化效果:

<b>定义粗体文字
<big>定义大号字
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

HTML样式

  • 标签:
    <style>: 样式定义
    <link>:资源引用
  • 属性:
    rel="stylesheet":外部样式表
    type=“text/css":引入文档类型
    margin-left:边距

三种样式表插入方法:

外部样式表
<link rel ="stylesheet" type="text/css" herf= "mystyle.css">

内部样式表

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

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

HTML链接

连接数据:

文本连接:如 <a href="http://www.jike.com">点击</a>
图片链接:如 <a href="http://www.jike.com">
<img src="html.png">
</a>
如果图片大小不合适，可以改变其大小: <img src="html.png" width="200px" height="200px" alt="html5logo">

img标签属性:

alt:替换文本属性
width:宽
height:高

属性:

href属性:指向另一个文档的链接
name:创建文档内的链接

<a name="tips">hello</a>
跳转到hello

表格:

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

  • 定义边框<table border="1" cellpadding="10">(单元格边距)

    cellspacing=”10” (单元格间距)
    bgcolor=”颜色” (给表格添加颜色)
    background=”html.png” (给表格添加背景图片)

  • 定义表头也在<tr>中，

  • 在最外层加一个<p>表格</p> 这是加一个标题,也可以在<table>下加<caption>表格</caption>