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


相关文章
|
移动开发 HTML5
|
4月前
|
存储 移动开发 UED
HTML5 1
HTML5 是对传统 HTML 的重大升级,引入了新元素和属性,全面支持 CSS3,并增强了多媒体功能(Video 和 Audio)、图形处理(2D/3D 制图)、本地存储和应用开发能力。它简化了视频和音频的嵌入,提供了强大的图形绘制工具(如 &lt;canvas&gt; 和 SVG),并优化了 Web 应用的性能和用户体验。此外,HTML5 还引入了多种新的 CSS3 特性,如动画、转换和阴影效果等。
|
7月前
|
数据格式
什么是HTML?
【8月更文挑战第27天】什么是HTML?
99 2
|
9月前
|
存储 移动开发 前端开发
HTML大雪纷飞
HTML大雪纷飞
60 1
|
9月前
|
前端开发 JavaScript 数据可视化
HTML想见你
HTML想见你
51 1
|
8月前
|
Web App开发 移动开发 JavaScript
HTML5
HTML5
89 0
|
9月前
|
前端开发 数据安全/隐私保护
HTML总结
块级元素各占据一行,垂直方向排列;块级元素以新行开始,以换行结束。内联元素在显示时通常不会以新行开始,相邻的行内元素会排列在同一行例,直到一行排不下才会换行。 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效,其宽度随元素的内容而变化,margin上下无效,padding上下无效。块级元素可以设置宽、高,盒模型各属性也均能成功设置。
33 0
|
前端开发
HTML详解连载(7)
HTML详解连载(7)
|
10月前
|
前端开发 Python
初识HTML
本文介绍了HTML的基本概念和使用方法。

相关实验场景

更多