HTML常用标签

787 阅读3分钟

a标签的用法

什么是a标签?

a标签是可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接

a标签属性

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

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

target 指定在何处显示链接的资源,取值如下

<a href="http://www.baidu.com/" target="_blank">百度一下</a>
<a href="http://www.baidu.com/" target="_top">百度一下</a>
<a href="http://www.baidu.com/" target="_parent">百度一下</a>
<a href="http://www.baidu.com/" target="_self">百度一下</a>

download此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件

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

img标签的用法

什么是img标签?

img 代表文档中的一个图像

img标签属性

alt定义描述图像的替换文本。如果图像的URL是错误的、该图像不在支持的格式列表中、或者如果图像还没有被下载,用户将看到这个显示。

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

width hight定义图像的高度,width/height只指定一个值,则另一个会根据原始图像进行赋值。

<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 td th

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>

其它感想

暂无特别延伸的感想,上述元素还需要不断练习实践,才能够更好的配合使用...