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月前
|
移动开发 前端开发 JavaScript
HTML
【10月更文挑战第14天】HTML
47 4
|
6月前
|
移动开发 HTML5
初识HTML5
【8月更文挑战第23天】初识HTML5。
54 3
|
8月前
|
前端开发 数据安全/隐私保护
HTML总结
块级元素各占据一行,垂直方向排列;块级元素以新行开始,以换行结束。内联元素在显示时通常不会以新行开始,相邻的行内元素会排列在同一行例,直到一行排不下才会换行。 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效,其宽度随元素的内容而变化,margin上下无效,padding上下无效。块级元素可以设置宽、高,盒模型各属性也均能成功设置。
31 0
|
9月前
|
前端开发 JavaScript
html怎么学
【4月更文挑战第21天】html怎么学
34 3
|
9月前
|
前端开发 JavaScript
什么是HTML?
HTML是超文本标记语言,用于创建网页的标准语言,专注于内容结构和含义,不涉及样式。它由标签组成,如&lt;title&gt;、&lt;p&gt;、&lt;a&gt;等,与CSS和JavaScript配合使用,分别负责样式和交互性。示例代码展示了一个基本的HTML文档结构,包括标题、段落和链接。
|
移动开发 UED HTML5
HTML实用小技巧🚀🚀
HTML实用小技巧🚀🚀
|
Web App开发 前端开发 JavaScript
HTML初识
HTML初识
117 0
|
前端开发
HTML详解连载(6)
HTML详解连载(6)
|
前端开发 安全 数据安全/隐私保护
HTML大总结(四)
HTML大总结(四)
205 0
HTML大总结(四)

相关实验场景

更多