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. bzoj2055: 80人环游世界（可行流）

    传送门 表示完全看不懂最小费用可行流…… 据某大佬说 我们考虑拆点,然后进行如下连边 $s$向$a_i$连边,权值$0$,容量$[0,m]$ $a_i$向$a_i'$连边,权值$0$容量$[v_i,v ...

  2. Python Day25

    Django之ModelForm组件 ModelForm a. class Meta: model, # 对应Model的 fields=None, # 字段 exclude=None, # 排除字段 ...

  3. CF447A DZY Loves Hash 模拟

    DZY has a hash table with p buckets, numbered from 0 to p - 1. He wants to insert n numbers, in the ...

  4. Git工具详解以及与GitHub的配合使用

    git和Github 概念 git --- 版本控制工具(命令). 工具介绍官方网站:http://git-scm.com 工具下载地址:http://git-scm.com/download/ gi ...

  5. java文件操作文件之csv

    直接上代码: @Test public void dowrite(){ String filePath = "D://test.csv"; try { File f = new F ...

  6. Models-查询详细操作

    # 单表简单查询13种方法 1.all(): 查询所有结果 all: models.表名.objects.all() book_all=models.Book.objects.all() # 结果是q ...

  7. 024 Swap Nodes in Pairs 交换相邻结点

    给定一个链表,对每两个相邻的结点作交换并返回头节点.例如:给定 1->2->3->4,你应该返回 2->1->4->3.你的算法应该只使用额外的常数空间.不要修改列 ...

  8. (转)Linux最常用指令及快捷键 Linux学习笔记

    Linux最常用指令及快捷键 Linux学习笔记 原文:http://blog.csdn.net/yanghongche/article/details/50827478 [摘自 鸟叔的私房菜]--转 ...

  9. Linux系统的vim编辑器的配置文件的初步说明

    vim 编辑器的基本说明 vi编辑器的功能类似于Windows下的记事本,只能编辑普通文本,而vim编辑器则相当于Windows下的notepad++等高级编辑器,提升了代码开发效率. 将vi命令默认 ...

  10. 《从0到1学习Flink》—— Flink 写入数据到 ElasticSearch

    前言 前面 FLink 的文章中我们已经介绍了说 Flink 已经有很多自带的 Connector. 1.<从0到1学习Flink>-- Data Source 介绍 2.<从0到1 ...