html网页制作入门

作者: 果芽软件 | 来源:发表于2018-03-07 06:42 被阅读98次

HTML 制作网页（入门）
html网页制作入门
#HTML 制作网页（入门）
分享《HTML_CSS_JavaScript网页制作从入门到精通
《网页设计与制作项目教程》：网页制作基础知识笔记二
第八章网页制作基础
网页设计与开发——HTML、CSS、JavaScript (王津
怎样入门web前端开发？
4、HTML中的各类标签
Web前端开发怎么入门，前端就业需要掌握好这些知识点

一、参考教程

二、基础语法

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

1. 第一个实例

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

实例解析

标签名	含义
<!DOCTYPE html>	声明为 HTML5 文档
<html>	元素是 HTML 页面的根元素
<head>	元素包含了文档的元（meta）数据
<title>	元素描述了文档的标题
<body>	元素包含了可见的页面内容
<h1>	元素定义一个大标题
<p>	元素定义一个段落

HTML 网页结构

下面是一个可视化的HTML页面结构：

image.png

只有 <body>区域 (白色部分) 才会在浏览器中显示。

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML** 标签及文本**内容
HTML文档也叫做** web 页面**

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

image

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> 

<!DOCTYPE HTML> 

<!doctype html> 

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

学生信息录入页

学生信息

html多媒体展示（面试录音、模拟面试录像）

视频
音频

资源导航页

博客、在线教程
安装软件下载
代码管理

导航主页

页面布局
页面集成
菜单页美化

按钮换成图片或背景颜色
鼠标移动、点击、移开改变颜色

对输入内容做校验
重置输入项
添加技能多选框
菜单做成横向下拉框，或者纵向菜单栏
加背景图片或颜色

初始界面

最终界面

<!doctype html>
<html>
    <head>
        <title>学生信息系统</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <h1 align="center">学生信息系统</h1>
        <table border="0" cellpadding="0" cellspacing="0" align="center" >
            <tr >
                <td>姓名：</td>
                <td >
                    <input size="20" type="text">
                    <span style="color:red">*</span></td>
            </tr>
            <tr>
            <td>头像：</td>
                <td>
                    <input type="file" size="20">
                </td>
            </tr>
            <tr >
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" checked>男
                    <input type="radio" name="sex">女
                    <span style="color:red">*</span>
                </td>
            </tr>
            <tr >
                <td>年龄：</td>
                <td>
                    <input type="date" style="width:168px" value="1990-01-01">
                    <span style="color:red">*</span>
                </td>
            </tr>
            <tr >
                <td>学历：</td>
                <td>
                    <select style="width:173px" size="1">
                        <option>---请选择---</option>
                        <option>硕士</option>
                        <option>本科</option>
                        <option>大专</option>
                        <option>高中</option>
                        <option>初中</option>
                    </select>
                </td>
            </tr><tr >
                <td>介绍人：</td>
                <td>
                    <input type="text" size="20" value="无">
                </td>
            </tr><tr >
                <td>入学时间：</td>
                <td>
                    <input type="date" style="width:168px" value="2018-03-01">
                </td>
            </tr><tr >
                <td>班级：</td>
                <td>
                    <select style="width:173px" size="1">
                        <option>---请选择---</option>
                        <option>1707初级班</option>
                        <option>1709初级班</option>
                        <option>1709高级班</option>
                        <option>1711初级班</option>
                        <option>1711高级班</option>
                        <option>1801初级班</option>
                        <option>1801高级班</option>
                        <option>1803初级班</option>
                        <option>1803高级级班</option>
                    </select>
                </td>
            </tr><tr >
                <td>导师：</td>
                <td>
                    <select style="width:173px" size="1">
                        <option>---请选择---</option>
                        <option>李晓阳</option>
                        <option>戈维维</option>
                        <option>马超</option>
                        <option>闫松林</option>
                        <option>李苏云</option>
                        <option>戴全明</option>
                        <option>周启明</option>
                        <option>曾春苗</option>
                    </select>
                    <span style="color:red">*</span>
                </td>
            </tr>
            <tr >
                <td>小组：</td>
                <td>
                    <input type="number" min="1" max="9" step="1" style="width:168px">
                </td>
            </tr>
            <tr >
                <td colspan="2" align="center">
                    <i>提示：带<span style="color:red">*</span>的必须填写</i>
                </td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit" >
                </td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <a href="http://www.taobao.com">
                        <span style="color:red">淘宝网-淘！我喜欢</span>
                    </a>
                </td>
            </tr>
        </table>
    </body>
</html>