Html笔记

1. Html就是超文本标记语言的简写，是最基础的网页语言。

2. Html是通过标签来定义的语言，代码都是由标签所组成。

3. Html代码不用区分大小写。

4. Html代码由<html>开始</html>结束。里面由头部分<head> </head>和体部分<body> </body>两部分组成。

5. 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容最先加载。

6. 体部分是真正存放页面数据的地方。

a. 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。例如<br />

b. 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。

c. 属性与属性值之间用“=”连接，属性值可以用双引号或者单引号或者不用引号，但一般都会用双引号。或公司规定书写规范。

d. 格式 <标签名属性名=“属性值”>数据内容</标签名>

<标签名属性名=“属性名” />

e. 操作思想：为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在不断地改变容器的属性值。

常用标签的使用：

字体

1. 字体标签：<font>　

<font size = "5" color = "red">字体标签示例</font>

注：简单颜色可以直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红黄蓝排

2. 标题标签：<h1><h2>...<h6>

因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。

3. 特殊字符：

如果要在网页上显示一些特殊符号，比如< > &等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

<	<	>	>	&	&
"	"	®	®	©	©
™	™		空格

列表

4. 列表标签：<dl>

<dt>:上层项目 <dd>：下层项目

<dl>

    <dt>游戏名称</dt>

        <dd>英雄联盟</dd>

        <dd>穿越火线</dd>

    <dt>部门名称</dt>

        <dd>技术部</dd>

        <dd>培训部</dd>

</dl>

列表中项目符号对应的标签

<ol> 数字标签(a A 1 i I)

<ul> 符号标签

<li> 具体项目内容标签。此标签只在<ol><ul>中有效。

通过type属性更改项目符号，如<ol type = "i" start = "3">，就会显示罗马数字从三开始。如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到css。

<html>

    <head>

        <title>游戏</title>

    </head>

    <body>

        <ol type = "1">

            <li>游戏名称</li>

            <ol type = "a">

                <li>英雄联盟</li>

                <li>穿越火线</li>

                <li>梦幻西游</li>

            </ol>

        </ol>

    </body>

</html>

注释： 一条横线：<hr />

图像

5. 图像标签：<img>

<img src = "Sun.jpg"  align = "middle" border = "3" alt = "图片说明文字" />

align:属性定义图片的排列方式；border：用来设置图像的边框。src：链接一个文件

6. 图像地图： <map>

应用：当要在图像中选取某一部分作为链接的时候。如：中国地图每个省所对应的区域。map标签要和img标签联合使用。href是超链接

表格

7. 表格标签： <table>

组成：标题标签：<caption>，给表格提供标题。

表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示，并不常用。

行标签：<tr>

单元格标签：<td>，加载行标签的里面，可以简单理解为，先有行，在行中再加入单元格。

格式：

<html>

    <head>

        <title>表格</title>

    </head>

    <body>

        <table border = "1" bordercolor = "white" width = "70%" cellspacing = "0" cellpadding = "10">

            <tr>

                <th colspan = "2">个人信息</th>

            </tr>

            <tr align = "center">

                <td>姓名</td>

                <td>年龄</td>

            </tr>

        </table>

    </body>

</html>

效果：

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以<thead>,<tfoot>,<tbody>元素表示。

<thead>,<tfoot>包含关于表格列的消息。

<tbody>的作用：可以控制表格分行下载，从而提高下载速度。（网页的打开是县表格的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）

使用<tbody>的目的：可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么得到一个tbody行就可以显示一行。

超链接

8. 超链接标签： <a>

(1) 超链接 <a href = "">

<a href = "http://www.baidu.com" target = "_blank">百度</a>

href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗后或者帧中打开。

(2) 定位标记 <a name = "">

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。

注：定位标记要和超链接结合使用才有效。

<a href = "#标记">返回标记位置</a>

注：使用定位标记时一定在href值得开始加入#标记名。

表单

9. 表单标签： <form>

表单标签时最常用的标签：用于与服务器端的交互。

<input>: 输入标签：接收用户输入信息。

其中的type属性指定输入标签的类型：

(1)文本框text。输入的文本信息直接显示在框中。

(2)密码框password。输入的文本以圆点或者星号的形式显示。

(3)单选框radio。如：性别选择。

(4)复选框checkbox。如：兴趣选择。

(5)隐藏字段hidden。在页面上不显示，但在提交的时候随其他内容一起提交。

(6)提交按钮submit。用于提交表单中的内容。

(7)重置按钮reset。将表单中填写的内容设置为初始值。

(8)按钮button。可以为其自定义事件。

(9)文件上传file。后期扩展内容，会自动生活才呢过一个文本框，和一个浏览按钮。

(10)图像image。它可以替代submit按钮。

<select>: 选择标签，提供用户选择内容。如：用户所在的省市。size属性为显示项目个数。

<option>: 子项标签。

<label>：用于给个元素定义快捷键。

　　for属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。

　　 accesskey属性：指定快捷键，此快捷键需要和alt键组合使用。

<label for = "user" accesskey = "u">用户名(u)</label>

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

表单提交：

1. 先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。

2. 明确提交方式，通过制定method属性值。如果不定义，那么method的值默认是get

get和post这两种最常用的提交方式的区别：

