时间戳

首页 > 技术文章 > 简明HTML

简明HTML

cnyl 原文

目录

HTML入门

HTML初识

<strong>我是加粗的字体</strong>

HTML骨架

<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

HTML标签分类

双标签

<body>
    我是文字
</body>

单标签

<br />

标签嵌套和并列关系

嵌套关系

<head><title></title></head>

并列关系

<head></head>
<body></body>

开发工具sublime

生成html骨架

html:5 + Tab 或者 ! + Tab

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

sublime text3安装后html:5+Tab不能快速生成html头部信息的解决办法：

需要下载Emmet插件，ctrl+shift+P打开命令面板，输入install，点击installPackage

Preference-->Package Control，点击Install Package，在接下来出现的窗口中输入emmet，选择Emment Css Snippets
 

版本号

<!DOCTYPE html>

字符集

<meta charset="UTF-8">

UTF-8 包含全世界所有国家需要用到的字符

GB2312 简单中文，包括6763个汉字

BIG5 繁体中文 港澳台

GBK 包含全部中文，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
 

HTML标签

排版标签

标题标签

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

h1标签因为重要，尽量少用。一般h1都是给logo使用

段落标签

<p>文本</p>

单词缩写：paragraph 段落

水平线标签

<hr />

hr是单标签，单词缩写：horizontal 横线

换行标签

<br />

br是单标签，单词缩写：break 打断、换行

div span标签

<div></div>
<span></span>

div span 是没有语义的 是我们网页布局主要的两个盒子

div 就是 division的缩写 分割，分区的意思 其实有很多div来组合网页

span 跨度、跨距、范围
 

文本格式化标签

<b></b><strong></strong>	粗体
<i></i><em></em>	斜体
<s></s><del></del>	加删除线
<u></u><ins></ins>	加下划线

b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈（XHTML推荐使用）
 

标签属性

<标签名 属性1="属性值1" 属性2="属性值2" >内容</标签名>

常用属性：height、width、color等
 

图像标签img

<img src="图像URL" />

img是单标签，单词缩写：image 图像

属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时的显示内容
width 像素（XHTML不支持%页面百分比） 设置图像的宽度
height 像素（XHTML不支持%页面百分比） 设置图像的高度
border 数字 设置图像边框的宽度

图片会等比缩放，一般给个宽度足够
 

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

单词缩写：anchor 锚

href 可以定义内部或外部链接，包括图片网页等

target 定义打开方式，有self和blank两种，其中_self为默认值，_blank为在新窗口中打开

<a href="https://www.baidu.com">文本或图像</a>

https:// 是协议，不可省略

<a href="#">文本或图像</a>

”#“ 定义空链接
 

锚点定位

<a href="#anchor">跳转到anchor</a>
<h3 id="anchor">我是anchor</h3>

link标签

<link />

定义文档与外部资源的关系，必须置于head里

href：被链接文档的地址

rel：当前文档与被链接文档的关系（rel="stylesheet"）

type：规定被链接文档的类型（type="text/css"）

media：被链接的文档显示在什么设备上

head添加小图标

<link rel="shortcut icon" href="" type="image/x-icon" />
 

script标签

<script type="text/javascript"></script>

可置于head里、也可置于body里

定义客户端脚本或者引入脚本

必填属性

type 指定脚本的类型，text/javascript

选填属性

src 外部脚本文件的URL

defer 规定是否对脚本执行进行延迟，直到页面加载为止，值和属性名一样

async 规定异步执行脚本（仅适用于外部脚本），值和属性名一样
 

style标签

<style type="text/css"></style>

置于head里 为HTML文档定义样式信息

必填属性

type 指定样式表的类型，text/css

选填属性

media 为样式表规定不同的媒介类型

常用的值：

screen 计算机屏幕（默认值）

print 打印预览模式/打印页

handheld 手持设备

all 所有设备
 

base标签

<head>
    <base target="_blank" />
</head>

base是单标签，可以设置整体链接的打开状态，需要在head中定义

在设置base标签之后，链接也可以单独定义
 

特殊字符

特殊字符 描述 字符的代码
  空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
¥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方2（上标2） &sup2;
³ 平方3（上标3） &sup3;

注释标签

<!--			 会把之后的内容全部注释
<!-- 内容 -->		注释掉内容

相对路径

  1. 图片和HTML文件位于同一文件夹，<img src="logo.gif" />
  2. 图片和HTML文件位于下一级文件夹，输入文件夹和文件名，之间用”/“隔开，<img src="img/logo.gif" />
  3. 图片和HTML文件位于上一级文件夹，在文件名之前加入”../“，上两级，则需要使用”../../“，<img src="../logo.gif" />

绝对路径

完整的地址（本地及网络）
 

无序列表

<ul>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
</ul>

ul 里建议只放 li 标签，li 标签里可以放其他标签

有序列表

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
</dl>

表格

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

table 表

tr 行

th 表头

td 每行被分为若干个单元格

td里面还可以嵌套表格

表单

<form name="form1" action="action_page.php" method="post">
    
</form>

表单在网页中主要负责数据采集功能

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

如果省略 action 属性，则 action 会被设置为当前页面。

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">

或：

<form action="action_page.php" method="POST">

何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

文本框

<input />单标签

单行文本

<form>
    <input name="username" type="text" />
</form>

密码框

<form>
    <input name="password" type="password" />
</form>

单选框

<form>
    <input name="d1" type="radio" value="" checked />
    <input name="d1" type="radio" value="" />
</form>

一组单选name必须相同，提交value的值

复选框

<form>
    <input name="d1" type="checkbox" value="" checked />
    <input name="d1" type="checkbox" value="" />
</form>

下拉菜单

<select	name="select" id="select">
    <option value="01">北京</option>
    <option value="02" selected="selected">上海</option>
</select>

上传

<input type="file" />

用于文件上传

多行文本

<textarea name="" rows="" cols=""></textarea>

提交按钮

<input name="submit" type="submit" value="注册" />

重置按钮

<input name="reset" type="reset" value="重填" />

用于清空表单已经填写的数据

推荐阅读