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是可以直 ...
随机推荐
- 网路编程之socket与 socketserver、黏包
socket与socketerver才是我们学习python中网络编程的重中之重在介绍他们两个之前我先介绍一些相关知识 一.socket 概念 咱们现在ois模型中找到socket所承担的角色 soc ...
- jmeter之线程组循环次数
有时候压测需要配置并发的持续时间,这个可以在jmeter中线程组页面进行配置 1.jmeter的循环次数2种使用场景 2.持续时间功能介绍 3.持续时间的使用场景 1.jmeter的循环次数2种使用模 ...
- selenium自动化测试之【数据驱动测试】
数据驱动测试是自动化测试的主流设计模式之一,相同的测试脚本使用不同的测试数据来执行,测试数据和测试行为进行了完全的分离,这样的测试脚本设计模式称为数据驱动.实施数据驱动测试的步骤:1.编写测试脚本,脚 ...
- 【FICO系列】SAP FICO模块-固定资产月结的注意点
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FICO模块-固定资产月 ...
- C#将数据写入本地文件
在平时开发过程中,可能会碰到内网测试没问题,但是更新到外网时会报错,这时我们又无法在外网进行调试.如果我们分析完业务可能产生的问题还是无法得到报错的原因,那么可以在关键的地方加上异常处理,然后将异常或 ...
- OSPF协议——原理及实验
首先命令部分: ospf 1 进入ospf协议 area 0 划定自治区域 因为实验只用了1个区域所以参数就为0 也就是骨干区域 network +网段+反写掩码(0.0.0.255)指定运行OSPF ...
- JNDI配置笔记
先在tomcat Context.xml配置文件中配置 <Resource name="jdbc/elifecrm" type="javax.sql.DataSou ...
- Spring-Cloud-Alibaba-Nacos 目录
Spring-Cloud-Alibaba-Nacos 目录 学习资料 Nacos 官网(https://nacos.io/zh-cn/docs/what-is-nacos.html) Nacos 程序 ...
- Spring Security 03
认证和鉴权 配置文件方式 <authentication-manager> <authentication-provider> <!-- 用户的权限控制 --> & ...
- 虚拟机环境搭建/修改VMware虚拟机固定IP
VMware Workstation安装CentOS7.0 详情教程: centos7.0下载地址:http://isoredirect.centos.org/centos/7/isos/x86_64 ...