HTML简单使用
HTML简单使用
标签 ： 前端技术
HTML
HTML(Hypertext Marked Language), 即超文本标记语言,能够独立于各种操作系统平台(如UNIX/Linux/Windows等)进行信息展示.HTML由WEB发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立.
所谓超文本:是因为它可以加入图片/声音/动画/视频等内容(超越了文本的范畴);
所谓标记:是因为HTML所有的操作都是通过标记实现, 每一个HTML文档都是静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,它只是一种排版资料显示位置的标记结构语言, 如:<标签名称>标签内容</标签名称>
HTML规范
- 一个HTML文件必须有开始标签和结束标签
<html></html>; - HTML包含head/body两部分内容:
<head>页面设置信息</head><body>页面显示内容</body>
- HTML标签要有始有终(如
<table></table>), 空元素标签需要在标签内结束(如<hr/><br/>); - HTML代码不区分大小写;
HTML操作思想
- 一个网页中可能会有很多数据, 不同的数据需要不同的显示效果,此时就使用标签把需要展示的数据封装起来,通过修改标签属性值以实现标签内数据样式的变化;
- 一个标签相当于一个容器,想要修改容器内数据样式,只需要修改容器属性值.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>First Html</title>
</head>
<body>
<font size="5" color="red">Hello World !</font>
<hr/>
<font size="6" color="green">世界你好</font>
</body>
</html>HTML常用标签
简单标签
注释标签
<!-- HTML的注释 -->注意: 浏览器不展示,但查看源代码时可看到.
文字标签 : 修改文字样式
<font></font>
| 属性 | 描述 |
|---|---|
| size | 文字的大小(取值范围1-7) |
| color | 文字颜色[两种表示方式:英文单词(red/green/blue)/十六进制数(#ffffff:RGB) |
标题标签
<h1></h1>-><h6></h6>: 依次变小水平线标签
<hr/>
| 属性 | 描述 |
|---|---|
| size | 水平线粗细 取值范围 1-7 |
| color | 颜色 |
- 特殊字符: 需要对特殊字符进行转义才能在网页上显示:
| 字符 | 转义 |
|---|---|
< |
< |
> |
> |
空格 |
|
& |
& |
注册符® |
® |
版权符© |
© |
- 图像标签
<img src="图片的路径"/>
| 属性 | 描述 |
|---|---|
| src | 图片路径 |
| width | 图片宽度 |
| height | 图片高度 |
| alt | 图片出错时显示的文字 |
- 超链接标签
<a href="资源地址">说明</a>
| 属性 | 描述 |
|---|---|
| href | 链接资源地址,当超链接不需要跳转时,设为# |
| target | 设置打开的方式[_blank新窗口打开/_self当前页打开(默认)] |
拓展:
定义锚点: `<a name="top">顶部</a>`
回到锚点: `<a href="#top">回到顶部</a>`
列表标签
- 层次列表
<dl></dl>: 层次列表
<dt></dt>: 上层内容
<dd></dd>: 下层内容
<dl>
<dt>阿里巴巴集团</dt>
<dd>淘宝</dd>
<dd>阿里云</dd>
<dd>阿里妈妈</dd>
</dl>
- 有序列表
<ol></ol>: 有序列表
| 属性 | 描述 |
|---|---|
| type | 排序方式[1(默认)/a/i] |
<li></li>: 列表内容
<ol type="A">
<li>百度</li>
<li>阿里</li>
<li>腾讯</li>
</ol>- 无序列表
<ul></ul>: 无序列表
| 属性 | 描述 |
|---|---|
| type | 实心圆disc(默认)/空心圆circle/实心方块square |
<li></li>: 列表内容
<ul type="circle">
<li>百度</li>
<li>阿里</li>
<li>腾讯</li>
</ul>表格标签
<table></table>: 用于对数据进行格式化, 使显示更加清晰
| 属性 | 描述 |
|---|---|
| border | 表格线 |
| bordercolor | 表格线颜色 |
| cellspacing | 单元格距离 |
| width | 表格宽度 |
| height | 表格高度 |
<caption></caption>: 表格标题<tr></tr>: 行
| 属性 | 描述 |
|---|---|
| align | 设置内容对其方式[left/center/right] |
<th></th>: 表格首行列<td></td>: 表格内容列- 合并单元格
rowspan：跨行
<td rowspan="行数"></td>colspan：跨列
<td colspan="列数"></td>
<table border="1" bordercolor="aqua" cellspacing="0" width="400" height="150">
<caption>表格标题</caption>
<tr>
<td colspan="4" align="center">跨列标题</td>
</tr>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
<tr align="center">
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td rowspan="2">跨行内容</td>
</tr>
<tr align="center">
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>如果单元格内没有内容, 需要使用空格符
占位.
表单标签
<form></form>: 用于向服务端提交数据
| 属性 | 描述 |
|---|---|
action |
提交地址,默认提交到当前页面 |
method |
提交方式[GET/POST] |
enctype |
指定发送到服务器数据的编码格式[application/x-www-form-urlencoded: 表单数据/ multipart/form-data: 文件上传] |
表单输入项
每个输入项中必须要有一个
name属性, 以标识该输入项的key,服务端获取表单数据时用.
- 文字输入项：
<input type="text"/> - 密码输入项：
<input type="password"/> - 单选按钮：
<input type="radio"/>
性别:
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女两个按钮name属性值相同,且必须有value值,实现默认选中:checked="checked".
- 复选按钮：
<input type="checkbox"/>
爱好
<input type="checkbox" name="hobby" value="checkbox"/>羽毛球
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="swim"/>游泳属性描述同radio.
- 文件上传:
<input type="file"/> - 下拉菜单:
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>默认选择selected="selected"
- 文本域
<textarea cols="10" rows="10"></textarea> - 隐藏项
<input type="hidden" />
不会显示在页面上, 但会存在于HTML代码里面. - 提交按钮
<input type="submit"/> - 图片提交
<input type="image" src="图片路径"/> - 重置按钮
<input type="reset"/> - 普通按钮
<input type="button" value=""/>
需要同JS一起使用.
其他标签
| 标签 | 作用 |
|---|---|
<b/> |
加粗 |
<s/> |
删除线 |
<u/> |
下划线 |
<i/> |
斜体 |
<pre/> |
原样输出 |
<sub/> |
下标下标 |
<sup/> |
上标上标 |
<p/> |
段落标签(比br标签多一行) |
<div/> |
自动换行(结合CSS) |
<span/> |
不自动换行(结合CSS) |
HTML头标签
<title>: 网页显示标题<meta>: 页面设置
<meta name="keywords" content=""><meta http-equiv="refresh" content="3;url=current.html" />
<base/>: 设置当前页面所有链接默认地址
<base target="_blank"/>: 统一设置超链接打开方式<link/>：引入外部文件,如CSS等
HTML简单使用的更多相关文章
- 【造轮子】打造一个简单的万能Excel读写工具
大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...
- Fabio 安装和简单使用
Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...
- node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- 哪种缓存效果高？开源一个简单的缓存组件j2cache
背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...
- 在Openfire上弄一个简单的推送系统
推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...
- 我的MYSQL学习心得（一） 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 使用 Nodejs 搭建简单的Web服务器
使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...
- ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 简单粗暴地理解js原型链--js面向对象编程
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
随机推荐
- 【Swift】UIPresentationController的使用方法
UIPresentationController是ios8.0的新特性哦,使用需要注意 先上一个效果图 第一步: 连线选择segue类型为,present Modally 第二步:需要演示的控制器,自 ...
- 运维技巧-Nginx日志格式
1.说一说 当你安装完nginx,输出的格式是比较乱的,这样我们就需要自己去定义一下,自己看着舒服的格式. 2.Nginx日志字段 $remote_addr 记录客户端IP,但她的值不是客户端提供的, ...
- ●BZOJ 2693 jzptab
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2693 题解: 莫比乌斯反演 先看看这个题,BZOJ 2154 Crash的数字表格,本题的升 ...
- 【HNOI2017】大佬
题目描述 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语. 你作为一个 OIER,面对这样的事情非常不开心,于 ...
- Codeforces Round #438 B. Race Against Time
Description Have you ever tried to explain to the coordinator, why it is eight hours to the contest ...
- [bzoj1566][NOI2009]管道取珠
来自FallDream的博客,未经允许,请勿转载,谢谢. n<=500 神题...... 发现这个平方可以看作两个序列相同的对数 然后就可以表示状态了. f[i][j][k]表示两个序列各选了 ...
- [BZOJ]1050 旅行comf(HAOI2006)
图论一直是小C的弱项,相比其它题型,图论的花样通常会更多一点,套路也更难捉摸. Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权 ...
- oracle 分页查询数据重复问题
最近在做项目的时候发现一个问题,oracle 在查询分页数据的时候,有几条数据重复查询了,并且有几条数据在分页的时候消失了.百度了一下发现,ORACLE 在查询数据的时候返回的行不是固定的,他只是按照 ...
- Linux mint界面过小无法安装（解决方法）
安装Linux mint时,到了分区的时候,有时候会出现界面过小(就是你点击不到确定键). 如下图所示: 大家可以看到下面的确定键无法显示,导致无法安装.网上查了一下都是清一色的下载vwware to ...
- Java8-理解Colloctor
上一节学习了Java8中比较常用的内置collector的用法.接下来就来理解下collector的组成. Collector定义 Collector接口包含了一系列方法,为实现具体的归约操作(即收集 ...