HTML知识点摘记

时间：2022-09-02 11:16:18

HTML

HTML：（Hype Text Markup Language）超文本标记语言，是最基本的网页语言。代码由标签组成，不区分大小写。

由<html>开始，</html>结束，分头部分（head）和体部分（body），头部分用于给页面增加一些辅助或属性信息，最先加载。体部分是真正存放页面数据的地方。

属性和属性值用“=”连接，属性值可加双引号、单引号或不加引号。

标签相当于一个容器，数据存放在容器里，对数据操作，就是在修改容器的属性值。

字体标签：<font size=”5” color=”red”>文字</font>

color属性可用颜色单词，也可用“#FFFFFF”：井号加十六进制数据表示，红绿蓝

标题标签：<h1>文字</h1>  共有6级标题

水平线标签：<hr color=”red” size=”5”/>   size属性指定水平线粗细

特殊符号：

大于号＞

小于号＜

与符号&

双引号”

空格

注册符®

版权符©

TM符™

&lt;

&gt;

&amp;

&quot;

&nbsp;

&reg;

&copy;

&trade;

列表和项目符号标签：

定义列表<dl> </dl>

数字标签<ol> </ol>

符号标签<ul> </ul>

<dl>定义列表DefinedList

<dt>定义项目

<dd>具体项目</dd>

<dd>具体项目</dd>

</dt>

</dl>

自动缩进效果

具体项目内容用<li></li>封装  自动缩进

默认数字样式  可用type修改：a  A  I  i  1

Start属性指定起始号码

默认样式空心圆circle

disc实心圆  square黑方块

可用CSS自定义符号
       

注释标签：<!—注释内容-->

图像标签：<img src=”../dir/file” alt=”说明文字” height  width  border/>

src属性中可用两个点（../）代表上层目录

alt属性中的说明文字在鼠标悬停和图片加载失败时显示

图像地图：用<img>封装好图像后，切换到DW设计视图，在属性中选择热点区域形状并在图像上拖动出一块热点区域，用热点区域链接某个资源。在页面中点击热点区域就会跳转到相应资源。

表格标签：<table><tr><td></td></tr></table>

<table border=”边框粗细” bordercolor  cellpadding=”单元格中数据与单元格边框间距” cellspacing=”单元格与单元格间距 0两线并为一线” width=’固定像素值或相对页面百分比’>            cellspacing=0两线并成一线但显示出来粗，用CSS中border-collapse两线重叠看起来就是一条线

<table>标签内<caption></caption>给表格加标题，是表格的一部分

<td colspan=2>行占两列

<td rowspan=2>列占两行 第一行第一个单元格

第一行第二个

第二行只有一个

table标签中默认都有一个tbody标签    thead、tbody、tfoot

浏览页面时，浏览器解析由table标签封装的页面数据时，读到</table>表格结束标记才会显示数据，若封装页面数据的表格很大，没读到结束标记就不显示任何数据，用户体验不佳，所以将表格分为多个部分，读一个</tbody>就显示一部分。用tbody将表格分体

超链接标签：<a href=”http://www.xxx.cn” >文字</a>

点击一个超链接做了什么？首先启动相应的协议解析引擎，访问本机hosts文件，查找对应主机IP，未找到再请求网络DNS服务器获取对应IP，用IP访问指定主机。

href属性，可以指定协议，mailto:abc@qq.com?subject=”邮件主题”&cc=”抄送地址”

mailto     thunder……   不指定协议默认启动文件协议解析

href=www.baidu.com    默认使用file协议打开的是一个本地文件 并不是主机地址

超链接实现页面内跳转：定位标记、锚

<a name=”top”>顶部位置</a>

用a标签的name属性为当前位置指定一个名字，不使用href属性

…很多页面内容…

在适当位置用a标签链接到指定名字的位置  用#标示当前页面

<a href=”#top”>回到顶部位置</a>

target属性指定页面打开方式，默认在当前页面内打开，_blank新窗口打开

title属性：当鼠标悬停在文字上时显示的文字内容

表单标签：用于与服务端交互

<form action=”表单提交目的地” method=”表单提交方式”></form>

form标签内的组件：input接收用户输入数据 select下拉列表 textarea文本区域

<input type=”text” name=”user” value=”zhangsan” />

input标签内要指定name属性，服务端才能获取到对应的value

input内包含的组件类型 通过type指定：

text文本框     password密码框

radio单选框          属于同一组的选择框name属性要一致，不然单选框不能实现单选

checkbox复选框    分组 同单选框     单选框不加属性时还不让你选

file  提供一个文件浏览按钮，多用于上传文件

hidden     隐藏组件，不需用户看到但服务端要用到，可通过JavaScript将其值在用户端运算后再提交至服务端使用

button     按钮 通过onclick方法添加事件监听

reset        重置按钮       submit     提交按钮

image      和submit一样，但可通过src属性指定一个图片充当按钮 美化效果

