您的位置：首页 > Web前端 > CSS

HTML&CSS 知识点快速入门（一）

2017-06-19 22:25 836 查看

前序

HTML与CSS对于刚入门的小菜鸟可能会多脸懵逼，不知道代表什么含义，但是每天我们上网的时候都有遇到，网页就是html，网页上面的样式、排版、图标都是由CSS所绘制。

本系列文章就带大家快速的入门HTML与CSS，通过几个小时的阅读与思考自己就可以编写一个简单的网页，介绍一些常用到的知识点。

本文适合对象

零基础的同学

想在短时间入门

编辑器推荐

vscode（免费）

webstorm（收费，但有试用，百度也有很多你懂的东西存在）

如果已经有熟练的编辑器就用自己顺手的，写代码最重要的还是顺手。没有编辑器的同学则可以使用上面的推荐。

vscode是微软家的东西，截止到2017年6月，功能已经很强大了。如果还想要更屌的东西，就用Microsoft Visual Studio 2016，被别人尊称为银河系最好用的编辑器，嘿嘿嘿，自己去感受吧。

WebStorm也不错，界面亲民，用的不多，有兴趣的同学先百度一下看看

特别说明

想要系统的学习的话，还是要自己去阅读一些官方文档

这里推荐：MDN HTML

本系列文章还是适合当Tips用

目录

HTML的定义、概念、发展简史

常用HTML标签的含义、用法

HTML语义化

1，HTML的定义与概念

HTML是英文HyperText Markup Language的缩写，中文意思是超文本标记语言

HTML是一个把所有东西包含起来的外壳：HTML是一个国际化的标准，由万维网联盟（W3C）和网页超文本技术工作小组 (WHATWG)维护。

HTML没有描述内容的样式和格式，只是内容本身和其意义。如果你想要在网站中加入样式和格式，需要通过层叠样式表（CSS）来定义和控制。

2，HTML的发明原因

HTML是由蒂姆·伯纳斯-李，一名CERN（欧洲核子研究组织）的物理学家发明，他发明HTML的原因是以前的网络交流方式太不方便了，于是自己弄了一个标记语言出来。但现在的版本跟以前已经大不相同了。

3，怎么编写HTML

基础的HTML编码结构如下：

<html>
<head>
<title>这是标题</title>
</head>
<body>
这是示例文本...
<!-- 我们使用这种写法来标记注释 -->
<!-- 页面标签和其他的内容都在这里.... -->
<!-- 这是在浏览器中显示的实际区域 -->
</body>
</html>


通过上面的代码片段可以很轻松的看出来，HTML是由一对一对的Tag标记组成的。标记利用尖括号表示，而结束标记（用来指示内容尾端）则在前面加上斜线。

<html></html>


html主体，相当于整个人。

<head></head>


head头部，相当于人的脑袋，里面放一些CSS外部引用、标题、一些规则等等，简而言之head里面放的都是html的一些灵魂

<body></body>


body身体，相当于人的躯干部门，放置的都是一些html的内容结构，就跟人身体里面的骨架一样。

打开你的编辑器，复制上面的代码到编辑器里，保存文件，名字随意，文件后缀名为.html，双击文件则该html文件会在浏览器里打开。

恭喜你，你已经编写了第一个HTML文件

4，常用标签

Html里面的标签有很多个，上面已经讲了三个html、head、body，我下面再列几个我经常用的标签：

最常用的标签

<h1></h1> 标题,范围可以从h1～h6
<div></div>div具有分割内容作用,可能在一个网页用的最多的就是他
<a href="URL"></a> 创建超文本链接
<img src="" />图片标签，用这个就可以网页里加图片了
<span></span>文本标签
<p></p> 创建一个段落    　
<br> 换行 插入换行符
<nobr>强制不换行
<u></u>文字下划线
<s></s>文字删除线
<sup></sup>上标
<sub></sub>下标
<form> 表单区域标签元素
<label>点击单选按钮或多选框前文字对应选项就能被选中，这个就是对文字加了该标签实现。
<textarea>多文字标签
<select>下拉菜单标签
<base>超链接（锚文本）默认打开方式与默认链接URL地址标签元素
<meta>被用做网页自适应设置、网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签
<script></script>链接外部js，外部资源
<style />链接外部样式表，外部资源。
&l
98f0
t;input type="" />有四种type，见下面说明


type四种类型

type=text 文本框，用于输入用户名，密码

type=submit 提交按钮，用于提交表单

type=checkbox 多选框，常见于选择多个内容

type=radio 单选框，多选一，例如选择男女性别

看完上面的东西是不是有点晕，都什么跟什么嘛，下面一章节我将用图文结合的方式，让大家更加清楚每个标签的作用。

记住上面的标签的话，你就可以随意发挥了，你已经具备基本功去写网页页面。学习编程语言还是要动手去写，看是记不牢靠的，只有靠自己多写几次。

（待续）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html css
相关文章推荐
新的分享
章节导航