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

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

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

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

  1. NGUI学习笔记汇总

    NGUI学习笔记汇总,适用于NGUI2.x,NGUI3.x 一.NGUI的直接用法 1. Attach a Collider:表示为NGUI的某些物体添加碰撞器,如果界面是用NGUI做的,只能这样添加 ...

  2. 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2  任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...

  3. 前端学习笔记汇总（之merge方法）

    学习笔记 关于Jquery的merge方法 话不多说,先上图 使用jquery时,其智能提示如上,大概意思就是合并first和second两个数组,得到的结果是first+(second去重后的结果) ...

  4. DeepLearning.ai学习笔记汇总

    第一章 神经网络与深度学习(Neural Network & Deeplearning) DeepLearning.ai学习笔记(一)神经网络和深度学习--Week3浅层神经网络 DeepLe ...

  5. shell学习笔记汇总

    1.shell脚本中函数使用 函数定义在前,调用在后,顺序反了就没有效果了.函数调用为:函数名 参数列表 函数内部通过以下变量访问函数的参数:shell脚本函数中: $0: 这个脚本的名字 $n: 这 ...

  6. Mybatis学习笔记汇总（包括源码和jar包）

    博客整理 Mybatis学习笔记(一)--对原生jdbc中问题的总结 Mybatis学习笔记(二)--Mybatis框架 Mybatis学习笔记(三)--入门程序 MyBatis学习笔记(四)--入门 ...

  7. IdentityServer4学习笔记汇总(实现传送门在底部)

    前言 互联网时代,对信息和资源的保护越发苛刻,在所有应用中授权和认证是必不可少缺少的一部分.如果一个应用没有授权和认证那么这个应用就是不完整或者说不安全的应用.在.Net平台给我们提供了一套完整的授权 ...

  8. Tensorflow入门学习笔记汇总

    一.环境准备 1.安装python:下载地址https://www.python.org/downloads/windows/下载并安装(推荐python3) 2.安装对应python版本的库:htt ...

  9. CSS学习笔记汇总

    CSS语法格式:一个css规则,由一个选择器和一个格式声明语句构成    例如:h1{color:red; font-size:14px;} CSS选择器: 1.基本选择器 1)* 号选择器:通配符, ...

随机推荐

  1. Ceph QoS 初探（下）

    作者:吴香伟 发表于 2017/01/24 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 存储QoS是个可以做很大也可以做很小的特性.SolidFire认为将Q ...

  2. php面向对象（OOP）---- 验证码类

    PHP常用自封装类--验证码类 验证码是众多网站登陆.注册等相关功能不可以或缺的功能,实现展示验证码的方式有很多,这篇文章作者以工作中比较常用的方法进行了封装. 逻辑准备 要实现一个完整的验证码,需要 ...

  3. 打开phpmyadmin显示高级功能尚未完全设置部分功能未激活

    问题:老师,打开phpmyadmin显示高级功能尚未完全设置部分功能未激活,应该如何解决? 这是前一阵子学生问过我的一个问题,今天我就在博客里解答你的疑问吧. 总共三步可以搞定 1.导入相关文件到数据 ...

  4. Iterator——迭代接口

    迭代对于JAVA的来说绝对不陌生.我们常常使用JDK提供的迭代接口进行Java集合的迭代. Iterator iterator = list.iterator(); while(iterator.ha ...

  5. iOS 即时通讯 + 仿微信聊天框架 + 源码

    这些你造吗? 即时通讯(IM),在IOS这片江湖里面已经算是一个老者了,我这小旋风也是在很早以前巡山的时候,就知道有即时通讯这个妖怪,以前也多多少少接触过一些,在造APP的时候用过,哎呀,说着说着就感 ...

  6. Node - EJS模板应用(node+express+ejs)

    准备工作: 工具:Webstorm 1. 新建一个文件夹为blogs(随意). 一个js文件app.js. 一个文件夹views,文件夹内一个index.ejs文件,文件夹asstes内style.c ...

  7. 一篇知乎的故事 - javascript技术贴

    前言 就像文章题目所示,本文的发表源于知乎的一篇文章.文章链接如下:如果你想靠前端技术还房贷,你不能连这个都不会.这篇文章是群里水群时别人发的,像我这样的菜鸟角色才不会逛知乎~~~.这篇文章主要是讲了 ...

  8. JavaScript截取字符串的Slice、Substring、Substr函数简单比较还有indexof函数应用

    //截取字符,一看就明白!!! var str = "0123456789"; alert(str.substring(5)); 弹出 //56789 alert(str.subs ...

  9. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. android学习17——命令行建gradle工程

    使用命令行建gradle工程要涉及到几个工具的版本. 1.gradle的版本.这个用gradle -version查到. 2.SDK BuildTools的版本. 这个要先配好SDK的环境变量,然后在 ...