HTML学习笔记汇总

笔记几乎涵盖了日常开发中全部的知识点以及相关注意事项

想要学习网页制作的初学者可以通过本篇笔记初步掌握HTML的使用,也可以将该笔记作为查阅资料查看

HTML简单结构

<html>

    <head>

        <title>首页</title>

    </head>

    <body>

        网页正文...

    </body>

</html>

html标记:告诉浏览器用什么代码编译

head标记:告诉浏览器汉字用什么字符集显示

body标记:只有放在这里面的才能在浏览器翻译后看到结果

Html文本修饰标记

<b></b>:没有属性,加粗

<i></i>:斜体

<u></u>:下划线

<s</s>:删除线

<sub></sub>:上标

<sup></sup>:下标

<font></font>:字体属性 size(大小,共7级,1小7大), face(字体), color(颜色)

Html排版标记

<p></p>:段落

常用属性:align:水平对齐方式,left,center,right

<br>:换行

<hr>:水平线:属性 size(粗细,单位px),color(颜色),width(宽度),noshade(去掉水平线阴影)

<pre></pre>:预排版标记,将保留所有空白字符(空格,换行符)

<h1>...<h6>:标题

常用属性:align水平对齐方式

&nbsp:一个半角空格

<div>和<span>标记

<div>是一个块元素,是一个没有任何意义的标记,但是又是使用最多的,通常要与css配合使用

<span>是一个行内元素,同理,也要与css配合使用

块元素:单独占一行

行内元素:多个行内元素,会排在同一行

Html字符实体

空格:  代表一个半角空格,一个汉字是两个字节,一个字节相当于一个半角空格

<:<

>:>

&:&

￥:&ren;

×:×

÷:&divides;

Html项目符号

<ul>

    <li>内容1</li>

    <li>内容2</li>

    <li>内容3</li>

</ul>

常用属性:type:取值 disc(小黑点),circle(空心圆), square(实心方块)

Html编号列表(有序列表)

<ol>

    <li>内容1</li>

    <li>内容1</li>

    <li>内容1</li>

</ol>

常用属性:type:取值:1,a,A,i,I

start:从第几个编号开始

滚动字幕标记

<marquee>滚动的内容</marquee>

常用属性:

direction:滚动方向:up,down,left,right

width:

height:

bgcolor:

scrollAmount:滚动步长,值越大,越快

scrollDelay:两步之间的停留时间

loop:循环滚动次数

图片标记:

常用属性:

width,height,border(边框),src(图片路径一般相对路径),align(水平对齐方式)(可以实现图文混排,只有左右可以实现)

hspace(图片与左右文字的距离),vspace(图片与上下文字的垂直距离)

注意:如果图片想等比例缩放,那只定义一个宽或一个高

图片想实现居中,可以用div包裹,用css的text-align实现

超级连接

常用属性:

href:目标文件的地址

target:目标文件的显示窗口:

取值:_blank:在新窗口打开 _self:在当前窗口,相当于替换(默认打开方式) _parent:在父级窗口打开 _top:在最顶级窗口打开

name:定义锚点连接的名称

锚点链接

含义:是在一个网页的不同区域进行跳转

定义锚点:<a name="锚点名称"></a>

锚点名称命名规则:可以包含字母,数字,下划线,但只能以字母开头

注意<a></a>之间没有内容

跳转到锚点:

语法:<a href="#锚点名称">要有内容</a>

<meta>标记

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

content-type:内容类型

content:详细内容类型介绍

text/html:网页是文本内容,html是文本中的小格式

charset:字符集

网页自动刷新

name属性

设置网页搜索关键字,设置版权信息,作者等

1.关键字 name="keywords"

2.描述信息 name="description"

XHTML编写规范

1.所有标记和属性必须全小写

2.单边标记必须关闭如<br> -> <br />

3.所有属性值必须加引号

4.所有属性必须有值如<hr noshade> -> <hr noshade="noshade" />

5.标记之间要合理嵌套

6.XHTML网页必须要有DTD文档类型定义代码

DTD文档类型定义

目的:是一种验证机制,验证语法是否合法

三大分类:

严格型(不能使用font,bgcolor等表现标记,必须通过css来取代),

