目录
Html是Hypertext Markup Language缩写。即超文本标记语言是用于描述网页文档的一种标签。
HTML整体说明
整个 HTML 就由一个个元素组成(可以嵌套),而元素则一般由一对标签(tag)构成;
一个元素由开始标签,内容,结束标签组成;
对整个HTML文档进行整理分析,大致包含以下部分:
<!DOCTYPE html>: 声明文档类型。可有可无;
- <html></html>包裹了整个完整的页面,是一个根元素,其它元素都嵌套到其中;
<head></head>
:包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容;<meta charset="utf-8">:设置文档使用utf-8字符集编码- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">:指定页面的图标,出现在浏览器标签上;
- <title></title>:设置页面标题,出现在浏览器标签上;
- <body></body>:包含能在页面看到的所有内容;
HTML语法说明
- 标题:
<h1>~<h6>
分为六级标题,一级最大,六级最小;文本格式:
<p>
</p>
显示文本内容 <del>
</del>
划掉文本内容 <strong>
</strong>
加粗文本内容 <em>
</em>
斜体
- 超链接:<a href="http://www.baidu.com/" target="_blank">百度一下</a>。(其中_blank表示在新的页面打开_self表示当前页面打开);
- 图片:<img src="图像/03.jpg" width="200" height="200">;
- 表格:使用<table>标签
<tr></tr> 表示表格的每一行 <th></th> 表示表头 <td></td> 表示表的数据
- 表单:使用<form></form>标签;
- 下拉列表:
- 使用<select></select>标签,
- 选项使用<option></option>标签;
- input中的类型说明:
- 文本为text
- 密码为password
- 数字为number
- 单选为radio
- 多选为checkbox;等等
- input中的placeholder为占位符,checked为默认选项;
- 区块元素:<div></div>,<h1></h1>,<pre></pre>等自动分行(其中<pre></pre>标签可以用来展示特别格式的文本);
- 内联元素:<span></span>,<input>,<a></a>等不会新起一行。
CSS整体说明
CSS是Cascading Style Sheet的缩写。 即层叠样式表,是用于控制网页样式并允许将样式信息与网CSS简化了HTML中各种繁琐的标签,使各标签的属性更具一般性和通用性,扩充原来的功能。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。页内容分离的一种标记性语言。我认为CSS入门比较简单,但是熟练精通运用对我来说有点困难。
一点小提示:
想要大致了CSS知识解请前往https://qige.io/ ,想要比较熟练运用CSS请前往CSS教程。
注明:
由于css知识内容比较繁杂,css知识点就不一一列举了,下面就我在学习中认为比较有趣的css某几项知识点讲解一下
CSS语法说明(先附上我的练习代码)
<style> /* 选择器{样式} */ /* 给谁改样式 {改什么样式}*/ /* 标签选择器 */ p { color: red; /* 修改文字字体大小为12像素 */ font-size: 12px; } div { color:pink; } /* class选择器,开发最常用*/ .aquamarine { color:aquamarine; } .bule { color: rgb(0, 149, 255); } /* .中文也可以但不建议 */ .red { /* 背景颜色 */ background-color: red; } .green { background-color: blue; } .font20 { font-size: 20px; } .box { width: 100px; height: 100px; } /* id选择器 只能调用一次,别人切勿使用*/ #pink { color: pink; } /* 通配符选择器,*将hmtl、body、div、span等都改变,也不需要去调用*/ * { color: palegoldenrod; } </style> </head> <body> <p>这个标题是红色的</p> <p>sdf</p> <ul> <li class="bule"> li标签是蓝的 </li> </ul> <div class="red bule font20 box" >粉色的</div> <div class="green box">8</div> <div class="red aquamarine box">蓝的</div> <div id="pink">这是崔春洋的id选择器</div> </body>
浮动样式举例
<style>
.float {
/* 块级横向排列找浮动 */
/* 浮动具有行内块的相似特性 */
float: left;
width: 150px;
height: 200px;
background-color: pink;
/* display: inline-block; */
}
.float_1{
/* 块级横向排列找浮动 */
float: left;
width: 150px;
height: 200px;
background-color: pink;
/* display: inline-block; */
}
.nofloat {
width: 180px;
height: 250px;
background-color: rgb(204, 255, 192);
}
</style>
</head>
<body>
<div class="float">1</div>
<div class="float_1">2</div>
<div class="float">3</div>
<div class="float">4</div>
<div class="nofloat">5</div>
</body>
CSS圆角边框
<title>CSS圆角边框</title>
<style>
.yuanjiao {
width: 100px;
height: 200px;
background-color: #0081ff;
border-radius: 50px;
}
.juxing{
width: 100px;
height: 100px;
background-color: #0081ff;
border-radius: 50px;
}
.radius {
width: 100px;
height: 200px;
background-color: #0081ff;
/* 从左上角,顺时针 */
border-radius: 10px 20px 30px 40px;
/* border-top-left-radius: 99px; */
}
</style>
</head>
<body>
<div class="yuanjiao"></div>
<div class="juxing"></div>
<div class="radius"></div>
</body>
盒子文字阴影(此项我最喜欢并且在5个web页面设计上运用)
<style>
.shadow {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* h-shadow:水平阴影位置,v-shadow:垂直阴影位置,
blur:模糊距离,spread:阴影的尺寸,
color:阴影的颜色,inset:外部阴影outset改为内部阴影 */
box-shadow: 10px 10px 10px 10px black ;
/* 文字阴影 */
/* h-shadow:水平阴影位置,v-shadow:垂直阴影位置,
blur:模糊距离, color:阴影的颜色*/
text-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}
/* 鼠标经过盒子添加阴影效果 */
.shadow:hover {
box-shadow: 10px 10px 10px 10px #0081ff;
}
</style>
<body>
<div class="shadow">
我也有影子
</div>
</body>
总结
“纸上得来终觉浅,绝知此事要躬行”,编程更是如此,在有一点的知识基础的前提下,需要不断的动手去实践,有了这样的一个过程才能真正体会到编程的乐趣(当然也有痛苦,苦后才有甜嘛)。本学期先是跟着王勇老师的课堂知识,接触到了Html+Css,然后利用课下时间,坚持了一个月左右的时间仔细的学习了HTML和Css内容,收获颇丰。