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)* 号选择器:通配符, ...

随机推荐

吉特仓储管系统(开源)--使用Grunt压缩JS文件
在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩.文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找, ...
Unity随手记
过年11天假期,带娃带了7天,吃吃喝喝.也看了点书,<射雕英雄传>(书)看了一半,还有就是在看<unity官方案例精讲>这本. 随手记一些自觉有价值或者有意思的点. 1. 对脚 ...
[html5] 学习笔记-表单新增的元素与属性（续）
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
微服务框架概览之 Netty
Netty 是什么 Netty 提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序 Netty 架构图为什么选择Netty 通过对Netty的分析,我 ...
Python抓取第一网贷中国网贷理财每日收益率指数
链接:http://www.p2p001.com/licai/index/id/147.html 所需获取数据链接类似于:http://www.p2p001.com/licai/shownews/id ...
Sqlserver 链接服务器和同义词
在数据库的日常维护中,经常会遇到跨服务器的数据传输. 例如A服务器上的数据每天要从B服务器上去获取数据,然后插入到自己的服务器上.这种情况就要用到链接服务器了. 接下来,我就把我本机当作服务器A,17 ...
SUI Mobile
<header class="bar bar-nav"> <h1 class='title'>只有图标的表单</h1> </header& ...
游戏UI框架设计(一) : 架构设计理论篇
游戏UI框架设计(一) ---架构设计理论篇前几天(2017年2月)看到一篇文章,国内王健林.马云等大咖们看好的未来十大最有"钱途"产业中,排名第一的就是"泛娱乐&qu ...
Angular.js之内置过滤器学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
[Qt初级] 解决中QMainWindow和QDockWidget添加布局失败问题
初接触Qt,使用的教程是陆文周编写的<Qt5开发及实例>一书. 其中有关于QDockWidget.QStackedWidget这些类的介绍和使用实例. 要首先说明的是书上讲的非常的清楚,代 ...

HTML学习笔记汇总

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

随机推荐

热门专题