HTML学习笔记

最新推荐文章于 2024-09-19 11:06:19 发布

gatol

最新推荐文章于 2024-09-19 11:06:19 发布

阅读量387

点赞数

文章标签： html

本文链接：https://blog.csdn.net/gatol/article/details/52345568

版权

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
图片显示： <img src="w3school.jpg" width="104" height="142" />
<br/>换行
样式：
- <body style="background-color:yellow">
- <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
- style="text-align:center"
文本格式
- <b></b>加粗文本
- <strong></strong>加粗
- <big></big>字体加大
- <em></em>强调 emphasize ‘斜体‘
- <i></i> 斜体
- <small></small>字体变小
- <sub></sub>下标
- <sup></sub>上标
- <del></del>删除线
- <ins></ins>下划线
预格式文本：
- <pre></pre>很适合显示代码
计算机输出’标签’：
- <code>Computer code</code>
- <kbd>Keyboard input</kbd>
- <tt>Teletype text</tt>
- <samp>Sample text</samp>
- <var>Computer variable</var>
地址：
- <address></address>
缩写及首字母缩写：
- <abbr title="etcetera">etc.</abbr> 缩写
- <acronym title="World Wide Web">WWW</acronym>首字母缩写
文字输出方向：
- 从右至左：<bdo dir="rtl”></bdo>
引用：
- 长的引用：<blockquote></blockquote>
- 短的引用:<q></q>
- <blockquote></blockquote>
- 对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息<dfn title=“”></dfn>
- <cite></cite> 元素定义著作的标题。浏览器通常会以斜体显示 cite 元素。

css:

<head></head>
外部样式表：通过更改一个文件改变整个站点的外观，直接放在<head>里
内部样式表：对单个文件样式设定，放在<style>里
内联样式：特殊样式需要用到个别元素时，以下实例显示出如何改变段落的颜色和左外边距。
style="color: red; margin-left: 20px"

<style>	定义样式定义。
<link>	定义资源引用。
<div>	定义文档中的节或区域（块级）。
<span>	定义文档中的行内的小块或区域。
<font>	规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>	定义基准字体。不赞成使用。请使用样式。
<center>	对文本进行水平居中。不赞成使用。请使用样式。

链接：<a href="http://www.w3school.com.cn">This is a link</a>
- <a href="http://www.w3school.com.cn/" target="_blank">加个target="_blank可以在新窗口打开
- name anchor 命名锚 <a name=“label”>显示的文本</a> 然后在同一文档中创建指向锚的链接：<a href=“#label">显示的文本</a> 也可以在其他页面中创建指向该锚的链接: <a href=“url#label”>显示的文本</a>
图像：
- 插入静态和动态无差别，语法：<p><img src="/i/eg_cute.gif” width="50" height="50" /></p> src后可加其他文件夹地址或网页地址。
- <img src="boat.gif" alt="Big Boat”> alt是为图像定义一串预备的可替换文本，当图片无法正常显示的时候，显示alt后的信息。
- 背景图像：<body background="/i/eg_background.jpg”> 在<body>一栏里插入，若图像没有页面大，图像将进行重复。
- <img>中可加属性 align 控制图像对齐方式: bottom/middle/top，left(可将图像浮动到左边),right(右边)
- <areashape="rect"coords="0,0,110,260"href ="/example/html/sun.html"target ="_blank"alt="Sun" />制作图像映射
表格：
- 放置在body里面，每个表格由 table标签开始
- 每一行由tr开始
- 每一列由td开始
- 表格边框放在table标签里， border =“1” 普通边框；border = “8” 粗边框,数字越大，越粗。
- th标签为表头，放置在tr里，大多数浏览器会自动加粗并使其居中。
- 空单元格，即td中无文本，这时无法显示边框。加一个空格占位符，就可以显示边框。
- 单元格跨行、跨列，rowspan=“2” 2表示一共有几行
- 单元格边距（cell pading）：单元格内容与边框之间的留白 cellpadding=“10”，放在table标签里
- 单元格间距（cell spacing）：单元格之间的留白放在table标签里
- 向表格添加背景颜色或背景图像： bgcolor=“red” background=“address"
- 单元格内排列内容：在每个单元格标签里加 align = “left"
- 框架属性：无法在internet Explorer 里显示。在table标签里加 frame标签 frame = “box”/“below”/hsides”/“vsides"
- 定义页眉: thead {color:green}
- 定义主体: tbody {color:red}
- 定义页脚: tfoot {color:blut}
列表：
- 无序列表：<ul>标签里放置<li>标签，<li>标签中放置列表元素，<ul>标签里放置type类型表示不同类型的分类符号。 “disc”实心圆圈，“circle" 空心圆圈，”square”实心方块。
- 有序列表：<ol>标签里放置<li>标签，<ol>标签里加 start=“5"属性可以表示序列从哪里开始，加属性type,默认为数字标序，”A”大写字母，”a”小写字母，”I”罗马字母，”i”小写罗马字母。
- 自定义列表：<dl>标签里放置<dt> <dd>标签，<dt>标签为自定义列表项，<dd>为列表项的定义
- 列表中可前套列表。（直接加<ul>标签）