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常用标签

简单标签

注释标签



注意: 浏览器不展示,但查看源代码时可看到.
文字标签 : 修改文字样式

<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面向对象编程
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

随机推荐

ubuntu下安装foxi reader阅读器
参考 :https://blog.csdn.net/u013831198/article/details/72472040 请参照以下步骤安装Foxit Reader(适用于Linux): • ...
【webstorm使用手册】如何让webstorm支持nextcss基础语法？
第一步, 安装 PostCss插件如果不知道如何安装插件,参看:http://www.cnblogs.com/codelovers/p/7048113.html 第二步,设置文件类型解析方式打开F ...
spark-shell报错：Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/hadoop/fs/FSDataInputStream
环境: openSUSE42.2 hadoop2.6.0-cdh5.10.0 spark1.6.0-cdh5.10.0 按照网上的spark安装教程安装完之后,启动spark-shell,出现如下报错 ...
bzoj 3745: [Coci2015]Norma
Description Solution 考虑分治: 我们要统计跨越 \(mid\) 的区间的贡献分最大值和最小值所在位置进行讨论: 设左边枚举到了 \(i\),左边 \([i,mid]\) 的最大 ...
【Gcd】
[题目描述] 有 n 个正整数 x1~xn,初始时状态均为未选.有 m 个操作,每个操作给定一个编号 i,将 xi 的选取状态取反.每次操作后,你需要求出选取的数中有多少个互质的无序数对. [输入数据 ...
java开发笔记——表映射实体类代码示例
package com.special.ipmsdm; import java.io.Serializable; import javax.persistence.Column; import jav ...
Python 线程池，进程池，协程，和其他
本节内容线程池进程池协程 try异常处理 IO多路复用线程的继承调用 1.线程池线程池帮助你来管理线程,不再需要每个任务都创建一个线程进行处理任务. 任务需要执行时,会从线程池申请线程,有则 ...
Chinese-Text-Classification：Tensorflow CNN 模型实现的中文文本分类器[不分词版]
从现在的结果来看,分词的版本准确率稍微高一点. 训练过程: 模型评估: 实验三,准备换一下数据集,用这里的数据集来跑这个模型:https://zhuanlan.zhihu.com/p/30736422 ...
TensorFlow 中文资源全集，官方网站，安装教程，入门教程，实战项目，学习路径。
Awesome-TensorFlow-Chinese TensorFlow 中文资源全集,学习路径推荐: 官方网站,初步了解. 安装教程,安装之后跑起来. 入门教程,简单的模型学习和运行. 实战项目, ...
Chrome的First Paint
前言 First paint 直译过来的意思就是浏览器第一次渲染(paint),在First paint之前是白屏,在这个时间点之后用户就能看到(部分)页面内容. 所以研究这个First Paint的 ...

字符	转义
`<`	`<`
`>`	`>`
`空格`	` `
`&`	`&`
`注册符®`	`®`
`版权符©`	`©`

字符	转义
`<`	`<`
`>`	`>`
`空格`	` `
`&`	`&`
`注册符®`	`®`
`版权符©`	`©`

HTML简单使用

HTML简单使用

HTML

HTML规范

HTML操作思想

HTML常用标签

简单标签

列表标签

表格标签

表单标签

表单输入项

其他标签

HTML头标签

HTML简单使用的更多相关文章

随机推荐

热门专题

字符	转义
`<`	`<`
`>`	`>`
`空格`	` `
`&`	`&`
`注册符®`	`®`
`版权符©`	`©`