本文可以通过下载(16条消息) 前端基础-html精讲代码展示-Javascript文档类资源-CSDN文库配合理解,其中包含本文代码的展示内容.
html的部分概念
1.HTML 元素指的是从开始标签到结束标签的所有代码.
2.没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的,例子:br,img.
3.HTML 标签对大小写不敏感
4.适用于大多数 HTML 元素的属性:class,id,style,title
5.文件路径分为相对路径和绝对路径
6.head标签中可以添加title base(初始化target href等) link meta script style等标签。
7.html5的header标签可以放在其他html5语义标签内部
html全局属性
accesskey tabindex class name title style dir contenteditable contextmenu data_* lang hidden
draggable drapzone spellcheck translate
accesskey 规定元素快捷键
<div>
<input type="text" accesskey="b">
<!--按下alt+accesskey或shift+alt+accesskey可以获得焦点-->
</div>tabindex 规定tab健次序
<div>
<!--tab键第三次序tabindex='0'(默认)-->
<input type='text' >
<br>
<!--tab键第二次序-->
<input type='text' tabindex="2">
<br>
<!--tab键第一次序-->
<input type='text' tabindex="1">
</div> tabindex的值(-1,0,1)的区别:
带0值tabIndex的元素根据源代码（或默认页面行为）进行排序。
大于0的tabIndex值设定其tab顺序。所有带正tabIndex值的元素出现在所有带0 tabIndex值的元素之前。
如果你犯了一个错误，把同一个tabIndex赋予给多个元素，像其它元素一样，它们会以一个0值tabIndex进行处理。
将tabIndex赋值为-1，则在使用[Tab]键时，此元素被忽略。注意：如果使用-1值时，onfocus与onblur事件仍被启动。 tabIndex的值可为0至32767之间的任意数字
3.class 规定元素类
4.id 规定元素唯一id
5.style 规定行内css样式
6.title 规定元素额外信息
7.dir 规定元素内容的文本方向
<!--dir改变文本方向,不改变元素的位置-->
<p dir="rtl">Write this text right-to-left!</p>dir 属性在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>
8.lang 规定元素内容语言
HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的.
根据 W3C 推荐标准，您应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明.
<!--页面主要语言为汉语-->
<html lang='zh'>
</html>9.contenteditable 规定元素内容是否可编辑
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p> 10.(不支持)contextmenu 规定元素的上下文菜单。上下文菜单在用户右键点击元素时显示
<!--右键单击时,出现上下文菜单-->
<p contextmenu="supermenu">
本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。
</p>
<menu id="supermenu">
<command label="Step 1: Write Tutorial" onclick="doSomething()">
<command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
<p><b>注释：</b>目前的主流浏览器都不支持 contextmenu 属性。</p>11.data_* 用于存储页面或应用程序的私有定制数据
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。
<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li>
<li data-animal-type="蜘蛛">蝇虎</li>
</ul>12.draggable 规定元素是否可拖动
draggable 属性规定元素是否可拖动。
提示： 链接和图像默认是可拖动的。
在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script src=''>
</script>
</head>
<body>
<!--拖放框-->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<!--拖放字段-->
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>
</html>function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}13.(不支持)dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接
14.hidden 规定元素是否隐藏
15.spellcheck 规定是否对元素进行拼写和语法检查 (检测英文单词)
<!--在neam处会出现提示,提示它不是一个英文字母-->
<p contenteditable="true" spellcheck='true'>name is neam</p> 16.(不支持)translate 规定是否应该翻译元素内容
html标签,水平线,注释
标签
<h1></h1>~<h6></h6>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>水平线
<hr/>
<hr/>注释
<!--注释内容-->
<!--注释内容-->html段落
p标签
<p></p>
<p id='p标签' name='p标签'>p标签内部的内容p标签内部的内容p标签内部的内容p标签内部的内容</p>html链接
a标签
<a></a>
属性:href 属性 name属性 download属性 target属性-值:_blank _parent _self _top
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
<!--通过使用 name 属性/或者id属性- 创建文档内的书签-->
<a href='#p标签'>会跳转到当前页面id属性为'p标签'的元素位置</a>
<!--通过使用 href 属性 - 创建指向另一个文档的链接-->
<a href='./图片.jpg'>会跳转到当前位置的图片.jpg位置</a>
<!--在新窗口打开文档-->
<a href="" target="_blank">设置target可以选择跳转模式</a>
<!--创建电子邮箱mailto:目标邮箱,cc bcc:抄送人,subject:主题,body:内容,%20表示空格-->
<a href="mailto:222057568@qq.com?cc=22205785@qq.com&bcc=7607190@qq.com&subject=信息&body=例%20子"title="">发送邮件</a>html图像
属性:详情看<img>：图像嵌入元素 - HTML（超文本标记语言） | MDN (mozilla.org)
注意:img属性:srcset sizes loading 等
srcset ,sizes 与 picture,source的区别:
secset,sizes用于同图片的不同缩放大小,picture,source用于图片的截取;
img图像
<img src="" alt="">
<!--
img使用map,在不同区域返回不同页
img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），
所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
-->
<img src="./图片.jpg" alt="年货节" width="300px"usemap="#mapfirst"/>img标签无结束标签,且设置了宽度<br>
<map name="mapfirst" id="mapfirst">
<area shape="rect" coords="0,0,100,100" href="" alt="area1">
<area shape="rect" coords="100,100,200,100" href="" alt="area2">
<area shape="circle" coords="250,60,20" href="" alt="area3">
</map>html删除的标签
删除的标签有font basefont center s u
删除的属性有bgcolor,color,align,可用css font-size background-color color text-align font-family 代替
<font>font</font>
<basefont>basefont</basefont>
<center>center</center>
<s>s删除线</s>
<u>u下划线</u>html文本格式化
b i big small ins del strong em sub sup
<span>文本格式化</span>
<b>粗体b</b>
<big>大号字big</big>
<small>小号字small</small>
<em>重点字em</em>
<i>斜体i</i>
<strong>重语气strong</strong>
<sub>上划线sub</sub>
<sup>下划线sup</sup>
<ins>定义插入字ins</ins>
<del>定义删除字del</del>
html计算机输出
code kbd samp pre tt var
<code>定义计算机代码code</code>
<kbd>定义键盘码kbd</kbd>
<samp>定义计算机代码输出样式samp</samp>
<tt>打字机代码tt</tt>
<var>定义变量var</var>
<pre>定义预格式文件pre</pre>html引用,定义
abbr acronym address bdo blockquote q cite dfn
<span>引用,引用和属于定义</span>
<abbr title="定义缩写">定义缩写abbr</abbr>
<!--弃用--><acronym title="定义首字母缩写">定义首字母缩写acronym</acronym>
<address>定义地址address</address>
<bdo dir="ltr">定义文字方向bdo</bdo>
<blockquote>定义长的引用blockquote</blockquote>
<q>定义短的引用语q</q>
<cite>定义引用,引证,著作的标题cite</cite>
<dfn>定义一个定义项目dfn</dfn>html颜色
<span>颜色</span>
<p style="color: #ff2211">color:#ff2211</p>
<p style="color: rgb(124,123,144);">color:rgb(124,123,144)</p>html样式
<div>
<span>css样式</span>
<p>外部,内部,内联</p>
外部 link rel="stylesheet" href="" type="text/css"<br>
内部 style style <br>
内联 style <br>
</div>html表格
标签 table caption tr th td col colgroup thead tbody tfoot
属性 cellspacing cellpadding colspan rowspan
<span>表格</span>
<table cellpadding="5"cellspacing="10"style="background-color:black;color:white;">
<caption>表格标题caption</caption>
<colgroup span="1"width="50"></colgroup>
<colgroup span="3"width="50"></colgroup>
<tr>
<th>
00
</th>
<td colspan="2"style="border:10px solid rgb(240,240,0)">
01 02
</td>
<td>
03
</td>
</tr>
<tr>
<th>
10
</th>
<td rowspan="2"style="border:10px solid rgb(0,255,255)">
11 <br><br>
21
</td>
<td>
12
</td>
<td>
13
</td>
</tr>
<tr>
<th>
20
</th>
<td>
22
</td>
<td>
23
</td>
</tr>
<tr>
<th>
30
</th>
<td>
31
</td>
<td>
32
</td>
<td>
33
</td>
</tr>
</table>
cellspacing:td(th)标签之间的距离
cellpadding:td(th)标签内部内容与td(th)标签外框之间的距离
blue:th标签(居中粗体)
green:td标签
bluegreen:rowspan属性-值:2
yellow:colspan属性-值:2
html列表
ul li ol dl dt dd
<span>列表</span>
<ul>
<li>ul-li无序列表</li>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>
<ol>
<li>ol-li有序列表</li>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>
<dl>
<dt>定义列表项目名</dt>
<dd>dl-dt-dd定义列表项</dd>
<dd>定义列表项1</dd>
<dd>定义列表项2</dd>
<dd>定义列表项3</dd>
</dl>html块级与内联元素
内联元素
内联:span b a img td th 等
块级元素
块级:div p table tr ul li ol dl 等
html内联框架
标签iframe
属性target src name
<span>内联框架</span>
<iframe src="html内联框架.html"name="框架">
</iframe>
<a href="./html内联框架.html"target="框架">返回原框架内容</a>html5新元素
header nav section article aside footer figure figcaption
details summary time main mark
布局元素
section定义文章中的节,有主题的内容组，通常具有标题,可以将网站首页划分为简介、内容、联系信息等节.
article元素规定独立的自包含内容,文档有其自身的意义，并且可以独立于网站其他内容进行阅读。
header元素为文档或节规定页眉。
footer元素为文档或节规定页脚
nav元素定义导航链接集合。
aside元素页面主内容之外的某些内容（比如侧栏）。
组合元素
figure元素在书籍和报纸中，与图片搭配的标题很常见。标题（caption）的作用是为图片添加可见的解释。通过 HTML5，图片和标题能够被组合在figure元素中
figcaption元素设置figure中图片标题
<figure>
<img src="./图片.jpg" alt="年货节"width="400px"/>
<figcaption>年货节(figcaption标签设置figure内图片名称)</figcaption>
</figure>隐藏内容
details定义用户能够查看或隐藏的额外细节。
summary定义details元素的可见标题。
<details>
<summary>details隐藏内容的可见标题</summary>
<p>summary定义可隐藏的额外细节</p>
</details>
其他
time定义时间/日期
main规定文档的主内容
mark定义重要的或强调的文本
<time>time标签内容 20220124</time>
<main>main规定重要内容</main>
<mark>规定重要或强调的文本</mark>
html框架集(弃用)
标签frameset frame
属性 cols rows src
<frameset cols="25%,50%,25%">
<frame src="./html框架1.html">
<frame src="./html框架2.html">
<frame src="./html框架3.html">
</frameset>frameset frame已经弃用,可以使用ifame+div代替
xhtml
文档结构
XHTML DOCTYPE 是强制性的
html 中的 XML namespace 属性是强制性的
html、head、title以及body也是强制性的
元素语法
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
属性语法
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的
html表单
form属性
属性:action method
action属性值为服务器地址,method属性值为post(使用 GET 时，表单数据在页面地址栏中是可见的：)或get(POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。)
如果要正确地被提交，每个输入字段必须设置一个 name 属性
关于 GET 的注意事项：
以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串
关于 POST 的注意事项：
将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签
<form action="">form表单用于收集用户输入定义html表单<br>
action属性值为服务器地址,method属性值为post(使用 GET 时，表单数据在页面地址栏中是可见的：)或get(POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。)
<br>如果要正确地被提交，每个输入字段必须设置一个 name 属性。<br>
</form>accept-charset属性 规定在被提交表单中使用的字符集（默认:页面字符集）。
action 属性 规定向何处提交表单的地址（URL）（提交页面）
autocomplete属性 autocoplete="on"/"off"规定浏览器应该自动完成表单（默认:开启）。
enctype属性 规定被提交数据的编码（默认:url-encoded）。
method属性 规定在提交表单时所用的 HTTP 方法（默认:GET）。
name属性 规定识别表单的名称（对于 DOM 使用:document.forms.name）。
novalidate属性 规定浏览器不验证表单。
target属性 规定 action 属性中地址的目标（默认:_self）。
input属性
mime_type | 规定通过文件上传来提交的文件的类型。 | |
| 不赞成使用。规定图像输入的对齐方式。 | |
text | 定义图像输入的替代文本。 | |
| 规定是否使用输入字段的自动完成功能。 | |
autofocus | 规定输入字段在页面加载时是否获得焦点。 （不适用于 type="hidden"） | |
checked | 规定此 input 元素首次加载时应当被选中。 | |
inputname.dir | 规定将提交的文本方向。 | |
disabled | 当 input 元素加载时禁用此元素。 | |
formname | 规定输入字段所属的一个或多个表单。 | |
URL | 覆盖表单的 action 属性。 （适用于 type="submit" 和 type="image"） | |
见注释 | 覆盖表单的 enctype 属性。 （适用于 type="submit" 和 type="image"） | |
| 覆盖表单的 method 属性。 （适用于 type="submit" 和 type="image"） | |
formnovalidate | 覆盖表单的 novalidate 属性。 如果使用该属性，则提交表单时不进行验证。 | |
| 覆盖表单的 target 属性。 （适用于 type="submit" 和 type="image"） | |
| 定义 input 字段的高度。（适用于 type="image"） | |
datalist-id | 引用包含输入字段的预定义选项的 datalist 。 | |
| 规定输入字段的最大值。 请与 "min" 属性配合使用，来创建合法值的范围。 | |
number | 规定输入字段中的字符的最大长度。 | |
| 规定输入字段的最小值。 请与 "max" 属性配合使用，来创建合法值的范围。 | |
number | 规定输入字段中所需的最小字符数。 | |
multiple | 如果使用该属性，则允许一个以上的值。 | |
field_name | 定义 input 元素的名称。 | |
regexp_pattern | 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 | |
text | 规定帮助用户填写输入字段的提示。 | |
readonly | 规定输入字段为只读。 | |
required | 指示输入字段的值是必需的。 | |
number_of_char | 定义输入字段的宽度。 | |
URL | 定义以提交按钮形式显示的图像的 URL。 | |
number | 规定输入字的的合法数字间隔。 | |
| 规定 input 元素的类型。 | |
value | 规定 input 元素的值。 | |
| 定义 input 字段的宽度。（适用于 type="image"） |
type类型
输入框(type=text)
<input type="text"name="form-text"value="value=input type=text"/>单选框(type=radio)
name设置为相同则为同一个单选框
<input type="radio" value="radio" name="input-radio"checked>input type="radio"
<input type="radio"value="radio1"name="input-radio" >radio1
<input type="radio"value="radio2"name="input-radio" >radio2多选框(type=checkbox)
name设置为相同则为同一个多选框
<input type="checkbox"name="input-checkbox"value="input-checkbox1"checked>input-checked1
<input type="checkbox"name="input-checkbox"value="input-checkbox2"checked>input-checked2
<input type="checkbox"name="input-checkbox"value="input-checkbox3">input-checked3提交按钮(type=submit)
<input type="submit"value="提交">密码输入框(type=password)
<input type="password"name="input-password"value="password">普通按钮(type=button)
<input type="button"name="input-button"value="input-button">数值输入框(type=number)
<input type="number"name="input-number"min="1"max="10">颜色选择器(type=color)
<input type="color"name="input-color">进度器(type=range)
<input type="range"name="input=range"max="10" min="1"step="1"value="2">月选择器(type=month)年/月
<input type="month"name="input-month">周选择器(type=week)年/周
<input type="week"name="input-week">日选择器(type=data)年/月/日
<input type="date"name="iput-date">时间选择器(type=time) 时/分
<input type="time"name="input-time">日期选择器(type=datetime/type=datetime-local) 年/月/日/时/分
<input type="datetime-local"name="input-datetime-local">输入查找框(type=search)
<input type="search"value="search"name="input-search">邮箱输入框(type=email)
<input type="email"name="input-email">地址输入框(type=url)
<input type="url"name="input-url">图片提交按钮(type=imge)
<input type="image"src="./图片.jpg"name="input-image"alt="tupian"width="200px"height="100px">文件提交按钮(type=file)
<input type="file"name="input-file">select选择器
<select name="form-select" id="form-select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>textarea输入框
<textarea name="form-textarea" id="form-textarea" cols="30" rows="10">form-textarea</textarea>datalist带选择器的输入框
<input list="datalist" name="input-datalist">
<datalist id="datalist">
<option value="option1">
<option value="option2">
<option value="option3">
</datalist>fieldset组合元素框
<fieldset>
<legend>fieldset元素组合表单中的相关数据 <br> legend元素为fieldset元素定义标题。</legend>
</fieldset>canvas与 SVG
Canvas
1.依赖分辨率
2.不支持事件处理器
3.弱的文本渲染能力
4.能够以 .png 或 .jpg 格式保存结果图像
5.最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
1.不依赖分辨率
2.支持事件处理器
3.最适合带有大型渲染区域的应用程序（比如谷歌地图）
4.复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5.不适合游戏应用
html媒体标签
图片
img
object
<object data="./图片.jpg"width="200px"heihgt="100px"></object>embed
<embed src="./图片.jpg"width="200px">音频
embed
<embed src="./斯斯与帆 - 马马嘟嘟骑 (V0).mp3"/>object
<object data="./斯斯与帆 - 马马嘟嘟骑 (V0).mp3">audio
<audio controls="controls" height="100" width="100"preload loop="loop">
<source src="./斯斯与帆 - 马马嘟嘟骑 (V0).mp3" type="audio/mp3" />
</audio>autoplay 如果出现该属性，则音频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则每当音频结束时重新开始播放。
muted 规定视频输出应该被静音。
preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src 要播放的音频的 URL。
视频
object
<object data="./斯斯与帆 - 马马嘟嘟骑 (V0) copy.mp4" type=""></object>embed
<embed src="./斯斯与帆 - 马马嘟嘟骑 (V0) copy.mp4" type=""/> <br>video
<video controls="controls" loop="loop" height="100px"width="200px">
<source src="./斯斯与帆 - 马马嘟嘟骑 (V0) copy.mp4"type="video/mp4">
</video>末尾
可以通过下载(16条消息) 前端基础-html精讲代码展示-Javascript文档类资源-CSDN文库配合理解,
其中包含本文代码的展示内容.
2791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
