使用2个空格缩进
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>
.example {
color: blue;
}
只允许使用小写。
所有的代码都用小写字母:适用于元素名,属性,属性值(除了文本和CDATA), 选择器,特性,特性值(除了字符串)。
<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png"
alt="Google">
建议删除行尾白空格。
<!-- 不推荐 -->
<p>What? </p>
<!-- 推荐 -->
<p>Yes please.</p>
如果没有特殊需求,一般采用utf-8编码。如果是cms站点,则遵守该站点的编码规则。
<!-- 网页编码 -->
<meta charset="utf-8">
尽可能的去解释你写的代码。说明该代码包括什么、目的是什么、能做什么、为什么使用它等。
注释是否需要详尽,取决于项目的复杂程度。
一般单行注释:
<!-- col -->
模块间注释:
<!-- news -->
<div class="news">
<h2>News</h2>
<p>...</p>
</div>
<!--/ news -->
循环注释:
<ul>
<!-- loop: new list -->
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
<!-- /loop: new list -->
</ul>
cms输出注释:
<!-- cms: news list -->
<ul>
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
</ul>
<!-- /cms: news list -->
Tab选项卡内容注释:
<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->
使用html5文档声明,不再使用XHTML(application/xhtml+xml)。
HTML5是目前所有HTML文档类型中的首选:
<!DOCTYPE html>
编写有效、正确的HTML代码,否则很难达到性能上的提升。
可以使用一些工具验证你的代码,如 W3C HTML validator
根据HTML各个元素的用途而去使用它们。
<!-- 不推荐 -->
<div class="col">
<div class="title">
news</div>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>
<!-- 推荐 -->
<div class="col">
<h2 class="title">
news</h2>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>
部分标签说明:
不推荐使用的标签:
给多媒体元素,比如canvas、videos、 images增加alt属性,提高可用性(特别是常用的img标签,尽可量得加上alt属性,提供图片的描述信息)。
<!-- 不推荐 -->
<img src="world.jpg">
<!-- 推荐 -->
<img src="world.jpg"
alt="our world images">
在样式表和脚本的标签中忽略type属性。
HTML5默认type为text/css和text/javascript类型,所以没必要指定。即便是老浏览器也是支持的。
<!-- 不推荐 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css"
type="text/css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js"
type="text/javascript">
</script>
<!-- 推荐 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js">
</script>
每个块元素、列表元素或表格元素都独占一行,每个子元素都相对于父元素进行缩进。按设计稿划分模块,尽量使页面模块化,模块与模块之前要有清晰的注释。
如上面页面框架,推荐写法:
<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
<!-- container -->
<div class="container">
<!--news-->
<div class="news">
<h2>news<h2>
<p>...</p>
</div>
<!--news-->
</div>
<!--/container-->
<!--sidebar-->
<div class="sidebar">
sidebar</div>
<!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->
保证整个页面在未加载样式表时仍有较好的层次清晰的页面结构。
<!-- 不推荐 -->
<div class="logo">My Site</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Mobile</a>
</div>
<div class="news">
<div>News</div>
<a href="#">
news list 1</a>
<a href="#">
news list 2</a>
<a href="#">
news list 3</a>
</div>
<!-- 推荐 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
<li><a href="#">
Home</a></li>
<li><a href="#">
News</a></li>
<li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
<h2>News</h2>
<ul>
<li><a href="#">
news list 1</a>
</li>
<li><a href="#">
news list 2</a>
</li>
<li><a href="#">
news list 3</a>
</li>
</ul>
</div>
H标签使用
strong、b使用
将需要加粗的文字使用b标签来显示。
将需要强调的文字(主要指包含关键词的信息)使用strong标签来强调主要内容。
注:b是粗体标签,属于实体标签,它所包围的字符将被设为bold(粗体);strong 是加重语气标签,属于逻辑标签,它的作用是加强字符语气。
在很多情况下,a都要使用title来说明该链接的相关说明或目的意义。
例如:当使用overflow隐藏掉a中的溢出文字时,该a中的title是必不可少的,它可以告诉用户被隐藏掉的文字内容是什么;又或者当一个图片型链接出现时,该a中的title同样是必不可少的,它可以告诉用户这个图片链接是做什么用的。
注:仅在img里添加alt标签在火狐提示文字是出不来的,alt是图片加载失败或未加载完全时显示出来的提示文字,要想鼠标移上去显示提示信息应该用title,严谨的写法是img里加入alt和title这两个标签。
代码保持精简,最优化,这样搜索引擎才更喜欢。
TML 中使用 <input> 元素表示单行输入框和 <textarea> 元素表示多行文本框。
HTML中使用的 <input> 元素在 JavaScript 中对应的是 HTMLInputElement 类型。HTMLInputElement 继承自 HTMLElement 接口:
interface HTMLInputElement extends HTMLElement {
...
}
HTMLInputElement 类型有一些独有的属性和方法:
而在上述介绍 HTMLInputElement 类型中的属性时,type 属性要特别关注一下,因为根据 type 属性的改变,可以改变<input>的属性。
类型 | 描述 |
text | 文本输入 |
password | 密码输入 |
submit | 表单数据提交 |
button | 按钮 |
radio | 单选框 |
checkbox | 复选框 |
file | 文件 |
hidden | 隐藏的字段 |
image | 定义图像作为提交按钮 |
reset | 重置按钮 |
省略 type 属性与 type="text"效果一样, <input> 元素显示为文本框。
当 type 的值为text/password/number/时,会有以下属性对 <input> 元素有效。
属性 | 类型 | 描述 |
autocomplete | string | 字符串on或off,表示<input>元素的输入内容可以被浏览器自动补全。 |
maxLength | long | 指定<input>元素允许的最多字符数。 |
size | unsigned long | 表示<input>元素的宽度,这个宽度是以字符数来计量的。 |
pattern | string | 表示<input>元素的值应该满足的正则表达式 |
placeholder | string | 表示<input>元素的占位符,作为对元素的提示。 |
readOnly | boolean | 表示用户是否可以修改<input>的值。 |
min | string | 表示<input>元素的最小数值或日期。 |
max | string | 表示<input>元素的最大数值或日期。 |
selectionStart | unsigned long | 表示选中文本的起始位置。如果没有选中文本,返回光标在<input>元素内部的位置。 |
selectionEnd | unsigned long | 表示选中文本的结束位置。如果没有选中文本,返回光标在<input>元素内部的位置。 |
selectionDirection | string | 表示选中文本的方向。可能的值包括forward、backward、none。 |
下面创建一个 type="text" ,一次显示 25 个字符,但最多允许显示 50 个字符的文本框:
<input type="text" size="25" maxlength="50" value="initial value">
HTML 使用的 <textarea> 元素在 JavaScript 中对应的是 HTMLTextAreaElement 类型。HTMLTextAreaElement类型继承自 HTMLElement 接口:
interface HTMLTextAreaElement extends HTMLElement {
...
}
HTMLTextAreaElement 类型有一些独有的属性和方法:
下面创建一个高度为 25,宽度为 5 的 <textarea> 多行文本框。它与 <input> 不同的是,初始值显示在 <textarea>...</textarea> 之间:
<textarea rows="25" cols="5">initial value</textarea>
注意:处理文本框值的时候最好不要使用 DOM 方法,而应该使用 value 属性。
<input> 与 <textarea> 都支持 select() 方法,该方法用于选中文本框中的所有内容。该方法的语法为:
select(): void
下面看一个示例:
let textbox = document.forms[0].elements["input-box"];
textbox.select();
也可以在文本框获得焦点时,选中文本框的内容:
textbox.addEventListener("focus", (event) => {
event.target.select();
});
当选中文本框中的文本或使用 select() 方法时,会触发 select 事件。
let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
console.log(`Text selected: ${textbox.value}`);
});
HTML5 对 select 事件进行了扩展,通过 selectionStart 和 selectionEnd 属性获取文本选区的起点偏移量和终点偏移量。如下所示:
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}
注意:在 IE8 及更早版本不支持这两个属性。
HTML5 提供了 setSelectionRange() 方法用于选中部分文本:
setSelectionRange(start, end, direction): void;
下面看一个例子:
<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">选中部分文本</button>
<script>
function selectText() {
let input = document.getElementById("text-sample");
input.focus();
input.setSelectionRange(4, 8); // o Wo
}
</script>
如果想要看到选中效果,必须让文本框获得焦点。
不同文本框经常需要保证输入特定类型或格式的数据,或许数据需要包含特定字符或必须匹配某个特定模式。而文本框并未提供验证功能,因此要配合 JavaScript 脚本实现输入过滤功能。
有些输入框需要出现或不出现特定字符。如果想要将输入框变成只读的,只需要使用 preventDefault()方法将按键都屏蔽:
input.addEventListener("keypress", (event) => {
event.preventDefault();
});
而要屏蔽特定字符,就需要检查事件的 charCode 属性。如下所示,使用正则表达式实现只允许输入数字的输入框:
input.addEventListener("keypress", (event) => {
if (!/\d/.test(event.key)) {
event.preventDefault();
}
});
还有一个问题需要处理:复制、粘贴及涉及Ctrl 键的其他功能。在除IE 外的所有浏览器中,前面代码会屏蔽快捷键Ctrl+C、Ctrl+V 及其他使用Ctrl 的组合键。因此,最后一项检测是确保没有按下Ctrl键,如下面的例子所示:
textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});
最后这个改动可以确保所有默认的文本框行为不受影响。这个技术可以用来自定义是否允许在文本框中输入某些字符。
IE 是第一个实现了剪切板相关的事件以及通过JavaScript访问剪切板数据的浏览器,其它浏览器在后来也都支持了相同的事件和剪切板的访问,后来 HTML5 将其纳入了规范。以下是与剪切板相关的 6 个事件:
剪切板事件的行为及相关对象会因浏览器而异。在 Safari、Chrome 和 Firefox 中,beforecopy、beforecut 和 beforepaste 事件只会在显示文本框的上下文菜单时触发,但 IE 不仅在这种情况下触发,也会在 copy、cut 和 paste 事件在所有浏览器中都会按预期触发。
在实际的事件发生之前,通过beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发送或从中检索数据前修改数据。不过,取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作,必须取消 copy、cut和 paste 事件。
剪贴板的数据通过 clipboardData 对象来获取,且clipboardData 对象提供 3 个操作数据的方法:
而 clipboardData 对象在 IE 中使用 window 获取,在 Firefox、Safari 和 Chrome 中使用 event 获取。为防止未经授权访问剪贴板,只能在剪贴板事件期间访问 clipboardData 对象;IE 会在任何时候都暴露 clipboardData 对象。因此,要兼容两者,最好在剪贴板事件期间使用该对象。
function getClipboardText(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}
function setClipboardText (event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
}
如果文本框只有数字,那剪贴时,就需要使用paste事件检查剪贴板上的文本是否无效。如果无效,可以取消默认行为:
input.addEventListener("paste", (event) => {
let text = getClipboardText(event);
if (!/^\d*$/.test(text)){
event.preventDefault();
}
});
注意:Firefox、Safari和Chrome只允许在onpaste事件中访问getData()方法。
在 JavaScript 中,可以用在当前字段完成时自动切换到下一个字段的方式来增强表单字段的易用性。比如,常用手机号分为国家好加手机号。因此,我们设置 2 个文本框:
<form>
<input type="text" name="phone1" id="phone-id-1" maxlength="4">
<input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>
当文本框输入到最大允许字符数后,就把焦点移到下一个文本框,这样可以增加表单的易用性并加速数据输入。如下所示:
<script>
function tabForward(event){
let target = event.target;
if (target.value.length == target.maxLength){
let form = target.form;
for (let i = 0, len = form.elements.length; i < len; i++) {
if (form.elements[i] == target) {
if (form.elements[i+1]) {
form.elements[i+1].focus();
}
return;
}
}
}
}
let inputIds = ["phone-id-1", "phone-id-2"];
for (let id of inputIds) {
let textbox = document.getElementById(id);
textbox.addEventListener("keyup", tabForward);
}
</script>
这里,tabForward() 函数通过比较用户输入文本的长度与 maxLength 属性的值来检测输入是否达到了最大长度。如果两者相等,就通过循环表中的元素集合找到当前文本框,并把焦点设置到下一个元素。
注意:上面的代码只适用于之前既定的标记,没有考虑可能存在的隐藏字段。
HTML5 新增了一些表单提交前,浏览器会基于指定的规则进行验证,并在出错时显示适当的错误信息。而验证会基于某些条件应用到表单字段中。
表单字段中添加 required 属性,用于标注该字段是必填项,不填则无法提交。该属性适用于<input>、<textarea>和<select>。如下所示:
<input type="text" name="account" required>
也可以通过 JavaScript 检测对应元素的 required 属性来判断表单字段是否为必填项:
let isRequired = document.forms[0].elements["account"].required;
也可以检测浏览器是否支持 required 属性:
let isRequiredSupported = "required" in document.createElement("input");
注意:不同浏览器处理必填字段的机制不同。Firefox、Chrome、IE 和Opera 会阻止表单提交并在相应字段下面显示有帮助信息的弹框,而Safari 什么也不做,也不会阻止提交表单。
HTML5 为 <input> 元素增加了几个新的 type 值。如下所示:
类型 | 描述 |
number | 数字值的输入 |
date | 日期输入 |
color | 颜色输入 |
range | 一定范围内的值的输入 |
month | 允许用户选择月份和年份 |
week | 允许用户选择周和年份 |
time | 允许用户选择时间(无时区) |
datetime | 允许用户选择日期和时间(有时区) |
datetime-local | 允许用户选择日期和时间(无时区) |
电子邮件地址的输入 | |
search | 搜索(表现类似常规文本) |
tel | 电话号码的输入 |
url | URL地址的输入 |
这些输入表名字段应该输入的数据类型,并且提供了默认验证。如下所示:
<input type="email" name="email">
<input type="url" name="homepage">
要检测浏览器是否支持新类型,可以在 JavaScript 中创建 <input> 并设置 type 属性,之后读取它即可。老版本中会将我只类型设置为 text,而支持的会返回正确的值。如下所示:
let input = document.createElement("input");
input.type = "email";
let isEmailSupported = (input.type == "email");
而上面介绍的几个如 number/range/datetime/datetime-local/date/month/week/time 几个填写数字的类型,都可以指定 min/max/step 等几个与数值有关的属性。step 属性用于规定合法数字间隔,如 step="2",则合法数字应该为 0、2、4、6,依次类推。如下所示:
<input type="number" min="0" max="100" step="5" name="count">
上面的例子是<input>中只能输入从 0 到 100 中 5 的倍数。
也可以使用 stepUp() 和 stepDown() 方法对 <input> 元素中的值进行加减,它俩会接收一个可选参数,用于表示加减的数值。如下所示:
input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 减1
input.stepDown(10); // 减10
HTML5 还为文本添加了 pattern 属性,用于指定一个正则表达式。这样就可以自己设置 <input> 元素的输入模式了。如下所示:
<input type="text" pattern="\d+" name="count">
注意模式的开头和末尾分别假设有^和$。这意味着输入内容必须从头到尾都严格与模式匹配。
与新增的输入类型一样,指定 pattern 属性也不会阻止用户输入无效内容。模式会应用到值,然后浏览器会知道值是否有效。通过访问 pattern 属性可以读取模式:
let pattern = document.forms[0].elements["count"].pattern;
使用如下代码可以检测浏览器是否支持pattern 属性:
let isPatternSupported = "pattern" in document.createElement("input");
HTML5 新增了 checkValidity() 方法,用来检测表单中任意给定字段是否有效。而判断的条件是约束条件,因此必填字段如果没有值会被视为无效,字段值不匹配 pattern 属性也会被视为无效。如下所示:
if (document.forms[0].elements[0].checkValidity()){
// 字段有效,继续
} else {
// 字段无效
}
要检查整个表单是否有效,可以直接在表单上调用checkValidity()方法。这个方法会在所有字段都有效时返回true,有一个字段无效就会返回false:
if(document.forms[0].checkValidity()){
// 表单有效,继续
} else {
// 表单无效
}
validity 属性会返回一个ValidityState 对象,表示 <input> 元素的校验状态。返回的对象包含一些列的布尔值的属性:
因此,通过 validity 属性可以检查表单字段的有效性,从而获取更具体的信息,如下所示:
if (input.validity && !input.validity.valid){
if (input.validity.valueMissing){
console.log("请指定值.")
} else if (input.validity.typeMismatch){
console.log("请指定电子邮件地址.");
} else {
console.log("值无效.");
}
}
通过指定 novalidate 属性可以禁止对表单进行任何验证:
<form method="post" action="/signup" novalidate>
<!-- 表单元素 -->
</form>
也可以在 JavaScript 通过 noValidate 属性设置,为 true 表示属性存在,为 false 表示属性不存在:
document.forms[0].noValidate = true; // 关闭验证
如果一个表单中有多个提交按钮,那么可以给特定的提交按钮添加formnovalidate 属性,指定通过该按钮无需验证即可提交表单:
<form method="post" action="/foo">
<!-- 表单元素 -->
<input type="submit" value="注册提交">
<input type="submit" formnovalidate name="btnNoValidate"
value="没有验证的提交按钮">
</form>
也可以使用 JavaScript 设置 formNoValidate 属性:
// 关闭验证
document.forms[0].elements["btnNoValidate"].formNoValidate = true;
以上总结了 <input> 和 <textarea> 两个元素的一些功能,主要是 <input> 元素可以通过设置 type 属性获取不同类型的输入框,可以通过监听键盘事件并检测要插入的字符来控制文本框的内容。
还有一些与剪贴板相关的事件,并对剪贴的内容进行检测。还介绍了一些 HTML5 新增的属性和方法和新增的更多的 <input> 元素的类型,和一些与验证相关的属性和方法。
几天学习了HTML相关的基础知识之后,老师出了五道自测题,通过这几天学习的总结,和查阅相关文档,我也作出了自己的理解,以下是我学习的相关心得分享给大家。
如果想要搞清楚HTML元素、标签、属性之间的关系,首先我们应该了解3个概念:
了解上述三个概念,我明白了,一个HTML页面就是由多个元素构成,元素是由标签描述,每一个元素的特征,都是由属性决定的。
根据W3C标准,HTML是一种Web语言,它是使用一些“标签”来定义网页内容的,例如我们在一个HTML文档中写<html xmlns="http://www.w3.org/1999/xhtml"></html>,就声明了一个HTML文档的开始,里面可以放各种标签,一个HTML文档是由以下结构构成的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
</body>
</html>
由以上代码不难看出,HTML结构层次分明,是一种具有结构层次的标记语言,通过这些标签可以告诉浏览器如何做出相应的解析。否则,如果HTML标签任意位置都能放置,就没法做标准高度统一了,那么浏览器也就无法做出正确的解析了。因此,我们看到的各种网页,都是通过这种具有结构化的标签组合而成的。
表单控件中的name值,是前端与后端进行交互时传值的变量名称,后端只有通过控件的name值才可以接收到该值进行相应的处理。
1.页面布局不灵活;
2.代码的可读性:表格布局的代码可读性低,没有使用<div>, <h1>等标签直观;
3.表格加载速度慢;
4.不利于SEO;
1.继承的:根据元素在文档的结构和层级关系来确定它的最终样式;
2.浏览器客户端:用户代理样式(user agent style),基本上浏览器的表现样式都是一致的;
3.用户自定义:写在HTML文档<style>标签中的样式;
4.行内样式(内联样式):写在元素的style属性中的样式。
以上就是我个人的总结,不知道是否完全正确,如果有错误的地方烦请各位指正,多谢大家。
*请认真填写需求信息,我们会在24小时内与您取得联系。