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

想要学习网页制作的初学者可以通过本篇笔记初步掌握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. 8个新鲜的PHP常用代码

       /**      * +----------------------------------------------------------      * 生成UUID 单机使用      * ...

  2. CTR预估中的贝叶斯平滑方法及其代码实现

    1. 背景介绍 广告形式: 互联网广告可以分为以下三种: 1)展示广告(display ad) 2)搜索广告(sponsored search ad) 3)上下文广告(contextual ad)   ...

  3. React核心内容归纳总结

    状态.属性.组件API.组件的生命周期 当react的状态改变时,自动执行this.render()方法更新组件ES6写React的时候,事件里不会自动绑定this,需要自己绑定,或者直接在const ...

  4. bzoj3238--后缀自动机

    显然只需求LCP(i,j)就可以了. 将s反转,然后插入后缀自动机.由于后缀自动机的link指针构成了一棵后缀树,而字符串又反转过,所以两个结点的LCP就是LCA. 树形DP,求出以每个结点为LCA的 ...

  5. iOS详解MMDrawerController抽屉效果(一)

      提前说好,本文绝对不是教你如何使用MMDrawerController这个第三方库,因为那太多人写了 ,也太简单了.这篇文章主要带你分析MMDrawerController是怎么实现抽屉效果,明白 ...

  6. 在javascript中关于变量与函数的提升

    在javascript中关于变量与函数的提升 一.简介 在javascript中声明变量与函数的执行步骤: 1.先预解析变量或函数声明代码,会把用var声明的变量或者函数声明的代码块进行提升操作 2. ...

  7. web及H5 的链接测试

    1:先下载一个Xenu工具 2:安装完成之后,进入页面(将弹出框关闭) 3:进行设置(一般不用修改设置) 4:修改完成之后点击工具栏中的file按钮,并输入想要测试的URL地址 5:点击OK测试完成之 ...

  8. jwplayer 限制拖动事件 快进 快退

    开源精神不是ctrl +c    +   ctrl+v  谢谢 最近项目需要视频播放不能拖动,我已经实现即不能向前拖动,也不能向后拖动, 方法:打开用记事本 或者notepad  工具打开 jwpla ...

  9. iOS 图片裁剪方法

    iOS 图片裁剪方法 通过 CGImage 或 CIImage 裁剪 UIImage有cgImage和ciImage属性,分别可以获得CGImage和CIImage对象.CGImage和CIImage ...

  10. Java8中 Parallel Streams 的陷阱 [译]

    译注:文本有所精简和意译 原文链接 : Java Parallel Streams Are Bad for Your Health!原作者:OLEG SHELAJEV 翻译:Hason 转载请保留相关 ...