Home
<!DOCTYPE html>
<html>
<head>
<!-- 插入外部样式表 -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>title</title>
</head>
<body>
<h1>啦啦啦</h1>
<p>我是卖报的小行家</p>
</body>
</html>
Basic
标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr/>创建水平线,分割内容
<!-- 注释 -->
段落
<p>段落</p>
<br/>折行
链接
<a href= "https://liheyuting.github.io/" target="_blank">This is my blog</a>
target="_blank" 在新窗口打开文档
<a name="label">锚</a> #也可以用id属性替代MAME属性
建立锚了,可以在其他地方创建指向这个锚的链接
- 同一页面
<a href="#lable">xxxx</a>
- 其他页面
<a href="https://liheyuting.github.io/html/html_links.asp#label">xxxxx</a>
(Q这个链接是怎么确定的呢)
图片
<img src="dora.jpg" alt="https://liheyuting.github.io/" width="" height="">
- 背景图片
<body background="//"
- 排列图片
<img src="" align="botton(/middle/top)"
- 浮动图片
<img src="//" align="left(/fight)"
- 增加图片链接
在<img> 前后加上
<a href="https://liheyuting.github.io/html"></a>
按钮
<botton>click</botton>
列表
<ul> #unorder list 无序列表
<li>a</li>
<li>b</li>
</ul>
<ol> #order list 有序列表
- 定义列表
<dl>
<dt>1111</dt>
<dd>2222</dd>
<dt>3333</dt>
<dd>4444</dd>
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等
(Q这个不是太明白)
dl 定义定义列表
dt 定义定义项目
dd 定义定义的描述
- 嵌套列表
多加几层
属性
(Q css时多了解下)
class 规定元素的类名
id 元素的唯一id
style inline style 行内样式
title 规定元素的额外信息
文本标签
<b> 粗体
<big> 大号字
<em> 着重文字
<i> 斜体
<small> 小号字
<strong> 加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 增加下划线
<del> 增加删除线
引用
<q> 短引用
<blockquote> 长引用
<abbr> 定义缩写
<dfn> 定义项目或缩写的定义
<address> 定义文档或文章的联系方式/作者(通常斜体显示,大多数浏览器在此元素前后折行)
<cite> 定义著作的标题(斜体显示)
表格
- 表格
<table border='1'>
<tr>
<td> row 1, cell 1</tr>
<td> row 1, cell 2</tr>
</tr>
<tr>
<td> row 2, cell 1</tr>
<td> row 2, cell 2</tr>
</tr>
</table>
#table 定义表格
#tr 若干行
#td table data 表格数据
- 边框属性
border
- 表头
<th>heading</th>
#th table heading
- 空单元格
<td> </td>
- 跨行跨列
colspan
eg <th colspan="2"></th>
rowspan
eg <th rowspan="2"></th>
- 表格内的标签
(比如实现图片一块块)
- 单元格边距(cell padding)
<table cellpadding="10"></table>
- 单元格间距(cell spacing)
<table cellspacing="10"></table>
- 背景颜色或图片
<table bgcolor="blue"></table>
or (background='//')
- 表格内排列内容对齐
align="left(/right)"
- frame 外框
frame=""
box 四面铁框
above 头顶有框
below 脚下有框
hsides 上头下头被框
vsides 两边有框
块、类、布局等其他
块
<div> 在CSS里设置样式属性
可用于文档布局
<span> 为部分文本设置样式属性
类
类-块-行
(Q这块有点疑问,id, name, class相关)
布局
- header 页眉
- nav 导航链接的容器
- section 定义文档中的节
- article 定义独立的自包含文章
- aside 定义内容之外的内容(比如侧栏)
- footer 定义文档或节的页脚
- details 定义额外的细节
- summary 定义details 元素的标题
(detail/article/summary Q下次注意下)
响应式web设计
(Q虽然现在还不懂,最好要有印象,以后再回头看)
RWD响应式web设计(responsive web design)
- 自己创建
在head中<style>中设置
- Bootstrap
(Q之后学)
使用现成的CSS框架
在head中加入:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="////">
内联框架
<iframe src="//"(width="" height="" frameborder="0")></iframe>
- 作为连接的目标时
加入name属性
name=""
脚本
(Q之后学)
”假设6个月之后的你在教现在的你学习“
”强迫输出促进输入“
整理过程是一个复习的过程,虽然离现在实质工作内容相差千万,还应起项目直接实操才好。
稍加整理,如有错误或者其他的建议,还请不吝赐教,万分感谢。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h50915.shtml