html基础知识

（一）元素（标签）

1、<p>

　　1.1段落标签，会换行。

2、<h1-h6>

　　2.1标题标签，会换行，有自己的样式。

3、<span>

　　3.1小元素标签，不会换行，显示的文字效果与p标签相同。

4、<a>

　　4.1超链接标签，不换行，下划线，独特的字体颜色，可以点击，点击后会跳转。

　　4.2可以跳转到在线的网页：注意：记得复制https、http；可以跳转到本地，填相对路径：相对于自身的位置出发去找到对应的文件。

　　4.3../ 返回上一级

6、图片标签

　　6.1单标签，不换行

5、标签的语法：<标签名属性1="属性值1" 属性2="属性值2"></标签名>

（二）文档流（块级元素、行内元素）和脱离文档流（行内块元素）

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：

　　1、display:inline;转换为行内（内联）元素

行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。

　　　　1.1设置宽高无效

　　　　1.2对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　　　1.3不会自动进行换行

　　2、display:block;转换为块级元素

块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

　　　　2.1能够设置宽高

　　　　2.2margin和padding的上下左右均对其有效

　　　　2.3自动换行，多个块级元素标签写在一起，默认排列方式为从上至下

　　3、display:inline-block;转换为行内块状元素

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

　　　　3.1能够设置宽高

　　　　3.2不自动换行，默认排列方式为从左到右

（三）列表

列表分三种：有序列表、无序列表和自定义列表。

无序列表标签：<ul><li></li></ul>;

有序列表标签：<ol><li></li></ol>;

ul或者ol的子集只能是li li的父级只能是ul或者ol。

（四）css

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。

目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。

css引入方式有三种：内嵌式、外链式和行内式

　　1、内嵌式:在head标签中,输入一个style标签.并把样式属性写在style标签内

　　2、外链式:link标签：链接CSS文件,引入外部样式,href属性中,填入相对路径

　　3、行内式：在标签属性的位置,加一个style属性,值样式属性填

优先级：行内式最大，其次内嵌式和外链式。同一元素属性存在外链式和内嵌式中时，因外链式和内嵌式同级，所以写在<head></head>里面时，先后写的生效。

（五）URL

HTML 统一资源定位器(Uniform Resource Locators)。

图片来源于www.w3cschool.com

（六）HTML布局

HTML布局使用<div>元素布局。

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="container" style="width:500px">
 6 
 7 <div id="header" style="background-color:#FFA500;">
 8 <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
 9 
10 <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
11 <b>Menu</b><br>
12 HTML<br>
13 CSS<br>
14 JavaScript</div>
15 
16 <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
17 Content goes here</div>
18 
19 <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
20 Copyright © W3Cschools.com</div>
21 
22 </div>
23 
24 </body>
25 </html>

简单布局

代码来源于www.w3cschool.com

Tip:使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

Tip:由于创建高级的布局非常耗时，使用模板是一个快速的选项。

练习：淘宝导栏行

 1 <div class="first">
 2             <ul class="one">
 3             <li class="a"><a href="https://www.tmall.com/" class="a" target="_blank">天猫</a></li>
 4             <li class="b"><a href="https://ju.taobao.com/" class="b" target="_blank">聚划算</a></li>
 5             <li class="c"><a href="https://chaoshi.tmall.com/"class="c" target="_blank">天猫超市</a></li>
 6             <li class="pipe">|</li>
 7             <li class="d"><a href="https://qiang.taobao.com/" class="d" target="_blank">淘宝抢</a></li>
 8             <li class="e"><a href="https://3c.tmall.com/" class="e" target="_blank">电器城</a></li>
 9             <li class="f"><a href="https://sf.taobao.com/" class="f" target="_blank">司法拍卖</a></li>
10             <li class="g"><a href="https://good.tmall.com/" class="g" target="_blank">淘宝心选</a></li>
11             <li class="h"><a href="https://www.taobao.com/markets/xt/znfp" class="h" target="_blank">兴农扶贫</a></li>    
12             <li class="pipe">|</li>
13             <li class="i"><a href="https://www.fliggy.com/?spm=a21bo.50862.201859.9.28689e73wh3bzS/" class="i" target="_blank">飞猪旅行</a></li>
14             <li class="j"><a href="https://yun.taobao.com/" class="j" target="_blank">智能生活</a></li>
15             <li class="k"><a href="https://suning.tmall.com/" class="k" target="_blank">苏宁易购</a></li>    
16             </ul>    
17         </div>

