html知识笔记(二)——div、table、a标签

div标签:我们把一些标签放进<div>里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。

——————————————————————————————————————————————————————————————

table标签:用于创建表格

创建表格的四个元素:table、tbody、tr、th、td

1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

5、<th>…</th>:表格的头部的一个单元格,表格表头。

6、表格中列的个数,取决于一行中数据单元格的个数。

需要注意的是:

1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

2、表头,也就是th标签中的文本默认为粗体并且居中显示

有时,我们需要在表格上加上摘要和标题。

摘要:摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

    语法:<table summary="表格简介文本">

标题

用以描述表格内容,标题的显示位置:表格上方。

     语法:

<table><caption>标题文本</caption><tr><td>…</td><td>…</td>…</tr>
…
</table>

———————————————————————————————————————————————————————————————

<a>标签:使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

语法:

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。

如下代码:

<a href="目标网址" target="_blank">click here!</a>


(以上内容参考自慕课网:http://www.imooc.com)



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/386143.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS的三种定位,成功入职字节跳动

前言 校招 -1 年 这个阶段还属于成长期&#xff0c;更需要看重的是你的基础和热情。对于 JS 基础&#xff0c;计算机基础&#xff0c;网络通信&#xff0c;算法等部分的要求会相对高一些。毕竟这个阶段比较难考察你的业务项目中的沉淀&#xff0c;所以只能从基础部分入手考察。…

html知识笔记(三)——img标签、form表单

<img>标签&#xff1a;在网页中插入图片。 语法&#xff1a; <img src"图片地址" alt"下载失败时的替换文本" title "提示文本"> 举例&#xff1a; <img src "myimage.gif" alt "My Image" title "…

CSS的三种定位,月薪30K

毕业工作一年之后&#xff0c;有了转行的想法&#xff0c;偶然接触到程序员这方面&#xff0c;产生了浓厚且强烈的兴趣&#xff0c;开始学习前端&#xff0c;成功收割了大厂offer&#xff0c;开始了我的程序员生涯。 在自学过程中有过一些小厂的面试经历&#xff0c;也在一些小…

css知识笔记(一)——基础知识、选择器、元素分类

CSS全称为“层叠样式表 (Cascading Style Sheets)”&#xff0c;它主要是用于定义HTML内容在浏览器内的显示样式&#xff0c;如文字大小、颜色、字体加粗等。 如下列代码&#xff1a; p{font-size:12px;color:red;font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式…

HTML列表标签,大牛最佳总结

前言 跳槽&#xff0c;这在 IT 互联网圈是非常普遍的&#xff0c;也是让自己升职加薪&#xff0c;走上人生巅峰的重要方式。那么作为一个普通的Android程序猿&#xff0c;我们如何才能斩获大厂offer 呢&#xff1f; 疫情向好、面试在即&#xff0c;还在迷茫踌躇中的后浪们&…

css知识笔记(二)——盒子模型

盒子模型 类比月饼&#xff1a;礼盒是最外层&#xff0c;里面的月饼&#xff08;伍仁&#xff09;是页面元素&#xff0c;比如一个div&#xff1b;"伍仁"本身是盒子的内容&#xff08;可以是文字、图片、另一个标签元素&#xff09;&#xff0c;月饼和月饼盒之间的距…

HTML列表标签,讲的明明白白!

前言 过完年了&#xff0c;准备实习的你是已经在实习了&#xff0c;还是已经辞职回家过年&#xff0c;准备年后重新找工作呢&#xff0c;又或者是准备2021年春招&#xff1f; 那么还没没踏出校门或者是刚出校门没多久的同学们该如何准备前端校招的面试呢&#xff1f; 学习路线…

css学习笔记(三)——布局模型

布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上&#xff0c;又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本&#xff0c;那么 CSS 布局模板就是末了&#xff0c;是外在的表现形式。 CSS包含3种基本的布局模型…

HTML列表标签,赶紧收藏!

前言 前端校招面试题主要内容包括html&#xff0c;css&#xff0c;前端基础&#xff0c;前端核心&#xff0c;前端进阶&#xff0c;移动端开发&#xff0c;计算机基础&#xff0c;算法与数据结构&#xff0c;设计模式&#xff0c;项目等等。&#xff08;本文资料 适合0-2年&am…

css知识笔记(四)——代码简写、颜色值、长度值

盒模型代码简写 还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的&#xff1a;上右下左。具体应用在margin和padding的例子如下&#xff1a; margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设…

HTML如何添加锚点,分享一点面试小经验

前言 过完年了&#xff0c;准备实习的你是已经在实习了&#xff0c;还是已经辞职回家过年&#xff0c;准备年后重新找工作呢&#xff0c;又或者是准备2021年春招&#xff1f; 那么还没没踏出校门或者是刚出校门没多久的同学们该如何准备前端校招的面试呢&#xff1f; CSS篇 …

css知识笔记(五)——css样式设置小技巧

水平居中设置-行内元素 如果被设置元素为文本、图片等行内元素时&#xff0c;水平居中是通过给父元素设置 text-align:center 来实现的。如下代码&#xff1a; html代码&#xff1a; <body><div class"txtCenter">我是文本&#xff0c;哈哈&#xff0c;我…

HTML如何添加锚点,干货满满

前言 昨天有幸去字节面试了&#xff0c;顺便拿到了offer&#xff0c;把还记得的东西写下来&#xff0c;供大家参考一下。 CSS篇 让一个元素水平垂直居中&#xff0c;到底有多少种方案&#xff1f;浮动布局的优点&#xff0c;缺点&#xff1f;清除浮动的方式&#xff1f;使用di…

JavaScript知识笔记(一)——入门、语句、注释、变量、函数、输出内容、对话框、窗口

JavaScript可以提供漂亮的网页、令用户满意的上网体验。 1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等) 2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等) 引用JavaScript&#xff1a; 一、使用<script>标签在HTML文件中添加JavaScript代码&am…