<select>选择列表，默认单选下拉式  设定multiple属性使选项全部列出，无下拉效果

size属性指定显示多少项，显示不完出现滚动条

通过<option></option>标签封装列表项

<textarea cols=”” rows=””>   文本区域 可指定行数和列数

<fieleset>区域设置，可给form加外框      外框上的文字可用legend标签指定

form中的method指定提交方式，有7中，常用get和post

用Java自定义服务端与form交互  查看数据提交不同之处

get提交：信息显示在地址栏中，敏感信息泄露，不安全；

地址栏存储信息量有限，不利于大数据量提交；

将信息封装在消息头前边；

提交至服务端的中文乱码需要再次编码后再解码

post：地址栏上不显示提交的信息，避免信息泄露，安全；

提交数据量无限制，方便大数据提交；

将信息封装在消息头后边（空行后）的数据体中；

中文乱码可通过设定字符集方法简单搞定

Tomcat服务端默认使用的iso8859编码，两种提交方式提交中文时，服务端会显示乱码，需要在服务端使用指定字符集解码，request.setCharacterEncoding(“GBK”)但设定字符集方法只对数据体中的数据有效，get方式提交的信息封装在消息头中，不能使用这种方法。但可以通过先用iso8859编码再GBK解码的方式解决。推荐使用post方式提交。

暴力提交、暴力注册

<a href=”http://注册地址?name=value&id=value......”>暴力开始</a>

超链接默认就是get方式提交

客户端首先进行数据有效性校验，服务端对客户端提交的数据必须再次校验

label标签：用于给各元素定义快捷键

for属性指定快捷键起作用的表单元素，其值必须与该表单元素的id值相同

accessKey指定快捷键，要与Alt合用

例：<label for=”user” accessKey=”u”>user name</label>

<input type=”text” id=”user” />

label使用技巧：

将label标签加到tr标签上，for属性指向该tr里的文本框，在这行的任意位置点击鼠标，文本框都将获得焦点。

其他标签：

<pre></pre>此标签内封装的文本数据格式将保持原样，包括空格和缩进等格式。常用于页面中显示带有缩进层次的代码。

<p></p>段落标签，两个段落之间带有空行

<b>加粗 <strong>加粗 <i>斜体 <u>下划线 <sub>下标 <sup>上标

<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>

此标签内可以让内容动起来，scroll滚动穿过/alternate来回弹/slide一下摔死

框架集frameset标签：将浏览器页面分成多个独立的部分，分别显示不同的页面

放在head和body之间  frameset分割页面 frame指定小页面内容

<frameset rows=”30%, *” frameborder=”yes” border=”1” framespacing=”0”>

<frame src=”1.html” noresize=”noresize” />

<frame src=”2.html” noresize=”noresize” />

</frameset>

frameset中用rows和cols属性指定分割页面大小区域，可用百分比也可用像素值

frame中的noresize属性使框架页面大小不可随意改动

frame中添加的超链接默认都是在当前框架页面内打开的，要让其在当前窗口中的其他框架页面中打开，需要将框架页面添加一个name属性，让超链接的target属性值等于这个框架页面的name属性即可

iframe画中画标签：直接在当前页面中挖出一个区域，显示指定页面内容

<iframe src=”1.html” width=30 height=50>画中画标签说明文字，这些文字在浏览器不支持iframe标签时显示</iframe>

画中画标签具有一定的危险性，可能被用于隐藏执行一些恶意的代码

如：<iframe src=”1.js” height=0 width=0>

头标签<head>内的一些标签：<title></title>     <base />         <meta />        <link />

title：页面标题，显示在浏览器标题栏上的文字

base：href指定页面中所有超链接的目录，可本地，也可网络，结尾一定要用斜杠/表示

目录，只作用于相对路径文件。       target指定打开方式

meta：    <meta name=”keywords” content=”电影，视频，关键字……” />

<meta http-equiv=”refresh” content=”3, url=http://www.xxx.com” />

http-equiv：模拟HTTP协议响应消息头，3秒后刷新，打开指定网页

link：给HTML关联一些文件，如CSS，JS等

<link rel=”stylesheet” href=”1.css” media=”print/screen”>

rel指定关联文件与HTML的关系 media指定文件作用的设备，多个设备斜杠分隔

XHTML是可扩展的（Extensible）超文本标记语言，可理解为HTML向XML的过渡。

XML是可扩展标记语言，是对数据信息的描述，而HTML是对数据显示的描述。XML规定更为严格，如标签不结束即错误。XML规范可被更多应用程序解释，将成为一种通用的数据交换语言，各个服务器、框架都将XML作为配置文件。

Dreamweaver创建HTML文件自动生成的头部信息中，又一个规范约束文件（.dtd），描述一些标签信息，由此文件来约束标签的自动闭合，删除这些头部信息后，DW中输入标签将不会自动闭合。前边的网址并不代表此文件要从网络获取，只表示名称空间，可自定义。

