a标签的用法

什么是a标签

所谓的a标签，就是一个可以跳转到其他网页或文件的URL超链接。

a标签属性

href 包含超链接指向的 URL 或 URL 片段。

<a href="http://www.baidu.com/">百度一下</a>

download 此属性指示浏览器下载URL，而不是导航到该地址，因此该属性会提示用户保存该网站的HTML。

<a href="http://www.xxx.com/xxx.exe" download>百度一下</a>

img标签的用法

什么是img标签

所谓的img标签，就是一个可以在网页中显示图片的标签。

img标签属性

alt 定义描述图像的替换文本。如果图像的URL是错误的导致无法显示图片，则用户可以看到该提示。

<img src="1.jpg" alt="图片加载失败" />

width hight 定义图片的宽度以及高度，如果width/higth只定义了一个，另一个则会根据图片的原始属性进行相对应的赋值。

<img width="100" src="1.jpg" alt="图片加载失败" />

<img hight="100" src="1.jpg" alt="图片加载失败" />

src 该属性是图片的URL，是img属性中必须的值。

img响应式

max-width:100% 该属性会对元素的宽度进行限制，适用于多尺寸设备像是完整的图像。

<style>
img {
max-width: 100%;
    }
</style>
<img src="1.jpg" alt="图片加载失败" />

table标签的用法

什么是table标签

所谓的table标签就是可以在网页中显示表格。

table标签

table thead tbody tfoot tr th td

table标签样式

table-layout="auto 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。

table-layout="fixed 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

border-collapse 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

border-spacing 属性指定相邻单元格边框之间的距离（只适用于边框分离模式）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

<style>
table{
    width: 600px;
table-layout:auto;
border-spacing: 0px;
border-collapse: collapse;
}
td,th{
    border: 1px solid blue
}
</style>
  </head>
  <body>
   <table>
       <thead>
           <tr>
               <th></th>
               <th>小小红</th>
               <th>小白</th>
               <th>小花</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>数学</td>
               <td>88</td>
               <td>85</td>
               <td>80</td>
           </tr>
           <tr>
                <td>语文</td>
                <td>88</td>
                <td>85</td>
                <td>80</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>88</td>
                <td>85</td>
                <td>80</td>
                </tr>
       </tbody>
       <tfoot>
           <tr>
               <th>总分</th>
               <td>200</td>
               <td>220</td>
               <td>230</td>
           </tr>
       </tfoot>
   </table>
  </body>
</html>

其他感想

暂时没有其他的感想，这些标签用多了就自然而然记下来了。

HTML常用标签