WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学

2.0.3  html标签的属性格式

现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>、和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中。

如上图,<p>标签中的 align(中文就是排列的意思)叫做属性名称,属性值就是等号后边的,写在双引号内,改变这个属性值,就能让段落,在页面中按照属性值设定的位置来显示;如现在的属性值是:"center",那么这个段落就将会居中显示,如果把"center"改成"right"那么段落就将会居右显示,如果是"left"呢,段落就将居左显示(默认就是居左显示)

p标签的属性:align

p标签的属性值:"left"、"center"、"right" 单词含义依次是:left(左边)、center(中心)、right(右边)在文档中通常翻译为,左对齐、居中对齐、右对齐

简单一句话就是:<p>标签的属性align有三个值,可以让段落左对齐、居中对齐、右对齐。

任何标签的属性都遵循这个格式,属性名称=“属性值”;一个标签中可以写多个属性,属性之间用空格分开,但只能写属于这个标签的属性,不能写其他标签的属性,如有一个改变字体颜色的属性并不属于<p>标签,那么就不能在p标签中写上这个属性。

标签中的样式属性基本已经作废,只需要了解即可。

我们总结一下书写标签的标准规范:

1.   所有标签和属性都必须使用小写字母;

2.   所有属性值都必须加引号;

3.   双标签必须成对出现,也就说必须有结束标签;

4.   单标签必须要有结束符:如 <br />

2.0.4  构成HTML文档(网页)最基本的必须的标签

现在知道了标签和标签属性的写法,我们来了解一下简单的网页由哪些必须的标签构成:

<html></html>标签:

整个文档中(网页)最大的(最外层的标签),表示一个网页整体,这个标签中包含头部标签(<head>)和主体标签(<body>),也就是说所有的标签都要写在这个html标签内。

<head></head>标签:

head标签用来定义文档的头部,描述了文档的各种属性和信息,包括Html文档(网页)的标题,如定义在哪里找到样式表(css)到哪里找到JavaScript和Jquery等~这个标签所定义的内容,用户看不到。是给浏览器用的。

这个标签中包含一个所必须的标签,那就是<title>定义网页标题</title>标签,是用来定义网页标题的,其他的信息定义以后的笔记中有记录。

<body></body>标签:

<body>标签,主体部分,用户在浏览器中看到的内容,都要放在这个标签里面!如下图:

现在还要了解一下,这几个组成html文档基本标签的属性,希望大家不要忘记标签属性的格式:属性名称=“属性值”;

<html</html>标签的属性:

这个代表着整个html文档的标签有一个属性是: xmlns,它的值是“   http://www.w3.org/1999/xhtml”  是一个固定值,这个属性是默认的,即使你没有把它写到标签上,它也会被添加 <html> </html>标签中,现在只需知道这个属性是定义命空间的,不要忘记了,如果遇到现在理解不了的词语,没有必要非要弄明。

<body></body>标签的属性:

属性名称:text 属性值:颜色的单词。如text="red";把网页的文字设置为红色;

属性名称:bgcolor 属性值:颜色的单词。如bgcolor="black";把网页的背景设置为黑色

当然这个两个属性也经被弃用,但还是要知道标签的属性要怎么写,是因为,虽然标签的样式属性已经不赞成使用,但是标签还有一些全局属性,和事件属性,以及HTML5中新增的一些属性,在以后的笔记中将会介绍到。所以,必须要知道标签的属性和属性的写法!!

学习到这里,你必须能使用最简单的编辑器,也就是记事本,写出html文档最基本四个标签,如上图,并能知道标签和标签属性的书写格式,如果还是有些晕,就把网知博学技术博客中的web前端学习笔记一到四从新阅读一次吧。

新建一个文本文档 → 把文本文档的扩展名txt更改为html → 鼠标右键选择打开方式使用笔记本 → 打开后在里边写最基本的标签和属性,然后保存,双击即可使用关联的浏览器打开查看效果!如下图。如果你从未写过标签代码,必须多写几次,熟悉格式。跟着下面的gif图片多做几次把

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

时间: 2024-12-25 20:20:59

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

WEB前端学习笔记 一

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

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

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的布局方式非常类似,因此这里只是介绍一列固