Html-Css详解

lovegigi · 发表于 2017-6-22 07:15:23

Html-Css详解

一、 Html部分

Html定义

Hyper Text Markup Language 超文本标记语言
html 1.0 -> html 2.0 -> ... -> html 4 -> html 5

网页的基本结构

　　<html>
　　<head>
　　<title>这里显示标题文字</title>
　　</head>
　　<body>
　　这里显示正文内容。
　　</body>
</html>

title：网页的标题
body：网页的正文部分
父子关系：父元素、子元素。兄弟关系：兄弟元素。
祖先后代关系：祖先元素、后代元素。

浏览器

用于查看运行网页文件。
IE、360、猎豹、谷歌、火狐、欧鹏、世界之窗... ...

网页开发工具

记事本、Dreamweaver、sublime text、... ...

网页编码(乱码)

文件在保存时使用的编码、网页文件在浏览器中查看时使用的编码
现在有很多字符编码格式：ascii(256:字母、数字、常用符号)、gbk、gb2312、UTF-8
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

常用网页标签

　　1>. 标题标签  h1 h2 h3 h4 h5 h6
　　2>. 段落标签  <p></p>
　　3>. 换行标签  <br /> 自闭合标记
　　4>. 水平线标签  <hr />
　　5>. 加粗：strong 斜体：em
　　6>.特殊符号（实体字符）
　　<    <
　　>    >
　　"    "
　　@    ©
　　空格

注释

让开发人员看的，以后维护网页非常方便。

图片标记

<img src="myphoto.jpg" alt="文字" title="" />
src属性：设置要显示的图片路径
alt属性：当图片路径不存在时，使用指定文字代替
title属性：当鼠标悬浮到元素上时，提示的文字信息
width和height属性：设置图像的宽度和高度（其他html元素也可以使用这两个属性控制大小）。

超链接

用途：用于实现页面间导航、锚链接（跳转到页面指定元素的位置）、功能性链接（文件下载|发送邮件）
<a href="目标页面地址" target="">文字或图片</a>
target属性：_blank(打开新窗口加载目标页面)、_self(在当前窗口加载目标页面)
<a href="mailto:451710955@qq.com">发送邮件</a>

文件扩展名

不同类型的文件，有不同的文件扩展名。
　　音频文件：.mp3
　　视频文件：.mp4 .avi  .rmvb .rm
　　安装文件：.exe
　　图片文件：.png .jpg  .gif *.bmp
　　网页文件：.html .htm
设置计算机显示和隐藏文件的扩展名：
打开计算机（我的电脑）->工具菜单->文件夹选项->查看->隐藏文件的扩展名

列表

定义：由很多相同或相似的列表项组成的集合就是列表。
分类：无序列表、有序列表、定义列表

无序列表

ul：无序列表 li：列表项

无序列表type属性：disc（实心圆=默认值）、square（实心方块）、circle（空心圆）

有序列表

ol：无序列表 li：列表项

有序列表type属性：1（数组=默认值）、A|a（大|小写字母）、I|i（大|小写的罗马数字）

表格

组成元素：table、tr、th、td
用途：呈现数据；布局
边框：<table border="1" cellspacing="0" cellpadding="10">
border：边框线的宽度
cellspacing：单元格与单元格之间的距离
cellpadding：单元格与内容之间的距离
对齐方式（td）：
水平对齐：align:left|right|center
垂直对齐：valign:top|bottom|middle

跨行：rowspan="n" 跨列：colspan="n"

框架：frameset

注意：使用frameset时，不能使用Html（head|body）标记
cols属性：设置框架划分为几列。cols="20%,*" *代表占据所有剩余空间。
rows属性：设置框架划分为几行。*代表占据所有剩余空间。

禁止改变框架的大小：<frame noresize="noresize"></frame>
去掉框架的边框：<frameset frameborder="0"></frame>

框架：iframe

注意：iframe可以嵌入到html结构中。

scrolling：是否允许出现滚动条

form表单标记

<form action="" method=""></form>
method：控制表单的提交方式。method属性值可以是：post和get。
l get：表单中提交的数据会显示到Url地址中。
l post：表单中提交的数据不会显示到Url地址中。
action：控制表单提交的地址。
注意：form不会在页面中呈现任何可视化的内容。
http://www.baidu.com/search.html?name=zhangsan&password=123456
url ?后面的内容都是参数，?前面的是页面地址，上面Url中包含2个参数：name、password

表单元素

