html知识笔记(一)——head和body标签

     标签的用途:我们学习网页制作时,常常会听到一个词,语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等。

head标签

     文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。在html中,<head>标签担任了这个责任。

     下面这些标签可用在 head 部分:

<head><title>...</title><meta><link><style>...</style><script>...</script>
</head>

<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

<meta>标签 : 可提供有关某个 HTML 元素的元信息 (meta-information),比如描述、针对搜索引擎的关键词以及刷新频率。

<link标签定义文档与外部资源的关系。 <link标签最常见的用途是链接样式表

<title>标签:顾名思义,放置样式代码,可放置css或js的。

<script>标签:放置JavaScript代码。

body标签

         在网页上要展示出来的页面内容一定要放在body标签中。

   <p>标签文章的段落放到<p>标签中。

   <hx>标签制作文章的标题。
        标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
        语法:
<hx>标题文本</hx> (x为1-6)
文章的标题前面已经说过了,可以使用标题标签,另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站。

注意:因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如:<h1>腾讯网</h1>

h1-h6标签的默认样式:

标签代码:

在浏览器中显示的样式:

从上面的图片可以看出标题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。

       有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em><strong>标签。

       但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

       语法:

<em>需要强调的文本</em>  

<strong>需要强调的文本</strong>

<span>标签 : 没有语义的,它的作用就是为了设置单独的样式用的。

<q>标签 : 比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。

 <blockquote>标签 : 引用别人的文本,但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签

<br />标签 : 换行。

  &nbsp : 空格

<address>标签 : 显示地址信息。

<code>标签 : 显示一计算机专业的编程代码。

<pre>标签 : 加入代码

  …………

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

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

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

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

相关文章

CSS的三种定位,100%好评!

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

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;也在一些小…

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篇 …

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盒模型基本概念…

DOM(文档对象模型)

文档对象模型DOM&#xff08;Document Object Model&#xff09;定义访问和处理HTML文档的标准方法。 DOM 将HTML文档呈现为带有元素、属性和文本的树结构&#xff08;节点树&#xff09;。 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合&…