十分钟学会 HTML
1.1 HTML 简介
1.1.1 概述
HTML 是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为 .html 或者 .htm。
1.1.2 格式
<!-- 定义整个 html 文档整体 -->
<HTML>
<!-- 对网页进行一些设置以及定义标题文件等 -->
<head>
<title></title>
</head>
<!-- 文档主题,编写网页上显示的内容 -->
<body>
</body>
</HTML>
1.2 HTML 标签
1.2.1 标签分类
围堵标签
格式:<标签名> 内容 </标签名>
例如:<body>HelloWorld</body>
自闭合标签
格式:<标签名 />
例如:<br />
1.2.1 字符集
<head></head>
中使用 <meta charset="UTF-8">
进行字符集设置,常用字符集有:
UTF-8
包含全世界所有国家需要用到的字符
BIG5
繁体中文,港澳台等用
gb2312
简单中文,包括6763个汉字
GBK
包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312
1.2.3 标签介绍
☛ 文档类型
<!DOCTYPE>
于文档的最前面,用于向浏览器说明当前文档使用哪种标准规范,必需在开头处使用该标签。为所有的 XHTML 文档指定 HTML 版本和类型,只有这样浏览器才能按指定的文档类型进行解析。
☛ 简单标签
标签 |
说明 |
---|---|
<hn>标题标签</hn> |
n 越大字越小,h1 标签重要,尽量少用,不要动不动扔一个h1。 一般 h1 都是给 logo 使用 |
<p>文本标签</p> |
默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行 |
<hr /> |
在网页中显示默认样式的水平线 |
<br /> |
强制换行显示 |
<div></div> |
没有语义,是我们网页布局盒子 |
<span></span> |
没有语义,是我们网页布局盒子 |
<b></b> <strong></strong> |
加粗 |
<i></i> <em></em> |
斜体 |
<s></s> <del></del> |
删除线 |
<u></u> <ins></ins> |
下划线 |
☛ 标签属性
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
标签可以拥有多个属性,必须写在开始标签中,位于标签名后面;属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开;任何标签的属性都有默认值,省略该属性则取默认值。
☛ 图像标签
属性 |
内容 |
说明 |
---|---|---|
src |
URL |
图片路径 |
alt |
文本 |
图片不能显示提示消息 |
title |
文本 |
鼠标悬停时的内容 |
wideh |
像素 |
图片宽度 |
height |
像素 |
图片高度 |
border |
数字 |
设置图像边框的宽度 |
<img src="http://pic.90sjimg.com/design/00/79/33/96/592399fd35cfb.png" width="200px"/>
☛ 链接标签
属性 |
内容 |
说明 |
---|---|---|
href |
URL |
跳转目标 |
target |
self、blank |
打开方式,其中self为默认值,blank为在新窗口中打开方式 |
<a href="http://www.baidu.com" target="blank">去百度</a>
注意: ① 外部链接 需要添加 http ② 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页 ③ 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。 ④ 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
☛ 列表
① <ul></ul>
无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
② <ol></ol>
有序列表
有排列顺序的列表,其各个列表项按照一定的顺序排列定义
<ol type="A" start="4"> <!-- 用ABCD标号,从第四个开始 -->
<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 用于定义一个表格。 th 用户定义表中的字段 tr 用于定义表格中的一行,必须嵌套在 table 标签中,在 table 中包含几对 tr 就有几行表格。 td 用于定义表格中的单元格,必须嵌套在 tr 标签中,一对 tr 中包含几对 td 就表示该行中有多少列(或多少个单元格)。
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
表格属性
属性 |
内容 |
说明 |
---|---|---|
border |
像素 |
表格边框宽度 |
cellspacing |
像素 |
单元格边框之间的间距 |
cellpadding |
像素 |
单元格内容与边框的间距 |
width |
像素 |
表格宽度 |
height |
像素 |
表格高度 |
align |
left、center、right |
表格对齐方式 |
rowspan |
单元格 |
跨行合并 |
colspan |
单元格 |
跨列合并 |
其他标签
<thead></thead>
:用于定义表格的头部。必须位于 table 标签中,一般包含网页的logo和导航等头部信息。
<tbody></tbody>
:用于定义表格的主体。位于 table 标签中,一般包含网页中除头部和底部之外的其他内容。
☛ 表单
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
属性 |
内容 |
说明 |
---|---|---|
action |
URL |
表单提交的地址 |
method |
get、post |
表单数据的提交方式 |
name |
用于指定表单的名称 |
☛ 控件
input
属性 |
内容 |
说明 |
---|---|---|
type |
text |
单行文本框 |
password |
密码输入框 |
|
radio |
单选框 |
|
checkbox |
复选框 |
|
button |
普通按钮 |
|
submit |
提交按钮 |
|
reset |
重置按钮 |
|
image |
图像形式提交按钮 |
|
file |
文件域 |
|
name |
自定义 |
控件名称 |
value |
自定义 |
默认文本值 |
size |
正整数 |
显示宽度 |
checked |
checked |
默认选中 |
maxlength |
正整数 |
允许输入的最大字符数 |
<input type="text" />
<input type="button" value="按钮"/>
label 用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获得输入焦点,for 属性规定 label 与哪个表单元素绑定
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea 需要输入大量的信息,就需要用到 textarea 标签。通过 textarea 控件可以轻松地创建多行文本输入框
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意 ① select 中至少应包含一对 </option。 ② 在 option 中定义 selected =" selected "时,当前项即为默认选中项。
- 流量调整和限流技术
- 性能分析工具dotTrace
- struts2 异常处理3板斧
- UE4中的单映射:TMap容器
- Visual Studio 2015 前端开发工作流
- 易学易用的Windows PowerShell
- mongodb-java-driver基本用法
- 基于Redis的开源分布式服务Codis
- 利用Weblogic的iisproxy、iisforward插件实现IIS转发
- 帆软FineReport如何使用程序数据集
- etcd:用于服务发现的键值存储系统
- 如何使用HTTP压缩优化服务器
- "org.jboss.netty.internal.LoggerConfigurator".DESCRIBED is already registered 的解决办法
- ASP.NET SignalR 高可用设计
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android开发实现的内存管理工具类
- Android日期和时间选择器实现代码
- Android开发实现ImageView加载摄像头拍摄的大图功能
- Android开发实现的Intent跳转工具类实例
- Android开发中的文件操作工具类FileUtil完整实例
- Android开发中超好用的正则表达式工具类RegexUtil完整实例
- Android ijkplayer的使用方法解析
- Android开发实现查询远程服务器的工具类QueryUtils完整实例
- 解决android studio 3.0 加载项目过慢问题–maven仓库选择
- Android实现朋友圈点赞列表
- Kotlin基本类型自动装箱一点问题剖析
- Kotlin入门教程之开发环境搭建
- Android:Field can be converted to a local varible.的解决办法
- Android使用多线程进行网络聊天室通信
- android实现banner轮播图无限轮播效果