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

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. 16-GDBT（MART） 迭代决策树入门教程 | 简介

    转载:http://blog.csdn.net/w28971023/article/details/8240756 GBDT(Gradient Boosting Decision Tree) 又叫 M ...

  2. Learn X in Y minutes（python一页纸代码）

    一篇非常好的文章,解释了python基本语法的方方面面: # Single line comments start with a hash. """ Multiline ...

  3. SQLite使用报告

    SQLite简介 SQLite是遵守ACID的关联式数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目. 不像常见的客户-服务器范例,SQLite引擎不是个程 ...

  4. java 泛型深入之Set有用工具 各种集合泛型深入使用演示样例，匿名内部类、内部类应用于泛型探讨

    java 泛型深入之Set有用工具 各种集合泛型深入使用演示样例,匿名内部类.内部类应用于泛型探讨 //Sets.java package org.rui.generics.set; import j ...

  5. Sizzle一步步实现所有功能（基本筛选）

    第二步:实现:first,:last,:eq(),even,odd,:gt(),:lt(); :header,:root,:taget; :not(). ;(function( window ){ v ...

  6. linux下的进程、网络、性能监控命令

    进程监控 端口   1)netstat -anp | grep xxx   2)lsof  -i:<port> 句柄    lsof  -n | grep xxxx 线程栈   1)gst ...

  7. .net通用权限框架B/S (五)--WEB(1)首页

    通用权限框架--web 首页 1.首页截图 2.首页views 布局分为三部分top,left,main 引入easyui和jquery的js以及相关的css 使用easyui进行布局,分区代码bod ...

  8. 今天是迅驰ORM的诞生之日。

    欢迎各位朋友来造访,最主要还是那一点:版权所有,请尊重驰哥的著作版权,侵权必追究法律责任. 最后来一句刘德华的歌曲:独自去偷欢,我谢绝你监管!快乐心中常为我伴.

  9. 【转】使用Navicat for Oracle新建表空间、用户及权限赋予

    首先.我们来新建一个表空间.打开Navicat for Oracle,输入相关的的连接信息.如下图: 填入正确的信息,连接后.我们点击面板上的“其他”下的选项“表空间”,如下图: 进入表空间的界面,我 ...

  10. 加密传输SSL协议6_验证公钥

    如上图所示,我怎么能确定我手里的公钥就是我心中的接收方的公钥呢?怎么防止被钓鱼呢? 解决的办法就是引入一个第三方,一个权威机构,一个我们都相信的机构. 验证公钥,Digital Certificate ...