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 ...
随机推荐
- ODI11G 在Linux上的安装配置
ODI11G 在Linux上的安装配置 OS环境:Red hat Linux x86_64 一.JDK安装 1. 去oracle官网上下载 http://www.oracle.com/technetw ...
- J2SE知识点摘记(五)
1. 引用数据类型的传递 java用引用代替C++中的指针 fun()方法接收的参数是是Change c1,也就是说说fun()方法接受的是一个对象的引用,所以fun方法中所所做的操作就 ...
- 编程内功修炼之数据结构—BTree（二）实现BTree插入、查询、删除操作
1 package edu.algorithms.btree; import java.util.ArrayList; import java.util.List; /** * BTree类 * * ...
- dog-fooding-our-api-authentication
Dog-fooding our API - Authentication http://blog.mirajavora.com/authenticate-web-api-using-access-to ...
- 联想A208T ROOT
前几天,一直陪伴我的海信T89电池挂掉...胀胀的肚子...真可怜 一时之间找不到配套的电池,就借了个手机先用着,就是这 联想A208T ROOT... 话说的配置一般般,勉强够我这样的不怎么玩手机的 ...
- UART串口协议基础1
Louis kaly.liu@163.com 串口协议基础 1 串口概述 串口由收发器组成.发送器是通过TxD引脚发送串行数据,接收器是通过RxD引脚接收串行数据. 发送器和接收器都利用了一个移位寄存 ...
- Linux下实现视频读取（二）---camera參数设定
Camera的可设置项极多,V4L2 支持了不少.但Sam之前对这些设置的使用方法和涵义都是在看videodev2.h中边看边理解.感觉很生涩. 直到写这篇blog时,才发现v4l2有专门的SPEC来 ...
- JAVA-反射-getGenericSuperclass（）
1 public class Person<T> { 2 3 } 4 5 import java.lang.reflect.ParameterizedType; 6 import java ...
- CGAffineTransformMake(a,b,c,d,tx,ty) 矩阵运算的原理 （转载）
简记: CGAffineTransformMake(a,b,c,d,tx,ty) ad缩放bc旋转tx,ty位移,基础的2D矩阵 公式 x=ax+cy+tx y=bx+dy+ty 1.矩阵的基 ...
- Spring AOP那些学术概念—通知、增强处理连接点（JoinPoint)切面（Aspect）
1.我所知道的AOP 初看起来,上来就是一大堆的术语,而且还有个拉风的名字,面向切面编程,都说是OOP的一种有益补充等等.一下让你不知所措,心想着:管不得很多人都和我说AOP多难多难.当我看进去以后, ...