html 的一些基础操作
花了一天学了点html语言。。不记下来的话又白学了
基础中的基础格式
<!DOCTYPE html> <html>
<head>
<!-- 字符集的选择 utf-8 gbk gbk2312 -->
<meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 -->
<title>我是标题</title>
</head> <body> <!-- 换行标签 -->
Hello world!</br>
html语法不区分大小写</br> <!-- 下划线标签 -->
<hr/> <!-- 加粗标签 -->
<h1>h1级加粗</h1>
<h2>h2级加粗</h2>
<h3>h3级加粗</h3>
<h4>h4级加粗</h4>
<h5>h5级加粗</h5>
<h6>h6级加粗</h6> <!-- 段落标签 -->
<p>
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．
通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
</p> <p>
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、
图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，
</p> <!-- 属性 -->
<p align="right">
向右对齐属性
</p>
<p align="center">
居中对齐属性
</p>
<p align="justify">
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
</p> <!-- 预格式标签：将编辑器里的文字原封不动显示到浏览器-->
<pre>
HTML称为超文本标记语言
，
是一种标识性的语言。它包括一系列标签．
通过这些标签可以将网络上的文档格式
统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本，HTML
命令可以说明文字，图形、动画、声音、表格、链接等
</pre> <!-- 字体属性标签 -->
<p>
颜色是<font color="red">红色</font>
颜色是<font color="green">绿色</font>
大小是<font size="1">1号</font>
大小是<font size="3">3号</font>
大小是<font size="7">7号</font>
字体是<font face="隶书">隶书</font>
</p> <!-- 修饰标签 -->
<p>
<b>加粗</b> </br>
<i>倾斜</i> </br><sub>[下标]</sub><sup>[上标]</sup>
</p> <!-- 特殊符号 -->
<p>
左尖括号< 右尖括号> </br>
空格 空格
</p> <!-- 为超链接定义的锚点 -->
<a href="#" name="maodian"></a>
<!-- 从这里就可以跳到图片列表和链接去 -->
<a href="图片列表和链接.html#chapter1" ><h1>第一章</h1></a>
<a href="图片列表和链接.html#chapter2" ><h1>第二章</h1></a>
<a href="图片列表和链接.html#chapter3" ><h1>第三组</h1></a> </body> </html>
图片，列表和超链接
<!DOCTYPE html> <html>
<head>
<!-- 字符集的选择 utf-8 gbk gbk2312 -->
<meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 -->
<title>我是标题</title>
</head> <body> <!-- 图片标签 -->
这是我的<img src="Img/zsben.jpg" align="top"/>和文字上对齐图片</br>
这是我的<img src="Img/zsben.jpg" align="bottom"/>和文字下对齐图片</br>
这是我的<img src="Img/zsben.jpg" align="middle"/>和文字中间对齐图片</br> 给图片调整大小<img src="Img/zsben.jpg" align="bottom" width="200px" height="100px"/></br>
给图片调整大小<img src="Img/zsben.jpg" align="bottom" width="20%" height="20%"/></br> <!-- 图片替代文本 -->
给图片调整大小<img src="Img/zsbenn.jpg" align="bottom"
width="2000px" height="1000px" alt="图片加载失败"/></br> <!-- 无序列表 -->
<ul type="circle">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ul> <ul type="square">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ul> <ul type="disc">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ul> <!-- 有序列表 -->
<ol type="10">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ol> <ol type="a">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ol> <ol type="A">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ol> <ol type="i">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ol> <!-- 自定义列表 -->
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>运动</dt>
<dd>跑步<dd>
<dd>打篮球</dt>
</dl> <!-- 超链接 -->
<a href="基础文字格式.html">进入站内链接到基础文字格式</a></br>
<a href="http://www.baidu.com">进入站外链接到百度</a>
<!-- 空链接(锚点) -->
<a gref="#">空链接</a> <!-- 图片链接 -->
<a href="http://www.baidu.com"><img src="Img/zsben.jpg"></a></br> <!-- 超链接属性 -->
<a href="基础文字格式.html" target="_blank">打开新网页进行跳转</a></br>
<a href="基础文字格式.html" target="_self">在当前页面进行跳转</a></br>
<a href="基础文字格式.html" title="超链接标题">鼠标滑过可显示标题</a></br> <!-- 锚点：用来进行定位跳转-->
<!-- 在本页面内跳转 -->
<a href="#chapter1">第一章</a></br>
<a href="#chapter2">第二章</a></br>
<a href="#chapter3">第三章</a></br> <a href="#" name="chapter1"></a>
<h1>第一章</h1></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br>
<a href="#" name="chapter2"></a>
<h1>第二章</h1></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br>
<a href="#" name="chapter3"></a>
<h1>第三章</h1></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> <!-- 跳转到其他网页的某位置 -->
<a href="基础文字格式.html#maodian"><h1>跳转到基础文字格式的超链接</h1></a> <!-- 使用超链接进行下载 -->
<a href="Img.zip">进行下载</a> <!-- 使用超链接访问邮箱 -->
<a href="mailto:1249461124@qq.com">访问邮箱</a>
</body> </html>
表格
<!DOCTYPE html> <html>
<head>
<!-- 字符集的选择 utf-8 gbk gbk2312 -->
<meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 -->
<title>我是标题</title>
</head> <body> <!-- 表格标签 边界 宽度(会自动延伸) 高度 表格居中 颜色 边框间距 单元格内容和边框间距-->
<table border="20px" width="500px" height="400px" align="center"
bgcolor="green" cellspacing="10px" cellpadding="10px"> <!-- 一行 -->
<tr height="300px" align="right" valign="top" bgcolor="red">
<!-- 一列 -->
<td width="200" bgcolor="pink">一个单元格</td>
<td>一个单元格</td>
<td>一个单元格</td>
</tr>
<tr align="center">
<!-- 一列 -->
<td>一个单元格</td>
<td>一个单元格</td>
<td>一个单元格</td>
</tr> </table> </br> <!-- 多行多列合并 -->
<table border="20px" width="500px" height="200px" align="center" >
<tr align="center">
<!-- 列合并--->
<td colspan="2">一个单元格</td>
<td>一个单元格</td>
</tr>
<tr align="center">
<!-- 行合并 -->
<td rowspan="2">一个单元格</td>
<td>一个单元格</td>
<td>一个单元格</td>
</tr>
<tr align="center">
<td colspan="2" rowspan="2">一个单元格</td>
</tr>
<tr align="center">
<!-- 一列 -->
<td>一个单元格</td>
</tr>
<tr align="center">
<!-- 一列 -->
<td>一个单元格</td>
<td>一个单元格</td>
<td>一个单元格</td>
</tr>
</table> <!-- 练习 -->
<table border="1px" align="center" width="500px" height="300px">
<tr align="center">
<td rowspan="2">商品</td><td colspan="2">本月</td><td colspan="2">上月</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table> <!-- 设置网页百分比 嵌套表格-->
<table border="1px" align="center" width="80%">
<tr align="center">
<td rowspan="2">
<table border="1px" align="center" width="50%" height="80%">
<tr align="center">
<td rowspan="2">商品</td><td colspan="2">本月</td><td colspan="2">上月</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</td> <td colspan="2">本月</td><td colspan="2">上月</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
</table> <!-- 设置表头 标题-->
<table border="1px" align="center" width="500px" height="300px">
<caption>销售统计表</caption>
<tr align="center">
<th rowspan="2">商品</td><th colspan="2">本月</td><th colspan="2">上月</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table> </body>
</html>
表单的一些操作
<!DOCTYPE html> <html>
<head>
<!-- 字符集的选择 utf-8 gbk gbk2312 -->
<meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 -->
<title>我是标题</title>
</head> <!-- action为表单提交路径 method控制数据提交方法:get是直接放在url里，post将数据单独封装成一个包 最后一个参数用来上传文件-->
<form action="表格.html" method="post" name="register" enctype="mutipart/form-data"> <!-- 表单的一些属性 -->
<table>
<tr>
<td>账号</td>
<td><input type="text" name="text"
maxlength="6" placeholder="请输入你的用户名"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password"
name="password" placeholder="请输入密码"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password"
name="repassword" placeholder="请输入密码"/></td>
</tr> <!-- 单选框 -->
<tr>
<td>性别</td>
<!-- 两个控件同名，只能选择一个 -->
<td>男<input type="radio" name="sex" checked /> 女<input type="radio" name="sex"/></td>
</tr> <tr>
<td>是否是中国人</td>
<td>是<input type="radio" name="isChinese" checked /> 不<input type="radio" name="isChinese"/></td>
</tr> <!-- 多选框 -->
<tr>
<td>爱好</td>
<td>读书<input type="checkbox" name="hobby" />
游泳<input type="checkbox" name="hobby" />
旅游<input type="checkbox" name="hobby" />
玩游戏<input type="checkbox" name="hobby" /></td>
</tr> <!-- 提交按钮，重置按钮，普通按钮 -->
<tr>
<td colspan="2" align="center"> <input type="reset" name="reset" value="设置为默认">
<input type="submit" name="register" value="注册"/> </td>
</tr> <!-- 图片提交按钮 -->
<tr>
<td colspan="2" align="center"> <input type="image" src="Img/zsben.jpg" /> </td>
</tr> <!-- 隐藏控件 -->
<input type="hidden" name="id" value="100" /> <!-- 下拉列表 -->
<tr>
<td>生日</td>
<td>
<select name="month">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7" selected>7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
</td>
</tr> <!-- 文本域 -->
<tr>
<td>交友宣言</td>
<td>
<textarea placeholder="可以说一下你的交友理由" rows="20" cols="20">
</textarea>
</td>
</tr> <!-- 文件上传 -->
<tr>
<td>
简历上传<input type="file" name="resume"/>
</td>
<td></td>
</tr> </table> </form> </html>
框架切割网页
<html>
<frameset rows="25%,*">
<frame src="框架1.html" name="top"/> <frameset cols="25%,*">
<frame src="框架2.html" name="bottom"/>
<frame src="框架3.html" name="middle"/>
</frameset> </frameset>
</html>
html 的一些基础操作的更多相关文章
- python基础操作以及hdfs操作
目录 前言 基础操作 hdfs操作 总结 一.前言 作为一个全栈工程师,必须要熟练掌握各种语言...HelloWorld.最近就被"逼着"走向了python开发之路, ...
- MYSQL基础操作
MYSQL基础操作 [TOC] 1.基本定义 1.1.关系型数据库系统 关系型数据库系统是建立在关系模型上的数据库系统 什么是关系模型呢? 1.数据结构可以规定,同类数据结构一致,就是一个二维的表格 ...
- 【Learning Python】【第二章】Python基础类型和基础操作
基础类型: 整型: py 3.0解决了整数溢出的问题,意味着整型不必考虑32位,64位,有无符号等问题,你写一个1亿亿亿,就是1亿亿亿,不会溢出 a = 10 ** 240 print(a) 执行以上 ...
- Emacs学习心得之 基础操作
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础操作 1.前言与学习计划2.Emacs基础操作 一. 前言与学习计 ...
- Git基础操作
配置秘钥 1.检查本机有没有秘钥 检查~/.ssh看看是否有名为d_rsa.pub和id_dsa.pub的2个文件. $ ~/.sshbash: /c/Users/lenovo/.ssh: Is a ...
- activiti基础操作
package activitiTest; import java.io.InputStream; import java.util.List; import java.util.zip.ZipInp ...
- 《Genesis-3D开源游戏引擎-官方录制系列视频教程：基础操作篇》
注:本系列教程仅针对引擎编辑器:v1.2.2及以下版本 G3D基础操作 第一课<G3D编辑器初探> G3D编辑器介绍,依托于一个复杂场景,讲解了场景视图及其基本操作,属性面板和工具栏的 ...
- MYSQL 基础操作
1.MySQL基础操作 一:MySQL基础操作 1:MySQL表复制 复制表结构 + 复制表数据 create table t3 like t1; --创建一个和t1一样的表,用like(表结构也一样 ...
- php之文件基础操作
在php中对文件的基础操作非常的简单,php提供的函数粗略的用了一遍. file_get_contents():可以获取文件的内容获取一个网络资源的内容,这是php给我封装的一个比较快捷的读取文件的内 ...
- ArcGIS Pro 简明教程（2）基础操作和简单制图
ArcGIS Pro 简明教程(2)基础操作和简单制图 By 李远祥 本章主要介绍ArcGIS Pro如何加载数据并进行简单的地图制作,以基本的操作为主. 上一章节介绍过,ArcGIS Pro是可以直 ...
随机推荐
- C#-概念-类：类
ylbtech-C#-概念-类:类 类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础.类是一种用户定义类型,也称类类型.每个类包含 ...
- 什么时候需要用的Vue.nextTick()
什么时候需要用的Vue.nextTick() 你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中.原因是什么呢,原因是在created() ...
- WCF身份验证之用户名密码认证
WCF支持多种认证技术,例如Windowns认证.X509证书.Issued Tokens.用户名密码认证等,在跨Windows域分布的系统中,用户名密码认证是比较常用的,要实现用户名密码认证,就必须 ...
- CentOS7 监控网络流量
首先,以下介绍的流量监控工具安装之前均需要安装epel源, 安装epel源: [root@bogon ~]# yum -y install epel-release 安装 iftop 工具,查看各个连 ...
- CentOS安装ruby, Haskall，io语言
安装ruby yum install ruby irb rdoc 安装Haskall yum install ghc 安装io语言 安装io语言,需要先安装cmake不过不要使用yum来进行安装,yu ...
- css 绘制checkbox,radio
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- mysql的相关命令行操作命令
一:有关mysql的命令 转载来源:https://www.cnblogs.com/opsprobe/p/9126864.html 1 查看有没有安装mysql dpkg -l | grep mysq ...
- 深入理解DiscoveryClient
Spring Cloud Commons 提供的抽象 最早的时候服务发现注册都是通过DiscoveryClient来实现的,随着版本变迁把DiscoveryClient服务注册抽离出来变成了Servi ...
- Kernel Page Global Directory (PGD) of Page table of Process created in Linux Kernel
Kernel Page Global Directory (PGD) of User process created 在早期版本: 在fork一个进程的时候,必须建立进程自己的内核页目录项(内核页目录 ...
- python-内置常量
引言 Python的内置常量不多,只有6个,分别是True.False.None.NotImplemented.Ellipsis.__debug__ 一.True 1.True是bool类型用来表示的 ...