我的HTML笔记

HTML（Hypertext Marked Language）“超文本标记语言”。

1.HTML的声明

<!DOCTYPE html>

2.HTML的基本结构

<!DOCTYPE html>

<html>

<head>

    <title>标题</title>

    <!--meta标签提供有关页面的元信息 -->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--link标签定义文档与外部资源的关系，例如样式表 -->

    <link rel="stylesheet" type="text/css" href="../style.css" />

    <!--script标签定义客户端脚本，比如 JavaScript -->

    <script type="text/javascript" src="js/js001.js"></script>

</head>

<body>

内容

</body>

</html>

3.HTML基础标签

注解

<!--文字注释-->

标题

<h1> ～ <h6>

段落

<p>…</p>

分区

<div>…</div>

换行

<br />

水平线

<hr />

4.HTML标签属性

属性	意义
class	规定元素的一个或多个类名
id	规定元素的唯一 id
style	规定元素的行内 CSS 样式
title	规定有关元素的额外信息
tabindex	规定元素的 tab 键次序
hidden	隐藏当前标签，不显示在页面上

5.HTML格式化

标签	意义
`<b>`	定义粗体文本
`<i>`	定义斜体字
`<strong>`	定义加粗
`<sub>`	定义下标字
`<sup>`	定义上标字
`<del>`	定义删除字
`<code>`	定义计算机代码
`<abbr>`	定义缩写
`<acronym>`	定义首字母缩写
`<address>`	定义地址
`<div>`	定义文档中的节或区域（块级）
`<span>`	定义文档中的行内的小块或区域

6.HTML超链接

href属性

    <a href=“http://www. baidu.com”>百度</a>

target属性（_parent,_blank,_self,_top）

    <a href=“http://www. baidu.com” target=_blank >百度</a>

title属性

     <a href=“http://www. baidu.com” title=“搜索引擎” >百度</a>

name属性（要设置一对）

    <a href="#C1">参见第一章</a>

    <a name="C1">第一章</a>

    <a href=“other.html#C1"></a>

7.HTML图像

<img src=“filename” alt=“提示文字” width=“100px” height=“50px” align=“left”>

<a href=“index.html”><img src=“1.jpg”></a>

8.相对路径和绝对路径

相对路径

   <a href = “文件名">同一个目录 </a>

   <a href = “../文件夹名/文件名">上级目录</a>

   <a href = “文件夹名/文件名”>下级目录</a>

绝对路径

指带域名的文件的完整路径。

假设域名www.admin.com ,在www根目录下放了一个文件index.html ，这个文件的绝对路径就是： http://www.admin.com/index.html

9.HTML表格

基本语法

  <table>

           <tr>（行标记）

               <th>…</th>(表头)

               …

           </tr>

           <tr>

               <td>…</td>（单元格标记）

               …

           </tr>

     </table>

<table>标签属性

属性	表示
边框	border
宽度	width
高度	height
边框颜色	bordercolor
背景颜色	bgcolor
单元格间距	cellspacing
单元格边距	cellpadding
对齐	align( left, center, right)
边框式样	frame( above, below, hsides(上下), vsides(左右) )
内部边框式样	rules( all, cols, rows)

<tr> 标签属性

属性	表示
对齐	align( left, center, right) ,vlign( top, middle, bottom)
边框颜色	bordercolor
背景颜色	bgcolor

<td> 与<th> 标签属性

与标记相似, 多出了width, height

属性	表示
跨行	rowspan
跨列	colspan

10. HTML列表

有序列表(Ordered List)

由<ol>开始，每个列表项由<li>开始换行。

属性： reversed，start，type

无序列表(Unordered List)

由<ul>开始，每个列表项由<li>开始换行。

属性： type（disc,circle,square）

<!-- 有序 -->

<ol>

    <li>Coffee</li>

    <li>Milk</li>

</ol>

<!-- 无序 -->

<ul>

    <li>Coffee</li>

    <li>Milk</li>

</ul>

嵌套列表

ul,ol组合嵌套使用

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

11.HTML表单

主要用于采集和提交用户输入的信息

基本语法

    <form name=“formname” method=“method” action=“url” target=“target_win”>

部分<form>内标记

    <input>…</input>

    <select>…</select>

    <option>…</option>

    <textarea>… <textarea>

<input> 标签

 <input type=“域的类型’ name=“域的名称”>

Type属性值

