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

随机推荐

[iOS Xcode8]上传AppStore 无法构建版本没有➕号
最近iOS10出来了 Xcode也跟着升级到了8 想着App做个更新于是修改好了代码打算上传新包 ,无奈总是发现构建不了新版本经过各种蛋疼的查找.我列一下我的经验 1.如果是收费的App,那么是要 ...
glide 加载圆角图片
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABEIAAAD3CAIAAACW6Gb7AAAgAElEQVR4nOy9e1QbZf74//zO4XvOYz
Hbase0.98.4/Hadoop2.4.1整合小结【原创】
设定hbase的数据目录,修改conf/hbase-site.xml <configuration> <property> <name>hbase.cluster. ...
查看、关闭linux自启动网络服务
1.查看 netstat --tulnp ..master smtp 服务 2.关闭 /etc/init.d/服务 stop 停止 : start 启动 chkconfig 服务 off 关闭 ...
QTP对象管理
QTP对象库管理 - 动态绑定对象库文件:http://blog.csdn.net/testing_is_ ... le/details/20569843 用ObjectRepositoryUtil动 ...
jQuery easyui combobox级联及内容联想
1.需求:已有一个下拉框A表示地区,现新增需求,需要在A选择不同地区时,增加一个展示该地区所有城市的下拉框B, 由于城市较多,要求B能实现用户输入和模糊匹配展示功能. 2.实现: (1)首先在A下面把 ...
php XML 读写创建
一 .XML 读 1.1. 首先同目录定义好一个XML文件 : book.xml <?xml version="1.0" encoding="utf-8" ...
Codeforces Beta Round #13 C. Sequence （DP）
题目大意给一个数列,长度不超过 5000,每次可以将其中的一个数加 1 或者减 1,问,最少需要多少次操作,才能使得这个数列单调不降数列中每个数为 -109-109 中的一个数做法分析先这样考 ...
php分页类代码带分页样式效果(转)
php分页类代码,有漂亮的分页样式风格时间:2016-03-16 09:16:03来源:网络导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...
ArcGIS应用——四种计算图斑面积的方法
ArcGIS中有多种方法可计算出图斑面积,本文总结了四种方法,是否可堪称史上最全? 1.计算几何本人认为这是最适合非专业人士的方法,直接利用ArcGIS中的计算几何功能进行计算. a.首先添加一do ...

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

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

我的HTML笔记

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

随机推荐

热门专题

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