新手必备 HTML入门笔记

1.HTML的标记
 
标记:尖括号中的第一个字母为标签名,第二个字母为属性。
标记分为常规标记(双标记)和单标记组成
双标记:一对标记组成<标记></标记>  如: <title></title>
单标记:<标记>                                 如: <meta>  <br> <hr>
 
<标记名 属性=“属性值1 属性值2” 属性=“属性值”> </标记名>
如果一个标记有多个属性的时候,那么属性与属性之间用空格隔开
如:<div class="a1" name="a2" id = "a3"> </div>
如果一个属性有多个属性值,属性值与属性值之间用空格隔开
如:<div class="a1 a2 a3">
 
2.标题标记
h1-h6标题标签
作用:一个标记,用来展示网站的标题
使用:一个页面只能有一个h1,一般h1用来写网站的logo,其他h2-h6随意使用
 
3.字体标签
倾斜标签:<i></i>   <em></em>
换行:<br>
加粗:<b></b>  <strong></strong>
水平线:<hr>
下划线:<u></u>
下标:<sub></sub>
上标:<sup></sup>
删除线:<del></del>
段落:<p></p>
 
4.常用字符和常用标签
空格:&nbsp;
左尖括号<: &lt;
右尖括号>: &gt;
备案中图标版权:&copy;
<i></i>
如:&lt;i&gt;&lt/i&gt; 
 
常用标签:
<div></div>
说明:没有具体含义。统称为块标签,用来设置文档域,是文档布局常用对象。
 
<span></span>
说明:文本结点标签,可能是一小段文本,或是某一个字。
 
5.超链接和图像
超链接:
 
语法:<a href="目标文件路径或链接地址" title=“提示文本”>连接文本或文字</a>        
 
<a href = "#">空连接</a>
属性:href部分后面的值为连接页面的网址。
          title的属性值当鼠标悬停时的提示内容
          target 属性的值有两个
              _blank在新的窗口打开超链接
              _self在当窗口打开超链接前
 
图片:
语法:
<img src="图片的路径" border=“边框” alt=“图片加载失败时的提示” title=“图片提示” width = “宽度” height="高度">
属性:
src:图片的位置 ../跳出当前的文件路径
width和height:设置图像在页面上的宽度和高度
title:鼠标悬停在图片上是提示信息。
alt:图片加载失败时提示的信息(替换的信息)。
 
6.列表
6.1无序列表
语法:
<ul>
<li>列表项内容</li>
<li>列表项内容</li>
<ul>
 
6.2有序列表
<ol>
<li>列表项内容<li>
<li>列表项内容</li>
</ol>
属性:type可以设置他的类型
默认或type=“1”表示有序列表为数字
                        a小写字母
                        A大写字母
                        i小写罗马数字
                        I大写罗马数字
 
start属性:设置为从某个位置开始。start的值必须为数字。
 
6.3自定义列表
语法:
<dl>
<dt>名词</dt>
<dd>名词解释</dd>         
</dl>
注意:一个自定义列表只能有一个dt,但是可以有多个dd
如:
<dl>
<dt>蛋糕</dt>
<dd>水果蛋糕</dd> 
<dd>奶油蛋糕</dd>
<dd>酸菜牛蛙蛋糕</dd>        
</dl>
 
7.表格
语法:
<table>
     <tr>
              <td></td>
     </tr>
</table>
 
table标签表示表格,tr表示行,td表示列。
属性:
    width:   表格的宽度
    height:  表格的高度
    border:  表格的边框
    bordercolor:  表格边框的颜色
    cellspacing:  单元格与单元格之间的距离
    cellpadding:  内容与单元格之间的距离
    align:对齐方式
             left:左对齐;right:右对齐 ;center:居中对齐
 
合并单元格
行合并:rowspan="合并单元格数字",
列合并:colspan="合并单元格的数字"
            无论行合并还是列合并都是给td添加
注意点:行合并的话,删除本行(tr)后面行数的相对应的td
列合并的话,删除本行里面的td
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

猜你喜欢

转载自www.cnblogs.com/sun-shine1229/p/10469890.html