TPTCMS

七小时带你入门HTML+CSS网页设计,知识准备与开发工具(一)

HTMLCSS网页设计2018-10-01 00:20:41

大家好,我会用大概七个小时的时间同大家一起入门HTML+CSS网页设计,其实全部系列加起来也就1个小时左右,剩下的时间是让大家复习知识和练习写代码的,俗话说的好,七小时入门,成神靠个人。所以希望大家学习后一定要自己多练习,多练习,多练习。

本篇主要内容是给大家介绍HTML+CSS的基础知识和开发工具的推荐

HTML是什么:

html是一种描述网页的标记语言(记住,不是编程语言),我们用浏览器打开的网页都是用html来编写的。它的组成部分是由一对尖括号包围,如:<html>、<body>等,通常是成对出现,有开头就有结束,结束用斜线区分,如:<html>内容</html>等。

image

CSS是什么:

css是用来控制html网页的样式和布局的,比如网页的颜色,尺寸和轮廓,写法也很简单。

image

那么html与css的相互作用是什么?说小白一点,html就像一个毛坯房,只有房子的基础框架,而css就像房屋装修,同样的html结构用不同的css能设计出各种各样的网页样式。

image

开发工具:

这里给大家推荐notepad++,操作简单而且还免费,非常适合新入门的同学使用,浏览器可以选择谷歌浏览器或者360安全浏览器等,我这里使用谷歌浏览器为大家做演示。

image

下面给大家贴上常用的HTML+CSS标签,不要去死记硬背,后面多练习自然就会了:

<!--HTML标签-->
<h1>这是一个标题</h1> <!--标题-->
<p>这是一段文字</p> <!--段落-->
<a href="https://www.toutiao.com/" target="_blank">今日头条</a> <!--连接地址-->
<img src="http://tpt360.com/img/logo.png"> <!--一张图片-->
<div id="content" class="content"></div> <!--布局-->
<!--列表-->
<ul>
    <li>列表1</li>
    <li>列表1</li>
</ul>
<!--表格-->
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>小张</td>
        <td>小明</td>
</tr>
    <tr>
        <td>6岁</td>
        <td>8岁</td>
    </tr>
</table>
<!--表单-->
<form>
    <input type="text" name="mingzi">
    <input type="text" name="nianling">
</form>
<!--视频-->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
/*CSS标签*/
width: 100px; /*宽度*/
height: 100px; /*高度*/
line-height: 100px; /*行高*/
padding: 0px 0px 0px 0px; /*内边距*/
margin: 0px 0px 0px 0px; /*外边距*/
float: left; /*左浮动*/
float: right; /*右浮动*/
color: #000; /*字体颜色*/
background: #fff; /*背景颜色*/
font-size: 18px; /*字体大小*/
font-weight: 700; /*字体粗细*/
text-align: center; /*居中*/
a:hover {color: #FFF;} /*鼠标浮动字体变色*/
border-radius: 6px; /*边角大小*/
border: 1px solid #CDCDCD; /*全边框*/

下篇我将给大家具体介绍使用方法,谢谢观看!!!