HTML初学

一、html和xhtml的区别
1、xhtml中标签名必须小写；在html中，不区分大小写

2、xhtml中属性名必须小写；html属性名也必须是小写的

3、xhtml中标签必须严格嵌套；html对标签的嵌套没有严格的规定

4、xhtml中标签必须关闭；html中标签不闭合也是正确的，即可以不成对出现

5、xhtml中空元素的标签页必须封闭，如<img/>,<br/>；html中没有要求

6、xhtml中属性值必须用双引号引起来；html中属性值可以不适用双引号

7、xhtml中属性值必须使用完整形式，即<input disabled="disabled">；在    
html中可以采用简写,<input disabled>   

8、xhtml中，应该区分“内容标签和结构标签”,比如<p>是内容标签，<table>
是结构标签，不允许将<table>置于<p>中，反之则可以将<p>置于 <table>的<td></td>中



二、标签分类
1、常规标签(双标签)
<标签名 属性="属性值" 属性="属性值"></标签名>
h1~h6、html、head、body、p  、b、strong、em、i 

2、单标签(空标签)
<标签名 属性="属性值" 属性="属性值"/>
meta、br、hr、img

3、标题标签
h1 h2 h3 h4 h5 h6

三、html中的应用

a、html中的注释<!-- 注释内容  -->

b、图像标签

   <img src="路径"/>

   src:引入图片的路径

   width:设置图片的宽度

   height:设置图片的高度

   alt:图片未正常加载时的替代文字

   title:鼠标悬停时的提示信息

   例如：<img src="../images/hetao.jpg" width="230px" height="100" alt="核桃图" title="纸皮核桃hhhh"/>

c、超链接

    <a href="跳转的地址" target="_blank/_self/_parent">链接内容</a>

    _blank:新窗口中打开目标页面

    _self：当前窗口中打开目标页面

   

d、超链接分为三种

   1、页面间的链接

   2、锚链接
 分为同一个页面中的锚链接   页面中的甲位置跳到当前页面的乙位置
 还有不同页面间的锚链接   A页面的甲位置跳转到B页面的乙位置

 实现步骤
 1、需要在目标位置的标签中加入id="值"  ，做一个标记
 2、在超链接的点击处<a href="路径#值">点击</a>

   3、功能性链接

e、路径分为两种

     1、相对路径  相对与当前html的路径  比如：src="../images/hetao.jpg"

     2、绝对路径
   D:\gitlab\1613\table2.jpg
   src="file:///D|\gitlab\1613\table2.jpg"

f、列表分为：
   1、无序列表
<ul type="disc/square/circle">
<li>苹果</li>
<li>梨子</li>
<li>西瓜</li>
<li>葡萄</li>
<li>菠萝</li>
<li>西红柿</li>
</ul>

   2、有序列表
<ol type="1/a/A/i/I">
<li>苹果</li>
<li>梨子</li>
<li>西瓜</li>
<li>葡萄</li>
<li>菠萝</li>
<li>西红柿</li>
</ol>

   3、定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>

g、表格的使用

   <table border="3" cellpadding="10">
<tr valign="top">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>ss
<td>9</td>
</tr>

    </table>

    table中的属性有

    border:设置表格和单元格的边框

    width:宽

    height:高

    cellpadding:单元格的内容到单元格边框之间的距离

    cellspacing：单元格与单元格之间的距离

    align:left/right/center   设置整个表格在父级容器水平对齐方式

    align属性也可写在tr标签中  控制的是该行中所有的单元格中的文本水平对齐方式

    align属性也可写在td标签中  控制的是这个单元格中的文本水平对齐方式

    valign:对table无效果    valign:top/middle/bottom

    valign属性也可写在tr标签中  控制的是该行中所有的单元格中的文本垂直对齐方式

    valign属性也可写在tr标签中  控制的是这个单元格中的文本垂直对齐方式

    跨行：rowspan    跨列：colspan

    这两个属性写在td标签中