HTML学习笔记——语法+骨架
一、什么是HTML
- HTML是用来制作网页的标记语言
- HTML是Hypertext Markup Language的英文缩写,即超文本标记语言
- HTML语言是一种标记语言,不需要编译,直接由浏览器执行
- HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀
- HTML是大小写不敏感的,HTML与html是一样的
- HTML是由W3C的维护的
二、HTML语法
HTML文档(页面)——HTML元素——HTML标签——HTML属性
1、HTML标签
HTML标签是HTML语言中最基本的单位
- 通常要用两个角括号括起来:
<
和>
. - 是闭合的(闭合就是标签的最后要有一个
/
,来标示结束.),但不一定是成对出现的,比如: <br /> (单独出现的换行标签) - 标签是大小写无关的.
HTML标签语法:
<标签名>内容</标签名>
<标签名 />
附注:常用的HTML标签
2、HTMl属性
HTML属性 -- 一般都出现在HTML标签中,HTML属性是HTML标签的一部分
- 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中
- 标签可以拥有多个属性
- 属性由属性名和值成对出现
HTML属性语法:
<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值"></标签名>
3、HTML元素
HTML元素是构建网页的一种单位,是由HTML标签和HTML属性组成的,HTML元素也是网页中的一种基本单位.
HTML元素可以互相包含.
4、HTML文档
HTML文档就是HTML页面,也就是网页,是由HTML元素组成的.
互联网的所有内容都是由一个个HTML文档体现的.
5、HTML注释
HTML注释的开始使用<!--
,结束使用-->
HTML注释语法
<!--注释的内容-->
三、HTML骨架
HTML骨架示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> <head>
<title>HTML文件标题</title>
HTML头信息
</head> <body>
HTML内容信息
</body> </html>
- HTML文档首先要声明一个文档类型,也就是上面例子第一行,定义了XHTML1.1文档类型.
<html>
和</html>
是HTML文档的开始与结束,也是HTML文档的根元素- 除了文档类型外的所有页面内容,都包括在html元素
- HTML文件中主要分为头信息head与内容信息body
文档head信息:头信息head可以容纳文档的HTML相关信息,比如标题title,页面的语言与文字类型,css样式,javascript代码,简短描述,关键词等内容,是用户无法直接看到的.
文档body信息:内容信息body包括用户可以看到的全部内容,比如段落,链接,表格等.
1、html 标签 -- 代表HTML文档的开始
示例:
<html xmlns="http://www.dreamdu.com" xml:lang="zh-CN" dir="ltr">
说明:
xmlns="http://www.dreamdu.com"代表使用http://www.dreamdu.com做为命名空间
xml:lang="zh-CN"代表使用中文作为页面文字
dir="ltr"代表左到右(left-to-right)的文字对齐方式
2、head 标签 -- 代表HTML文档的头信息
- head标签是成对出现的,以
<head>
开始,</head>
结束
- 头(head)包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在HTML文档中的.
- head元素包含的标签:
- title标签 -- 代表HTML文档的标题
- base标签 -- 定义基URL用于页面的链接与引用
- link标签 -- 当在文档中声明使用外接资源(比如CSS)时使用此标签,单独出现
属性:
href -- 指定需要加载的资源(CSS文件)的地址URI
media -- 媒体类型
rel -- 指定链接类型
rev -- 指定链接类型
title -- 指定元素名称
type -- 包含内容的类型,一般使用type="text/css"
示例:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>属性
- style标签 -- 在文档中声明样式时使用此标签
style标签是成对出现的,以<style>开始,以</style>结束
属性:
media -- 媒体类型,参见CSS高级教程
type -- 包含内容的类型,一般使用type="text/css"
示例:
<head>
<style type="text/css">
abbr
{
font-size: 12px;
}
.text10pxwhite
{
font-size: 10px;
color: #FFFFFF;
}
</style>
</head>属性+示例
- script标签 -- 在文档中使用脚本
script标签是成对出现的,以<script>开始,以</script>结束
属性:
src -- 指定需要加载的脚本文件(例如:js文件)的地址URI
type -- 指定媒体类型(例如:type="text/javascript")
示例:
<head>
<script type="text/javascript" src="dreamdu.js"></script>
</head>属性+示例
- meta标签 -- 为HTML文档提供额外信息,单独出现
HTML meta content-type 定义文件MIME类型
HTML meta charset 定义网页编码信息
HTML meta content-language 定义页面语言
HTML meta refresh 刷新与跳转(重定向)页面
HTML meta expires 网页缓存过期时间
HTML meta pragma no-cache 页面缓存
HTML meta keywords 网页关键词
HTML meta description 网页简短描述
HTML meta author 网页作者
HTML meta copyright 网页版权
HTML meta date 网页生成时间
HTML meta robots 搜索引擎索引方式属性
3、body 标签 -- 代表HTML文档的主体
- body标签是成对出现的,以
<body>
开始,</body>
结束
四、小实验总结:
1、分段显示:p
标签是paragraph的缩写,是段落的意思.由<p>
与</p>
组成的元素可以显示成一个段落.可以实现分段显示.
2、段落中换行:使用br标签. <br /> (注意空格)
3、字体的加粗(强调)与斜体:<
strong
>
强调
</
strong
> 、
<
em
>
斜体
</
em
>
4、按标题显示:h标签包括,h1,h2,h3,h4,h5,h6 标签 -- 文章的标题标签
- h标签是成对出现的,以
<h>
开始,以</h>
结束 - 也可联合section标签一起使用
<body>
<h>文章的主标题</h>
<p>介绍</p>
<section>
<p>....</p>
<h>文章的二级标题</h>
<p>....</p>
<h>另一个二级标题</h>
<p>....</p>
</section>
<section>
<p>....</p>
<h>下一个二级标题</h>
<p>....</p>
<section>
<h>三级标题</h>
<p>....</p>
</section>
</section>
</body>示例
5、HTML实体:键盘无法表示的符号,或者HTML本身要用的符号,比如 HTML标签的开始<
,与结尾>
,还有属性值需要使用的"
引号等.
"
-- 表示双引号(")&
-- 表示位与运算符(&)<
-- 表示小于运算符(<)>
-- 表示大于运算符(>)
-- 表示空格( )
6、超链接:a标签是成对出现的,以<a>
开始, </a>
结束. 示例:<
a
href
=
"
url
"
>
显示的文字
</
a
>
(1)指定位置链接(同一页面中不同位置,不同页面间跳转)
<h2 id="top">页面上部</h2>
<a href="#bottom">链接到页面下部</a> <a href="#top">链接到页面上部</a>
<h2 id="bottom">页面下部</h2> <a href="http://www.dreamdu.com/javascript/object_math/#syntax">JS Math函数语法</a>
示例
(2)邮件链接使用了mailto语法
<a href="mailto:xymaqingxiang@163.com">给我写邮件</a> mailto四个常用的参数:
subject -- 代表邮件的标题
body -- 代表邮件的内容
cc -- 代表一个抄送对象
bcc -- 代表一个暗送对象
示例
(3)图像链接,可以为一个图像指定链接,使用img标签
<a href="http://www.baidu.com/" title="baidu">
<img src="http://www.baidu.com/img/logo.gif" />
</a> <a href="http://www.google.com/" title="google">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</a>
示例
HTML学习笔记——语法+骨架的更多相关文章
- 我的Java学习笔记-语法
Java的语法与C#的语法基本都一样,毕竟都是面向对象编程语言.下面记录下Java独有的和我在C#中学习不熟的语法知识 一.Java是解释型语言 二.Java修饰符 1. 访问控制修饰符 defaul ...
- JavaScript学习笔记--语法二
条件判断与C语言一样 两种循环.for 循环和 while 循环,JavaScript不区分整数和浮点数,统一用Number表示,所以不是 int i var x = 0; var i; for (i ...
- JavaScript学习笔记--语法
代码风格: 每句结尾不用加分号: 单行注释用//,多行注释用/*...需要注释掉的代码....*/ 严格区分大小写 优雅的代码需要注意锁进 基础知识: Number:JavaScript不区分整数和浮 ...
- box-shadow学习笔记
CSS3 box-shadow属性的简单学习笔记 语法格式: box-shadow: h-shadow v-shadow blur spread color inset; 值 描述 h-shadow ...
- [原创]java WEB学习笔记14:JSP的9 个隐含对象 及 JSP 的基本语法
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- Python学习笔记—Python基础1 介绍、发展史、安装、基本语法
第一周学习笔记: 一.Python介绍 1.Python的创始人为吉多·范罗苏姆.1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...
- Golang 语法学习笔记
Golang 语法学习笔记 包.变量和函数. 包 每个 Go 程序都是由包组成的. 程序运行的入口是包 main. 包名与导入路径的最后一个目录一致."math/rand" 包由 ...
- CUBRID学习笔记 41 sql语法之select
cubrid的中sql查询语法 SELECT [ ] [{TO | INTO} ][FROM ] [WHERE ][GROUP BY {col_name | expr} [ASC | DESC], . ...
- MarkDown语法 学习笔记 效果源码对照
MarkDown基本语法学习笔记 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 下面将对Markdown的基本使用做一个介绍 目 ...
随机推荐
- hexo 使用教程
hexo 使用教程 这个早就用起来了,写给需要的小伙伴 mayufo.github.io 先扔出自己的地址 安装 想玩hexo,需要安装以下应用 git node 安装完成在终端输入 $ npm in ...
- ThreadLocal的简单使用(读书笔记)
从ThreadLocal的名字上可以看到,这是一个线程局部变量,也就是说,只有当前线程可以访问,既然是只有当前线程可以访问的数据,自然是线程安全的. public class ThreadL ...
- TCP和UDP比較
一.TCP/IP协议 TCP/IP协议,你一定常常听说吧,当中TCP(Transmission Control Protocol)称为传输控制协议,IP(Internet Protocol)称为因特网 ...
- mariadb mysql 报'Access denied for user 'root'@'localhost' (using password: NO)'错误的解决
C:\Program Files\MariaDB 10.2\bin>mysql admin -u root password "x123456789" mysql Ver 1 ...
- Knockout JS 演示样例
五个小样例,来自Knockout JS官方站点. //tutorial 1 //following codes uses to demonstrate observable values and ta ...
- composer 初始化办法和方法
php -r "readfile('https://getcomposer.org/installer');" > composer-setup.php php -r &qu ...
- UI-9-UITableView
课程要点: UITableView及其两种风格和三部分 UITableViewController UITableViewCell及其四种风格 通过代理给UITableView设置cell 性能优化 ...
- Java8 stream学习
Java8初体验(二)Stream语法详解 Java 8 flatMap示例 第一个Stream Demo IDEA里面写Stream有个坑 虽然java文件中没错,但是但编译的时候还是报错了, In ...
- Nodejs各种功能Module的收集整理
收集整理接触过的各种常用的nodejs modules,不断更新~~~ ================================================================ ...
- plsql programming 12 集合(忽略, 个人感觉用不到)
关联数组, 嵌套表, varray 个人并不推荐使用集合, 因为操作有别于普通字段. 集合中每一个元素的数据类型都是相同的, 因此这些元素都是同质的(同质元素) 这一章的内容先忽略吧, 因为个人感觉用 ...