HTML笔记

一、HTML简介

　　1，HTML (Hyper Text Mark-up Language) 超文本标记语言，是一种编程语言，也可以说是一种标准、规范。

　　2，HTML提供了一系列标记（标签），每个标记都有不同的含义和作用，浏览器根据标记的含义把内容显示到浏览器页面上

　　3，超文本：页面不仅可以包含普通文本，还可以包含图片、链接、音乐、程序等非文本内容

　　4，学习HTML主要是学习常用标签的用法和语法规范

二、基本标签

　　<!DOCTYPE> 定义文档类型，表明该文档的类型和版本（了解）
　　<html> 定义 HTML 文档（页面）
　　<title> 定义文档的标题
　　<meta>定义文档的元数据，影响浏览器对页面的解析处理
　　<body> 定义文档的主体
　　<h1> ~ <h6> 定义 标题文本
　　<p> 定义段落文本
　　<br> 定义换行
　　<hr> 定义水平线
　　<!--...--> 定义注释

三、列表标签

　　1，无序列表

　　　　<ul> 在页面上显示一个无序列表（type属性决定图标样式）
　　　　<li> 表示一个列表项

　　2，有序列表

　　　　<ol>：在页面上显示一个有序列表（type属性：1 a A i I）
　　　　<li>：表示一个列表项

　　3，自定义列表
　　　　dl：在页面上显示一个自定义列表

　　　　dt：定义父节点列表项

　　　　dd：定义子节点列表项

　　　　注意：dt和dl不是嵌套关系，而是并列关系

四、语法规范

　　1，标签成对出现，有开始标签就需要有结束标签

　　2，标签不区分大小写，但建议使用小写

　　3，一对标签的内容可以为空、文本、或者其他标签（标签可以嵌套）

　　4，如果一对标签的内部总是为空，可以简写为单标记形式，如<br/>

　　5，两对标签不可以交叉

　　6，标签可以包含若干属性，属性之间使用空格隔开，属性之间没有顺序

　　7，一些标签需要配合使用，共同完成一件复杂的事情

　　8，浏览器把若干连续的空白字符（空格符、换行符、制表符）处理成一个空格的效果

　　注意：最开始为了尽快推广HTML，浏览器对HTML文档的语法要求并不严格，这导致那些不规范的HTML代码也会被浏览器正常解析

五、文本显示效果标签

　　在最开始的时候，HTML使用标签控制文本的显示效果，随着技术的发展，开始使用CSS语言控制页面的效果，
　　这些文本显示效果标签不再建议使用

　　<small>小号文本
　　<big>大号文本
　　<b>粗体文本
　　<i>斜体文本
　　<u>加下划线文本
　　<s>加删除线文本
　　<strike>加删除线文本
　　<center>居中文本
　　<em>强调文本
　　<strong>语气更为强烈的强调文本
　　<sup>上标文本
　　<sub>下表文本
　　<font>文本的字体、尺寸和颜色

六、HTML实体字符

　　在HTML中，有一些特殊字符，如 > < " & 具有特殊含义，在使用时容易造成冲突，另外 © ® × ÷ 等字符在键盘上没有对应的按键

　　为了方便开发者灵活使用这些字符，HTML提供了对应的实体字符供开发者使用

　　空格： &nbsp;
　　小于号 &lt;
　　大于号 &gt;
　　和号 &amp;
　　双引号 &quot;
　　注册商标 &reg;
　　乘号 &times;
　　除号 &divide;

七、表格标签

　　<table> 定义一个表格整体
　　<caption> 定义表格标题
　　<tr> 定义表格中的行
　　<td> 定义行中的单元格（colspan、rowspan 属性可以合并单元格）
　　<thead> 表头
　　<th> 定义表格中的表头单元格
　　<tbody> 表格主体，可用于大表格分段显示优化
　　<tfoot> 表格的脚注

　　表格单像素边框效果 <table border="1" cellspacing="0px" style="border-collapse: collapse">

