html网页制作入门

一、参考教程

  1. 菜鸟教程
  2. W3school

二、基础语法

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

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

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

1. 第一个实例

注意:对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为





菜鸟教程(runoob.com)


    

我的第一个标题

我的第一个段落。

实例解析

标签名 含义
声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元(meta)数据
</strong></td> <td>元素描述了文档的标题</td> </tr> <tr> <td><strong><body></strong></td> <td>元素包含了可见的页面内容</td> </tr> <tr> <td><strong><h1></strong></td> <td>元素定义一个大标题</td> </tr> <tr> <td><strong><p></strong></td> <td>元素定义一个段落</td> </tr> </tbody> </table> <hr> <h2>HTML 网页结构</h2> <p>下面是一个可视化的HTML页面结构:</p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 419px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/9e4c0ddda60f4cf4bcddc07e87d92860.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/9e4c0ddda60f4cf4bcddc07e87d92860.png" width="745" height="419" alt="html网页制作入门_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> image.png </div> </div> <p><strong>只有 <code><body></code>区域 (<code>白色部分</code>) 才会在浏览器中显示。</strong></p> <hr> <h2>什么是HTML?</h2> <p>HTML 是用来描述网页的一种语言。</p> <ul> <li>HTML 指的是超文本标记语言: <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage</li> <li>HTML 不是一种编程语言,而是一种<strong>标记</strong>语言</li> <li>标记语言是一套<strong>标记标签</strong> (markup tag)</li> <li>HTML 使用标记标签来<strong>描述</strong>网页</li> <li>HTML 文档包含了HTML** 标签<strong>及</strong>文本**内容</li> <li>HTML文档也叫做** web 页面**</li> </ul> <hr> <h2>HTML 标签</h2> <p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p> <ul> <li>HTML 标签是由<em>尖括号</em>包围的关键词,比如 <html></li> <li>HTML 标签通常是<em>成对出现</em>的,比如 <b> 和 </b></li> <li>标签对中的第一个标签是<em>开始标签</em>,第二个标签是<em>结束标签</em> </li> <li>开始和结束标签也被称为<em>开放标签</em>和<em>闭合标签</em> </li> </ul> <p><标签>内容</标签></p> <hr> <h2>HTML 元素</h2> <p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p> <p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:</p> <p>HTML 元素:</p> <p><p>这是一个段落。</p></p> <hr> <h2>Web 浏览器</h2> <p>Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。</p> <p>浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:</p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 604px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/b0fd63c9300245cba397aa359ef5f81a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/b0fd63c9300245cba397aa359ef5f81a.jpg" width="650" height="323" alt="html网页制作入门_第2张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> image </div> </div> <hr> <h2>HTML版本</h2> <p>从初期的网络诞生后,已经出现了许多HTML版本:</p> <table> <thead> <tr> <th>版本</th> <th>发布时间</th> </tr> </thead> <tbody> <tr> <td>HTML</td> <td>1991</td> </tr> <tr> <td>HTML+</td> <td>1993</td> </tr> <tr> <td>HTML 2.0</td> <td>1995</td> </tr> <tr> <td>HTML 3.2</td> <td>1997</td> </tr> <tr> <td>HTML 4.01</td> <td>1999</td> </tr> <tr> <td>XHTML 1.0</td> <td>2000</td> </tr> <tr> <td>HTML5</td> <td>2012</td> </tr> <tr> <td>XHTML5</td> <td>2013</td> </tr> </tbody> </table> <hr> <h2><!DOCTYPE> 声明</h2> <p><!DOCTYPE>声明有助于浏览器中正确显示网页。</p> <p>网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。</p> <p>doctype 声明是不区分大小写的,以下方式均可:</p> <pre><code><!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html> </code></pre> <hr> <h2>通用声明</h2> <h3>HTML5</h3> <p><!DOCTYPE html></p> <h3>HTML 4.01</h3> <p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></p> <hr> <h2>中文编码</h2> <p>目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。</p> <p>学生信息录入页</p> <ol> <li>学生信息</li> </ol> <p>html多媒体展示(面试录音、模拟面试录像)</p> <ol> <li>视频</li> <li>音频</li> </ol> <p>资源导航页</p> <ol> <li>博客、在线教程</li> <li>安装软件下载</li> <li>代码管理</li> <li> </li> </ol> <p>导航主页</p> <ol> <li>页面布局</li> <li>页面集成</li> <li>菜单页美化</li> </ol> <p>按钮换成图片或背景颜色<br> 鼠标移动、点击、移开改变颜色</p> <p>对输入内容做校验<br> 重置输入项<br> 添加技能多选框<br> 菜单做成横向下拉框,或者纵向菜单栏<br> 加背景图片或颜色</p> <h2>初始界面</h2> <pre><code class="html"> </code></pre> <h2>最终界面</h2> <pre><code class="html"><!doctype html> <html> <head> <title>学生信息系统

学生信息系统

姓名: *
头像:
性别: *
年龄: *
学历:
介绍人:
入学时间:
班级:
导师: *
小组:
提示:带*的必须填写
淘宝网-淘!我喜欢
html网页制作入门_第3张图片
image.png

浏览器兼容性问题

IE查看效果


html网页制作入门_第4张图片
image.png
  1. 浏览器禁用缓存


    html网页制作入门_第5张图片
    image.png
html网页制作入门_第6张图片
image.png
  1. 设置tomcat支持URL中文路径
html网页制作入门_第7张图片
image.png
html网页制作入门_第8张图片
image.png
html网页制作入门_第9张图片
image.png

添加内容:URIEncoding="utf-8"

你可能感兴趣的:(html网页制作入门)