HTML&CSS精选笔记_HTML入门详解编程语言

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://blog.ytso.com” /> 设置页面自动刷新与跳转 其中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://blog.ytso.com/images/logo.gif”。 阶段案例-制作图文混排页面

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/11323.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论