首页 / HTML / 前端学习之HTML／语法（上）
前端学习之HTML／语法（上）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端学习之HTML／语法（上），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7898字，纯文字阅读大概需要12分钟。
内容图文
HTML文档的后缀一般都是.html，但是在以前，.htm后缀也是不少的，它们都代表html文档，实际上也没有本质的区别。htm是在win32时代，系统只能识别3位扩展名时使用的。现在一般都使用.html
概念
??(Hyper Text Markup Language)超文本标记语言，是用来描述网页的一种语言
??1. 超文本(Hyper Text):不只包括文本，也可以包括图片、链接、音乐、视频等非文本元素
??2. 标记语言(Markup Language):标记语言是一套标记标签，HTML使用标记标签来描述网页
标签
??由尖括号包围的关键词，比如 <html>
??HTML 标签分为单标签和双标签
??1. 双标签：HTML标签通常是成对出现的，比如 <b> 和 </b>。第一个标签是开始标签，第二个标签是结束标签；开始标签和结束标签也被称为开放标签和闭合标签
??2. 常见的单标签有：<img><br><hr><input>
??注意：HTML标签对大小写不敏感，但要全小写
属性
??HTML标签可以拥有属性，属性提供了有关HTML元素的更多信息。
??属性以名值对(名称/值)的形式出现，且总是在HTML元素的开始标签中规定。
【常见属性】
元素
??从开始标签到结束标签的所有代码
??HTML元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。
文档
??HTML文档被称为网页，由嵌套的HTML元素构成
??注意：浏览器不会显示HTML标签，而是使用标签来解释页面的内容
注释
??注释是在HTML插入的描述性文本，用来解释该代码或提示其他信息。
<!-- This is a comment -->
注意：注释只出现在代码中，不会在页面中显示；且注释不可嵌套
实体
??HTML中某些字符是预留的，需要被替换为字符实体
在HTML中，属性能表达相当丰富的语义，而且属性也会额外提供很多实用的功能，HTML共支持16个常见的全局属性
HTML原有属性
accesskey
??作用：浏览器用来创建激活或聚焦元素的快捷键
??值：一个键盘字符如 O
??范围：支持该属性的元素有<a>、<area>、<button>、<input>、<label>、<legend>、<textarea>
??注意：使用该属性可能在新窗口打开链接时可能会被浏览器屏蔽
<div>
<a href="https://www.baidu.com" accesskey="b">百度</a>
<a href="https://www.taobao.com" accesskey="a">阿里</a>
<a href="https://www.qq.com" accesskey="t">腾讯</a>
<p>快捷键(alt+b)可以跳转到百度；快捷键(alt+a)可以跳转到阿里；快捷键(alt+t)可以跳转到腾讯</p>
</div>
class
??作用：规定元素的一个或多个类名
??值：多个类名用空格分隔
??注意：类名不能以数字开头
dir
??作用：文字的方向
??值：ltr/rtl/auto
id
??作用：规定元素的唯一标识
??注意：若浏览器中出现多个id名的情况，CSS样式对所以该id名的元素都生效，但javascript脚本仅对第一个出现该id名的元素生效
lang
??作用：规定元素内容的语言
??zh 是中文，代表的是宏语言（Macrolanguage），zh 单独用表示中文整体，可以是方言、文言文、简繁体等混合内容。理论上 zh-CN 表示的是中国大陆中文，包含方言和简繁体，但默认指简体普通话。为了精准性，应该用独立语种替换，包括但不仅限于普通话和七大方言：
cmn 普通话（官话、国语）
wuu 吴语（江浙话、上海话）、czh 徽语（徽州话、严州话、吴语-徽严片）
hak 客家语
yue 粤语（广东话）
nan 闽南语（福建话、台语）、cpx 莆仙话（莆田话、兴化语）、cdo 闽东语、mnp 闽北语、zco 闽中语
gan 赣语（江西话）
hsn 湘语（湖南话）
cjy 晋语（山西话、陕北话）
??以下所有 zh 开头写法已于 2009 年废弃，因为在语言学的分类上，中国语言学者多认为吴语、粤语、闽语等是汉语的方言，而西方学者多认为这些语言是一门和汉语同级关系的单独语种
??以下两种写法均正确，后者描述更精准，但目前浏览器和操作系统都只支持前者，使用新标准可能会造成无法匹配浏览器用户定义字体、网页翻译、程序语言自动切换等功能，为了兼容性推荐使用前者
zh-CN 中文 (简体, 中国大陆) 对应 cmn-Hans-CN 普通话 (简体, 中国大陆)
zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)
style
??作用：设置元素的行间样式
tabindex
??作用：规定元素的tab键次序
??值：number(1是第一个)
<div>
<a href="https://www.baidu.com" tabindex="3">百度</a>
<a href="https://www.taobao.com" tabindex="2">阿里</a>
<a href="https://www.qq.com" tabindex="1">腾讯</a>
</div>
title
??作用：规定关于元素的额外信息，鼠标移到元素上时显示一段提示文本
HTML5新增属性
contenteditable
??作用：指定是否可以在浏览器里编辑内容
??值：true/false
??注意：设置document.designMode ='on'时，页面的任意位置都可以编辑；使用contenteditable ='true'则只对具体元素和其包含的元素起作用
??移动端：移动端ios5以及android3之后才支持该属性
?<演示框>选中文字后，点击下列相应属性值可进行演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
dl,dd{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
?
.box{
width: 300px;
}
.con{
overflow:hidden;
margin-bottom: 6px;
}
.con button{
float: left;
padding: 2px;
border: 1px solid gray;
margin-right: 2px;
cursor: pointer;
}
.show{
height: 100px;
border: 2px solid rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="box">
<div class="con" id="con">
<button data-name="selectAll">全选</button>
<button data-name="delete">删除</button>
<button data-name="undo">撤销</button>
<button data-name="print">打印</button>
<button data-name="bold">加粗</button>
<button data-name="italic">倾斜</button>
<button data-name="underline">下划线</button>
<button data-name="fontsize" data-value="16px">大号字体</button>
<button data-name="forecolor" data-value="red">红色文本</button>
<button data-name="backcolor" data-value="gray">灰色背景</button>
<button data-name="removeFormat">清空格式</button>
</div>
<div class="show" id="show" contenteditable>我是测试文字</div>
</div>
<script>
var aCon = document.getElementById('con').getElementsByTagName('button');
for(var i = 0; i < aCon.length; i++){
aCon[i].onclick = function(){
document.execCommand(this.dataset.name,false,this.dataset.value);
}
}
</script>
</body>
</html>
<style></style>
<script></script>
<!-- Generated by RunJS (Fri Sep 15 23:05:27 CST 2017) 1ms -->
contextmenu(没有浏览器支持)
??作用：跟元素关联的右键菜单
??值：<menu>元素中唯一ID
data-*
??作用：用于存储页面或应用程序的私有定制数据
??注意：属性名不应包含任何大写字母，且在前缀data-之后必须有至少一个字符；属性值可以是任意字符串
??使用：可以在所有浏览器中使用getAttribute方法来获取data-*属性的值，也可以使用javascript中dataset属性访问data-*属性的值，不过IE10-浏览器不支持dataset
draggable(IE8-不支持)
??作用：用户是否可以拖动元素
??值：true/false/auto
??注意：链接和图像默认是可拖动的
dropzone(所有浏览器都不支持)
??作用：规定在拖动被拖动数据时是否进行复制、移动或链接
??值：copy拷贝/move移动/link指向原始数据链接
hidden(IE7-不支持)
??作用：显示或隐藏该元素(与display:none作用一样)
??值：hidden="" || hidden= "hidden"
spellcheck(IE9-不支持)
??作用：规定是否对元素进行拼写和语法检查，对拼写错误的单词会在其下方出现红线
??范围：可编辑区域（表单或contenteditable元素）
??值：true/false
??注意：移动端支持不好
translate(所有浏览器都不支持)
作用：规定是否应该翻译元素内容
值：yes/no
HTML5遵循的5个设计原则
避免不必要的复杂性
【html4】
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
【html5】
<!DOCTYPE html>
【html4】
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
【html5】
<meta charset="utf-8">
支持已有内容
??以下四段代码，在xhtml中只有第一段是正确的；而在html5中，所有的都是正确的
<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
?
<img src="foo" alt="bar">
<p class="foo">Hello world
?
<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</P>
?
<img src=foo alt=bar>
<p class=foo>Hello world</p>解决现实的问题
??在html4中，即使两个块级元素元素有相同的链接地址，也必须分开写，因为内联元素不能包含块级元素
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>
??而在html5中，由于使用了内容模型，<a>元素也可以包含块级元素
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>
内容模型
??html5新增了多个元素，其中包括：section、article、aside和nav，它们代表了一种新的内容模型——给内容分区。以前人们一直都在用div来组织页面中的内容，但与其他类似的元素一样，div本身并没有语义。但section、article、aside和nav实际上是在明确地告诉你——这一块就像文档中的另一个文档一样。位于这些元素中的任何内容，都可以拥有自己的概要、标题，自己的脚部。
平稳退化
??浏览器在遇到不识别的type值时，会将type的值解释为text
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
内容总结
以上是互联网集市为您收集整理的前端学习之HTML／语法（上）全部内容，希望文章能够帮你解决前端学习之HTML／语法（上）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。