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 name = "标记">标记位置</a>
<p>...<!--很多空行以制造网页过长的效果-->
<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 ...
随机推荐
- PHP读写大“二进制”文件,不必申请很大内存(fopen、fread、fwrite、fclose)
<?php /** * 读写大二进制文件,不必申请很大内存 * 只有读取到内容才创建文件 * 保证目录可写 * * @param string $srcPath 源文件路径 * @param s ...
- Linux mkdir 创建文件夹命令
介绍: 该命令创建指定的目录名,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录 语法: mkdir [-m] [-p] 目录名 选项介绍: -m: 对新建目录设置 ...
- vs2015安装体验
后边出现这样的问题该怎么解决?
- Java 23种设计模式 (通俗易懂解释收集整理)
(补充中...) P02 抽象工程模式 P14 TemplateMethod 模板方法模式 讲清楚了为什么叫做模板方法 http://www.cnblogs.com/java-my-life/arc ...
- 【krpano】高德地图导航插件(源码+介绍+预览)
简介 krpano可以利用js调用第三方网页版地图,因此可以实现导航效果,用来帮助用户导航到我们全景所在的位置. 效果截图如下,在手机端点击左侧按钮,便会对用户进行定位,跳转至高德地图进行导航 ...
- loadrunner11录制无法打开IE浏览器
安装loadrunner折腾了很久,后来发现是ghost系统问题.重装了系统,再重装了自己需要用的工具~ 接着学习loadrunner,一边看帮助文档一遍学.可是为嘛按照帮助文档的步骤来,就是会碰到一 ...
- canvas 画板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- MySQL 编译安装并且开启DEBUG模式
因为想分析下mysql中一些操作的内部执行过程,单纯的看源码太枯燥了,所以决定结合mysql的执行过程来分析,mysql作为一款成熟的数据库软件,在设计的时候就考虑到了调试的问题,只是想开启调试模式的 ...
- Keywords Search(hdu 2222)
题意:给出n个单词,一篇文章,询问有几个单词在文章中出现过. /* AC自动机的裸题. 题目标号牛的一比. */ #include<cstdio> #include<cstring& ...
- CSC321 神经网络语言模型 RNN-LSTM
主要两个方面 Probabilistic modeling 概率建模,神经网络模型尝试去预测一个概率分布 Cross-entropy作为误差函数使得我们可以对于观测到的数据 给予较高的概率值 同时可以 ...