1.认识HTML标记

2.元信息标记meta

2.1设置页面关键字

2.2设置页面说明

2.3定义编辑工具

2.4添加作者信息

2.5设置网页文字及语言

2.6设置网页的定时跳转

<html>

<head>

    <!--html注释-->

    <!--标题-->

    <!--<title> this is a tile </title>-->

    <title> 这是标题</title>

    <!--告诉浏览器使用什么码表解释html-->

    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

    <!--搜索引擎-->

    <meta name="keywords" content="java培训，Python培训"/>

    <meta name="description" content="学习IT"/>

</head>

<body>

</body>

</html>

3.文本标签

<html>

<head>

    <title> 文本标签</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

</head>

<body>

<!--标题-->

<h1>标题1 </h1>

<h2 align="center">标题2</h2> <!-- align 设置标题的对齐方式-->

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<!--水平线-->

<hr/>

<!--段落-->

<p>这是第一段的内容这是第一段的内容这是第一段的内容这是第一段的内容这是第一段的内容

    这是第一段的内容这是第一段的内容这是第一段的内容这是第一段的内容这是第一段的内容</p>

<p>这是第二段的内容这是第二段的内容这是第二段的内容这是第二段的内容这是第二段的内容

    这是第二段的内容这是第二段的内容这是第二段的内容这是第二段的内容这是第二段的内容</p>

<!--段落缩进-->

<blockquote>

    这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容

    这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容

    这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容

    这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容

</blockquote>

<!--上下标，用于公式-->

y=x的平方 -- y = x<sup>2</sup><br/>

y = log以2为底的x -- y = log<sub>2</sub>x

<!--原样输出 按照编辑器的效果，原样输出-->

<pre>

         静夜思

 床前明月光，疑是地上霜。

 举头望明月，低头思故乡。

</pre>

<!--有序列表 ol li -->

你最喜欢的明星

<ol>

    <li>刘德华</li>

    <li>成龙</li>

    <li>杨幂</li>

</ol>

<ol type="a">  <!--type属性!-->

    <li>刘德华</li>

    <li>成龙</li>

    <li>杨幂</li>

</ol>

<!--无序列表 ul li -->

<ul>

    <li>学生管理</li>

    <li>教师管理</li>

    <li>工人管理</li>

</ul>

<ul type="circle">

    <li>学生管理</li>

    <li>教师管理</li>

    <li>工人管理</li>

</ul>

<!--项目列表标签 dl dt dd -->

软件公司的组织架构

<dl>

    <dt>技术总监</dt>

    <dd>工程师1</dd>

    <dd>工程师2</dd>

    <dd>工程师3</dd>

    <dt>财务总监</dt>

    <dd>财务1</dd>

    <dd>财务2</dd>

    <dd>财务3</dd>

</dl>

<!--行内标签（span）和块标签（div）

在HTML中使用非常少，在CSS中使用多

-->

<span>span的内容</span>

<div>div的内容</div>

</body>

</html>

4.超链接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>超链接标签</title>

</head>

<body>

<!-- a 超链接标签：

    常用的属性：

        href  表示链接到的地址（文件）

        target  打开资源方式     _self: 当前窗口打开， _blank: 新窗口打开

    协议执行资源的基本流程（超链接的原理）：

        使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。

    常见的协议：

      file://   本地文件协议（本地或局域网）  在href中不写就是使用这个默认协议

      http://    http协议（执行流程）  通常连接到域名或IP地址

      thunder： 迅雷下载软件的协议

      mailto:   调用本地的发送邮件的客户端软件

     超链接作用；

         1）链接到资源

        2）作为锚点使用

            打锚点： <a name="锚点名称"></a>

            去到锚点： <a href="#锚点名称">内容</a>

         -->

<a name="top"></a> <!--定义一个锚点-->

<!--<a href="03.html文本标签.html#list" target="_blank">超链接</a><br/>-->

