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是可以直 ...
随机推荐
- tomcat启动控制台报Exception in thread ''main".......“Could not find the main class:.....Bootstrap”问题
startup.bat文件打开最后end下一行加pause调试,重新启动tomcat,发现配置没问题,但是依然报错,发现是jdk版本问题,jdk1.6无法与tomcat8适配,重新装个1.7版本的jd ...
- JS创建表格完整
<!DOCTYPE> <html> <head> <meta charset=utf-8 /> <title>动态表格</title& ...
- spring-第七篇之深入理解容器中的bean
1.抽象bean与子bean 用于指定配置模板. 2.容器中的工厂bean 这种工厂bean必须实现FactoryBean接口,通过spring容器getBean()方法获取它时,容器返回的不是Fac ...
- Java 遍历某个目录
import java.io.File; import java.io.IOException; public class DirErgodic { public static void find(S ...
- [BZOJ3932][CQOI2015]任务查询系统(差分+主席树)
题面 分析 对于一个区间修改(s,e,v),我们可以将它差分,这样就变成了单点修改s和e+1(s插入,t+1删除) 我们用主席树维护差分数组的前缀和,第i棵主席树维护区间[1,i]之间的所有差分值 那 ...
- 物流运输(最短路+dp)
这道题是相当的火,但是在tyher的讲解下我一遍就AC了!!! Part 1 理解题目 从第一天到最后一天,总会有一些点莫名其妙地走不了,所以导致我们不能按照上一次的最短路一直运输得到最少费用,而需要 ...
- 复制书稿 （dp+贪心）
[题目描述] 现在要把m本有顺序的书分给k个人复制(抄写),每一个人的抄写速度都一样,一本书不允许给两个(或以上)的人抄写,分给每一个人的书,必须是连续的,比如不能把第一.第三和第四本书给同一个人抄写 ...
- 2019 Multi-University Training Contest 1 - 1012 - NTT
题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=6589 题解连接: https://www.cnblogs.com/xusirui/p/1122945 ...
- style中各种选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- sql server 自优化
大数据量下的SQL Server数据库自身优化 发布时间:2013-12-17 15:19:00 来源:论坛 作者:佚名 关键字:数据库开发 1.1:增加次数据文件 从SQL SERVER 200 ...