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 ...

随机推荐

Effective C++ 34 区分接口继承和实现继承
public继承从根本上讲,有两部分:接口继承和实现继承.两者之前的区别很像函数声明与函数定义. 具体设计中,会呈现三种形式:derived class只继承成员函数的接口(纯虚函数):derived ...
poj 1239
二次dp,还算好想. 先第一遍dp找出最后一个数字最小是几. dpf[i]=max{j}+1(dpf[j],dpf[j]+1,…,j位组成的数字小于j+1,j+2,…,i位组成的数字. 在第二遍dp, ...
log4net 运行时改变日志级别
((log4net.Repository.Hierarchy.Hierarchy)LogManager.GetRepository()).Root.Level = Level.Debug; ((log ...
[转载]Java数组扩容算法及Java对它的应用
原文链接:http://www.cnblogs.com/gw811/archive/2012/10/07/2714252.html Java数组扩容的原理 1)Java数组对象的大小是固定不变的,数组 ...
Exception sending context initialized event to listener instance of class org.springframework.web.context.ContextLoaderListener org.springframework.beans.factory.BeanCreationException:
严重: Exception sending context initialized event to listener instance of class org.springframework.we ...
【转】Java读取matlab的.mat数据文件
参考:Java读取mat文件下载链接:ujmp jmatio 下载完两个.jar文件之后,如何引用到java项目当中?项目名称->右键->Property->Java Build ...
一次dell R420 电源故障引发的“血案”
说“血案”有写夸张了,其实是也就熬了一夜的通宵,做运维的伤不起啊,作为一名运维工程师,像这种服务器突发故障半夜起床的情况属于家常便饭,见怪不怪了,开始说正事: 前几天半夜12点左右,收到服务器宕机的消 ...
c# 创建xml
<?xml version="1.0" encoding="UTF-8"?> <swUpgrade xmlns="http://ww ...
利用office2010 word2010生成目录
详细内容可以从以下链接下载: http://www.360disk.com/file-37040.html 从前一直用word的目录功能,觉得很方便.第一:可以在目录的首页通过Ctrl+鼠标单击左键可 ...
利用委托与Lambada创建和调用webapi接口
前言现在项目中用的是webapi,其中有以下问题: 1.接口随着开发的增多逐渐增加相当庞大. 2.接口调用时不好管理. 以上是主要问题,对此就衍生了一个想法: 如果每一个接口都一个配置文件来管 ...

Html笔记

Html笔记的更多相关文章

随机推荐

热门专题