关于Html与css的一些解释

一、简单介绍

       1、html,是hyper text markup language的缩写,中文为“超文本标记语言”。

       2、html不是编程语言而是一种标记语言。

二、标签与元素

1、html标签:如<div>(两个尖括号加上一个元素名,<div>是开始标签,</div>是结束标签)。

2、html元素:<div>元素内容</div>(开始与结束标签加上内容)。

3、一般的html标签都有开始和结束标签,但是有些是空标签,即没有结束标签和元素内容。如<br/><img/><link/>等等。

4、所有标签与属性最好用小写

三、html属性

       1、id、class、style、name等等,属性一般都有值。值也可能有好几种。

四、html标签详解

1、<html></html>html标签,告诉浏览器这里是html文档的开始(永远呆在最外层)。

2、<head></head>在head里你可以插入脚本(script)、样式文件(css)还有各种meta信息

3、<title></title>网页的标题,永远放在head中。

4、<meta>定义网页的编码字符以及对网页的描述。如<meta charset=”utf-8” Content-type=” text/html” >

5、<link/>空标签,用于链接到外部的css样式文件。如:<link rel=”stylesheet” type=”text/css” href=”style.css”/>.

6、<script></script>

7、<body></body> 定义文档的主体,所有的html内容都放到<body>里

8、<h1></h1>标题标签,有<h1>到<h6>,字体大小依次减小。具体看示范

9、<p></p>段落标签,放置文字段落用的。

10、<img>图像标签,用法如:<img src=”image.png”/>

11、<a></a>链接标签,用于链接到其他网址,如<a href=”http://www.baidu.com”>百度</a>。alt与title属性除了用于提示还和搜索引擎抓取信息有关。

12、<ul></ul>无序列表,用法:<ul><li></li><ul>,默认有padding和margin

       <ol></ol>有序列表,用法同上

13、<table></table>表格标签,以前用来布局,现在基本用来写表格

14、<form></form>表单标签,用来数据交互

    <input/>(type有text、submit、radio、checkbox、password)、<textarea>、<label>、<button>

15、<iframe></iframe>框架标签,用法:<iframe src=http://www.baidu.com width=”200” height=”200”></iframe>,相当于放入另一个网页整体。

16、<div></div>定义文档区块,是块级元素

    <span></span>用于对文档中的行内元素进行组合

17、块级元素与内联元素的区别

块级元素始终一个元素一行,不管他的宽度为多少,都不可能有其他元素与他在同一行(除了使用浮动,定位,浮动和定位都脱离了文档流,所以不能同等对待。)

内联元素也称行内元素,就是他可以与多个内联元素共处一行,但不能与块级元素共处一行。内联元素不能定义宽和高,只有转变为display:inline-block;才能定义宽和高,并且可以与其他内联元素共处一行。内联元素padding-left,padding-right有效但是padding-top和padding-bottom无效。Margin似乎也一样,不懂的可以试试。

 18、居中的方式

(1)在一个元素外面加一个div,并给这个div加上text-align属性,属性值为center.

 原理:text-align:center;是让div内部的元素居中显示,并且由div的宽度决定。默认情况下div的宽度是占满整个网页的。故相div内部的元素相对于整个网页居中

(2)margin:auto;这个用法很常见,但是又特定要求,就是一定要给你想要居中的元素一个宽度值(百分比也好固定宽度也好)

    原理:浏览器解析时会自动给有宽度的元素左右两边赋予相等的外边距,所以div成居中显示。

(3)初学者最初用的方法就是加margin或者padding,使他看起来像居中的样子,但是这样在不同分辨率上的电脑显示绝对不一样,所以这种方法最好别用。

 居中的方式还有很多种,包括竖直居中也有很多种,这里不一一细说。请童鞋们自行探索,度娘谷哥才是最好的老师。

19、定位

定位通常分3种,绝对定位,相对定位,固定定位,其实可以从字面来理解这些词的含义;

绝对定位,就是很霸道的那种,不受原来位置的约束,你给他的TRBL(top,right,bottom,left)设置成多少他就在浏览器的什么位置显示,比较官方的术语就是,绝对定位的元素脱离了文档流(跟浮动一样),不受原来的文档约束,不占原来的位置。默认情况下绝对定位是相对于body这个元素进行定位的,但是如果离他最近的一个祖先元素有设置position为absolute或者relative。那么他就相对于这个祖先元素进行定位。

相对定位:就是相对的意思,相对于谁呢?默认情况下相对于他自己。即设置了TRBL后,他原来的位置就分别在他现在这个位置的TRBL多少值。譬如left:100px;

那么他原来的位置就在他现在的位置左边100px处。当然还有其他说法,童鞋们自己领悟。相对定位不脱离文档流,他原来的位置还占着。

固定定位;脱离了文档流,但是他与绝对定位稍有不同,他是相对于浏览器视窗(你看的见的地方)进行定位的,而绝对定位则是默认相对于body的,即整张网页。

20、浮动浮动是脱离文档流的,所以他不会占有原来的地方,默认的z-index值大于       其他未设置浮动的元素,所以有时候会遮挡住其他元素,float:left默认情况下会向网页左上角靠拢,只要前面没有元素挡住他。大家可以把他想象成空气,而其他未设置为浮动的元素则想象成方块石头,石头挡得住空气,而空气挡不住石头。童鞋们自己试试,从而领悟出其他元素与浮动元素在网页中的关系。另外,浮动最好别乱用,能不用浮动就不要用浮动。

              好了暂时就写这些。本人水平有限,难免有错误之处,若发现请及时告诉我。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

4573
来自专栏Java后端技术

细谈CSS布局方式

  [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而...

1182
来自专栏python3

tkinter -- button1

Tkinter Relief styles: 构件的浮雕式是指某些模拟的3-D周围的部件外的影响

1294
来自专栏流媒体

Android View measure解读

1423
来自专栏编程坑太多

事件对象的使用、属性和方法

1253
来自专栏十月梦想

Vue同时使用transition(过渡)和animate.css(动画库)

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-en...

8731
来自专栏cnblogs

Bootstrap源码分析之transition、affix

一、Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件; 首先:创建...

2117
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

我们把 html 文件看成一个文档,因为万物皆对象,所以这个文档也是一个对象。这个文档中所有的标签都可以看成一个对象,比如 div 标签,p 标签等。

1222
来自专栏木子昭的博客

<布局>子级相对级居中对齐的几种方式

? 一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50...

2944
来自专栏我分享我快乐

WEB布局代码初学者常见问题整理

1、 单词写错 ? ? 2、 用中文符号 ? ? 3、 标签未结束 ? ? 4、 引号未结束 ? ? 5、 尖括号未结束 ? ? 6、 标签属性之间...

3226

扫码关注云+社区

领取腾讯云代金券