1.HTML第一天笔记
`一、常用浏览器与浏览器内核*
1、常用浏览器
Chrome(谷歌) Firefox(火狐)IE Opera 浏览器 safari 浏览器
二、Html 概述和 Html 编译器及 Html 基本结构
- Html 简介
HTML 是 Hyper Text Markup Language 的首字母简写,意思是
超文本标记语言,超文本指的是超链接,标记指的是标签,是一种
用来制作网页的语言,这种语言由一个个的标签组成,用这种语言
制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,
一个 html 文件就是一个网页,html 文件用编辑器打开显示的是文
本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照
标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转
到另外一个网页
2. Html 编译器介绍
(1)、Notepad++
Notepad++是一款非常经典的编辑器,它的功能比 Windows 中
的 Notepad 强大得多,不仅有语法高亮度显示,也有语法折叠功能、
代码自动补全等,你还可以根据自己的喜好设置用户界面,使用扩展 功能。
(2)、Sublime Text2
Sublime Text 是具有漂亮的用户界面、强大功能和优良性能的一
款代码编辑器,你可以在 Windows、OS X 和 Linux 等主流操作系统上
运行使用,而且现在一直可以免费使用
(3)、Adobe Dreamweaver
DW 是第一套针对专业网页设计师特别发展的视觉化网页开发工
具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的
充满动感的网页。
(4)、Hbuilder
支持 HTML5 的 Web 开发 IDE。HBuilder 本身主体是由 Java 编写,
它基于 Eclipse,所以顺其自然地兼容了 Eclipse 的插件。快,是
HBuilder 的最大优势,通过完整的语法提示和代码输入法、代码块
等,大幅提升 HTML、js、css 的开发效率
3. Html 基本结构
- 1)、
<HTML
>标签
<html>
标签的作用相当于设计者在告诉浏览器,整个网页是从<html>
这里开始的,然后到</html>
结束。
对于<html
>这个标签,我们经常看到这样一句代码:
其实上面这句代码声明了该网页使用的是 W3C 组织的 XHTML 标准。
2)、<head>
标签
head 标签是页面的“头部”,只能定义一些特殊的内容
3)、<body>
标签
body 标签是页面的“身体”,一般网页绝大多数的标签代码都是在 这里编写
1**html
称之为超文本标记语言,在页面中除了文本之外还包含有视频 图片超链接 音频等等
文件格式 .html或者.htm
四,heml的基本标签
(1)标题标签 h1~h6
(2)段落标签 p
(3)超链接标签 a
href连接新的地址
(4)图像标签 img
(5)属性 style、name、href、src 等
(6)文本格式化标签
(7)格式化的标签 写成什么就显示成什么<pre>
(8)设置字体 face
(9)font设置的字体 默认大小为3
font-size标签中size的范围为1-7
{10}设置下标sub 例如二氧化碳 co<sub>
2<sub>
设置上标 co<sup>
2<sup>
(11)设置水平线 hr
(12)```title 标题
(13)`标签设置文字滚动
(14)
target:属性设置是否打开新的窗口
属性blank表示打开的是一个新的窗口
属性parent表示打开的是当前窗口
(15)锚点链接的使用
如图所示 如果需要设置回到顶部的连接 则在下方加一个超链接点击回到顶部
五,*无序列表与有序列表
无序列表为ul 有序列表为ol
注:ul中加type类型有三种类型
1.circle表示为圆圈
2.disc表示为实心圆
3.square表示为方块
六:标签与资源的关系
为搜索引擎定义关键词:
<meta name=“keywords” content=“HTML,CSS,XHTML,JavaScript”>
为网页定义描述内容:
<meta name=“description” content=“Free web tutorials on HTML and css”>
定义网页作者:
<meat name=“author” content=“Hege Refsnes”>
每30秒中刷新当前页面:
<meta http-equiv=“refresh” content=“30”>
七,表格
<!--border表示表格的边框为1像素-->
<!--cellspacing表示表格与表格之间的宽度-->
<!--align表示水平居中,left right center-->
<!--rowspan表示行合并-->
<!--colspan表示列合并-->
<!--<cellpadding>设置单元格内容与单元格边框之间的距离-->
<!--caption表示标题标签-->