写在前面：这是一篇HTML知识点整理笔记！

HTML

㈠HTML入门

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

HTML 编辑器

Sublime Text 3
WebStorm

㈡ HTML文档结构

HTML文档基本结构

DTD(Document Type Definition)  -------------- 文档定义类型
  -------------- 文本描述网页
      -------------- 文档头部标记：含脚本，样式表等等。
           -------------- 定义文档字符集、使用语言、作者等基本信息
        标题  -------------- 定义文档的标题
    
       -------------- 网页主体,是可见的页面内容
        Hello world -----------标题

与之间的文本描述网页
与之间的文本是可见的页面内容

与头部元素的容器：

定义关于文档的信息。
定义文档标题。<br> <base> 定义页面上所有链接的默认地址或默认目标。<br> <link> 定义文档与外部资源之间的关系。<br> <meta> 定义关于 HTML 文档的元数据。<br> <script> 定义客户端脚本。<br> <style> 定义文档的样式信息。</li> </ul> </li> </ul> <p>例子:</p> <pre><code class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>制作我的第一个网页

Hello world

HTML 文档类型

声明必须是 HTML 文档的第一行，位于标签之前。
作用：指示浏览器关于页面使用哪个 HTML 版本进行编写的指令。

//HTML 5


//HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。


//HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。


//HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。


//XHTML 1.0

HTML 标记标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签分为单标记和双标记：
- 单标记：<标记名称属性名称="属性值" ... />，比如
- 双标记：<标记名称属性名称="属性值" ... >，比如和；第一个标签是开始标签，第二个标签是结束标签。

HTML 属性

属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

属性    值&描述
class 规定元素的类名（classname）
id        规定元素的唯一 id
name    名称，一般也是唯一的
style 规定元素的行内样式（inline style）
title 规定元素的额外信息（可在工具提示中显示）
...

注意：实际中很少用到，都通过css和js来设置！

注释

//注释:
百度一下 你不知道 

//注释一行代码


//条件注释

㈢元素(标签+属性+文本)

HTML 元素：

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容;某些 HTML 元素具有空内容（empty content）
大多数 HTML 元素可以嵌套。

1. 文字

字体加粗
斜体字体
下划线
删除线

上标：X²
下标：Y₃

//字体相关属性：
字体，添加属性值  
size的值是1~7；color的表达方式：英语单词 RGB 十六进制

2. 标题段落换行水平线

//标题:
1号标题
2号标题
3号标题
4号标题
5号标题
6号标题


//段落：
第一段
第二段
第三段
第四段


//换行：
                 

  //换行


//水平线:


  
 //随屏幕百分比变化

3. 图片超链接锚点链接

/* 相对路径和绝对路径
 绝对路径：协议+主机+路径+文档
 相对路径：./ 当前目录  ../ 父级目录   / 根目录   ../../父目录的父目录

URL：scheme://host.domain:port/path/filename
*/


//图像:

[站外图片上传中……(4)]

属性：
scr    //source 图像的URL地址
title  //鼠标悬停显示的图片描述
alt    //在浏览器无法载入图像时展示给读者提示的信息
width
height
broder //边框



//超链接：



href: 链接地址
target: 定义被链接的文档在何处显示  _blank(新标签打开)  
                                _self (当前标签打开) 
                                _parent
                                _top


//锚点链接:定义一个唯一的'id' 赋给href 实现跳转
点击前往第七段
第七段

4. HTML的实体

在 HTML 中，某些字符是预留的：小于号（<）和 大于号（>），会误认为是标签。
因此，在 HTML 源代码中使用字符实体（character entities）来显示预留字符。
   //空格
&quto;  //引号
¥  //￥
× 
&divede;

HTML的实体.png

5. 列表: ol ul li

分为：
   有序列表: 
   & 
   无序列表:

1）有序列表： 用于显示具有统一特征的有序数据


  新闻1
  新闻2
  新闻3
  新闻4


属性   值              描述
type   1 数字(默认)    排序
       a 字母
       A 大写字母A
       i 小写罗马
       I 大写罗马
start  数字           起始数字


2）无序列表：用于显示同一特征的无限数据


  ...
  ...
  ...


属性   值                  
type   disc 实心圆(默认)     
       circle  空心圆
       square 实心矩形
       none  无

6. 表格: table

用途：table元素的作用是显示表格化的数据！
table元素可以嵌套。

//用途：table元素的作用是显示表格化的数据！

  ---------表格
     ---------行
      ---------单元格(字体加粗)
      ---------单元格
    内容 内容 内容
  



table属性               值           
width
height
bgcolor           背景颜色（英语颜色；RGB；十六进制）
background        背景图片
border
bordercolor
cellpadding       单元格与内容之间的间距
cellspacing       单元格与单元格的边距
align  


