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 驱动模块 内核编译环境
目录(?)[+] Linux设备驱动Hello World程序介绍 如何编写一个简单的linux内核模块和设备驱动程序.我将学习到如何在内核模式下以三种不同的方式来打印hello world,这三种方 ...
- jQuery停止事件冒泡
event.stopPropagation(); 在jQuery中提供了stopPropagation()方法来停止事件冒泡.终止事件在传播过程的捕获.目标处理或起泡阶段进一步传播.调用该方法后,该节 ...
- MFC使用Windows media player播放声音文件
一.在需要播放声音的资源上添加控件 资源视图 . 选择添加控件的资源(如对话框).右键单击.插入ActiveX控件.调整你需要的控件属性并记录ID 二.在项目中添加播放声音的类 点击菜单中的项目.添 ...
- MySQL的用户密码过期功能详解
MySQL的用户密码过期功能详解 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 先说明两个术语. Payment Ca ...
- httpClient download file(爬虫)
package com.opensource.httpclient.bfs; import java.io.DataOutputStream; import java.io.File; import ...
- perl 一个简单的面向对象的例子
<pre name="code" class="python">[root@wx03 wx]# cat x1.pm package x1; use ...
- Java调用.dll文件
因为项目的需求,要在JAVA项目中调用Windows的Dll(动态链接库)文件,之前用Jni调用过C写的Dll文件,比较麻烦,这里不多说,网上也有很多这方面的文档.在网上找到一个开源的组件JNativ ...
- #include <mutex>
多线程初级 #include <iostream> #include <thread> #include <windows.h> #include <mute ...
- jquery 中 fn.apply(this, arguments)是什么函数？有什么作用？能举个例子吗
function Person(name){ this.name=name; this.sayname=function (){ alert(this.name); } } function Stud ...
- 如何将你牛逼的iOS代码分享到CocoaPod（转）
为了让读者一目了然,现在就从新建工程到最后提交podspec,简单粗暴的讲一通.Cocoapods不用解释太多,一句话...它是目前iOS开发中最广为使用的第三方库依赖管理工具. 下面开始讲创建pod ...