我的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之 ...

随机推荐

C#实现IDispose接口
.net的GC机制有两个问题:首先GC并不能释放所有资源,它更不能释放非托管资源.其次,GC也不是实时的,所有GC存在不确定性.为了解决这个问题donet提供了析构函数 public class Te ...
Android手机的 storage
老外的一段解释 -------------------------------------------------------------------------------------------- ...
IT Operations(IT 运营），运维的更价值化认识
一直想努力向别人(甚至包括从事运维的人)解释清楚什么是运维,发现很难! 6月20号,在InfoQ高效运维群里面,对运维创业做了一次激烈的讨论,很自然地,过程中不可避免的谈到运维苦逼和运维无法产品化的问 ...
Spark源码系列（四）图解作业生命周期
这一章我们探索了Spark作业的运行过程,但是没把整个过程描绘出来,好,跟着我走吧,let you know! 我们先回顾一下这个图,Driver Program是我们写的那个程序,它的核心是Spar ...
CSS - Transform(Translate) abnormal shadow in firefox
问题:当在Firefox中实现动画translate时,会出现虚影的状况: 经查找相关的解决方法,父容器添加样式:outline: 1px solid transparent;//即可解决问题. 但不 ...
saiku 展示优化
saiku版本:3.7.4 下面是修改步骤,如果觉得麻烦,可以直接下载源代码:https://github.com/lihehuo/saiku 1.关闭自动执行修改文件:saiku-ui/js/sa ...
NPM 与 left-pad 事件：我们是不是早已忘记该如何好好地编程？
转自:http://www.techug.com/npm-left-pad-have-we-forgotten-how-to-program 开发者朋友们,我们该谈一谈这个问题了.你们应该知道本周的 ...
本人独立博客：http://www.zjmainstay.cn
为了方便各种管理,本人创建了独立博客,博客地址:http://www.zjmainstay.cn 欢迎新老朋友围观.
[LeetCode] Combination Sum 回溯
Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...
ruby中字符的转换
1.将表格名转成class名 classify "book_comments".classify => "BookComment" 2.class名转 ...

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

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

我的HTML笔记

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

随机推荐

热门专题

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