淘宝Navigation

  1 /*div标签*/
  2             .first{
  3                 width: 1349px;
  4                 height: 31px;
  5                 background: #FF6600;
  6             }
  7             /*ul标签*/
  8             .one{
  9                 width: 1190px;
 10                 height: 30px;
 11                 border: 1px solid #f60;
 12                 list-style: none;
 13                 overflow: hidden;
 14             }
 15             /*li标签*/
 16             .one .a{
 17                 width: 51px;
 18                 height: 30px;
 19                 float: left;
 20             }
 21             .one .b{
 22                 width: 67px;
 23                 height: 30px;
 24                 float: left;
 25             }
 26             .one .c{
 27                 width: 76px;
 28                 height: 30px;
 29                 float: left;
 30             }
 31             .one .d {
 32                 width: 53px;
 33                 height: 30px;
 34                 float: left;
 35             }
 36             .one .e {
 37                 width: 53px;
 38                 height: 30px;
 39                 float: left;
 40             }
 41             .one .f {
 42                 width: 67px;
 43                 height: 30px;
 44                 float: left;
 45             }
 46             .one .g {
 47                 width: 67px;
 48                 height: 30px;
 49                 float: left;
 50             }
 51             .one .h {
 52                 width: 67px;
 53                 height: 30px;
 54                 float: left;
 55             }
 56             .one .i {
 57                 width: 67px;
 58                 height: 30px;
 59                 float: left;
 60             }
 61             .one .j {
 62                 width: 67px;
 63                 height: 30px;
 64                 float: left;
 65             }
 66             .one .k {
 67                 width: 67px;
 68                 height: 30px;
 69                 float: left;
 70             }
 71             /*a标签*/
 72             .one .a .a{
 73                 width: 43px;
 74                 height: 30px;
 75                 text-align: center;
 76                 line-height:30px;
 77                 color: #fff;    
 78                 text-decoration: none;
 79                 font-weight: 700;
 80             }
 81             .one .b .b{
 82                 width: 59px;
 83                 height: 30px;
 84                 text-align: center;
 85                 line-height:30px;
 86                 color: #fff;
 87                 text-decoration: none;
 88                 font-weight: 700;
 89             }
 90             .one .c .c{
 91                 width:76px;
 92                 height: 30px;
 93                 text-align: center;
 94                 line-height:30px;
 95                 color: #fff;
 96                 text-decoration: none;
 97                 font-weight: 700;
 98             }
 99             .one .d .d{
100                 width: 53px;
101                 height: 30px;
102                 text-align: center;
103                 line-height:30px;
104                 color: #fff;
105                 text-decoration: none;
106                 font-weight: 700;
107             }
108             .one .e .e{
109                 width: 53px;
110                 height: 30px;
111                 text-align: center;
112                 line-height:30px;
113                 color: #fff;
114                 text-decoration: none;
115                 font-weight: 700;
116             }
117             .one .f .f{
118                 width: 67px;
119                 height: 30px;
120                 text-align: center;
121                 line-height:30px;
122                 color: #fff;
123                 text-decoration: none;
124                 font-weight: 700;
125             }
126             .one .g .g{
127                 width: 67px;
128                 height: 30px;
129                 text-align: center;
130                 line-height:30px;
131                 color: #fff;
132                 text-decoration: none;
133                 font-weight: 700;
134             }
135             .one .h .h{
136                 width: 67px;
137                 height: 30px;
138                 text-align: center;
139                 line-height:30px;
140                 color: #fff;
141                 text-decoration: none;
142                 font-weight: 700;
143             }
144             .one .i .i{
145                 width: 67px;
146                 height: 30px;
147                 text-align: center;
148                 line-height:30px;
149                 color: #fff;
150                 text-decoration: none;
151                 font-weight: 700;
152             }
153             .one .j .j{
154                 width: 67px;
155                 height: 30px;
156                 text-align: center;
157                 line-height:30px;
158                 color: #fff;
159                 text-decoration: none;
160                 font-weight: 700;
161             }
162             .one .k .k{
163                 width: 67px;
164                 height: 30px;
165                 text-align: center;
166                 line-height:30px;
167                 color: #fff;
168                 text-decoration: none;
169                 font-weight: 700;
170             }
171             /*pipe*/    
172             .one .pipe{
173                 width: 5px;
174                 height: 30px;
175                 float: left;
176                 color: #fff;
177                 text-align: center;
178                 line-height:30px;
179             }