HTML知识点摘记的更多相关文章

  1. J2SE知识点摘记&lpar;六&rpar;

    1.        static关键字的使用 static 关键字:可以用于修饰属性,也可以用于修饰方法,还可以用于修饰类. static 修饰属性:无论一个类生成了多少个对象,所有这些对象共同使用唯 ...

  2. J2SE知识点摘记&lpar;五&rpar;

    1.        引用数据类型的传递 java用引用代替C++中的指针 fun()方法接收的参数是是Change c1,也就是说说fun()方法接受的是一个对象的引用,所以fun方法中所所做的操作就 ...

  3. J2SE知识点摘记&lpar;四&rpar;

    1.        抽象类(abstract) 抽象类和抽象方法都必须用abstract关键字来修饰. 抽象类不能被直接实例化,也就是不能直接用new关键字去产生对象. 抽象方法只需声明,而不需实现. ...

  4. J2SE知识点摘记&lpar;三&rpar;

    1.         在java只允许单继承,而不允许多重继承,也就是说一个子类只能有一个父类.但在java中却允许多层继承. 2.         非内部Class只能被public或者defaul ...

  5. J2SE知识点摘记&lpar;二&rpar;

    1.    对象的声明 "类名 对象名 = new 类名();"例子:Person P;//先声明一个Person类的对象p p=new Person();//用new关键字实例化 ...

  6. J2SE知识点摘记&lpar;一&rpar;

    1.        数组的声明时无法指定数组的长度. 2.        一维数组的声明和内存的分配 "数据类型    数组名[]; //声明一维数组     数组名=  new 数据类型[ ...

  7. JS知识点摘记&lpar;一&rpar;

    JavaScript:基于对象和事件的脚本语言 特点: 安全性:不允许直接访问本地硬盘,可做的就是信息的动态交互 跨平台性:只要可以解析JS的浏览器就可执行,与平台无关 JavaScript与Java ...

  8. CSS知识点摘记

    CSS层叠样式表cascading style sheets 将网页中的样式单独分离出来,完全由CSS控制,增强样式复用性和扩展性. 格式:选择器{属性名:属性值:属性名:属性值:……} CSS与HT ...

  9. J2SE知识点摘记-数据库&lpar;二&rpar;

    一.          查询数据 注意sql的内容. 通过ResultSet接口保存全部的查询结果,通过Statement接口中的executeQuery()方法查询.查询之后需要分别取出.通过nex ...

随机推荐

  1. 让你忘记 Flash 的15款精彩 HTML5 游戏

    HTML5 游戏开发是一个热门的话题,开发人员和设计人员最近经常谈论到.虽然不能迅速取代 Flash 的地位,但是 HTML5 凭借它的开放性和强大的编程能力,取代 Flash 是必然的趋势.你会看到 ...

  2. 添加SSH密钥到GitHub

    $ clip < ~/.ssh/id_rsa.pubbash: /c/Users/UsersName/.ssh/id_rsa.pub: No such file or directory [转] ...

  3. HDU 4691 Front compression（后缀数组）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4691 题意:给出Input,求出Compressed output.输出各用多少字节. 思路:求后缀数 ...

  4. C&num;语句及案例

    今天学习了,C#语句部分的分支语句,差点转不过弯来. 语句分类: 1.顺序语句 2.选择语句(分支语句) 3.循环语句 分支语句 (一)if(){} ; 按照顺序哪个if条件适合,执行哪个. 不合适就 ...

  5. Oracle core05&lowbar;事务和一致性

    事务和一致性 oracle的redo和undo机制保证了数据库的ACID特性,以及高性能和可恢复特性. redo的数据是记录着数据块变更的顺序的正向数据流, commit时,保证redo同步持久化,保 ...

  6. SHELL脚本--expr命令全解

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html expr命令可以实现数值运算.数值或字符串比较.字符串匹配.字 ...

  7. 007-迅雷定时重启AutoHotkey脚本-20190411

    ;; 定时重启迅雷.ahk,;;~ 2019年04月11日;#SingleInstance,forceSetWorkingDir,%A_ScriptDir%DetectHiddenWindows,On ...

  8. ORA-01034 报错

    问题描述: 执行任何DB语句都会有如下报错: Copyright (c) 1982, 2002, Oracle Corporation. All rights reserved.ERROR:ORA-0 ...

  9. linuxserver本地和百度云备份脚本小试

    本地单文件上传脚本.命名uf 这是在本机上做的測试,利用bpcs_uploader脚本实现,仅仅是进行简单的封装.自己主动完好云端文件路径. 技术要点:使用dirname获取文件所在文件夹.使用pwd ...

  10. luogu 1006 传纸条

    三/四维dp,将两次传递均看作从左上而来,在dp过程中注意防止越界/重合 f[i][j][k][l]直接枚举两轮的点,如下 #include<bits/stdc++.h> #define ...

相关文章