HTML如何添加锚点,总结到位

标签语义化&#xff1a; 语义和默认样式的区别&#xff1a; 默认样式是浏览器设定的一些常用tag的表现形式&#xff1b;语义化的主要目的就是让大家直观的认识标签和属性的用途和作用&#xff1b; 标签语义化作用&#xff1a; 当只有HTML页面时&#xff0c;没有CSS&#xf…

JavaScript知识笔记(二)——事件

事件&#xff1a; JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说&#xff0c;当用户单击按钮或者提交表单数据时&#xff0c;就发生一个鼠标单击&#xff08;onclick&#x…

HTML如何添加锚点,我先收藏为敬

背景 我18年本科毕业&#xff0c;年前已有换工作想法&#xff0c;一直没有付诸行动&#xff0c;疫情爆发后回到老家&#xff0c;年后开始找工作&#xff0c;对于自己水平不是很清楚&#xff0c;之前找工作一直都挺顺利的。大学毕业没有留在实习单位继续做前端开发&#xff0c;…

JavaScript知识笔记(三)——内置对象、浏览器对象

内置对象&#xff1a; &#xff08;与Java很像&#xff09;JavaScript 中的所有事物都是对象&#xff0c;如:字符串、数值、数组、函数等&#xff0c;每个对象带有属性和方法。 对象的属性&#xff1a;反映该对象某些特定的性质的&#xff0c;如&#xff1a;字符串的长度、图像…

HTML如何添加锚点,文末领取面试资料

开始 我大学读的是大专&#xff0c;在学校学的是机电一体化。临近毕业的时候选择了学习web前端技术&#xff0c;因为做机电实在又累工资又低&#xff0c;而我更喜欢坐办公室的工作&#xff0c;有空调吹&#xff0c;我很现实&#xff0c;就是想多赚一点钱。到现在做了两年前端的…

HTML如何添加锚点,论程序员成长的正确姿势

前言 年前准备换工作&#xff0c;总结了一波面试最频繁的面试问题跟大家交流。此文章是关于浏览器的常见问题&#xff0c;大概面试10家遇到6家提问类似问题&#xff08;主要是大厂和中厂&#xff09;。目前入职滴滴出行成都团队。 css盒模型 1&#xff0c;css盒模型基本概念…