您的位置：首页 > Web前端 > HTML

HTML初级入门

2019-07-31 14:04 148 查看

html语言开始就一直在一种规范性不佳的环境下，即使代码书写不规范也能够达到预期效果。这也就导致了在行业中书写html经常是不规范的，这会带来很多隐患，在协会对规范书写的呼吁过后很多人依旧不以为是导致整体环境规范都很差，由此出现了数代html语言版本或者XHTML等，但这种情况都没有得到很好地改善，直到html5的出现。H5是一种极具包容性html语言，在H5版本中曾经各种语法报错的不规范书写都被视为正确书写，减少了报错的隐患，也删除了部分元素（其功能多在CSS中实现，在html中实现不方便且麻烦，基本没有存在价值）也添加了部分常用元素（亦可在CSS中实现，但在H5中实现也很方便）。接下来列举部分常用标签。

div与span

div与span都是对段文字进行操作，而他们的区别在于，div中无论放多少东西都会占据整行的空间（可以给div设置背景颜色就可以简单明了的感受到），而span标签只会br占据文字所需的空间，只有一行的空间不够或者用br标签才会换行。

br标签

<br />

达到换行的效果

a元素添加超链接和锚点

<a name="maodian">
<a href="http://www.csdn.net"  target="_blank">跳转到CSDN首页</a>
<a href="#maodian>跳转到锚点</a>

a元素的两个常用属性是href（用来指定超链接所链接的另一个资源）和和target（设置如何打开新窗口，常用_self（在原页面打开）和_blank（新建页面打开））,如果不写href属性a元素所夹元素就不会有跳转的功能，如果不加target元素默认为在原页面打开。
而当使用href属性时要注意，href属性值可以是绝对路径也可以是相对路径，但为了可移植性多采用相对路径。
download属性可让跳转链接转为下载链接（H5新增功能仅在部分浏览器可用）。
利用a标签的name属性，name=“锚点名称”可生成锚点，允许超链接直接连接到指定页面的该定位点。

列表相关元素

<ul>
<li>无序列表第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>

列表分为无序列表ul和有序列表ol

ul无序列表可指定通用属性，元素中只能包含li子元素。 ol有序列表可指定通用属性，可以用start属性指定列表项的起始数字。
dt定义列表标题项，会在最左侧位置，dd定义普通列表项，位置略落后于dt。

使用img元素添加图片

<img  src="img.jpg"  alt="课表" >

src属性指定图片文件所在位置，常用相对路径 alt指定一段文本作为图片的提示信息（用于检索）
map元素用于定义图片映射可以包含一个或多个area元素，每个area可以定义一个区域，不同区域可链接到不同URL（地址）
area元素shape属性可指定区域形状，coords指定多个坐标值确定区域位置，href用于链接，alt指定文本信息，target指定打开方式

表格相关元素

table元素用于定义表格包含0或1个caption和thead元素，多个tr（行）元素
caption设置表格标题，thead设置表头
cellpadding指定单元格内容和单元格边框之间的间距，cellspacing指定单元格之间的间距
tr定义表格行，td定义每行的单元格
colspan指定单元格跨多少列（合并列），rowspan指定单元格跨越多少行（合并行）

iframe元素

<iframe src="http://www.csdn.net" width="1200" height="500" frameborder=0 name="box">  </iframe>
<a href="http://www.baidu.com" target="box">跳转到百度</a><br />

iframe元素是一种框架工具，他会在页面中开辟一片独立空间提供一个页面下的多窗口使用，
可用src元素定义框架中初始是用的界面，利用frameborder属性控制是否显示框架自带的边框，用name属性定义其使用标志，即在a标签跳转时使用target的自定义值“box”即可达到在框架中显示跳转的目的。

id、style和class属性

<style type="text/css">
div.content{
width: 300px;
height: 120px;
border: 1px solid black;
float:left;
｝
</style>
<body>
<div class="content">测试样例1</div>
<div class="content">测试样例2</div>
<div style="width:200px;length:300px">测试样例</div>
</body>

id属性一般作为某元素（标签）的唯一标识，涉及到后面运用js实现前后端交互的目的，也可以设置属性但是一般都当做唯一标识来用，用来设置属性就可能重复，不推荐
style——属性，用来控制元素的各种属性，如width，length，border：1px solid，等等，各种属性大多在style中进行设着
class属性，在头部规定一种属性，方便在设置统一格式的属性设置时的设置与修改。

dir属性

<div dir="ltr">左对齐</div>
<div dir="rtl">右对齐</div>

控制对齐方式，ltr：left to right，rtl： right to left。

title属性

title标签除了在头部中写标签页的题目，还可以

<div title="测试标题">测试</div>

这段代码实现的功能是当鼠标放在测试两个字上时，会显示提示框显示测试标题四个字。

lang属性

lang属性是在开始的html标签中告诉浏览器和搜索引擎网页中所使用的语言

<html lang="en">

en代表英语、zh代表中文、fr代表法语等等

contentEditable属性

<<div contenteditable="true" style="width:2000px;border:1px solid #000">
测试样例1
<table  style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>111111111111111</td>
<td>111111111111111</td>
</tr>
</table>
<table   contenteditable="false" style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>111111111111111</td>
<td>111111111111111</td>
</tr>
</table>
</div>

当contentEditable值为true时浏览器会允许开发者直接标记该HTML元素里的内容，并不是指原本就允许客户操作的表单元素，而是可以把table、div等属性编程可编辑状态。
其具有可继承特点，即各子元素都会继承可编辑属性，如果想某一个不可编辑需在其中使属性值为false即可。

H5新增可拖动API

首先，img元素是默认支持拖动，在自己试验时可以发现在大多数浏览器中拖动图片鼠标会变成不可放置的状态图标，即可拖动但是并不能放在我们想放在的地方。
那么对于其他元素，如果想将其变为可拖动状态，只需将其draggable设为true即可，但是此时我们依旧达不到将其拖动后放在我们想放在的位置上的目的，这就需要让拖动操作可以携带数据，涉及到JavaScript的内容先不做描述。
那么不借助JavaScript如何达到“放”的效果呢？
不能放的主要原因是当被拖动元素“拖过”document对象时，document对象阻止了默认的拖动事件，而其他HTML组件是位于document对象内的，所以才达不到“放”的效果。
为了让document接受“放”，我们需要取消其默认组织拖动的行为

source.ondragstart = function(evt)
{
evt.dataTransfer.setData("text","测试样例");
}
document.ondragover = function(evt)
{
return false;
}
document.ondrop = function(evt)
{
return false;
}
document.ondrop = function(evt)
{
if(source){
source.style.position = "absolute";
source.style.left = evt.pageX + "px";
source.style.top = evt.pageY + "px";
}

这样就可以实现将目的模块拖动到我们想放在的地方的目的啦。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航