过渡型(可以继续使用HTML中表现写法

框架型:可以显示多个网页

表格标记

表格结构:

 <table>

        <tr>

            <td></td>

            <td></td>

        </tr>

</table>

tr表示行 td表示列,这个为一行两列的表格

表格属性:width,height,align,border,bordercolor,bgcolor,background,

cellpadding(单元格边线到内容的距离),cellspacing(单元格与单元格之间的距离),rules(合并单元格边框线值 all 兼容性不好,用css取代)

<tr>属性行标记

bgcolor,height,align,valign(垂直居中:取值:top,middle,bottom)

<td>和<th>属性

td 是普通单元格 th是标题单元格,居中加粗显示

属性:rowspan 上下合并单元格 colspan 左右合并单元格` 合并属性要放在第一个单元格中

colspan="2" 如果两个单元格合并要去掉一个单元格,否则会多出一个

表单:

表单的概念:表单主要用来获取客户端用户数据的

表单的结构:

<form name="form1">

    用户名:<input type="text" name="username"/>

    密码:<input type="password" name="userpwd"/>

    <input type="submit" value="提交表单"/>

</form>

<form>标记属性--块元素

name:给表单起名,给js做客户端表单验证

method:表单的提交方式,get或post

action:指定表单的处理程序,一般为php文件如果action为空,表单数据提交给当前文件

enctype:指定表单数据的编码方式(解密方式).这个属性只能用在method方法为post情况下

两个取值:application/x-www-form-urldecoded 默认加密方式

multipart/form-data 如果上传文件必须用这个

GET方法和POST方式

get方式(基本用不到):是将表单数据追加到action指定的处理程序的后面,然后向服务器发送请求

action文件和查询字符串之间用?隔开

每两个表单元素的名称和值之间用&隔开

表单名称和值之间用=连接

get方式特点

不能提交敏感数据

只能提交少量数据,因为地址栏长度有限制

get方式不能上传附件

post方式:直接传给表单处理程序

post方式特点

提交数据相对安全

可以提交海量数据

可以上传附件

单行文本框:

语法格式:<input type="text" 属性="值"/>

常用属性:name:文本框名称(字母数字下划线,字母开头)

value:文本框中的值

size:文本框长度,以字符为单位

maxlength:最多可以输入多少个字符

readonly:只读属性,可以选中,不能修改:属性名和值一样

disabled:禁用属性,不能选中,不能修改,属性名和值一样

单选按钮

语法格式:<input type="radio" 属性="值"/>

常用属性:name,value,checked(默认选择属性和值一样)

复选框:

语法格式:<input type="checkbox" 属性="值"/>

常用属性:name,value,checked

下拉列表:

<select name="city">

    <option value="北京市" >北京市<option/>

<select/>

文本区域

语法格式<textarea name="名称" cols="宽度" rows="高度">默认文本</textarea>

各种按钮

提交按钮:<input type="submit" value="提交表单" />

重置按钮:<input type="reset" value="重置" />

图片按钮:<input type="image" src="图片地址" /> //和提交按钮功能一致

普通按钮:<input type="button" onclick="jacascript:window.close()" value="关闭窗口" />

普通按钮本身是不具有任何功能,通常要与js配合使用,来实现相应功能

上传文件域

语法格式:<input type="file" 属性="值" />

常用属性:name,value(为只读属性)

注意:想上传文件,需在表单中指定属性 enctype="multipart/form-data"

隐藏域

功能:看不见的一个框,传递一些值,而这个值不想被看到

语法格式:<input type="hidden" name="名称" value="默认值" />

<caption>表格标题

语法格式:<caption>标题内容</caption>

提示:是<table>的子标记

HTML的注释

注意:注释内容是不会显示的,是为了将来维护网页

网页多媒体

网页上的视频一般都是Flash格式,因为Flash的兼容性比较好,Flash文件压缩后小

Flash文件扩展名.swf

图像热点(图像地图)

给一张图片加多个链接(默认一张图只能加一个链接)

标记结构:

<img src="" usemap="#map"/>

<map id="map" >

    <area shape="热区形状" coords="热区坐标" href="热区地址" />

</map>

<area>常用属性:

shape:热区形状,取值:rect(矩形),circle(圆形),polygon(多边形)

coords:热区坐标

如果shape=rect时:coords="x1,y1,x2,y2",(x1,y1)为矩形左上角的坐标值,(x2,y2)为矩形右下角的坐标值

如果shape=circle时:coords="x,y,r",其中,(x,y)为圆心坐标,r为半径

框架部分将在下一篇博客推出,敬请期待......

HTML学习笔记汇总的更多相关文章

NGUI学习笔记汇总
NGUI学习笔记汇总,适用于NGUI2.x,NGUI3.x 一.NGUI的直接用法 1. Attach a Collider:表示为NGUI的某些物体添加碰撞器,如果界面是用NGUI做的,只能这样添加 ...
【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总
当前标签: ASP.NET Core快速入门共2页: 上一页 1 2 任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...
前端学习笔记汇总（之merge方法）
学习笔记关于Jquery的merge方法话不多说,先上图使用jquery时,其智能提示如上,大概意思就是合并first和second两个数组,得到的结果是first+(second去重后的结果) ...
DeepLearning.ai学习笔记汇总
第一章神经网络与深度学习(Neural Network & Deeplearning) DeepLearning.ai学习笔记(一)神经网络和深度学习--Week3浅层神经网络 DeepLe ...
shell学习笔记汇总
1.shell脚本中函数使用函数定义在前,调用在后,顺序反了就没有效果了.函数调用为:函数名参数列表函数内部通过以下变量访问函数的参数:shell脚本函数中: $0: 这个脚本的名字 $n: 这 ...
Mybatis学习笔记汇总（包括源码和jar包）
博客整理 Mybatis学习笔记(一)--对原生jdbc中问题的总结 Mybatis学习笔记(二)--Mybatis框架 Mybatis学习笔记(三)--入门程序 MyBatis学习笔记(四)--入门 ...
IdentityServer4学习笔记汇总(实现传送门在底部)
前言互联网时代,对信息和资源的保护越发苛刻,在所有应用中授权和认证是必不可少缺少的一部分.如果一个应用没有授权和认证那么这个应用就是不完整或者说不安全的应用.在.Net平台给我们提供了一套完整的授权 ...
Tensorflow入门学习笔记汇总
一.环境准备 1.安装python:下载地址https://www.python.org/downloads/windows/下载并安装(推荐python3) 2.安装对应python版本的库:htt ...
CSS学习笔记汇总
CSS语法格式:一个css规则,由一个选择器和一个格式声明语句构成例如:h1{color:red; font-size:14px;} CSS选择器: 1.基本选择器 1)* 号选择器:通配符, ...

随机推荐

c# 应用NPOI 获取Excel中的图片，保存至本地的算法
要求:读取excel中的图片,保存到指定路径思路: 利用NPOI中 GetAllPictures()方法获取图片信息步骤: 1.新建一个Windows窗体应用程序 2.桌面新建一个excel,贴 ...
CSS3 3D变形效果
CSS3 3D变形效果 CSS3 transform3D变形 transform的含义是:改变,使-变形:转换三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换 ...
Professional C# 6 and .NET Core 1.0 - Chapter 39 Windows Services
本文内容为转载,供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - Chapter 39 Windows Servi ...
self、 superclass 、 super的区别
self. superclass . super self : 当前方法的调用者 class:获取方法调用者的类对象 superclass:获取方法调用者的父类对象 super:不是一个指针,编译指示 ...
SmartRoute之远程接口调用和负载
基于接口的调用远比基于基础消息交互来得更简单和便于维护,特别在业务展现上,接口作为业务表现更适合其便利性.为了让SmartRoute更适合业务应用集成,在新的一年开始SmartRoute集成了远程接口 ...
Fiddler教程【转】
阅读目录 Fiddler的基本介绍 Fiddler的工作原理同类的其它工具 Fiddler如何捕获Firefox的会话 Fiddler如何捕获HTTPS会话 Fiddler的基本界面 Fiddler ...
Visual Studio命令行创建库文件lib
Visual Studio命令行创建库文件lib OS:win7 旗舰版SP1 64位编译器: VS 2013 express 的cl 建一个文件Static_Lib.h,源代码如下 #ifndef ...
微信小程序，超能装的实例教程
序言开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...
Spring+SpringMVC+MyBatis+easyUI整合基础篇（二）牛刀小试
承接上文,该篇即为项目整合的介绍了. 废话不多说,先把源码和项目地址放上来,重点要写在前面. github地址为ssm-demo 你也可以先体验一下实际效果,点击这里就行啦账号:admin 密码:1 ...
整型转字符串(convert int to char)优化实践
0. 前言其实基本都没什么机会做这么一个基础的优化,一般基础库里就有函数可以直接拿来用. 这里以snprintf为基准,给大家展示一下每一个优化带来的些许收益. 1. 优化过程 1.最初使用的是sn ...

HTML学习笔记汇总

HTML学习笔记汇总的更多相关文章

随机推荐

热门专题