html css 基础 js

时间 2019-12-04

标签 html css 基础栏目 HTML 繁體版

原文原文链接

前言：因为出差项目须要，学习一下html+css基础和前人的经验总结，在此作下备注，固然若是能帮到有须要的小伙伴再好不过。css

html介绍

html是经过指定便签来显示内容的，每一个便签都有相应的开始和结束，建议都用***小写***，层次间有***相应的缩进***。建立一个网页文件很简单：新建一个文本文件，将其命名为xxx.html或者xxx.htm（注意后缀名问题）html

经常使用标签介绍

Head

Head标签中的内容是不会在网页中显示的，通常设置标题,引入外部文件，或者设置相应的meta等信息web

<head>
	<title>index</title>
	<meta name="author" content="Administrator" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
复制代码

文本标签

换行标签对于html而言，代码中的换行不会在页面中显示。须要使用相应的，<br/>和 <p></p>。
标题标签 <h1>~~~<h6> 依次变小，用于网站的标题

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
复制代码

效果以下浏览器

列表标签 1.ul和li

<ul>
					<li>你</li>
					<li>我</li>
					<li>他</li>
				</ul>
复制代码

效果以下 bash

注意： 2.dl ，dt，dd：它们分别表明列表，标题和数据。布局

<dl>
   <dt>水果</dt>
   <dd>苹果</dd>
   <dd>橘子</dd>
</dl>
复制代码

效果： post

经常使用其它标签学习

<a>超连接flex

//除了标签还有本身的属性，属性所有在开始标签写多个标签用空格分割
<a class="xyj" href="https://www.baidu.com/" target="content" title=" 标题">我是个连接</a>
复制代码

link是默认样式，visited为点击以后的效果，hover为鼠标放上去的效果，注意：对于ie而言不会继承link的效果，因此在通常在前面会加上这个visited属性。网站

a.xyj:link,a.xyj:visited {
				text-decoration:none;
				font-size:12px;
				color:#226;
			}

			a.xyj:visited {
				color:#a21;
			}
	
			a.xyj:hover {
				color:#191;
				text-decoration:underline;
			}
复制代码

<img> 标签用来展现图片

//alt表示图片没加载成功显示的文本
<img src="/i/eg_tulip.jpg"  alt="上海鲜花 港 - 郁金香" />
复制代码

<span> 经常嵌套在其它标签中，用来对文本进行简单的控制。

注释标签
小于标签(<)	& lt;
大于标签(>)	& gt;
空格	& nbsp;
copy 符号（©）	& copy;
@符号	@amp

容器标签

1.div <div>块级元素，用作容器，放置大量内容

div是块级元素独占一行默认从上往下排列
<div > 我是一个div </div>
<div >我是另外一个div </div>
复制代码

2.表格表单经常使用的表单标签:原则上全部的表单标签都要放置在form标签中 Input标签能够用来设置文本框，密码框等数据

<form action="01.html">
			<!--text表示文本输入框，password表明密码输入框-->
			用户名:<input type="text"/><br/>
			密码:<input type="password"/><br/>

			性别:<input type="radio" value="男" name="sex"/>男
				<input type="radio" value="女" name="sex"/>女<br/>
			兴趣:<input type="checkbox"/>唱歌<input type="checkbox"/>打豆豆
				<input type="checkbox"/>跳舞<br/>
			籍贯:<select>
				<option>北京</option>
				<option>上海</option>
				<option>广东</option>
			</select><br/>
			<!--多行文本，cols表示多框，rows表示多高-->
			我的简介:<textarea cols="50" rows="10"></textarea><br/>
			<!--submit提交，当提交时会连接到action中-->
			<input type="submit" value="用户注册"/>
			<!--button表示按钮，点击后没有任任何控制-->
			<input type="button" value="按钮"/>
</form>
复制代码

效果

3.Frameset标签用与协调管理其它界面html文件，静态加载，cols表示横向切分布局，rows，纵向切分布局

<!--第一列被设置为浏览器窗口的宽度的25%。第二列被设置为75%。加入noresize = " noresize阻止用户调整大小。 --> <frameset cols="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> 复制代码

CSS样式表

HTML仅仅只是作数据的显示，CSS是对页面的修饰。样式表有三种方式进行编写一、内嵌样式：嵌套在标签中，经过style属性来声明样式，内嵌样式只对当前标签有效，内嵌样式，最后执行，会把head中style样式替换掉。

<h2 style="color:#212267;text-decoration:underline;font-size:12px">css文件</h2>

复制代码

二、在html的title经过style标签统一为该页面编写样式，表示对页面中对全部标签都有效

<head>
		<title>css样式</title>
		<style type="text/css">
		／/对页面中对全部h2标签都有效
			h2{
				background:#aa1222;
				color:#fff;
			}
		</style>
	</head>

复制代码

三、将样式表文件编写到一个xxx.css的文件中，而后在head中引入该样式表文件,注意:对于样式表而言，后定义的会把先定义的样式表覆盖掉

<head>
		<title> 我是标题</title>
		<link rel="stylesheet" href="css02.css" type="text/css"/>
	</head>
复制代码

选择器

