HTML 编程入门秘籍

<h1>：一级标题
   <h2>：二级标题
   <h3>：三级标题
   <h4>：四级标题
   <h5>：五级标题
   <h6>：六级标题
   <p>：段落
   <img>:图片

table:表格
   tr:行
   td：列
   border:边框
   cellpadding:内边距
   cellspacing:外边距
   algin:水平对齐方式
   center：居中对齐
   right:右对齐
   left：左对齐
   valign:垂直对齐方式
   top:顶部对齐
   middle:居中对齐
   bottom：底部对齐
   font:字体样式
   color:颜色
   size:大小
   face:字体
   colspan:列合并
   rowspan:行合并

ul:无序列表
   li:列表项
   ol:有序列表
   li：列表项
   type:项目符号类型
   dl:解释性列表、叙述性列表
   dt:被解释项
   dd：解释项
   hr:分割线

form:表单
   input:输入框
   type：输入框的类型
   text：文本框
   password:密码
   br:强制换行
   radio:单选
   name:编组
   checkbox：复选框
   select:下拉选择
   option:选项
   textarea:文本域，多行文本框
   cols:列
   rows：行
   submit：提交
   reset：取消
   value：按钮上显示的文字

css简述

CSS： C ascading S tyle S heets（级联样式表）

CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

css可以写在css文件里，也可以写在html里面head标签里面，

HTML是网页内容 CSS定义页面的样式

css基本语法

行内样式表

行内样式表,又称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式

格式：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

<div style="width: 200px;height: 100px;background-color: #FBC240;" id="d2">
			
			<table border="1" cellspacing="0" cellpadding="0" width="200px" height="100px">
				<tr><td colspan="3" align="center">
                <input type="text" id="textc" value="0"/>
				</td></tr>
				<tr><td align="center"><input type="button"  id="k" value="开始" onclick="startc()"/></td>
				  <td align="center"><input type="button"  id="f" value="复位" onclick="resetc()"/></td>
				<td align="center"><input type="button"  id="t" value="停止" onclick="stopc()"/></td>
				</tr>
			</table>
		</div>

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

<head>
		<meta charset="utf-8">
		<title>计数器</title>
		<style type="text/css">
			#d1{
				position: absolute;
				left: 40%;
				top: 18%;
				background-color: #C52916;
			}
			#textc{
				text-align: center;
			}
			#d2{
				position: relative;
				left: 50px;
				top: 25px;
			}
			#sp1{
				color: white;
				text-align: center;
			}
			#sp2{
				color: white;
				
				text-align: center;
			}
			
		</style>

外部样式表

外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过link 标签将外部样式表文件链接到 HTML 文档中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器</title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>

css选择器

常用的选择器：

标签选择器：通过标签选择器可以选择页面中的所有指定标签

语法：标签名 {}

类选择器：通过标签的class属性值选中一组标签

语法：.class属性值 {}

id 选择器：通过标签的id属性值选中唯一的一个标签

语法： #id属性值 {}

选择器组合：通过选择器分组可以同时选中多个选择器对应的标签

语法：选择器 1, 选择器 2, 选择器 N{}

通配选择器:可以用来选中页面中的所有的标签

语法： *{}

css文本，背景

文本

color：字体颜色
font-size：字体大小
font-family：字体
text-align：文本对齐
text-decoration:line-through：定义穿过文本下的一条线
text-decoration:underline：定义文本下的一条线
text-decoration:none：定义标准的文本
font-style: italic;斜体文本
font-weight:字体粗细
line-height:设置行高
letter-spacing：可以指定字符间距
text-indent：用来设置首行缩进
opacity：设置标签透明度

背景

background-color背景颜色
background-image背景图片
background-repeat背景重复
background-size背景尺寸
background- position 背景位置

css列表

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。

list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
list-style 简写属性。

css伪类

CSS 伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

伪类的语法：

:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式

块级,行级,行级块标签

块级标签：无论内容多少都会独自占据一行的。

例如<p>、<h1>、<ul>、<ol>、<hr/>等。

行级标签：只占自身大小的标签，不会占一行。

例如<font>、<b>、<i>、<a>等。

行级块标签

例如 <input/> <img>等

注意：

一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。 a可以包含任何标签，除去a本身； p标签不可以包含任何的块标签。

div和span 盒子模型

div标签

div 是块级标签，可以放置任何标签。

div 没有任何附加功能，给了什么属性就能变成什么样。

div 主要的作用是被用来布局网页。

span标签

span 是行级标签

span 没有任何附加功能，给了什么属性就能变成什么样。

span 标签被用来选中文档中的文字。

盒子模型

内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。通过width和 height 两个属性可以设置内容区的大小而不是整个盒子的大小。 width和 height 属性只适用于块标签 ( 包含行级块 ) 。