tr属性            值
align           (left|center|right)
bgcolor         (英文颜色|rgb（255，255，255）|十六进制)
valign          垂直对齐方式（top|middle|bottom）



th td属性         值
align           (left|center|right)
bgcolor         (英文颜色|rgb（255，255，255）|十六进制)
valign          垂直对齐方式（top|middle|bottom）
rowspan         行合并
clospan         列合并




  
    表格的表头：合并3列
    合并5行
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  





//表格的嵌套

  
    [站外图片上传中……(5)]
    
      
        
          JEEP 牧马人
        
        
          姓名
          CwLife

内容	内容	内容

7. 表单: form

作用：用于收集用户输入;
表单元素:

根据不同的 type 属性，可以变化为多种形态。
定义下拉列表。
定义多行输入字段（文本域）。
定义可点击的按钮。

作用：用于收集用户输入;
表单元素: 指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等


  表单元素...


属性
name      表单的名字
method    规定在提交表单时所用的方法：get/post
action    定义在提交表单时执行的动作




常用的表单元素:

  根据不同的 type 属性，可以变化为多种形态。
  定义下拉列表。
  定义多行输入字段（文本域）。
 定义可点击的按钮。

文本框： 定义供文本输入的单行输入字段。


密码框： 定义密码字段。


多选勾选控件： 定义复选框


单选勾选控件： 定义单选按钮。


提交表单按钮： 定义提交表单数据至表单处理程序的按钮。


重置表单按钮：


上传文件按钮：


隐藏域:


按钮：





多行文本控件：
  文本内容

 

下拉框控件：


下拉选项的分组：

  
  
  



//e.g.
  



按钮：




实例：


  用户名：
  

  密 码：
  
  多选一
  多选二
  多选三
  
  
  男 
  女

实践：

用户注册
用户名:
密码:
性别:	男女保密
爱好:	唱歌跳舞绘画书法篮球足球乒乓球游泳溜冰
家乡:
自我介绍:	请输入自我介绍:

实例结果：

8. 框架: frameset

//通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

1. 框架结构标签：
作用：定义如何将窗口分割
属性名  值
rows  横向分割（固定值px|百分比|*）有三种写法:（200，300，500）（20%，30%,*）（20%,*,*）
cols  纵向分割（固定值px|百分比|*）
border 边框宽度（px）
frameborder 是否显示边框（0|1） 0-不显示 1-显示



2.框架标签：
作用：定义了放置在每个框架中的HTML文档。
属性
scr    URL链接
name   窗口名称
scrolling    滚动条，默认显示（no）
noresize     边框是否可以被拖动（noresize）


//e.g.:设置一个两列的框架集: 第一列占据浏览器窗口的 25%。第二列占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中

   
   




3.内联框架：
作用：用于在网页内显示网页




4. noframes标签: 
用于为不支持框架集的浏览器显示文本

e.g.
对比起，您的浏览器不支持框架集类型

框架集练习：后台管理系统

//home.html
 
 
 
    
   框架集练习--后台管理系统 
 
      
         
          
              
              
        
    





//.head.html
 
 
 
    
   制作我的第一个网页 
 
 
   后台管理系统
 




//leftnavi.html
 
   
     选择一
     网页首页
     百度主页
     新浪中国
     选择一
     选择一
     选择一
     选择一
   
 


//right.html

9 样式和脚本

//样式标签：  
//脚本标签：

10. 块: div span

HTML 元素被定义为块级元素或内联元素。

块级元素：以新行来显示。
内联元素：不会以新行来显示。

//div和span标签

 元素是块级元素，常用于组合其他 HTML 元素的容器，进行文档布局。---
 元素是内联元素，常用作文本的容器。
  
  
块级元素：

  //常用的布局元素
...









内联元素：




  //文本标签

HTML知识点整理

HTML

㈠HTML入门

HTML 编辑器

㈡ HTML文档结构

HTML文档基本结构

Hello world

Hello world

HTML 文档类型

HTML 标记标签

HTML 属性

注释

㈢ 元素(标签+属性+文本)

1. 文字

2. 标题 段落 换行 水平线

1号标题

2号标题

3号标题

4号标题

5号标题

6号标题

3. 图片 超链接 锚点链接

4. HTML的实体

5. 列表: ol ul li

6. 表格: table

7. 表单: form

8. 框架: frameset

框架集练习：后台管理系统

后台管理系统

9 样式和脚本

10. 块: div span

你可能感兴趣的:(HTML知识点整理)

㈢元素(标签+属性+文本)

2. 标题段落换行水平线

3. 图片超链接锚点链接