前端学习日记之HTML、CSS 简单总结
标签（空格分隔）： html css 前端学习日记
html超文本标记语言
一. h标题标签
h1-h7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="11">
<meta name="description" content="11">
<title>test</title>
</head>
<body>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h7>7</h7>
</body>
</html>
- H1标签(搜索引擎可以搜索到)在一个页面当中只能出现一次，其它h次数不限
- 标签中无论输入多少空格或换行符都只显示一个空格
二. p段落标签
<p>----------------------------------</p>
- 上下元素自动换行，为文字添加样式
- p标签中不能嵌套块级元素（前后元素会被换行） 都是内联标签
三. a超链接标签
<a href="">i am a title</a>
- href 属性指定超链接目标的URL
- href=“# ” 锚点标记只能作用于别的a标签中的name值
- id 属性可以在任何标签中跳转
<a name="tag" href="java script: void(0);">我是顶部的a标签</a>
<a href="tag"></a>
四. b、i、u、strong、特殊符号使用
1. i标签(斜体)
<i>我会倾斜</i>
2. b标签(粗体)
<b>我被加粗了</b>
3. 标签(下划线)
<u>我有下划线</u>
4. strong标签(加粗)
<strong>我也可以加粗</strong>
- 与b标签不同的是strong标签可被搜索引擎搜到
5. 特殊符号
可以代替一个空格，输入几次得到几个空格！<strong>小于符号;大于号"引号©版权号×× 符号 非X符号&& 符号<hr>标签 ：分隔线<br>标签 ：换行
五. 图片标签
1. 图片的常见格式
1> BMP:位图格式(点阵图),占用空间大，色彩丰富(相机主流格式)
2> JPEG: 压缩格式，通常是破坏数据性压缩方式, 图片失帧效果.
3> GIF: 对透明色和多帧支持,动态图。
4> PNG:透明图片格式，无损压缩位图格式，支持Alpha通道的透明、半透明特性
2. 如何引用一个图片标签
1> 绝对路径引用图片
<img src="/home/halooyan/图片/3.png" alt="图片3">
- src:图片的绝对路径
- alt:图片描述信息（当图片显示不成功时会显示）可供搜索引擎爬取信息
2> 相对路径引用图片
<img src="2.jpg" alt="图片2">
- src:图片的相对路径（相对于当前html文件下的路径）
- alt:图片描述信息（当图片显示不成功时会显示）可供搜索引擎爬取信息
3. 图片标签的其他属性
<img src="" alt="e" width="px" height="px">
- width、height属性：图片显示的大小，单位为像素
六.列表标签
1. 无序列表
<ul type=""> <li>123</li> </ ul>
<li></li>:列表项- type="disc(圆点)、square(方块)、circle(圆环)"
- ul>li*10>a[href="java script:void(0);"]{$@-}
2. 有序列表
<ol>
<li>123</li>
<li>12314</li>
<li>asd</li>
</ol>- type="a(a.b.c..字母)、1(1.2.3...数字)、i(罗马小写数字) "
- li{$}*27 按tab键 生成27个li项
3. 自定义列表
<dl>
<dt>上衣</dt>
<dd>T恤</dd>
<dd>羊毛衫</dd>
<dd>衬衣</dd>
</dl>- dt: define title
- dd: define data
七.表格
<table border="1">
<caption>hahaha</caption>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td colspan="2">222</td>
</tr>
<tr>
<td>444</td>
<td>555</td>
<td rowspan="2">666</td>
</tr>
<tr>
<td>777</td>
<td>888</td>
</tr>
</tbody>
</table>- border="1" :1