CSS

（七）盒子模型

盒子模型：
　　1、内容宽度（width）和高度（height）
　　2、内边距（内填充） padding 内容到边框的距离
　　3、边框 boder
　　4、外边距距离其他盒子的距离代表四个方向

练习：做一个回字形的图案

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             div{
 8                 width: 200px;
 9                 height: 200px;
10                 border:3px solid black;
11             }
12             p{
13                 width: 100px;
14                 height: 100px;
15                 border:1px solid black;
16                 margin:49px;
17             }
18         </style>
19     </head>
20     <body>
21         <h1>
22             <p></p>
23         </h1>
24         <!--p标签不能被文本类的标签作为子集-->
25     </body>
26 </html>

回字型图案

练习：运用p标签的盒子模型，做出一个三角形 transparent透明色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             p{
 8                 width: 0px;
 9                 height: 0px;
10                 border-top:200px solid transparent;
11                 border-bottom:200px solid black;
12                 border-left:200px solid transparent;
13                 border-right:200px solid transparent;
14             }
15         </style>
16     </head>
17     <body>
18         <p></p>
19     </body>
20 </html>

三角形

（八）居中

　　1、文字的水平居中

也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。利用line-height设为height的一样即可。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7         <style>
 8         .wrap{
 9           line-height: 200px;/*垂直居中关键*/
10           text-align:center;
11           height: 200px;
12           font-size: 36px;
13           background-color: #ccc;
14 }
15         </style>
16     <body>
17             <div class="wrap">Hello World!</div>    
18     </body>
19 </html>

文字居中

　　2、padding填充

利用padding和background-clip配合实现div的水平垂直居中；通过background-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外div减去内div的差的一半，来实现：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .parent{
 8                  margin:0 auto;
 9                  width:200px;
10                  height:200px;
11                  background-color:red;
12             }
13             .children {
14                  width: 100px;
15                  height: 100px;
16                  padding: 50px;
17                  background-color: black;
18                  background-clip:content-box;/*居中的关键*/
19             }
20         </style>
21     </head>
22     <body>
23         <div class="parent">
24               <div class="children"></div>
25         </div>
26     </body>
27 </html>

padding居中

　　3、绝对定位居中

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。父容器元素：position: relative。

1 .Absolute-Center {
2   width: 50%;
3   height: 50%;
4   overflow: auto;
5   margin: auto;
6   position: absolute;
7   top: 0; left: 0; bottom: 0; right: 0;
8 }

绝对定位居中

注意：高度必须定义，建议加 overflow: auto，防止内容溢出。

（九）浮动

　　1、float属性创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

　　2、float的可能值为：left或right或none。

　　　　2.1 left - 使左边缘接触包含块的左边缘或另一浮动块的右边缘。

　　　　2.2 right - 使右边缘接触包含块的右边缘或另一浮动块的左边缘。

　　　　2.3 none - 元素不浮动。

浮动影响：让元素水平排列，父级高度变成0 解决办法：给父级加一个overflow:hidden;浮动后，元素脱离文档流，变成行内块元素。
此元素浮动，同级的元素也要浮动，否则容易造成页面结构混乱。

　　4、清除浮动

　　　　4.1clear：（left、right、both、none）。

（十）颜色

　颜色赋值方式

　　　　1、第一种直接打颜色的英文单词

　　　　2、第二种:十六进制 1六位数 2三位数

　　　　3、第三种：rgb(红，绿，蓝)

　　　　4、第四种：rgba(r,g,b,a) a指的是透明度值的范围0-1 1代表不透明

posted @ 2019-07-10 23:32 xiaochen-cmd 阅读(202) 评论(0) 编辑收藏举报

刷新页面返回顶部

xiaochen-cmd

html基础知识

公告