HTML大总结(三)

简介: HTML大总结(三)

8.超链接标签与锚点链接


超链接标签:点击触发后可以跳转对应链接或者下载相应资源。


<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>


image.png


锚点链接标签:点击链接,可以实现快速定位到页面中的某个位置。


  • 在链接文本的href属性中,设置属性值为 #名字
  • 找到目标位置标签,里面添加一个 id属性=刚才的名字
<a href = "#demo">点击一下,进入自我介绍</a>
 <h3 id = "demo">自我介绍</h3>


9.特殊字符


image.png


重点记住:空格、大于号、小于号 这三个,其余的使用的很少,如果需要使用回头查阅即可


10.表格标签


表格标签现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理。

  • table 用来定义表格的标签
  • tr 用来定义表格中的行,必须嵌套在<table></table> 标签中
  • td 用来定义表格中的单元格,必须嵌套在<tr></tr> 标签中
  • th 用来定义表格中的表头,表头单元格里面的内容加粗居中显示
<body>
     <table>
         <tr>  <th>姓名</th>     <th>性别</th>    <th>年龄</th>        </tr>
         <tr>  <td>孙铭</td>     <td>男</td>     <td>18</td>          </tr>  
         <tr>  <td>孙不坚</td>     <td>男</td>     <td>18</td>          </tr>       
         <tr>  <td>sunming</td>     <td>男</td>     <td>18</td>          </tr>     
     </table>
 </body>


代码效果:


image.png

表格属性


表格标签的属性实际开发并不常用,后面样式基本都是通过CSS来设置的。


image.png


<table align=center border="1" cellpadding="20" cellspacing="0" width="500">


合并单元格


  • 跨行合并:rowspan=“合并单元格的个数”
  • 跨列合并:colspan="合并单元格的个数"


确定目标单元格(合并写代码)


  • 跨行:最上面侧单元格为目标单元格,写合并代码
  • 跨列:最左面侧单元格为目标单元格,写合并代码
<table align=center border="1" cellpadding="20" cellspacing="0" width="700">
         <tr>
             <th colspan="5">个人简历</th>
         </tr>
         <tr>
             <th>姓名:</th>
             <th></th>
             <th>性别:</th>
             <th></th>
             <th rowspan="4">照片</th>
         </tr>
         <tr>
             <th>婚姻状况:</th>
             <th></th>
             <th>出生年月:</th>
             <th></th>
         </tr>
         <tr>
             <th>民族:</th>
             <th></th>
             <th>政治面貌:</th>
             <th></th>
         </tr>
         <tr>
             <th>身高:</th>
             <th></th>
             <th>学历:</th>
             <th></th>
         </tr>
     </table>


代码效果:


image.png


相关文章
|
10月前
|
移动开发 HTML5
|
4天前
|
数据采集 搜索推荐
HTML4(四)
HTML4(四)
4 0
|
5天前
|
移动开发 前端开发 iOS开发
HTML
HTML
9 0
|
2月前
|
前端开发
什么是HTML?
什么是HTML?
|
11月前
|
前端开发
HTML详解连载(7)
HTML详解连载(7)
|
9月前
|
移动开发 UED HTML5
HTML实用小技巧🚀🚀
HTML实用小技巧🚀🚀
|
移动开发 开发工具 HTML5
HTML5简单总结
学习HTML后的简单总结
163 0
HTML5简单总结
|
前端开发 安全 数据安全/隐私保护
HTML大总结(四)
HTML大总结(四)
169 0
HTML大总结(四)
|
Web App开发 移动开发 前端开发
HTML初识
HTML初识
91 0