<!--<a href="../1.jpg">链接到图片</a><br/>-->

<a href="http://www.baidu.com">链接到百度</a><br/>

<a href="http://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(普通通道)</a><br/>

<a href="thunder://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(迅雷通道)</a><br/>

<br/><a href="#ch01">去到第一章</a> <！--链接到锚点-->

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<a name="ch01"></a><!--定义一个锚点-->

第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容<br/>

<a href="#top">返回顶部</a>

</body>

</html>

5.图像标签

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="UTF-8">

    <title>图像标签</title>

</head>

<body>

<!-- img 图像标签

  常用属性：

          src :  表示图片源位置

        width: 图片宽度

        height: 图片高度

        alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效

        title: 提示文本。当鼠标放到图片上面出现。

        地图（热点区域）：map

        热点： area

 -->

<!--<img src="../picture/1.jpg" alt = "这是一张美女图片" usemap="#Map" width="100 px" height="124px" title="提示文字"><br>-->

<!--<map name="Map"><area shape="rect" coords="196,338,301,398" href="http://www.baidu.com" target="_self"/></map>-->

<img src="../picture/1.jpg" alt="这是一张美女图片" border="0" usemap="#Map" title="提示文字"/>

<map name="Map" id="Map">

  <area shape="rect" coords="196,338,301,398" href="http://www.baidu.com" target="_self" />

  <area shape="circle" coords="139,191,145" href="http://www.baidu.com" target="_blank" />

</map>

</body>

</html>

6.转义字符

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>转义字符</title>

</head>

<body>

&lt;h3&gt;标题3&lt;/h3&gt;<br/>

IT教程&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;java培训<br/>

IT教程<sup>&reg;</sup> <br/>版权所有<sup>&copy;</sup>

</body>

</html>

7.表格标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格标签</title>

</head>

<body>

<!--

  标签：

   table 表格,默认没有边框

   tr   行

   td   单元格

   th   表头

   caption  标题

   常用的属性：

       border  表格的边框

       width  宽度

       heigth 高度

       align   对齐方式。 left: 左对齐   center:居中  right：右对齐

       rowspan  行合并。把多行的单元格合并

       colspan  列合并。把多列的单元格合并

-->

<table border="2px" width="400px" height="200px" align="center">

    <caption>2018年成绩单</caption>

    <tr>

        <th>姓名</th> <!-- 表头 -->

        <th>班级</th>

        <th>学生</th>

    </tr>

    <tr>

        <td rowspan="2">狗娃</td> <!--行合并-->

        <td>计算机1班</td>

        <td>80</td>

    </tr>

    <tr>

        <td>经济1班</td>

        <td>88</td>

    </tr>

    <tr>

        <td>狗胜</td>

        <td>计算机2班</td>

        <td>75</td>

    </tr>

    <tr>

        <td>狗蛋</td>

        <td>软件1班</td>

        <td>85</td>

    </tr>

    <tr>

        <td colspan="2" align="center">平均分</td>

        <td>85</td>

    </tr>

</table>

</body>

</html>

8.表单标签

8.1提交表单

8.2表单名称

8.3传送方法

8.4编码方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单标签</title>

</head>

<body>

