HTML，CSS入门

时间 2019-11-13

标签 html css 入门栏目 HTML 繁體版

原文原文链接

课程介绍

前端开发系统化学习教程，前端开发是后端程序员必修的课程，本课程开展注重两点：
一、实际开发中要用到的知识
二、面试中要用到的知识javascript

1.1-html概述及html文档基本结构

html概述

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超连接，标记指的是标签，是一种用来制做网页的语言，这种语言由一个个的标签组成，用这种语言制做的文件保存的是一个文本文件，文件的扩展名为html或者htm。css

html文档基本结构

一个html的基本结构以下：html

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的总体，“<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。前端

一个html文件就是一个网页，html文件用编辑器打开显示的是文本，能够用文本的方式编辑它，若是用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。java

html文档快速建立

新建一个html文档后，能够用快捷键的方式快速建立html文档。快捷键：!+tab键，或者 html:5+tab键程序员

1.2-html标签入门

标签语法：

学习html语言就是学习标签的用法，html经常使用的标签有20多个，学会这些标签的使用，就基本上学会了HTML的使用。面试

标签的的使用方法：

<!-- 一、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 二、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片">

<!-- 三、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 四、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

块元素标签(行元素)和内联元素标签(行内元素)

标签在页面上会显示成一个方块。除了显示成方块，它们通常分为下面两类：
块元素：在布局中默认会独占一行，块元素后的元素需换行排列，块元素默认宽度等于父元素的宽度，即便设置了很小宽度，也占用一行。
内联元素：元素之间能够排列在一行，设置宽高无效，它的宽高由内容撑开，内联元素之间默认会有小间距。编程

经常使用块元素标签

一、标题标签，表示文档的标题，除了具备块元素基本特性外，还含有默认的外边距和字体大小

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

二、段落标签，表示文档中的一个文字段落，除了具备块元素基本特性外，还含有默认的外边距

<p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协做精神，良好的沟通能力和社
交能力，善于处理各类人际关系。能迅速适应环境，并融入其中。</p>
<p>本人热爱研究技术，热爱编程，但愿能在努力为企业服务的过程当中实现自身价值。</p>

三、通用块容器标签，表示文档中一块内容，具备块元素基本特性，没有其余默认样式

<div>这是一个div元素</div>
<div>这是第二个div元素</div>
<div>
    <h3>自我介绍</h3>
    <p>本人叫神秘，毕业于某大学计算机科学与技术专业，今年24岁，本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协做精神，良好的沟通能力和社
交能力，善于处理各类人际关系。能迅速适应环境，并融入其中。</p>
</div>

经常使用内联元素标签

一、超连接标签，连接到另一个网页，具备内联元素基本特性，默认文字蓝色，有下划线

<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>

二、通用内联容器标签，具备内联元素基本特性，没有其余默认样式

<p>这是一个段落文字，段落文字中有<span>特殊标志或样式</span>的文字</p>

三、图片标签，在网页中插入图片，具备内联元素基本特性，可是它支持宽高设置。

<img src="images/pic.jpg" alt="图片" />

其余经常使用功能标签

一、换行标签

<p>这是一行文字，<br>这是一行文字</p>

二、html注释：

html文档代码中能够插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：后端

<!-- 这是一段注释  -->

经常使用html字符实体

代码中成段的文字，若是文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，若是想显示多个空格，可使用空格的字符实体,代码以下：浏览器

<!--  在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，能够用<br />
文本的方式编辑它，若是用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页能够从一个网页连接跳转到另一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可使用它们的字符实体，好比：

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    &lt;div&gt;是一个html的一个标签<br>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

1.3-html布局初步

网页布局原理

标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分红多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，标签的嵌套产生叠加效果。

布局示例

根据网页布局的原理以及上面的实例，写出网页的html结构代码。

标签语义化

在布局中须要尽可能使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提升网站在搜索中的排名(也叫作SEO)，其次是方便代码的阅读和维护。
带语义的标签
一、h1~h6：表示标题
二、p：表示段落
三、img：表示图片
四、a：表示连接

不带语义的标签
一、div：表示一块内容
二、span：表示行内的一块内容

因此咱们要根据网页上显示的内容，使用适合的标签，能够优化以前的代码。

1. HTML+CSS入门
2. HTML CSS入门
3. html入门，css入门
4. 【HTML&CSS】基本的入门
5. HTML基础——css入门
6. html与css简单入门
7. HTML+CSS+JavaScript入门代码
8. 前端-html+css+javascript入门
9. Html和CSS入门(笔记)—HTML
10. Html和CSS入门(笔记)—CSS
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用