八、超链接标签<a>
　　1，链接到外部资源：
　　　　<a href="http://www.rupeng.com/index.shtml">如鹏网</a>
　　　　<a href="人丑就要多读书.jpg">人丑就要多读书.jpg</a>
　　　　<a href="人丑就要多读书.zip">人丑就要多读书.zip</a>

　　　　超链接只是指定资源的位置，浏览器在获得这些资源后处理时，默认的，如果浏览器可以解析显示，浏览器就会直接解析显示，
　　　　否则，就以文件下载的方式处理（当然，也可以指定强制下载）

　　　　target属性：指定打开资源的位置（_self、_blank）

　　2，连接到页面内的另一个<a>标签

　　　　<a name = "mao">定义一个位置（锚）</a>
　　　　<a href="#mao">指定这个位置</a>

九、图片标签<img>

　　1，用来在页面上显示一个图片
　　　　<img src="人丑就要多读书.jpg" alt="图片未找到"/>
　　　　src 属性：指定图片资源位置
　　　　alt 属性：当找不到src指定的图片资源时，显示在浏览器上的说明提示
　　　　width、height属性 ：指定图片显示的宽、高
　　　　border：指定图片边框的宽度

　　　　注意：src的值尽量写资源的相对路径，因为很多浏览器这里不支持绝对路径

十、表单标签

　　　　<form> 用来定义供用户输入信息的表单，收集用户信息
　　　　<input> 可以定义多种输入控件，
　　　　有：text、password、radio、checkbox、file、hidden、button、submit、reset
　　　　<label> 定义 表单控件的标注
　　　　<textarea> 定义多行的文本输入控件
　　　　<select> 定义下拉列表 、<option> 定义下拉列表的选项
　　　　<button> 定义普通按钮
　　　　（在输入框中按回车键和点击submit按钮效果相同）

十一、框架标签

　　1，<frameset>,<frame>定义框架集（已过时）

　　<html>
　　　　<head></head>
　　　　　　<frameset rows="100px,*">
　　　　　　　　<frame src="head.html"/>
　　　　　　　　<frameset cols="20%,*">
　　　　　　　　　　<frame src="left.html"/>
　　　　　　　　　　<frame src="main.html"/>
　　　　　　　　</frameset>
　　　　　　</frameset>
　　</html>

2，<iframe>定义内嵌框架
　　<iframe src="inner.html" width="600px" height="370px"></iframe>

十二、页面布局标签<div>、<span>

　　<div>(division)和<span>都可以把页面分成相对独立的各个部分（分区），方便布局
　　不同之处在于div默认有换行效果，而span则没有

　　div+css 布局方式是现在的主流，具体将在css课程中讲解
　　现在有种共识，网页内容要和表现形式分离，也就是说html标签主要负责定义网页的内容，
　　如一段文本，css负责定义这些内容的显示样式，如文本的颜色

