HTML入门

什么是HTML


HTML基本文档格式

HTML文档的基本格式，其中主要包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记。

<!DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范

<html>标记位于<!DOCTYPE> 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档， <html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。

<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等





一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。





<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。

一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。

HTML标记

在HTML页面中，带有“< >”符号的元素被称为HTML标记，如上面提到的<html>、<head>、<body>都是HTML标记

双标记<标记名>内容</标记名>

单标记<标记名/>

注释标记<!-- 注释语句 -->

标记属性


<标记名 属性1=“属性值1” 属性2="属性值2">内容</标记名>





标记嵌套

<p align="center">

    <font color="#979797" size="2">

    更行时间：2013年09月28日14时08分 来源：<font color="blue">传智播客</font>

     </font>

</p>

在嵌套结构中，HTML元素的样式总是遵从“就近原则”

“传智播客”这几个文字的颜色会遵从最靠近他的<font>标记，而size属性遵从外层的<font>标记，对齐属性则遵从最外层的<p>标记。

HTML文档头部相关标记

<title>标记

用于定义HTML页面的标题，必须位于<head>标记之内，一个HTML文档只能含有一对<title></title>标记

<title>网页标题名称</title>





<meta />标记

用于定义页面的元信息，可重复出现在<head>头部标记中，在HTML中是一个单标记。

<meta />标记本身不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。

<meta name="名称" content="值" />



<meta / name="">

<meta / name=“keywords” content=“关键字具体内容”/>设置网页关键字

<meta name="description" content="描述内容“/>设置网页描述

<meta http-equiv="名称" content="值" />设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。

默认会发送<meta http-equiv=“Content-Type” content=“text/html” />，通知浏览器发送的文件类型是HTML。

<meta http-equiv="名称" content="值" />



<meta name="author" content="传智播客网络部" />设置网页作者



<meta / http-equiv=“” >

<meta http-equiv="名称" content="值" />

设置字符集

其中http-equiv属性的值为Content-Type，content属性的值为text/html和charset=utf-8，中间用“;”隔开，用于说明当前文档类型为HTML，字符集为utf-8 (国际化编码)。

<meta http-equiv="refresh" content="10;url=http://www.itcast.cn" />

设置页面自动刷新与跳转

其中http-equiv属性的值为refresh，content属性的值为数值和url地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。





<link>

一个页面往往需要多个外部文件的配合，在<head>中使用<link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件

<link rel="stylesheet" type="text/css" href="style.css" />





常用属性

href URL
指定引用外部文档的地址

rel stylesheet
指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表

type

text/css
引用外部文档的类型为CSS样式表

text/javascript
引用外部文档的类型为javascript脚本

<style>

用于为HTML文档定义样式信息，位于<head>头部标记中

<style 属性=”属性值”>样式内容</style>

在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式。

HTMl文本控制标记


标题标记<hn>


<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

<hn align="对齐方式">标题文本</hn>

align取值

left  设置标题文字左对齐（默认值）

center  设置标题文字居中对齐

right  设置标题文字右对齐

段落标记<p>


<p align="对齐方式">段落文本</p>



默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。



水平线标记<hr />

<hr 属性="属性值" />

<hr />默认水平线

属性

align 设置水平线的对齐方式
可选择left、right、center三种值，默认为center，居中对齐

size 设置水平线的粗细
以像素为单位，默认为2像素

color 设置水平线的颜色
可用颜色名称、十六进制#RGB、rgb(r,g,b)

width 设置水平线的宽度
可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

换行标记<br />

文本样式标记<font>


用来控制网页中文本的字体、字号和颜色

<font 属性="属性值">文本内容</font> 





<font>属性

face 设置文字的字体，例如微软雅黑、黑体、宋体等

size 设置文字的大小，可以取1到7之间的整数值

color 设置文字的颜色

文本格式化标记


有时需要为文字设置粗体、斜体或下划线效果，使文字以特殊的方式显示

<b></b>和<strong></strong> 文字以粗体方式显示（XHTML推荐使用strong）

<i></i>和<em></em> 文字以斜体方式显示（XHTML推荐使用em）

<s></s>和<del></del> 文字以加删除线方式显示（XHTML推荐使用del）

<u></u>和<ins></ins> 文字以加下划线方式显示（XHTML不赞成使用u）

特殊字符标记


空格符
&nbsp;

< 小于号 &lt;

> 大于号 &gt;

& 和号 &amp;

￥ 人民币 &yen;

© 版权 &copy;

® 注册商标
&reg;

° 摄氏度 &deg;

± 正负号 &plusmn;

× 乘号 &times;

÷ 除号 &divide;

² 平方2（上标2）
&sup2;

³ 立方3（上标3）
&sup3;

HTMl图像标记


