HTML——基础DAY1

来源：互联网发布：淘宝店铺显示的是昵称编辑：程序博客网时间：2024/09/21 08:18

来自与w3school

1、HTML 标题（Heading）

是通过 <h1> - <h6> 等标签进行定义的。

后面一定要带数字，不然只能识别为普通的段落；

<h1> 定义最大的标题。<h6> 定义最小的标题。

标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

2、HTML 段落

是通过 <p> 标签进行定义的。

浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

所有连续的空格或空行都会被算作一个空格。

3、HTML 链接

是通过 <a> 标签进行定义的。

格式：<a href="http://www.csdn.net">This is a link</a>

在 href(hypertext reference) 属性中指定链接的地址。

中间是指向链接的文字；

使用图像来作链接：

target属性：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> 在新窗口中打开

name 属性：

name 属性规定锚（anchor）的名称。

使用 name 属性创建 HTML 页面中的书签。

<a name="tips">基本的注意事项 - 有用的提示</a>

<a href="#tips">有用的提示</a> 点击#tips处时跳转到tips

4、HTML 图像

是通过 <img> 标签进行定义的。

格式：<img src="/i/eg_w3school.gif" width="300" height="120" />

这里只有一个<>,注意最后有/；

图片的名称和尺寸是以属性的形式提供的。

5、HTML元素

例如<p>叫做开始标签opening tag,中间是元素的内容。最后是结束标签closing tag；

<html>定义了整个HTML文档，他的内容是<body>，其定义了HTML元素的主体；

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

虽然他在opening tag中已经关闭，但是<br/>更加稳妥；

HTML标签对大小写不敏感；

6、HTML 属性

属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'

7、水平线

<hr />

8、注释

格式：

9、样式

背景颜色：style="background-color:yellow"

字体‘，颜色，尺寸： style="font-family:arial;color:red;font-size:20px; 分号作为间隔

文本对齐：style="text-align:center"

10、文本格式化

加粗：<b>This text is bold</b>

强调：<strong>This text is strong</strong>
大号字体：<big>This text is big</big>
引用：<em>This text is emphasized</em>
斜体：<i>This text is italic</i>
小号字体：<small>This text is small</small>
下标：This text contains
<sub>subscript</sub>
上标：This text contains
<sup>superscript</sup>

预格式文本:<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>

项目缩写：<dfn title="World Health Organization">WHO</dfn>

首字母缩写：<acronym title="World Wide Web">WWW</acronym>

文字反向：<bdo dir="rtl">This line will be written from right to left </bdo>

长引用：<blockquote> </blockquote> 会插入换行和外边距

短引用：<q> </q> 自动加上引号

删除线：<del> </del>

下划线： <ins> </ins>

著作的标题：<cite>The Scream</cite> 斜体显示

11、CSS

无下划线链接：<a href="/example/html/lastpage.html" style="text-decoration:none">
这是一个链接！
</a>

内部样式表：

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

外部样式表：<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>

内联样式：

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

12、图像

背景：

图片位置：

浮动图像：

<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

图片代替文本：

<img src="/i/eg_goleft.gif" alt="向左转" /> 指针移动到图片上显示文本，无法显示图片时显示文本

13、表格

<table border="1" cellpadding="10" cellspacing="10" bgcolor="red" background="/i/eg_bg_07.gif" frame="box"> //定义边框//设置单元格边距(Cell padding) //设置单元格间距//设置表格背景颜色 //设置表格背景图 //设置框架属性
<th>Heading</th> //添加表头
<th align="left" >Another Heading</th>//设置排列方式

<tr> //定义行
<td>row 1, cell 1</td> //定义2列
<td>row 1, cell 2</td>
</tr>
<tr> 定/义新一行
<td></td> //空单元格
<td> </td> //有边框的空单元格
</tr>

<tr>
<th colspan="2">电话</th> //横跨两列的单元格

</tr>

<tr>
<th rowspan="2">电话</th> //横跨两行的单元格
<td>555 77 854</td>
</tr>
</table>

14、列表

无序列表：默认小圆点标记

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表：默认数字标记

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

定义列表：

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

阅读全文

0 0