一、标签选择器：会对页面中的全部标签都有效

／/对页面中全部h2标签都有效
			h2{
				background:#aa1222;
				color:#fff;
			}
复制代码

二、ID选择器（获取id为xx的标签）：能够对页面中某个标签进行样式的设置，使用#号进行设置，注意匹配的id都适用这个标签。

#d1,#p2 {
			font-size:19px;
			background:#999;
		}
复制代码

三、类选择器（获取标签中class=xxx的标签）：能够选择页面中的一组标签，class="xxx的一组标签用.表示，能够加载多个类，用空格来隔开

.p1 {
    			color:#54a;
    			font-size:16px;
    		}
    		// 样式
		<p class="p1 nav_last">
		    Apache Whisker allows a...
		</p>
复制代码

四、包含选择符（获取某个标签中的全部的子标签）表示此标签下的全部span都应用这个css样式，注意：当使用了包含的操做符以后，它的加载时间比使用class的加载时间要低，因此若是此时再来定义一个class的样式，不会把使用包含的样式覆盖掉。

div span {
			background:#0ff;
		}
复制代码

五、子对象选择符(获取某个标签的第一级子标签) 仅对第一级生效

div>span {
			background:#f0f;
		}
复制代码

六、分组选择符（能够同时设定多个标签，使用逗号进行分割），

//d1，p2都使用该样式。
	#d1,#p2 {
			font-size:19px;
			background:#999;
		}
复制代码

布局

一、盒子模型(box model)默认

二、span和a相相似的文本标签仅仅只是用来设置文本，诸如:a和span对于这两个标签而言，注意：在W3C的标准中默认是不能进行width等样式进行修饰的，因此直接为这些标签设置width是没有做用的，须要经过display:block以后才有做用。可是对于IE而言就是有做用。三、padding的兼容性若是一个标签设置了height或者width,再进行padding的设置，对于IE而言，padding的值不会加到height或者width中（若是：一个div的高度为40,而padding-top:20;此时这个div的高度依然是40）；对于IE以外的全部浏览器，padding的值会加到height或者width中(若是：一个div的高度为40,padding-top为20，此时div的高度是60)。因此千万不要使用padding来进行对齐操做 四、定位Absolute和relative Absolute是绝对定位，针对父级标签中进行了absolute定位的标签来进行left、right等设置，若是父级标签中都没有这样的定位方式，就会针对body来进行定位，并且对于absolute而言，该容器再也不占用相应的空间，原有的空间会被其余元素所占据。 Relative是相对定位，都是针对父级元素进行定位的，并且空间会一直被占用 使用经验：常常会使用relative来实现文本位置的移动。因此若是要为某个容器设置里面的文本位置，能够用span包裹处理<span>sssss</span>，再为span设置

position：relative ；left ：10px；
复制代码

五、float float：元素会根据属性值向左或向右浮动。通常用于横向列表导航，复杂界面等一个块级元素若是没有设置height，其height是由子元素撑开的。对子元素使用了浮动以后，子元素会脱离标准文档流，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。要解决这样的问题，咱们就是要使用清除浮动。分一下三种方式。

一、哪里有浮动元素，就在其父级元素的中增长一个（做为最后一个子元素）clear:both; 二、父级元素添加overflow:hidden，注意：子元素超出父元素的范围，会形成超出的部分被隐藏 .clearfix{overflow:hidden;zoom:1} 三、利用after伪元素

// 例如消除<ul class="menu clearfix"> 
.clearfix: { zoom: 1; }
    .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
复制代码

六、让容器居中一、body {text-align:center;}仅仅只有IE能够居中二、margin:auto;仅仅只有IE以外的浏览器能够居中三、推荐使用的居中方式

position:absolute;
		left:50%;
     marginLeft:-width;
复制代码

七、div等容器盒子设置边框border

border-bottom: 1px solid #f1f1f1;
复制代码

Flex 布局

弹性布局容器和行内元素均可以声明Flex布局。 display: flex; Webkit内核的浏览器，必须加上-webkit前缀display: -webkit-flex; /* Safari */ 注意，设为Flex布局之后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器，它的全部子元素自动成为容器成员，简称”项目”。一、容器的属性

//决定主轴方向
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
复制代码

//控制一条轴线排不下，如何换行。
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码

//flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
复制代码

//主轴上的对齐方式
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

复制代码

//交叉轴上对齐方式
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
复制代码

//多根轴线的对齐方式,若是只有一根轴线，该属性不生效
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

复制代码

二、项目属性

//order属性定义项目的排列顺序
.item {
  order: <integer>;
}
复制代码

//放大比例
.item {
  flex-grow: <number>; /* default 0 */
}
复制代码

//缩小比例
.item {
  flex-shrink: <number>; /* default 1 */
}
复制代码

//项目占据的主轴空间
.item {
  flex-basis: <length> | auto; /* default auto */
}
复制代码

//单个项目有与其余项目不同的对齐方式,可覆盖align-items属性
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码

参考

Flex 布局教程：语法篇

若有疏漏，请指出不胜感激，若有问题能够经过以下方式联系我

简书 csdn 掘金 klvens跑码场