（1）get提交将数据显示在地址栏，对于敏感信息不安全。post提交不显示在地址栏。

（2）地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。post可以提交大体积数据。

（3）对提交数据的封装方式不同：get将提交数据封装到了消息的前面，请求行中。post将提交的数据封装到消息头后面，数据体中。

注：通常表单使用post提交，因为编码方便。对于Tomcat服务器端，默认的解码方式是ISO8859-1，那么中文会出现乱码。通过post提交，可以使用request.setCharacterEncoding("GBK")，来解决乱码问题，该方法只对数据体有效。如果是get提交，request.setCharacterEncoding("GBK")该方法对乱码解决不了，必须先进行ISO8859-1编码，然后再进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦，所以建立表单提交用post。

头标签

头标签都放在<head></head>头部分之间。包括：title base meta link

10. <title>：指定浏览器的标题栏显示的内容。

11. <base>：

href属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值的结尾处一定要用/表示目录。只作用于相对路径的超链接文件。

target属性：指定打开超链接的方式。如_blank表示所有的超链接都用新窗口打开显示。

12. <meta>:

name属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv属性：模拟HTTP协议的响应消息头。

<meta http-equiv = "refresh" content = "3;url = http://www.baidu.com" />

注：3秒钟后自动访问百度。

<meta http-equiv = "refresh" content = "3" />

注：每隔3秒钟刷新页面一次。

13. <link>：

rel属性：描述目标文档与当前文档的关系。

type属性：文档属性。

media：指定目标文档在哪种设备上起作用。

Other

14. <marquee>让内容动起来。

direction属性：left right down up

behavior属性：scroll alternate slide

15. <pre>：可以将文本内容按在代码区的样子显示在页面上。

Html笔记的更多相关文章

HTML笔记<note1>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
python语言基础语法笔记<note1库安装和工具安装>
Python是一门入门简单的编程语言,它的安装和搭建也非常简单.在大部分的发行Linux版本上都预装了python2,部分也预装了python3,需要查看Linux上是否安装Python,只需要在命 ...
Error Note1:错误修复笔记
1.遍历同时修改数组内容导致崩溃 bugly上bug提醒如下图所示,经检查发现,可能是页面上数据加载惹得祸. 页面加载过程是这样的,首先进入页面,初始化页面,将本地数据加载到array中刷新table ...
英语零散笔记Note整理
无意之间整理电脑发现还存放着以前自己看视频做的一些笔记,关于新概念英语的笔记,觉得不错,放于博客,以供学习. English Note1 定语从句将不重要的动作放在定语从句中,重要的放在主干中. 倒 ...
《Cocos2d-x游戏开发实战精解》学习笔记4--实战一个简单的钢琴
上一节学习了使用Cocos2d-x播放音乐的方法,但是那种方法一般只适合于播放较大的音乐,而一般比较短小的音乐(如游戏中的打斗.按键音效等)则要通过playEffect来播放.本节使用该方法以及之前学 ...
git-简单流程（学习笔记）
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕笔记http://www.cnbl ...
PHP-自定义模板-学习笔记
1. 开始这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
PHP-会员登录与注册例子解析-学习笔记
1.开始最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

随机推荐

[Kerberos] User Ticket Management
Kerberos客户端常用命令包括 kinit, klist, kdestroy, and kpasswd,用户使用这些命令管理自己的 ticket. 此外,每台运行Kerberos的机器应该都配置/ ...
今天在学习NTP时发现了2个网站
NTP 调整系统时间一个网站是:http://chrony.tuxfamily.org/doc/1.31/manual.html 这个是专门介绍chrony的,做的很详细. 另外一个是:http: ...
【荐1】Total Commander 7.57 个人使用设置及常用快捷键备忘
Total Commander 7.57a 下载地址:http://www.baidu.com/s?wd=total commander 7.57 破解版软件整体预览图:(注意,下面的版本我用的是 ...
java基础字符串 “==” 和 “equals” 比较
demo: public class TestStringEquals { public static void main(String[] args) { String a = "test ...
Ajax方法提交整个表单的信息
<pre>$.ajax({ cache: true, type: "POST", ...
destoon去掉会员注册email验证
修改文件: /module/member/member.class.php 删除61行: //if(!is_email($email)) return $this->_($L['member_e ...
Linq查询表达式
目录 1. 概述 2. from子句 3. where子句 4. select子句 5. group子句 6. into子句 7. 排序子句 8. let子句 9. join子句 10. 小结 1. ...
.NET LINQ 聚合操作
聚合操作聚合运算从值集合计算单个值. 从一个月的日温度值计算日平均温度就是聚合运算的一个示例. 方法方法名说明 C# 查询表达式语法 Visual Basic 查询表达式语法更多信息 ...
关于readonly修饰符
修饰字段: 1.值类型:不能修改值 2.引用类型:是指该字段引用的对象不可以修改,但是里面的内容是可以修改的! 示例: static void Main(string[] args) { Consol ...
收藏的几个经典Flash
本人收藏了几个有意思的Flash,在此与大家分享下 1.黄金矿工中文版.swf 2.中国象棋.swf 3.运动的老鼠.swf 4.时钟.swf 5. 2048.swf 6.小猫逃跑.swf

Html笔记

Html笔记的更多相关文章

随机推荐

热门专题