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标签中