　　1>.单行文本框
　　<input type="text" value="文本框中显示的内容" name="" id="" />
　　2>.密码框
　　<input type="password" />
　　3>.按钮
　　提交按钮：<input type="submit" value="按钮上显示的文本" />
　　重置按钮：<input type="reset" value="重置" />
　　普通按钮：<input type="button" value="显示的文本" />
　　图片按钮：<input type="image" src="图片路径" />
　　4>.单选按钮
　　<input type="radio" name="" value="" />
　　注意：如果多个单选按钮要具有互斥的效果，应该保持他们的name属性值相同。
　　5>.复选框
　　<input type="checkbox" />
　　6>.下拉列表框
　　<select name="shengfen">
　　<option value="-1">请选择</option>
　　<option value="1">河北省</option>
　　<option value="2" selected="selected">河南省</option>
　　<option value="3">湖北省</option>
　　<option value="4">湖南省</option>
　　</select>
　　7>.多行文本框
　　<textarea rows=”” cols=””></textarea>
　　8>.文件域
　　<input type="file" name="" />
　　3.语义化表单
　　1>.fieldset 和 legend
　　<fieldset>
　　<legend></legend>
　　......
　　</fieldset>
　　2>.label
　　<label for="表单元素的值">文字</label>
二、 Css部分

CSS简介

CSS 是 Cascading Style Sheet 的缩写。层叠样式表。
用途：用于(增强)控制网页外观效果并允许将样式信息与网页内容分离的一种标记性语言。

CSS常用的属性

盒子模型

l border：边框
相关属性：border-left、border-right、border-top、border-bottom
常见写法：border:1px solid red; border-bottom:1px dashed green; border-right:none;
l margin：外边距
相关属性：margin-left、margin-right、margin-top、margin-bottom
常见写法：margin:10px; margin-bottom:10px; margin:10px 0px; margin:10px 20px 30px 40px;(上右下左)
l padding：内边距
相关属性：padding-left、padding-right、padding-top、padding-bottom
常见写法：padding:10px; padding-bottom:10px;

CSS代码的书写位置

  1>.行内样式：直接在html元素的style属性中书写CSS代码
   <divfont-family: 宋体">代码"></div>
  2>.内嵌样式：在网页文件的head标记中，title标记后书写CSS代码

　　<head>
　　<title></title>
　　<style type="text/css">
　　css代码
　　</style>
　　</head>

3>.外部样式：将CSS代码单独写到一个样式表文件中（***.css），然后再将css文件导入到网页中

CSS选择符的几种用法

  1>.ID选择符    语法：#selectorName{...}
   #box1{border:1px solid red;}
  2>.类选择符    语法：.selectorName{...}    class属性
   .box{border:1px solid green;}
  3>.标记选择符    语法：selectorName{...}
   div{color:red;border:1px solid green;}
  4>.组合选择符    语法：selector1,selector2,...{...}
   .box,#mybox,span{border:1px solid red;}
   .box{border:1px solid red;}
   #mybox{border:1px solid red;}
   span{border:1px solid red;}
  5>.包含选择符    语法：selector1 selecotr2{...}
   div span{font-size:20px;}    .box span{font-size:20px;} #yourbox .box{font-size:20px;}
  6>.通配符选择符语法：*{...}
   *{font-size:20px;}

网页中颜色的几种用法

  1>.拥有颜色名称的颜色。red、blue、black、white、gray、purple...
  2>.WEB安全色。# + 6位（0-9A-F） #FFFFFF #000000  #A927C0 #FFF #081 #FFCA66
  3>.rgb颜色值。rgb(0,255,100) rgb(100,100, 100) 每一位都介于0-255之间

CSS属性

伪类

  :hover  鼠标悬浮到元素上时应用的效果 tr:hover{}
  :link 未访问过的超链接
  :visited  已经访问过的超链接的样式
:active 被激活（鼠标按下）时的样式

CSS常用属性

1>.background-image 设置背景图片
background-image:url("images/xxx.jpg");
2>.background-repeat 设置背景图片的重复
repeat(水平垂直方向重复)|no-repeat(不重复)|repeat-x(水平方向重复)|repeat-y(垂直方向重复)
3>.background-position 设置背景图片的坐标
background-position:x y; background-position:20px 50px;
4>.position 定位
static | absolute | fixed | relative
注意：当position设置为absolute、fixed或者relative后，top|bottom|left|right会被激活。
5>.z-index 设置z轴的大小
z-index:999;
6>.display 元素的呈现方式
   inline：行内样式，无法设置宽度、高度
   block：块，每次在新的一行显示
   inline-block：行内块，不会换行，同时可以设置高度和宽度
      none：隐藏元素，使元素不可见（并且不占据空间）。

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] Html-Css详解

扫码加入运维网微信交流群