如鹏网学习笔记（七）HTML基础的更多相关文章

  1. 如鹏网学习笔记（十五）ASP.NET MVC核心基础笔记

    一.ASP.Net MVC简介 1,什么是ASP.NET MVC? HttpHandler是ASP.net的底层机制,如果直接使用HttpHandler进行开发难度比较大.工作量大.因此提供了ASP. ...

  2. 如鹏网学习笔记（四）.Net常用类库

    .Net常用类库 一.String成员方法(常用) 1,bool Contains(string str) 判断字符串对象是否包含给定的内容 2,bool StartsWith(String str) ...

  3. 如鹏网学习笔记（五）MySql基础

    MySQL基础 一.数据库概念 1,网友装备信息.论坛帖子信息.QQ好友关系信息.学籍管理系统中的学生信息等都要“持久化”的保存到一个地方, 如果通过IO写到文件中,那么会非常麻烦,而且不利于多人共享 ...

  4. 如鹏网学习笔记（六）ADO.Net基础

    ADO.Net基础 一.ADO.Net简介 1,程序要通过SQL语句自动化的操作数据库,必须要用一个类库, 类库要提供execute("insert into ...")/exec ...

  5. 如鹏网学习笔记（十）DOM

    DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作 ...

  6. 如鹏网学习笔记（九）JavaScript

    JavaScript笔记 一.JavaScript简介 1,JavaScript是一种计算机编程语言,可以像等其他编程语言那样定义变量,执行循环等. 2,JavaScript代码主要执行在浏览器上,为 ...

  7. Java基础学习笔记七 Java基础语法之继承和抽象类

    继承 继承的概念 在现实生活中,继承一般指的是子女继承父辈的财产.在程序中,继承描述的是事物之间的所属关系,通过继承可以使多种事物之间形成一种关系体系. 例如公司中的研发部员工和维护部员工都属于员工, ...

  8. 如鹏网学习笔记（十四）ASP.NET

    Asp.net笔记 一.Socket类 进行网络编程的类,可以在两台计算机之间进行网络通讯 过程: 向服务器发送指令: GET /index.html HTTP/1.1 Host:127.0.0.1: ...

  9. 如鹏网学习笔记（十三）EasyUI

    一.EasyUI简介 是一组基于JQuery的UI插件集合 主要作用:为JQuery对象提供新的方法,实现新的功能 可以快速创建出简洁.友好.美观的页面,非常适合做网站后台管理页面(不够漂亮,不适合做 ...

随机推荐

  1. djang系列5.5-- 图书管理系统实例

    一.表格设计 E-R图 分析图 models.py from django.db import models # Create your models here. class Author(model ...

  2. WPF 无边框拖动

    无边框之后的拖动方法有三种. 我个人是喜欢第一和第三的方法,看个人去需求. 第三种代码比较仓促,有需要者可以立马用,或者稍作整理修改. 对于WIN10 .NET 4.5以上的框架可以使用 WIndow ...

  3. GO学习笔记 - 数据类型推导

    官方教程:https://tour.go-zh.org/basics/14 在定义一个变量却并不显式指定其类型时(使用 := 语法或者 var = 表达式语法), 变量的类型由(等号)右侧的值推导得出 ...

  4. python 将列表嵌套字典的unicode字符串转换为str格式的字符串的方法

    今天在进行django开发的过程中遇到了一个非常棘手的问题, 因为需求原因, 需要将一份数据存为json格式到数据库中, 如下面这种格式: list_1 = [{"name":&q ...

  5. [iOS笔试600题]一、语法篇（共有147题）

    [A]1. @property 的作用是申明属性及真特性?［判断题］ A.正确 B.错误 [A]2. @synthesize的作用是自动笠成属性的访问器(getter/setter)方法?［判断题］ ...

  6. 总结day3 ---- 进制转换,字符串切片,字符串常用方法.,for 循环,

    前情提要: int 的相关操作 进制转换 bit_lenth() str 的索引,以及常用的相关方法 for 循环 索引 切片 相关方法 一  : int 的相关操作 int 主要用于生活中的计算问题 ...

  7. php实现图片base64编码解码

    1.图片的base64编码 /*首先要确定图片的类型,需要安装一个php拓展php_fileinfo 如已安装可以在extension_dir目录下找到php_fileinfo.dll(windows ...

  8. 性能测试 vs 负载测试 vs 压力测试

    在做一些软件测试工作时,常常会被提及性能测试.负载测试.压力测试,这也是在软件测试方面最容易混淆的三个概念.之前和一个测试大牛聊天,他和我说常常面试一些测试人员会问一些这样的问题,大多人认为负载测试等 ...

  9. Learn to See in the Dark（论文阅读笔记）

    最近做项目看了一篇论文<Learn to See in the Dark>下面是一些论文笔记 概括: 这篇论文主要介绍的是在低光照的环境下用两个标准的FCN网络,通过控制变量法来对比不同的 ...

  10. Redis实现分布式存储Session

    前言: 在单个项目时,一般都是用HttpSession接口存储当前登录用户的信息.但是在分布式项目的情况下,session是不会共享的,那怎么实现session共享呢?往下看.... 一.准备工作(基 ...