html

前端开发概述

从软件分类开始说，学习编程语言，主要是为了开发软件的，软件按照使用目的不同可以分为系统软件和应用软件，还可以按照软件程序和数据存储位置的不同，可以分为单机软件、C/S架构软件、B/S架构软件，不同架构的软件，界面的开发方式不同：

• 单机软件：软件程序和数据都存储在客户端 界面：Tk、PyQt、wxPython库
• C/S(Client/Server)架构软件：软件程序和数据一部分存在客户端，一部分存在服务器端 界面：Tk、PyQt、wxPython库
• B/S(Broswer/Server)架构软件：软件程序和数据全部存在服务器端，界面：网页(web)
• 前端开发也叫作web前端开发，是为B/S架构的软件提供界面解决方案的。

html概述

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

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

标签在页面上会显示成一个方块。除了显示成方块，它们一般分为下面两类：

• 块元素：在布局中默认会独占一行，宽度默认等于父级的宽度，块元素后的元素需换行排列。
• 内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。

常用块元素标签

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

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

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

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

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

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

常用内联元素标签

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

<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网</a>
<!--alt表示找不到显示的-->
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>
<a href="#">默认链接</a>

2. 通用内联容器标签，具有内联元素基本特性，没有其他默认样式

<span>我是span1</span><span>我是span2</span><span>我是span3</span>

3. 图片标签，在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。

<!--img中width和height如果只设置一个,另一个会根据图片自适应匹配-->
<img src="image/1.jpg" alt="图片" width="500" height="750"/>

常用html字符实体

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

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

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

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

html布局

网页布局原理

标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，整体按照先整体，后局部，先大后小的顺序来书写结构。

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

• 标签语义化
  在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。
  带语义的标签
  1、h1~h6：表示标题
  2、p：表示段落
  3、img：表示图片
  4、a：表示链接

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