Type属性值	描述
Text	文字域
Password	密码域
File	文件域
Checkbox	复选框
Radio	单选框
Button	按钮
Submit	提交按钮
Reset	重置按钮
Hidden	隐藏域
Image	图像提交按钮

Get &post方法

Get:

get方法是将表单内容附在URL地址后面，对提交信息的长度有限制，不可超过8192个字节，并且不具有保密性，不能传送非ASCII码字符。

Post：

post方法是将表单中的数据包含在表单的主体中一起传送到服务器上的，没有字符的限制，在浏览器的地址栏不显示提交的信息。

当不指明是哪种方式时，默认为get方法。

12.HTML框架

<frameset></frameset>决定如何划分Frame。<frameset>有列分布cols属性和行分布rows属性。

 <frameset cols="25%,75%">

     <frame src="Frame_a.html" scrolling=“yes/no/auto" >

     <frame src="Frame_b.html">

 </frameset>

13.HTML实体

显示结果	描述	实体名称	实体编号
	空格	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`'`(IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日圆	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

14.HTML编写规范

元素正确嵌套

空标签也被关闭 <br/>

属性使用小写

属性值用引号包围

我的HTML笔记的更多相关文章

git-简单流程（学习笔记）
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕笔记http://www.cnbl ...
PHP-自定义模板-学习笔记
1. 开始这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
PHP-会员登录与注册例子解析-学习笔记
1.开始最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
NET Core-学习笔记（三）
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
springMVC学习笔记--知识点总结1
以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...
读书笔记汇总 - SQL必知必会（第4版）
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
2014年暑假c#学习笔记目录
2014年暑假c#学习笔记一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

[原创]android自定义动画的一点感悟
android提供了一系列的动画处理api,包括animator以及animation等.由于动画效果是根据人眼视觉残留原理形成的,因此动画过程中android需要不断频繁的更新view的相关属性,由 ...
FindProcDLL::FindProc 和 KillProcDLL::KillProc，必须使用WPF x86编译出来的程序
如果是 WPF 编写的exe,想用NSIS打包. 脚本里面要注意了,如果使用了 FindProcDLL::FindProc 和 KillProcDLL::KillProc, 那么WPF 的编译选项必须 ...
android 九宫加密记事本
自己写的超级安全记事本,用PBEWithMD5AndDES加密sqlite内容几乎无法破解, 九宫点密码登录, 支持备份到SDcard,email,network drivers etc. 附件Apk ...
（一）u-boot-nand.bin的下载
编译.连接好u-boot-nand.bin首先想到是如何下载到OK6410上,有3种方法: (1)dnw方法 (2)tftp方法 (3)sd卡方法 3种方法各有优点和缺点,下面逐一介绍: 一.dnw方 ...
jQuery的ajax 方法提交多个对象数组问题 C# traditional $.param
当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List<T>接收;但老是不成功如下面代码 "}]; "}]; function addUser( ...
再谈LRU双链表内存管理
N年前我写了个双链表也发了博客,还添了代码.但是那个代码不但复杂,而且还有有问题的,一直懒得整理,放在空间误导别人.最近在写服务端,今天抽点空补一篇. 关于LRU网上随便搜,有过后端经验的人应该很多都 ...
引入HBase依赖包带来的麻烦
在一个项目里用到HBase做底层存储,使用maven来管理相关Jar包依赖,用maven来管理依赖包,特别不爽的就是他会将你引入Jar包自己的依赖都搞进来,经常会出现一些类和方法冲突找不到等状况.这次 ...
如何让js不产生冲突，避免全局变量的泛滥，合理运用命名空间
为了避免变量之间的覆盖与冲突,可以生成命名空间,命名空间是一种特殊的前缀,在js中,通过{ }对象实现. 在不同的匿名函数中,根据功能声明一个不同的命名空间,每个匿名函数中GLOBAL对象的属性都不直 ...
Java-基本的程序设计结构
Java-基本的程序设计结构 >注释 Java的注释分为三种情况第一种://开头第二种:"/*" 开头 "*/"结尾上面两种情况跟C#.C++.Ob ...
windbg入门
1.下载安装windbg Windows 10 调试工具 (WinDbg) 如果你仅需要 Windows 10 调试工具,而不需要 WDK 10 或 Visual Studio 2015,你可以将调试 ...

显示结果	描述	实体名称	实体编号
	空格	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`'`(IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日圆	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`'`(IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日圆	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

我的HTML笔记

我的HTML笔记的更多相关文章

随机推荐

热门专题

显示结果	描述	实体名称	实体编号
	空格	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`'`(IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日圆	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`