HTML札记
HTML指的是 超文本标记语言 (Hyper Text Markup Language)文档后缀名；
当您保存
HTML文件时，既可以使用.htm也可以使用.html扩展名。两者没有区别，完全根据您的喜好。HTML标题（Heading）是通过<h1> - <h6>等标签进行定义的，其中<h1>最大，<h6>最小。请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或
CSS代替。
因为，浏览器会对其生成索引，因此，只应该对标题使用该标签；HTML 段落是通过<p>标签进行定义的。HTML 链接是通过<a>标签进行定义的。HTML 图像是通过<img>标签进行定义的。HTML 文档是由HTML 元素定义的。HTML 元素指的是从 开始标签（start tag）到 结束标签（end tag）的所有代码。大多数
HTML 元素可以嵌套（可以包含其他HTML 元素）。比如，就是元素嵌套；
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
不要忘记结束标签 ；
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，未来的 HTML 版本不允许省略结束标签。：
使用小写字母
HTML 标签对大小写不敏感：
<P>等同于<p>。许多网站都使用大写的 HTML 标签。W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
属性也是有小写字母；使用双引号还是单引号；
始终为属性值加引号，属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号；
例如：name='Bill "HelloWorld" Gates'块级元素前后添加空行 ；
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如
段落、标题元素前后。style样式 ；style 属性用于改变 HTML 元素的样式。
有些旧标签被样式替代掉了 ：<font>、<agiln>、<bgcolor>；格式化输出 ；
包括一些常用的属性，加粗，斜体，强调，反向输出、下标、上标、原样输出、缩写等；
多余的空格和换行
HTML会把源码中，多个空格替换为一个空格，多个换行替换为一个换行 ；如果想要保持原样输出，使用格式化输出的标签：
<pre>；引用
主要用于文章中，包括：小引用
<q>，大引用<blockquote>，会进行缩进处理 ，以及缩进、地址等；注释
包括普通注释
<!-- -->和条件注释<!--[if 条件] --> ...<!--[end if]-->；链接
<a>，既可以定义超链接，也可以定义成锚点，锚点可以穿越页面 ；
超链接标签中嵌套图像标签，可以做到图像连接 ；
只要在name属性=锚点所在页面的地址#锚点 ，即可，跨越页面 ；
如果锚点找不到，页面不会出错，而是定位到页面顶端 ；
可以完成发送邮件的操作 ；超链接最后最好加上
/请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求。
/这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.w3school.com.cn/html/”。插入图像
图像可以是来自任何地方，比如服务器的本地文件夹中，或者其他服务器上，只要地址写对都行；
alt 属性，为图像定义一串预备的可替换的文本，如果图像加载失败，则显示该文字<img src="boat.gif" alt="Big Boat">
当做背景图片，图像小于页面的时候，。图像会重复出现；
可以设置图像出现的位置，使用align属性，默认值是bottom，其他值top；align还可以当做浮动，当值为left、right的时候，会有 浮动 效果 ；
可以在图像上使用ismap属性,配合图像超链接，就可将图像转为图像映射，此时鼠标移到图像上，左下角将会出现具体坐标；图像映射
使用
<img>和<map>标签 可以完成，就是在一张图像上，为不同的区域创建超链接；<img>中的usemap属性可引用<map>中的id或name属性（由浏览器决定），所以我们需要同时向 添加 id 和 name 两个属性。
coords属性规定区域的 x 和 y 坐标。
coords属性与shape属性配合使用，来规定区域的尺寸、形状和位置。
图像左上角的坐标是 “0,0”。<map name="planetmap">
<!--如果是长方形，则代表左上角和右下角-->
<area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
<!--如果是圆形，则代表原点坐标和半径-->
<area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
<!--如果是长方形，则代表左上角和右下角-->
<area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
<!--如果是多边形，则代表每两组代表一个点，然后连接起来-->
<area shape="polygon" coords="x1,y1,x2,y2,x3,y3,..." href="sun.htm" alt="Sun" />
</map>
表格
表格的表头使用
<th>标签进行定义。表格的表头使用<th>标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：
border边框属性，用在table上，数字越大边框越粗 ；其中，cellspacing，cellspacing都用在tabble标签上 ；
如果，有空数据的单元格的边框没有被显示，则添加空格进去<td> </td>；
使用<caption>我的标题</caption>，为表格添加标题 ；
colspan，横跨水平单元格；rowspan，纵夸单元格 ；
表格中依然可以使用其他标签，甚至表格嵌套 ；
bgcolor、background即可用在table标签上，也可以用在td标签上 ；
使用align="left"，对表格中的数据进行左对、右对齐 ；列表
无序
<ul>，有序<ol>；里面<li>;
有序，有个属性start，可以直接规定从几，开始计数；
对于type，无序是规定形状样式，有序是规定计数的类型，是ABCD，还是1234
自定义列表，可以为每项显示解释，其中自定义列表吧中可以使用 段落、换行符、图片、链接以及其他列表 等等
自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始<div> 和 <span>块级元素 在浏览器显示时，通常会以新行来开始（和结束）。比如：
<h1>, <p>, <ul>, <table>
内联元素 在显示时通常不会以新行开始，比如：<b>, <td>, <a>, <img>。
<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。
如果与 CSS 一同使用，<div>元素可用于对 大的内容块 设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
HTML<span>元素是内联元素，可用作 文本的容器。当与 CSS 一同使用时， 元素可用于为 部分文本 设置样式属性。响应式设计
能够以可变尺寸传递网页，对于平板和移动设备是必需的 ；
可以自己写，使用css的float浮动属性；我们可以使用Bootstrap框架 ；<frameset>框架浏览器中的浏览器，可以将一个页面分为几个页面，但是也因此页面不再是一个完整的页面，而是多个页面了，难以维护；
cols竖直分割 ；rows水平分割 ；
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize="noresize"
不能将<body></body>标签与<frameset></frameset>标签 同时使用 ，测试发现</frameset>不能放在<body>里面，但是反过来可以！
不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内。
<frameset></frameset>标签可以嵌套使用 ；
target属性，可以让一个框架的超链接，在另外一个框架里面打开 ；也可以在连接后面添加#Cxx跳到具体的<hx>标题处 ；iframe 标签
frameset要么占用一行，要么占用一列；使用iframe可以占用一个方块大小，而不是整行或者整列的占用 ；
因为height和width属性用于规定iframe的高度和宽度，属性值的 默认单位是像素。但也可以用百分比来设定（比如 “80%”）；
iframe默认显示周围的边框。设置frameborder属性值为 “0” 就可以移除边框 ;JS脚本
<script>标签用于定义客户端脚本 。
<noscript>标签,在浏览器禁用脚本时，或浏览器不支持客户端脚本时,就会显示标签中的内容 ；<!-- 对于老式浏览器，不支持 script标签的，会将脚本内容，当作文本，直接显示在页面上；-->
<!-- 我们就把脚本内容写在注释里面，认识脚本标签的浏览器，即使在脚本内容在注释里面，依然会执行；-->
<!-- 不认识脚本的，也不会认识在注释的脚本，但是现在脚本在注释中，就不会被显示在页面上了-->
<script type="text/javascript">
<!--
document.write("Hello World!")
// -->
</script>
URL 编码
URL 只能使用
ASCII字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符， URL 必须转换为有效的 ASCII 格式。
URL 编码使用"%"其后跟随两位的十六进制数来替换**非 ASCII** 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。<!DOCTYPE>文档类型必须写在文档开头，由于高速浏览器，该网页是什么内容 ；
HTML 4.0 分三种，分别是，简单版（仅支持有效标签），补充版（废弃标签页也支持），完整版（废弃标签和framesets框架都支持） ；
HTML 5.0 就剩下一个了<!DOCTYPE html>下拉选框
列表通常会把 首个选项 显示为被选选项。您能够通过添加
selected属性来定义预定义选项。button的监听函数可以直接在里面写
JS代码 ：<button type="button" onclick="alert('Hello World!')">Click Me!</button>预定义输入选项
<datalist>可以预定义输入选项，好像可以用来做历史记录 ；
其中list属性必须引用<datalist>元素的 id 属性<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
number属性固定只能输入数字，并其使用
min和max约束数字的访问 ，其中可以使用step规定数字间隔；<form action="/demo/demo_form.asp">
数量（1 到 5 之间）：
<input type="number" name="quantity" min="1" max="15">
<input type="submit">
</form>输入约束
这些输入限制，可以用在任何输入的标签上，比如
date标签，使用max就是表示时间不得超过该值 ；
| 属性. | 描述 |
|---|---|
| disabled | 规定输入字段应该被禁用，该字段不会被提交。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计），也就是显示的输入框的长度。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
滑动控件
range表现为一个滑动控件 ；
eamil类型浏览器会自动的对输入类型进行检查；并且有的浏览器或手机会自动对输入过的邮箱进行匹配，添加
@xxx的提示 ；
同样的还有url，也会进行自动验证和匹配;数据回显
autocomplete属性在表单上设置
autocomplete="on"，然后该表单就会自动的数据回显；
如果有的信息不想回显，则在对应的信息上，写个属性autocomplete="off"；
注意该属性是 HTML5.0 的，有的浏览器不支持 ；autofocus使得输入项自动获得焦点 ；form属性当某个输入项在表单之外的时候，还想该输入项属于该表单，则使用该属性 ;
一个输入项可以被引入到多个表单之中，form属性值之间之间使用空格间开 ；list属性，达到跟下拉框一样的效果list 属性引用的
<datalist>元素中包含了<input>元素的预定义选项。<input list="browsers"> <datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
一次性选择多个文件/图片
在
input标签上，使用multiple属性，就可以一次性选择多个文件 ，multiple="multiple";类似于
font效果在
input标签上，使用placeholder属性，输入框会默认显示希望用户输入的信息 ，placeholder="xxxx";HTML5中默认的字符编码是UTF-8。
HTML札记的更多相关文章
- Python札记 -- 装饰器补充
本随笔是对Python札记 -- 装饰器的一些补充. 使用装饰器的时候,被装饰函数的一些属性会丢失,比如如下代码: #!/usr/bin/env python def deco(func): def ...
- BITED-Windows8应用开发学习札记之二：Win8应用常用视图设计
感觉自我表述能力有欠缺,技术也不够硬,所以之后的Windows8应用开发学习札记的文章就偏向于一些我认为较难的地方和重点了多有抱歉. 上节课是入门,这节课就已经开始进行视图设计了. Windows应用 ...
- how tomcat works 札记(两)----------一个简单的servlet集装箱
app1 (看着眼前这章建议读者,看how tomcat works 札记(一个)----------一个简单的webserver http://blog.csdn.net/dlf123321/art ...
- App测试札记
App测试札记 测试应该收集信息 测试应该问问题 测试应该扮演不同角色 测试应该如实反馈 初学者 有哪些可以利用的信息?需求,技术方案,测试设计,现有功能,相关人员 App会在哪些环境下运行 App会 ...
- SQL菜鸟学习札记（二）
五月份一直在写SQL,之后写了一个期末大作业的项目,现在才有时间把之前遇到的各种奇怪的问题整理出来.下一部分札记应该是大作业中使用到的SQL的整理. 一.UPDATE SET语句后面可以并列赋值. 之 ...
- SQL菜鸟学习札记（一）
刚开始学SQL,从最基础的语句开始写,用一个LOL数据库做实验.目前使用的工具是MySQL Workbench,感觉比较顺手,界面没花多久时间就读懂的差不多了,所以目前就使用这个工具来做SQL的学习了 ...
- [BBS]搭建开源论坛之JForum安装使用札记
本文作者:sushengmiyan 本文地址:http://blog.csdn.net/sushengmiyan/article/details/47761303 目录 目录 BBS搭建开源论坛之JF ...
- java学习札记
java学习札记 0x0 学习原因 本来打算大三再去跟着课程去学习java的,但是现在题目越来越偏向java,所以迫于无奈开启了java的学习篇章,同时也正好写个笔记总结下自己学习一门语言的流程. ...
- Masonry学习札记
Masnory学习札记 在之前的文章里有草草提到过Masonry自动布局,可这么重要第三方布局框架的怎么可以怎么随便带过呢!昨天在完成页面的时候刚好遇到了被Masorny功能惊叹的部分,所以趁热打铁写 ...
- JS 异步系列 —— Promise 札记
Promise 研究 Promise 的动机大体有以下几点: 对其 api 的不熟悉以及对实现机制的好奇; 很多库(比如 fetch)是基于 Promise 封装的,那么要了解这些库的前置条件得先熟悉 ...
随机推荐
- Python基础之给函数增加元信息
1. 参数注解 当写好一个函数以后,想为这个函数的参数添加一些额外的信息,这样的话,其他的使用者就可以清楚的知道这个函数应该怎么使用,这个时候可以使用函数参数注解. 函数参数注解能提示程序员应该怎样正 ...
- hdfs-site.xml 基本配置参考
配置参数: 1.dfs.nameservices 说明:为namenode集群定义一个services name 默认值:null 比如设置为:ns1 2.dfs.ha.namenodes.<d ...
- 小程序 之自定义tabbar上边框颜色
一.设置borderStyle 二.设置page样式 page::after{ content: ''; position: fixed; left: 0; bottom: 0; width: 100 ...
- vue 路由传参的三种方法
API在这里 https://router.vuejs.org/guide/essentials/navigation.html 第一种传参 通过路由属性中的name来确定匹配的路由,通过param ...
- activemq jmx
增加: -Djava.rmi.server.hostname=<IP addr>
- 性能监控 | MAT分析内存泄漏
使用MAT分析内存泄漏(二)八周年重印版 - 知乎 .u-safeAreaInset-top { height: constant(safe-area-inset-top) !important; h ...
- ？ 原创： 铲子哥 搜狗测试 今天 shell编程的时候，往往不会把所有功能都写在一个脚本中，这样不太好维护，需要多个脚本文件协同工作。那么问题来了，在一个脚本中怎么调用其他的脚本呢？有三种方式，分别是fork、source和exec。 1. fork 即通过sh 脚本名进行执行脚本的方式。下面通过一个简单的例子来讲解下它的特性。 创建father.sh，内容如下： #!/bin/bas
? 原创: 铲子哥 搜狗测试 今天 shell编程的时候,往往不会把所有功能都写在一个脚本中,这样不太好维护,需要多个脚本文件协同工作.那么问题来了,在一个脚本中怎么调用其他的脚本呢?有三种方式,分别 ...
- SpringBoot2.X中的静态资源访问失效
今天开始使用SpringBoot写项目,于是先让其能够访问静态资源,但是配置半天也不能访问我的helloWorld页面,原来,在SpringBoot2.x中,一下静态资源路径不生效了. classpa ...
- SQL-W3School-函数：SQL 函数
ylbtech-SQL-W3School-函数:SQL 函数 1.返回顶部 1. SQL 拥有很多可用于计数和计算的内建函数. 函数的语法 内建 SQL 函数的语法是: SELECT function ...
- Angular中的routerLink 跳转页面和默认路由
1.创建新项目 2.创建home news newscontent 组件 3.找到app-rounting-moudle.ts配置路由 1)引入组件 import { HomeComponent } ...