<form>

    <!-- 单行输入域：

    常用的属性

        value: 该输入的默认值

         name: 这个必须填。该name的属性值用于给后台程序获取该标签输入的内容

         size: 可以输入的字符数量

     -->

    用户名：<input type="text" value="4-10位的字母或数字" name="userName" size="25"/> <br>

    <!--密码输入域： 以非明文的效果获取用户输入的数据。 -->

    密码：<input type="password" name="userPwd"><br>

    <!-- 单选：

      注意：

          1)如果是同一组的单选选项就使用相同的name属性值

          2)单选按钮的value属性一定填。这个value的值就是发送给后台程序的内容

          -->

    性别：<input type="radio" name="gender" value="男"/>男

    <input type="radio" name="gender" value="女"/>女<br/>

    <!-- 多选按钮：

           注意：

               1）如果是同一组的多选选项就使用相同的name属性值

               2)多选按钮的value属性一定填。这个value的值就是发送给后台程序的内容

       -->

    <input type="checkbox" name="hobit" value="篮球"/>篮球

    <input type="checkbox" name="hobit" value="足球"/>足球

    <input type="checkbox" name="hobit" value="兵乓球"/>兵乓球<br/>

     籍贯：

    <!--

        下拉选项：

            注意：

                1）name属性就是后台程序获取的标记

                2)下拉选项的option标签中的value属性一定填。这个value的值就是发送给后台程序的内容

     -->

    <select name="jiguan">

        <option value="广东">广东</option>

        <option value="广西">广西</option>

        <option value="湖南">湖南</option>

    </select><br />

     <!-- 隐藏域：用于携带数据，但是在页面上不会显示效果

        注意：

                1）name属性就是后台程序获取的标记

                2) 这个value的值就是发送给后台程序的内容

     -->

    <input type="hidden" name="id" value="001"/>

      个人简介：

   <!--多行输入域：可以输入多行文本

       rows: 一共有几行

    cols: 一行可以输入几行字符

    -->

       <textarea rows="5" cols="20" name="info"></textarea>

    <!-- 提交按钮： 点击这个按钮，form中的全部数据就会发送到后台

        value: 表示按钮显示的文本

    -->

    <input type="submit" value="注册"/>

    <!--

        重置按钮： 点击这个按钮，form中的所有标签返回到初始默认状态

     -->

    <input type="reset" />

</form>

</body>

</html>

9.框架标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>头部页面</title>

</head>

<body>

<h3>学生选课系统</h3>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>底部页面</title>

</head>

<body>

<center>江西财经大学<sup>&reg;</sup>&nbsp;&nbsp;版权所有<sup>&copy;</sup></center>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>左边菜单页面</title>

</head>

<body>

菜单选项

<ul>

    <!-- 超链接标签的target属性还可以指定一个frame的名称，如果指定的是一个frame的name，那么在指定这个frame中打开href指定的页面 -->

    <li><a href="student.html" target="main">学生管理</a></li>

    <li>课程管理</li>

    <li>教师管理</li>

    <li>选课管理</li>

</ul>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>中间主页面</title>

</head>

<body>

欢迎登陆学生选课系统

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>学生管理页面</title>

</head>

<body>

<h3 align="center">学生信息列表</h3>

<table border="1" align="center" width="500px" height="300px">

    <tr>

        <th>姓名</th>

        <th>年龄</th>

        <th>班级</th>

    </tr>

    <tr>

        <td>张三</td>

        <td>20</td>

        <td>计算机1班</td>

    </tr>

    <tr>

        <td>李四</td>

        <td>20</td>

        <td>计算机1班</td>

    </tr>

    <tr>

        <td>王五</td>

        <td>20</td>

        <td>计算机1班</td>

    </tr>

    <tr>

        <td>陈六</td>

        <td>20</td>

        <td>计算机1班</td>

    </tr>

</table>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>主页面</title>

</head>

<frameset rows="10%,*,10%">

    <frame src="header.html" name="header"/>

        <frameset cols="20%,*">

            <frame src="menu.html"/>

            <frame src="main.html" name="main"/>

        </frameset>

    <frame src="footer.html"/>

</frameset>

<body>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>主页面</title>

</head>

<frameset rows="10%,*,10%">

    <frame src="header.html" name="header"/>

        <frameset cols="20%,*">

            <frame src="menu.html"/>

            <frame src="main.html" name="main"/>

        </frameset>

    <frame src="footer.html"/>

</frameset>

<body>

</body>

</html>

