欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

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个月之后的你在教现在的你学习“

”强迫输出促进输入“

整理过程是一个复习的过程,虽然离现在实质工作内容相差千万,还应起项目直接实操才好。

稍加整理,如有错误或者其他的建议,还请不吝赐教,万分感谢。

HTML 常用基础汇总

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h50915.shtml