学习了一天，总结巩固下自己收获。

html是超文本标记语言，而不是编程语言。

1：html结构

　　包含html标签，head标签，title标签，body标签。

 <html>

     <head>

         <title>This is my first page!</title>

     </head>

 <body>

        content.

 </body>

 </html>

2:html语法

　　第一点：标签是有左尖括号<和右尖括号>组成，<标签>

　　第二点：开始标签<标签> 和 结束标签</标签>

　　第三点：标签正确嵌套。

　　第四点：标签元素和属性为了遵循w3c标准，用小写。

3：标签

　　1）head标签（包含title标签，style标签，script标签，link标签，meta标签，base标签）

　 　

title标签：语义是文档标题

意义：

用于浏览器工具栏标题显示

页面添加到收藏夹标题显示

搜索引擎搜索页面标题显示

 <!doctype html>

 <html>

     <head>

            <title>标题标签</title>

     </head>

 <body>

     <h1>Hello world!</h1>

 </body>

 </html>

　　style标签：语义内嵌样式表

 <!doctype html>

 <html>

     <head>

            <title>内嵌样式表</title>

            <style type="text/css">

                 h1{color:red;}

            </style>

     </head>

 <body>

     <h1>Hello world!</h1>

 </body>

 </html>
 

　　script标签：语义是插入js代码

 <!doctype html>

 <html>

     <head>

            <title>内嵌样式表</title>

            <style type="text/css">

                 h1{color:red;}

            </style>

            <script type="text/javascript">

                document.getElementById("hid").innerHTML="JAVASCRIPT";

            </script>

     </head>

 <body>

     <h1 id=“hid”>Hello world!</h1>

 </body>

 </html>

　　

link标签：语义是插入外部样式表

 <!doctype html>

 <html>

     <head>

            <title>外部样式表</title>

            <link rel="stylesheet" href="style.css" type="text/css">

     </head>

 <body>

     <h1>Hello world!</h1>

 </body>

 </html>

　　

meta标签：包含一些元信息，例如关键字，描述，作者，文档编码等

 <!doctype html>

 <html>

     <head>

            <title>meta</title>

            <meta name="keyword" content="html,css"/>

            <meta name="description" content="欢迎回到html基础"/>

     </head>

 <body>

     <h1>Hello world!</h1>

 </body>

 </html>

　　

2）body标签（承载页面内容）

div标签（语义用于分离独立的逻辑块）

 <!doctype html>

 <html>

     <head>

            <title>div</title>

     </head>

 <body>

     <div>top</div>

     <div>content</div>

     <div>footer</div>

 </body>

 </html>

　　

标题标签（h1~h6）

h1字体最大，h6最小。语义是用于文本的标题。

 <!doctype html>

 <html>

     <head>

            <title>标题标签</title>

     </head>

 <body>

     <h1>h1</h1>

     <h2>h2</h2>

     <h3>h3</h3>

     <h4>h4</h4>

     <h5>h5</h5>

     <h6>h6</h6>

 </body>

 </html>

　　

段落标签（p）

用于描述文档的段落，段落标签前后换行显示。

 <!doctype html>

 <html>

     <head>

            <title>段落标签</title>

     </head>

 <body>

     <p>我是段落</p>

 </body>

 </html>

　　

超链接标签（a）：用于从一个页面向另一个页面跳转

 <!doctype html>

 <html>

     <head>

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

     </head>

 <body>

     <a href="http://www.baidu.com" title="我是超链接">

 </body>

 </html>

　　

图像标签（img）：用于图像的显示。

 <!doctype html>

 <html>

     <head>

            <title>img标签</title>

     </head>

 <body>

     <img src="logo.jpg" alt="my image"  title="my image"/>

 </body>

 </html>

　　

列表标签：有序列表（ol）和无序列表（ul）

 1 <html>

 2     <head>

 3         <title>列表</title>

 4     </head>

 5 <body>

 6        <ol>有序列表

 7            <li>html</li>

 8            <li>css</li>

 9            <li>js</li>

10         </ol>

11          <ul>无序列表

12            <li>html</li>

13            <li>css</li>

14            <li>js</li>

15         </ul>

16 </body>

17 </html>

表格标签

 <!doctype html>

 <html>

     <head>

            <title>table标签</title>

     </head>

 <body>

      <table>

         <caption>表格标题</caption>

         <tbody>

               <tr><th>表格头</th></tr>

               <tr><td>单元格</td></tr>

         </tbody>

     </table>

 </body>

 </html>

表单标签

  1 <!doctype html>

  2 <html>

  3     <head>

  4            <title>form标签</title>

  5     </head>

  6 <body>

  7      <form method="post" action="form.php">

                  账号<input type="text" name="name"/>

                  密码<input type="password" name="pass"/>

                  女<input type="radio" name="sex" value="girl"/>

                  男<input type="radio" name="sex" value="boy"/>

                  跑步<input type="checkbox" name="sport" value="running"/>

                  游戏<input type="checkbox" name="sport" value="swimming"/>

                   <input type="submit" name="btnSubmit" value="提交"/>

          </form>

 14 </body>

 15 </html>

总结：html基础是了解标签的正确使用，所编写的代码要符合语义化，w3c标准。

html学习笔记一的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. ucos实时操作系统学习笔记——任务间通信（消息）

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

随机推荐

  1. Swift笔记3

    赋值运算符" = " let (x,y) =(10,45) var str = "luo" + "shaui"    //会得到luoshu ...

  2. jQuery学习-事件之绑定事件（三）

    在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...

  3. QT 线程池 + TCP 小试（一）线程池的简单实现

    *免分资源链接点击打开链接http://download.csdn.net/detail/goldenhawking/4492378 很久以前做过ACE + MFC/QT 的中轻量级线程池应用,大概就 ...

  4. Android Studio下载安装及配置图文教程

    原文 http://jingyan.baidu.com/article/9c69d48f56835e13c9024e95.html AndroidStudio下载地址:https://develope ...

  5. WebMatrix安装和使用

    官网:http://www.microsoft.com/web/webmatrix/ 一直觉得dreamweaver已经过时了,很多新的库都不支持.而且,启动慢,占用内存多,是时候换一个ide了. h ...

  6. MSSQL 日期操作函数 总结

    set ANSI_NULLS ON set QUOTED_IDENTIFIER ON go ALTER FUNCTION [dbo].[ufn_getDateOfWeek] (@Date Dateti ...

  7. python发布与共享

    1.新建.py文件,并将代码拷贝到.py文件中 def listItems(items): for item in items : if isinstance(item,list): listItem ...

  8. 【Lucene3.6.2入门系列】第10节_Tika

    首先贴出来的是演示了借助Tika创建索引的HelloTikaIndex.java PS:关于Tika的介绍及用法,详见下方的HelloTika.java package com.jadyer.luce ...

  9. google自定义站内搜索

    ttps://www.google.com/cse/docs/cref.html?hl=zh-cn 重要表单参数: action 字段:您希望存储结果的网址(在该例中,我们使用 http://www. ...

  10. Android常见布局问题

    原文链接:http://www.cnblogs.com/Birdmafly/p/3809802.html 好久没写博了,因为最近在忙着做一个app,实在是没有时间.现在快完工了.想着还是把这个布局问题 ...