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. swarm

    https://blog.51cto.com/lookingdream/2060292 一.规划 1.swarm01作为manager节点,swarm02和swarm03作为worker节点. # c ...

  2. Gdiplus的使用 gdi+

    使用步骤: 1.包括相应的头文件及引入相应的lib 1 #include <GdiPlus.h> 2 #pragma comment(lib, "gdiplus.lib" ...

  3. 使用shell巧妙高效的批量删除历史文件或目录

    背景:有实时产生的数据按小时分文件保存,如“/data/2013/09/18/14.txt”.现需要保留30天的最新数据,而删除所有其它的历史数据.注意“保留30天的最新数据”,可能不是连续的30天, ...

  4. git commit之后撤销

    先git log 查看日志,找到需要回退的那次commit的哈希值 然后git reset --soft commit_id ok

  5. python 多继承（新式类） 四

    转载自:http://blog.sina.com.cn/s/blog_45ac0d0a01018488.html mro即method resolution order,主要用于在多继承时判断调的属性 ...

  6. 【Linux】让Ubuntu 支持 GBK等字符集，解决中文乱码

    对GBK,GB2312,GB18030字符集的支持是UBUNTU中文乱码的罪魁祸首,其实我们可以在保持UTF-8为默认编码的条件下添加对这几个编码的支持,以解决中文乱码问题. 我想这个问题肯定有其他人 ...

  7. Maven的学习资料收集--(四)使用Maven构建Web项目-测试

    2014-08-04 23:21 2人阅读 评论(0) 收藏 编辑 删除   目录(?)[+]   [-] 在srcmainjava下新建一个Servlet 修改webxml 新建JSP 测试   在 ...

  8. C#实现对EXCEL指定单元格进行操作

    using System; using System.Collections.Generic; using System.Text; using Microsoft.Office.Interop.Ex ...

  9. ASP.NET MVC ValidationAttribute 服务器端自定义验证

    自己开发的公众号,可以领取淘宝内部优惠券 客户端验证 上文只说了客户端的自定义验证,这样对于用户的输入还是不够可靠,用户完全可以绕过我们定义的客户端验证.所以仅有客户端的验证还是不够的,我们还需要在服 ...

  10. System path '/Users/hxy/Library/Caches/PyCharm2018.2' is invalid.

    Mac系统下安装pycharm后启动出现System path '/Users/hxy/Library/Caches/PyCharm2018.2' is invalid.问题: 1.出现原因: 1.1 ...