padding:10px 20px 30px 40px

这样会设置标签的上、右、下、左四个方向的内边距。

margin-top/right/bottom/left。

margin的值可以为负值。

margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等. 垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。

可以使用 border 属性来设置盒子的边框： border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。也可以使用border-top/left/right/bottom 分别指定上右下左四个方向的边框。

边框可以设置样式：

dotted （点线） dashed （虚线） solid （实线） double （双线） groove （槽线）

border-radius设置四个角为圆角边框

border-top-left-radius设置左上为圆角边框

清除浏览器的默认样式 *{

margin: 0;

padding: 0;

}

浮动 float

浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。

浮动使用 float 属性

可选值： none ：不浮动 left ：向左浮动 right ：向右浮动

块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一个块级标签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度

当一个标签浮动以后，其下方的标签会上移。

浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动标签不会撑开父标签。

清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不

发生变化。

可选值： left ：忽略左侧浮动 right ：忽略右侧浮动 both ：忽略全部浮动

css定位

position：absolute 绝对定位 relative 相对定位

absolute 绝对定位

绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。可以通过position: absolute; 开启绝对定位， left right top bottom四个属性来设置标签的偏移量

绝对定位的特点

1.开启绝对定位，会使标签脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化

3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签

的绝对定位都会同时开启父标签的相对定位）如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

4.绝对定位会使标签提升一个层级

5.绝对定位会改变标签的性质，行级标签变成块标签

relative 相对定位

相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。可以通过position:relative; 开启相对定位，left right top bottom四个属性来设置标签的偏移量。

相对定位的特点

当标签的position属性设置为relative时，则开启了标签的相对定位

1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化

2.相对定位是相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

css知识概要

div：盒模型，盒子，一个一个的模块
  css:层叠样式表
  *:通配符，指的是给所有的标签一加载就要首先完成的样式
  class:类名分类，命名方式可以用英文，英文加数字，英文加数字或者下划线，不可以用纯数字，单个字母，其他符号，中文命名，可以重复使用的
  id:id命名，命名方式和class一样，但是id是具备唯一标识的。不能多次重复使用
  float：浮动，影响的是并列结构，不影响父子结构，也不受父级或者子级的影响
  margin-left: auto;
margin-right: auto;:建立在没有做float的情况下，在父级块儿中居中
font-size:字体大小
font-weight：字体的粗细
normal：正常，常规
text-align：文本对齐方式

map：热点地图
usermap：使用地图
coords：坐标
shape：形状
rect：矩形
line-height: 35px; /*行高：就是一行文字的高度，所有行的行高加起来等于整个块儿的高度*/
  text-decoration: none; /*文本的链接特殊样式：设置为无*/
  a:hover{ /*是指a标签的伪类，鼠标悬浮的样式*/
  text-decoration: underline; /*文本的链接特殊样式：设置为下划线*/
  list-style: none; /*列表的项目符号样式：设置为无*/
  display: inline; /*元素的表现形式：行内元素的样式*/
  background-repeat: no-repeat; /*背景重复设置为不重复*/
background-position: bottom; /*背景图片的位置：定位到底部*/
text-indent: -9999px; /*文本缩进，-9999是一个特定的特殊值，表示不管在什么屏幕分辨率下都不显示*/

<pre>段落原样输出< /pre>
   position：定位
   fixed:固定定位，释放了物理位置，在有父级(无论定位与否)的状态下，释放掉自己的父级，保留空间位置，不会随着网页的滚动而滚动，悬浮在窗口上,位移的参考对象是body
   top,left,right,bottom:指的是位移的方向，可以是正数表示正方向移动，负数表示反方向移动
   absolute:相对定位,释放了物理位置，在有父级(无定位)的状态下，释放掉自己的父级，保留空间位置，会随着网页的滚动而滚动，位移的参考对象是body。在父级(有定位)的状态下，不会释放掉自己的父级，位移的参考对象是父级。
   relative:绝对定位，不会释放了物理位置,在有父级(无论定位与否)的状态下，不会释放掉自己的父级，位移时参考对象为自己本身的物理位置.

border-radius:边框的半径
   transform:变换
   translate：位移
   scale:缩放
   skew:斜切
   rotate:旋转
   transition:过渡
   animation:动画
   linear：匀速动画
   ease：非匀速
   infinite：循环
   @keyframes：动画的牵引

CsDn.FF

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML 编程入门秘籍

作者有话说：欢迎来到好文章太长没人看系列~且看且珍惜本文会详细展示html编写细节，html代码编写难度较低，可读性较强，仔细认真看一遍本文，即可按照自己喜欢的想法设计网页排版布局，希望大家学有所获！
复制链接

扫一扫