html学习笔记一
学习了一天，总结巩固下自己收获。
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学习笔记一的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
- ucos实时操作系统学习笔记——任务间通信（消息）
ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...
随机推荐
- linux arp攻击解决方法 测试很有效
公司有台centos服务器中了arp攻击,严重影响业务,测试了很多方法都没解决,机房技术也没法处理. 通过下面方法,可以有效抵挡arp攻击. 1.环境 centos6.4 2.执行 arpin ...
- poj1477---搭积木
#include<stdio.h> #include<stdlib.h> int main() { int n,i; int bricks[55],set=0; while(s ...
- iOS学习，需要懂的一些基础
1. KVC 与 KVO 全称是Key-value coding,翻译成键值编码.顾名思义,在某种程度上跟map的关系匪浅.它提供了一种使用字符串而不是访问器方法去访问一个对象实例变量的机制. 全称 ...
- sqlplus handbook
1.直接敲sqlplus并回车就是启动SQL*PLUS,输入user及password将使用户登陆到缺省的数据库. 请输入用户名: 2.sqlplus user/password@SERVICE_NA ...
- 一个利用扩展方法的实例：AttachDataExtensions
扩展方法是C# 3.0(老赵对VB不熟)中最简单,也是最常用的语言特性之一.这是老赵自以为的一个简单却不失经典的实例: [AttributeUsage(AttributeTargets.All, Al ...
- Math.round(11.5)等于（）Math.round(-11.5)等于（）
几天前去面试,这道简单的题目居然做错了,看来基础就是慢慢积累的.并不断使用和复习才会成为高手,假设基础不是那么熟练.恐怕在成为高手的路上会困难重重.所以在做项目的间歇时间.偶尔回顾一下最基础的知识.是 ...
- andengine游戏引擎总结进阶篇1
本篇包括虚拟键盘,粒子系统 1虚拟键盘 分为两种,一种是单个虚拟键盘,另一种是多个方位虚拟键盘 1)加载虚拟键盘所需要的图片资源 private BitmapTextureAtlas mOnScree ...
- break与continue
1.break与continue.这两个关键字一般放在循环的花括号里面使用.break——结束整个循环.continue——结束本次循环,进入下次循环. break的案例: int i = 1; fo ...
- C#中的Attributes的用法
今天研究了一下C#中的Attributes的用法,感觉很有用,现总结以下: 在前台用JS写的脚本方法,除了可以直接用在前台控件的属性中,还可以在后台运用. 即在后台页面加载时,调用JS方法.语法格式有 ...
- php 封装Mysql数据库操作类
花了点时间写了个基于php5.3的Mysql类 $mysql = new Mysql('host','user','pass','db') bool Mysql::insert("表&quo ...