<html>
<body> (可添加<a href="#背景图片">添加背景图片</a>)
<h1>开始学习html</h1>
<p>不知道学啥，呢就都看看</p>
</body>
</html>HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如
<b> 和 </b> 前面开始，后面结束二、常用
1、常用标签
<h1> 标题 </h1> head <h1>-<h6>
<p> 段落 </p> paragraph
<a href="link"> 这是一个链接 </a> 在 href **属性** 中指定链接的地址。<a> 是标签定义超链接(定义锚。)
<img scr="link" width="" height="" /> 图片<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。src 指 "source"。源属性的值是图像的 URL 地址。
<br/> 换行
<hr/> 水平线
<cite> 定义著作的标题。 </cite>
<address> 定义作者联系信息 </address>
<!--注释--> 注释方法
<pre> </pre> 空格原样输出
<acronym></acronym>或者<abbr></abbr>以及<dfn>缩写</dfn> 缩写属性值：title=""
<blockquote></blockquote> 块引用2、文字常用标签
<del></del> 删除线
<ins></ins> 下划线
<b></b> 粗体文字
<big></big> 大号字体
<i></i> 斜体字
<sub></sub> 下标
<sup></sup> 上标3、常用属性
href= 指定链接地址“http://****** ”
name/id 创建文档内的书签
target 定义被链接的文档在何处显示-新窗口"_blank" *链接在哪打开的问题*
<a href="xiaoyudi.xyz" target="_blank">小宇的博客</a>
align 见下文属性 被淘汰 style="text-align:align属性"替代
bgcolor 背景颜色 被淘汰 style="background-color:PowderBlue;"替代
color: 字体颜色 也被淘汰 用style="text-align:color"替代
style=
target=附：
1、align属性—————文字、图片的排列
| 属性值 | 属性描述 |
|---|---|
| left | 左对齐内容（默认值）。 |
| right | 右对齐内容。 |
| center | 居中 |
| justify | 两端对齐 |
| char | 将内容对准指定字符。 |
| bottom | 图片底部对齐（默认） |
| middle | 图片中间对齐 |
| top | 图片顶部对齐 |
| left | 图片悬浮文字左侧 |
| right | 图片悬浮文字右边 |
| width | 图片宽度 |
| height | 图片高度 |
2、style属性
| 属性 | 属性描述 |
|---|---|
| background-color | 背景颜色 |
| font-family | 字体 |
| color | 字颜色 |
| font-size | 字尺寸 |
| text-align | 文本对齐 |
3、target属性
| 属性 | 属性描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
三、用法
Ⅰ、图片
1、对齐：<p>图像 <img src="url" align="bottom"> 图片在文本中底部对齐</p>
2、图片自定义宽、高<p>图片 <img src="url" width="" height="" /> </p>
3、图片无法加载时 <p> <img scr="url" alt="为加载出来的图片" /> </p>
4、插入图片
Ⅱ、文字：
<p style=text-align:center>居中文字</p>Ⅲ、书签
1、创建书签
<a name="sq">这是一个书签</a>2、创建一个指向该书签的链接
<a href="#sq">指向上面的书签</a>{/collapse-item}
{collapse-item label="难"close}
一、样式表
1、外部样式表(当样式需要被应用到很多页面的时候)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>2、内部样式表(单个文件需要特别样式时)
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>3、内联样式表(特殊的样式需要应用到个别元素时)
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>二、表格
<p>每个表格由 table 标签开始。</p>
<p>每个 **表格行由 tr 标签** /行 开始。</p>
<p>每个 **表格数据由 td 标签** /列 开始。</p>
<p>可以使用<th>粗体居中</th>做表头</p>
<p>在空单元格中添加一个空格占位符" "</p>
<p>table下加个标题：<caption>我的标题</caption> </p>无边框
<table>
<caption>我的标题</caption>
<tr>
<td>表格一行一列内容</td>
<td>表格一行二列内容</td>
</tr>
<tr>
<td>表格二行一列内容</td>
<td>表格二行二列内容</td>
</tr>
</table>可能涉及到属性
border——>给表格加边框
colspan——>占列数
rowspan——>占行数
eg.
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td>小宇</td>
<td>188***3541</td>
<td>171222853</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>小宇</td>
</tr>
<tr>
<th rowspan="2">联系方式</th>
<td>188***3541</td>
</tr>
<tr>
<td>171222853</td>
</tr>
</table>{/collapse-item}
三、列表
1、无序（使用粗体圆点进行标记。）
无序列表始于
- 标签。每个列表项始于
- 。
<html> <body> <p>这里是一个无序列表</p> <ul>（可以有type属性） <li>草莓</li> <li>香蕉</li> </ul> </body> </html>属性值
disc
circle
square
2、有序（列表项目使用数字进行标记。）
有序列表始于- 标签。每个列表项始于
- 标签。
<html> <body> <p>这里是一个无序列表</p> <ol>（可以有type属性） <li>草莓</li> <li>香蕉</li> </ol> </body> </html>属性值
一
1
Ⅰ
a
A
···
3、定义列表（项目及其注释的组合。）
自定义列表以- 标签开始。每个自定义列表项以
- 开始。每个自定义列表项的定义以
- 开始。
<html> <body> <dl> <dt>小宇</dt> <dd>他是帅的</dd> </dl> </body> </html>
- 标签。
评论 (0)