常用图像格式


GIF

支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。支持透明（全透明或全不透明）

但GIF只能处理256种颜色。在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。





PNG

包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。

JPG

JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。

JPG是特别为照片图像设计的文件格式，网页制作过程中类似于照片的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。

图像标记<img />

<img src="图像URL" />

src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。





属性

src URL
图像的路径

alt 文本
图像不能显示时的替换文本

title 文本
鼠标悬停时显示的内容

width 像素（XHTML不支持%页面百分比）
设置图像的宽度

height 像素（XHTML不支持%页面百分比）
设置图像的高度

border 数字
设置图像边框的宽度

vspace 像素
设置图像顶部和底部的空白（垂直边距）

hspace 像素
设置图像左侧和右侧的空白（水平边距）

align



left 将图像对齐到左边

right 将图像对齐到右边

top 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方

middle 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方

bottom 将图像的底部和文本的第一行文字对齐，其他文字居图像下方

相对路径


不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。



<img src="img/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />

图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。

图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。

图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

绝对路径

带有盘符的路径。

“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

阶段案例-制作图文混排页面

HTML&CSS精选笔记_HTML入门的更多相关文章

  1. HTML&CSS精选笔记_CSS入门

    CSS入门 CSS核心基础 CSS样式规则 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} CSS代码结构中的特点 CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照 ...

  2. HTML&CSS精选笔记_HTML与CSS网页设计概述

    HTML与CSS网页设计概述 Web基本概念 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 名词解释 Internet网络 就是通 ...

  3. HTML&CSS精选笔记_布局与兼容性

    布局与兼容性 CSS布局 版心和布局流程 为什么要应用布局? 阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对 ...

  4. HTML&CSS精选笔记_CSS高级技巧

    CSS高级技巧 CSS精灵技术 需求分析 CSS精灵是一种处理网页背景图像的方式.它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发 ...

  5. HTML&CSS精选笔记_浮动与定位

    浮动与定位 元素的浮动 元素的浮动属性float 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程. 如何定义浮动? 在CSS中,通过float属 ...

  6. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

  7. HTML&CSS精选笔记_列表与超链接

    列表与超链接 列表标记 无序列表ul 无序列表的各个列表项之间没有顺序级别之分,是并列的 <ul> <li>列表项1</li> <li>列表项2< ...

  8. HTML&CSS精选笔记_盒子模型

    盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margi ...

  9. Java精选笔记_Java入门

    Java概述 什么是Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言 JavaSE标准版 是为开发普通桌面和商务应用程序提供的解决方案 JavaEE企业版 是为开发企业级应用程序提供的解 ...

随机推荐

  1. selenium初探:WebDriverException解决方法探索(以Chrome浏览器|IE浏览器|Edge浏览器为例)

    环境参考:win10-64位, python3.6.3, selenium3.7 在初试selenium运行以下代码时 from selenium import webdriver browser = ...

  2. RTX——第8章 任务优先级修改

    以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 任务优先级设置注意事项RTX 操作系统任务优先级的设置要注意以下几个问题: 设置任务的优先级时,数值越 ...

  3. Jar包版本查看方法

    原文:  https://blog.csdn.net/u011287511/article/details/66973559 打开Java的JAR文件我们经常可以看到文件中包含着一个META-INF目 ...

  4. VBA代码分行

    如果是语句可以直接在要换行的位加一个空格一个下划: Dim MyPath As String, MyName As String, _ tmpPath As String 如果是字符串可以加以加一个空 ...

  5. C# 中正则表达式 Group 分组【转】

    http://www.cnblogs.com/kiant71/archive/2010/08/14/1799799.html 在一个正则表达式中,如果要提取出多个不同的部分(子表达式项),需要用到分组 ...

  6. jQuery或者js保存文件到本地

    一: // 浏览文件夹(指定文件路径) function BrowseFolder() { try { var Message = "Please select the folder pat ...

  7. 风雪之隅（Laruence PHP开发组成员, Zend兼职顾问, Yaf, Yar, Yac, Opcache等项目作者、维护者.）

    http://www.laruence.com/?from=inf&wvr=5&loc=infblog

  8. kernel 3.2.0 上加入自己的板级文件

    第一步.复制自己的参考的板级文件 cp arch/arm/mach-omap2/board-am335xevm.c arch/arm/mach-omap2/board-aplex_ECM_5412.c ...

  9. Yii CDbCriteria常用用法

    $criteria = new CDbCriteria;$criteria->compare('name',$this->name,true,'OR'); //like部分匹配//$cri ...

  10. yii的一些方法的解析和blog的详细解析

    1.  存取数据库方法存储第一种(SAVE )存表时候用到  例子: $post=new Post;$post->title='sample post';$post->content='c ...