01HTML的更多相关文章

  1. 01-html介绍和head标签

    [转]01-html介绍和head标签 主要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 一.web标准 web准备介绍: w3c:万维网 ...

  2. web前端学习之旅笔记01--HTML

    web前端学习之旅笔记01--HTML HTML最容易上手,但也易忘,实际开发中有时需要查阅官方文档,小伙伴们别忘了哟! HTML 教程 (w3school.com.cn) HTML是网页的骨架负责页 ...

  3. 01---HTML整理

    1.前端: 不同设备的适配           显示-->性能优化           某些计算任务           html5   2.xml:   传输数据 保存配置文件   3.乱码是 ...

  4. 01-HTML介绍

    1.WEB标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构:html.表示: ...

  5. 集腋成裘-01-html -html基础

    1 标签 1.1 单标签 注释标签 <!-- 注释标签 --> 换行标签 <br/> 水平线 <hr/> <img src="图片来源" ...

  6. 01-HTML

    **今日任务** 网站信息页面案例 网站图片信息页面案例 网站友情链接页面案例 网站首页案例 网站注册页面案例 网站后台页面案例 教学导航 - 了解什么是标记语言 - 了解HTML主要特性,主要变化以 ...

  7. HTML学习笔记01-HTML简介

    主要是为了做接口测试,试着自己写爬虫,所以学习一下HTML一些基础的东西,方便用来解析网页.学习内容主要来自菜鸟教程的HTML教程,W3school的HTML 超文本标记语言(英语:HyperText ...

  8. 01-html和head介绍

    一.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构:html.表示: ...

  9. 01-HTML深入

    1.1  浏览器的工作原理 把一些标签解析成用户可视化的页面 1.2 HTML中的标签与元素 在HTML中以<xx>开始,以</xx>结束,比如<html>< ...

  10. 01html基础

    01_html 1 Mac中的快捷键 基础快捷键: command+c 复制 command+v 粘贴 command+m 最小化当前窗口 Shift+command+c 桌面环境打开Finder c ...

随机推荐

  1. DHCP DHCPv6

    为了给网络客户机自动分配IP地址以及生成所需的配置参数,IETF分别给IPV4和IPV6网络定义了相关的协议标准,即DHCP(RFC2131)和DHCPV6(RFC3315),以及扩充的选项标准.本文 ...

  2. POJ1032 Parliament

    题目来源:http://poj.org/problem?id=1032 题目大意:给定一个正整数N(5<=N<=1000),将N拆为若干个不同的数使得它们的乘积最大(找到一组互不相等,和为 ...

  3. Zoj 2314 Reactor Cooling（无源汇有上下界可行流）

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1314 题意:    给n个点,及m根pipe,每根pipe用来流躺液体的,单向 ...

  4. Chapter12

    package scalaimport java.awt.event.{ActionEvent, ActionListener}import javax.swing.JButton import sc ...

  5. testlink迁移

    前置配置:安装mysql-5.5.13-win32版数据库(速度快点),设置root密码为123465(mysql5.5数据库端口号不要与redmine的mysql冲突) 1.安装testlink(版 ...

  6. easyui databox获取当前时间

    class=easyui-datebox $(document).ready(function() {             $("#thedate").datebox(&quo ...

  7. 在 Angularjs 中 ui-sref 和 $state.go 如何传递单个多个参数和将对象作为参数

    一: 如何传递单个参数 首先,要在目标页面定义接受的参数: 传参, 接收参数, 在目标页面的controller里注入$stateParams,然后 "$stateParams.参数名&qu ...

  8. 配置ftp服务器

    计算机管理->用户->添加用户 iis网站右键->添加ftp站点(没有此选项确认已安装及开启了ftp服务)->进行相关设置即可

  9. 提高jquery加载速率（有cdn就加载，没有就加载本地）

    <!-- Adds google cdn reference --> <script src="https://cdn.bootcss.com/jquery/3.2.1/j ...

  10. 创作了一个xml的替代格式

    xml格式: <?xml version="1.0" encoding="GB2312"?> <Relations> <Relat ...