WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学

2.0  html的语法格式

html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了,

先学习一个简单的h1标签,是个标题标签,在html中这样写:

<h1>我在h1标签中,我就是标题</h1>

那么h1标签中所包裹的文字,就标记成标题了。通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样!

大家知道word中的标题1、标题2、标题3……..吗?

html中的标题标签按照标题的大小从<h1>- <h6>,<h1>定义最大标题,<h6>定义最小标题:

<h1>我是标题 1,最大的标题</h1>

<h2>我是标题 2</h2>

<h3>我是标题 3</h3>

<h4>我是标题 4</h4>

<h5>我是标题 5</h5>

<h6>我是标题 6,最小的标题</h6>

标题和段落应该是我们最容易理解的,现在再介绍一个段落标签<p>。

<p>这段文字被p标签所包裹,所以现在你看到的这段文字就是一个段落了</p>

现在就试一下吧,新建一个文本文件,按照上边的例子写到记事本中,熟悉一下标题和段落的标签。写完后把你建的文本文件的扩展名改为html。用浏览器打开就可以看到效果了。

2.0.1  成对出现的标签

HTML 标签通常是成对出现的,比如 <h1> 我是标题1</h1>,还有练习中的p标签,这种成对出现的标签我们习惯称之为“双标签”。

双标签中的第一个标签称为开始标签,第二个标签称为结束标签,开始和结束标签也被称为开放标签和闭合标签如下图:

在结束标签</h1>中的 /,叫做结束符,代表着这是标签中的结束标签。

2.0.2  单个出现的标签

在HTML中,除了成对出现的标签,也存在单身的标签。这种标签称为:空标签,习惯上称为:单标签。有一个可以起到换行作用的标签:<br />这个标签就是单标签。当在使用这个标签的时候,就相当于按下回车键,让文本另起了一行,从新的一行开始!这个起换行作用的单标签<br />中也出现了和双标签结束标签中同样的“/”结束符,只不过是位置不一样了,现在只需知道双标签必须写上结束标签,单标签必须写上“/”结束符,现在我们在一个段落中加入这个<br />标签

<p>我是一个段落,因为我在p标签中,所以我是段落。</p>

<p>我是一个段落,因为我在p标签中,<br />所以我是段落。</p>

第一个是正常的段落,第二个是加入了换行标签<br/>。你也可以试一下。如果你是初学没有任何基础,现在不要想太多其他的,只要新建一个文本文档,并把文本文档原来的扩展名txt,改为html,就可以在里边写代码了,在浏览器中打开后如下图:

此篇学习笔记为网知博学原创,转载请附上文章链接并注明:网知博学-技术博客 WEB前端学习笔记 四

时间: 2024-10-15 00:56:02

WEB前端学习笔记 四的相关文章

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

WEB前端学习笔记 三

接上一篇,web学习笔记 二,web学习笔记刚刚发出,就发现被其他网站采集了,在此感谢您的采集和转发,但请注明文章出自网知博学. 1.7  开发工具的选择 增强文本编辑器:EditPlus.Notepad++ 特点:比较小.占用系统资源比较少.代码颜色高亮显示.但没有代码自动补功能 IDE:(Integrated Development Environment,集成开发环境).IDE集成开发环境(简称IDE)开发环境就是指在开发软件的时候需要用到的软件.这些软件包括代码编辑器.编译器.调试工具和

web前端学习笔记:文本属性

今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常用的文本格式化效果.有的网站在段落的第一个字母前放一个很小的透明图像,这些图像将文本推到后面来制造一种缩进文本的感觉.另外一些网站则使用完全标准的空格(spacer)标记.而在CSS中有一种更好地方法实现文本缩进.那就是text-indent属性. 通过使用text-indent属性,所有元素的第一

WEB前端学习笔记 二

1.4  JavaScript和Jquery能做什么? JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言 ,并且可在所有主要的浏览器中运行 IE.Firefox.Chorme.Opera ,JavaScript 可用来向 HTML 页面添加交互行为,如表单数据合法性验证.网页特效.动画效果.数值计算,例如你现在浏览的网知博学的首页面上的图片循环播放和导航分类,淘宝和京东的商品分类菜单等.JavaScript 是一种弱类型语言,无需编译,可由浏览器直接解释运行 特点

web前端学习笔记:JavaScript数组

今天主要给大家介绍javascript中数组的操作方法及函数的介绍,数组在其中的主要作用是使用单独的变量名来存储一系列的值.下面通过一些简单的javascript实例为大家讲解数组,具体的javascript教程如下: 字符串, JavaScript 字符串就是用'' 和""括起来的字符表示. 字符字面量, \n 换行, \t 制表, \b 退格, \r 回车, \f 进纸, \\ 斜杠,\' 单引号(') ,\" 双号(") \xnn 以十六进制代码nn 表示的一

web前端学习笔记(CSS盒子的浮动)

Posted on 2013-09-18 09:00 Stephen_Liu 阅读(2205) 评论(6) 编辑 收藏 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里

web前端学习笔记(CSS变化宽度布局)

Posted on 2013-09-30 09:03 Stephen_Liu 阅读(2406) 评论(6) 编辑 收藏 一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按照一定的比例同时变化,还是一列固定,另一列变化.这两种都是很常用的布局方式.然而对于等比方式而言,相对比较简单,和我上一篇博客中1-2-1的布局方式非常类似,因此这里只是介绍一列固