HTML学习笔记汇总

2021-07-26 16:23:05

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

想要学习网页制作的初学者可以通过本篇笔记初步掌握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字符实体

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

<:&lt;

>:&gt;

&:&amp;

￥:&ren;

×:&times;

÷:&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实现

超级连接

<a>内容</a>

常用属性:

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:字符集

网页自动刷新

<meta http-equiv="refresh" content="2">    //每隔两秒自动刷新网页

<meta http-equiv="refresh" content="2;url=http://baidu.com">    //两秒钟后跳到百度首页

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

<object>标记:是IE引入多媒体的标记

<embed>标记:是Netscape引入多媒体的标记

图像热点(图像地图)

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

标记结构:

<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为半径

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

上一篇：Android 五种方式实现Android底部导航栏


下一篇：Oracle表空间、段、区和块简述