基础结构

基础标签有HTML,head,body。

合格的的HTML页面:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="关键字1,关键字2,…" />
<meta name="description" content="内容介绍" />
<title>这里是标题</title>
</head>
<body>
这里是内容
</body>
</html>

HTML常用标签

1、换行符<br />

<br />

2、段落

<p align=“center”>这是一个段落</p>

属性align

行对齐方式(left, right, center)

3、标题

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

4.文本格式化

<b>定义粗体文本</b>
<i> 定义斜体文本 </i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>

5、链接

<a href=“URL”> ~ </a>

属性:

href 定义链接地址

title 链接提示信息

target 链接打开方式(_blank 新的空白页,_self 当前页,_top)

常规使用:

<a href=“about.html”>内部链接 </a>    

其他应用:

<a href=“mailto:邮箱地址”>邮件链接</a>
<a href=“tel:电话号码”>一键拨打</a>
<a href="sms:139xxxxxxx">一键发送短信</a>

6、锚点

锚点标签用于使用户"跳"到文档的某个部分。

<a href="#位置名"> ~ </a>
<a name="位置名"> ~ </a>

7、图像

<img src="URL" width="100" height="100" alt="替代文字" />

属性:

src 定义图像的url

alt 定义图像的替代文本

width 设置图像的宽度

height 设置图像的高度

./            当前目录
../ 回到上一层目录
images/ 进入一层目录
../images/ 回到上一层目录,然后再进入images目录

9、图像热区

<img src="URL"  usemap="# map 名称" />
<map name="map 名称">
<area shape="形状" coords="坐标值" href="URL" />
</map>

属性:

shape 热区形状(rect、circle、poly )

coords 形状的坐标值

10、HTML 实体字符

大于号 (>)     &gt;
小于号 (<) &lt;
引号 (") &quot;
注册商标(®) &reg;
版权(© ) &copy;
& 号 &amp;

11、无序列表

  <ul>
<li>……</li>
<li>……</li>
<li>……</li>
</ul>

属性    Type

属性值  disc(实心圆)  Circle(空心园)   square(方形)

12、有序列表

<ol >
<li>……</li>
<li>……</li>
<li>……</li>
</ol>

属性    Type

属性值  1、 a 、 A、i、I

属性   start   排序的起点数值

13、

定义列表

<dl>
  <dt>HTML</dt>
  <dd>html 是超文本标记语言</dd>   <dt>XHTML</dt>
  <dd>可扩展超文本置标语言 </dd>
  <dd>表现方式与超文本置标语言(HTML)类似,不过语法上更加严格 </dd>
</dl>

14、HTML 表格

<table border="1">
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

<table> 定义表格 <th> 定义表头 <tr> 定义表格的行 <td> 定义表格单元

具体属性:表格链接

15、<iframe> 内嵌框架

它可以把一个网页显示在另一个网页中。

<iframe src="url" frameborder="0" width="100" height="100" scrolling="yes"></iframe>

 scrolling可选项:yes,no,auto。设置是否显示滚动条。

16、form表单

<form action="url" method="post" enctype="multipart/form-data" target="_blank"></form>

属性            说明
name           表单的名称
action          表单提交地址
method       表单数据提交的方式 (get ,post)
enctype       MIME类型
target          打开方式

17、input表单元素与form表单里的其他元素

链接在此

随机推荐

  1. StringBuffer

    1.StringBuffer StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串 ...

  2. 关于Plupload结合上传插件jquery.plupload.queue的使用

    之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...

  3. 云计算和大数据时代网络技术揭秘(八)数据中心存储FCoE

    数据中心存储演化——FCoE   数据中心三大基础:主机 网络 存储 在云计算推动下,存储基础架构在发生演变 传统存储结构DAS.SAN在发展中遇到了布线复杂.能耗增多的缺点(原生性),需要对架构做根 ...

  4. QEMU命令创建KVM Guest(bridge桥接)

    1. Check QEMU version [root@pqsfc018 ~]# /usr/bin/qemu-system-x86_64 -version QEMU emulator version ...

  5. 专题:Channel Bonding/bonding

    EtherChannel最初是由cisco提出,通过聚合多条物理链路为单条逻辑链路,从而实现高可用及提高吞吐量等目的.AgP(Port Aggregation Protocol,Cisco专有协议). ...

  6. 关于iphone、安卓手机VPN全面解析

    现在智能手机功能越来越强大,网络APP层出不穷,社交大佬facebook.twitter等纷纷推出了自己的社交APP应用,大部分手机已经内置了很多社交应用,包括facebook等:android.io ...

  7. B. Factory Repairs--cf627B(线段树)

    http://codeforces.com/problemset/problem/627/B 题目大意:  n代表天数 ,k代表每一次维修持续的天数,a代表维修过后每天能生产a件产品,b代表维修之前每 ...

  8. GitLab的Gravatar头像服务不可用

    由于www.gravatar.com在国内不可正常使用,导致我们搭建的GitLab在网页上会阻塞大量时间,并最终无法显示头像.我们可以将其替换成"多说"的头像服务.我使用的是CE ...

  9. Java并发(8):CountDownLatch、CyclicBarrier、Semaphore、Callable、Future

    CountDownLatch.CyclicBarrier.Semaphore.Callable.Future  都位于java.util.concurrent包下,其中CountDownLatch.C ...

  10. c#winform如何通过控件名查找控件

    //根据控件名称查找控件 //作用根据控件的配置项目, Control[] myfindcs = this.Controls.Find("button4", true); if ( ...