一、什么是网站

网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。网站则由很多网页构建而成。

1、网站的建站流程：

Html5网站后台模板 html5做网站_HTML

二、什么是网页

现在在你眼前，出现在显示器上的这个 “ 东西 ” ，就是一个网页。网页实际是一个文件，他存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（ URL ）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

1、网页的组成：

Html5网站后台模板 html5做网站_属性值_02

2、网页制作标准：

WEB标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布

Html5网站后台模板 html5做网站_HTML_03

3、网页的组成：

结构（HTML）+ 表现（CSS）+ 行为（JS）

HTML: 实现网页结构（网页内容）

        CSS: 实现页面的修饰 、表现

        JS ：实现的是交互效果，可以让页面动起来

三、什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。
XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
HTML5指的是HTML的第五次重大修改（第5个版本）

1、HTML基本结构：

Html5网站后台模板 html5做网站_html_04

2、HTML语法：

1：常规标记   （双标记） 
        
          <html></html>   有开始标记，也有结束标记

    2： 空标记 （单标记） 
          
          <meta class="top  top2" charset="utf-8">        有开始标记，没有结束

   说明：尖叫号里面的第一个单词，我们可以称之为标签、标记、元素；
             标签是可以没有属性的，也可以有多个属性；
             属性和属性之间是不分先后顺序的，中间要用空格隔开。
             标记和属性之间也要用空格隔开；   
             当一个属性有多个属性值的时候，属性值和属性值之间也是要用空格隔开的。

3、常用标记：

文本标记：

            文本标题：
                      h1        一级标题     
                                 说明： 一个页面一般只有一个一级标题，如果页面很长，可能会出现2、3个一级标题，  最重要的，  放logo；

                      h2        二级标题    3、4个
                      h3        三级标题    可以多用一些
                      h4        四级标题    可以多用一些
                      h5
                      h6        六级标题


            段落标记：p
            转义字符：
                      空格： 
                      左边的尖角号：<
                      右边的尖角号：>
                      备案图标：©
                      注册商标：® 


             加粗： b         普通的加粗   
                        strong   语义化，更强调的意思
             倾斜： i     em
             强制换行：br     空标记
             水平线： hr    空标记
             上标：sup
             下标：sub

下划线：
ins 比较常用的 插入的意思
u 比较早的标签，基本不用了

删除线：del 比较常用 删除 语义化
s 比较早的标签，基本不用了

div：页面布局，区域划分
           span: 文本节点
           div、span:本身是没有默认样式修饰的，如果想改变他里面的样式，需要借助css来完成

4、列表：

无序列表:
  <ul>
  <li>内容</li>
        </ul>
        type=""属性    改变默认的列表序号样式
        属性值：disc、square、circle
有序列表：
       <ol>
  <li>内容</li>
        </ol>
         type=""属性   改变默认的列表序号样式
         属性值： 1，a，A，i，I
         start=“”属性    设置列表序号开始的值     注：他的属性值必须是阿拉伯数字。

 自定义列表：
        <dl>
<dt></dt>      名词
<dd></dd>    解释
       </dl>

 插入图片：<img src="">

        属性：src: 用来添加路径的

5、 路径：

1、绝对路径：https://img12.360buyimg.com/n1/s450x450_jfs/t1/82971/37/9336/162231/5d70c8ceEbb9afef9/a36085b3c6debefc.jpg
                                                  /E/NZ2003/day2/课堂练习/img/img3.jpg
  
             2、相对路径： 当前    目标

                                            a:   当前文件和目标文件在同一个目录里       
                                            b:  当前文件和目标文件所在的文件夹在同一个目录里
                                            c:  当前文件所在的文件夹和目标文件所在的文件夹在同一个目录里   
                                          ../    向上反一级   ../../  向上返回两级
                                          ./     当前位置
                                           /     根目录
                           绝对路径和相对路径的区别：
	      绝对路径是指文件在硬盘上真正存在的路径
                                    绝对路径就是无论从外部还是内部访问，都能够通过此路径找到文件夹
                                    相对路径是相对于自身的，其他文件的位置，只能通过内部访问。 外部不能通过此路径访问到文件，通俗的来说，绝对路径是一条大家都能够通到目的地的路。而相对路径是一条只有你自己知道怎么走的路。											

     width:  设置宽度
     height:  设置高度
     alt:        当图片因为某种情况，没有正确显示出来的时，图片替换文本
     title:      标题，所有的标签都可以添加title这个属性   ，给元素添加标题
     border:   边框


        超链接：<a href=""></a>
                      href=""     添加路径的
         target：  设置打开方式     _blank   :  新窗口打开      _self  : 默认值，在当前窗口打开

                      <base  target=“_blank”>  设置超链接的共有的特性


       文件命名规范：用英文，不用中文。
                              用小写字母开头，后面可以链接下划线，连接符，数字或者$，不要用特殊字符

                              名字尽量简短。

	例：top      top-nav      top_nav     top1  top_nav1     top-nav2

	    首页.html   shouye.html    index.html
                                  新闻.html                            news.html
                                  关于我们.html                     aboutUs.html

6、表格：table

<table border="1">
          <tr>
	   <td></td>
	   <td></td>
	   <td></td>
	   <td></td>
          </tr>
                </table>

table ：表格
tr : 行
td : 单元格
th : 表格的列标题

单元格的大小默认情况下是不固定的，会根据里面的内容的多少来显示。

1）width=“表格的宽度”
2）height=“表格的高度”
3）border=“表格的边框”
4）bordercolor=“边框色”
5）cellspacing=“单元格与单元格之间的间距”
6）cellpadding=“单元格与内容之间的距离"
7）align=“表格水平对齐方式”
取值：left、right、center、 左 右 中
valign=“垂直对齐” top\bottom\middle 上 下 中
8）合并单元格属性：(td)
合并列： colspan=“所要合并的单元格的列数" 横向合并
合并行： rowspan=“所要合并单元格的行数” 纵向合并

7、表单

作用：收集数据，收集用户信息；
   form    表单域     就是指放表单控件的区域     <form></form>
	form里可以嵌套其他的标签

    属性 ： 
	action = '接口地址'
	method = 'get / post'     'get / post'  的区别
	name = '表单名称'

<input type="">   空标记，添加表单控件的标签   
         属性：type="text"     文本框       
	               type="password"     密码框
                     type="submit"      提交按钮
                      type=“reset”   重置按钮
                       type=“button”   空按钮
                                     
	                   value=“”： 表单控件的默认值
        	     	  placeholder=“” 添加提示信息